index.html

{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2>Import data into omi</h2>
    <p>Connect your accounts to import memories into OMI.</p>
    
    <div>
        <h3>Available Integrations</h3>
        <div style="margin-top: 1.5rem;">
            <div class="integration-card">
                <h4>Notion</h4>
                <p>Extract memories from your Notion pages, databases, and notes.</p>
                <a href="/api/notion/auth?uid={{ request.query_params.get('uid', '') }}" class="btn">Connect Notion</a>
            </div>
            
            <div class="integration-card" style="opacity: 0.5; pointer-events: none;">
                <h4>Google Drive (Coming Soon)</h4>
                <p>Extract memories from your Google Documents and other files.</p>
                <a href="#" class="btn">Coming Soon</a>
            </div>
            
            <div class="integration-card" style="opacity: 0.5; pointer-events: none;">
                <h4>Slack (Coming Soon)</h4>
                <p>Extract memories from your Slack conversations and channels.</p>
                <a href="#" class="btn">Coming Soon</a>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <h2>How It Works</h2>
    <ol style="padding-left: 1.5rem;">
        <li>Connect your account using the buttons above</li>
        <li>We'll extract interesting facts and memories about you</li>
        <li>These memories will be imported into your OMI account</li>
        <li>OMI will use these memories to personalize your experience</li>
    </ol>
</div>

<div class="card">
    <h2>About This Integration</h2>
    <p>This integration allows you to import memories from various sources into your OMI account. We extract interesting facts and preferences about you from your connected accounts and add them to OMI's knowledge base.</p>
    <p>Your data is private and secure. We only extract the information you explicitly choose to share.</p>
</div>
{% endblock %}

{% block extra_head %}
<style>
    .integration-card {
        padding: 1.5rem;
        border: 1px solid var(--border);
        border-radius: 0.5rem;
        background-color: white;
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .integration-card h4 {
        margin-bottom: 0.5rem;
    }
    
    .integration-card p {
        margin-bottom: 1.5rem;
        color: var(--text-light);
    }
</style>
{% endblock %}