creator heaven

api/generate_script.php

@@ -0,0 +1,49 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/../ai/LocalAIApi.php';
+
+// Basic input validation
+$requestBody = file_get_contents('php://input');
+$data = json_decode($requestBody, true);
+$genre = isset($data['genre']) ? trim($data['genre']) : '';
+$topic = isset($data['topic']) ? trim($data['topic']) : '';
+
+if (empty($genre) || empty($topic)) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Genre and topic are required.']);
+    exit;
+}
+
+// Prepare the prompt for the AI
+$prompt = "You are a creative assistant for social media influencers. Generate a short video script (around 150-200 words) for the genre: '{$genre}'. The script should be about: '{$topic}'. The script should be engaging, concise, and suitable for platforms like TikTok, Instagram Reels, or YouTube Shorts. Include suggestions for visuals or on-screen text where appropriate. Format the output as plain text.";
+
+try {
+    $resp = LocalAIApi::createResponse(
+        [
+            'input' => [
+                ['role' => 'system', 'content' => 'You are a helpful scriptwriting assistant for social media creators.'],
+                ['role' => 'user', 'content' => $prompt],
+            ],
+        ],
+        [
+            'poll_interval' => 5,
+            'poll_timeout'  => 300
+        ]
+    );
+
+    if (!empty($resp['success'])) {
+        $text = LocalAIApi::extractText($resp);
+        if ($text === '') {
+             throw new Exception('AI returned an empty response.');
+        }
+        echo json_encode(['script' => nl2br(htmlspecialchars($text))]);
+    } else {
+        throw new Exception($resp['error'] ?? 'Unknown AI API error.');
+    }
+
+} catch (Exception $e) {
+    error_log('AI script generation error: ' . $e->getMessage());
+    http_response_code(500);
+    echo json_encode(['error' => 'Sorry, we couldn\'t generate a script at this time. Please try again later.']);
+}
+

api/update_connection.php

@@ -0,0 +1,34 @@
+<?php
+require_once __DIR__ . '/../db/config.php';
+
+header('Content-Type: application/json');
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    http_response_code(405);
+    echo json_encode(['error' => 'Method Not Allowed']);
+    exit;
+}
+
+$data = json_decode(file_get_contents('php://input'), true);
+
+if (!isset($data['platform']) || !isset($data['is_connected'])) {
+    http_response_code(400);
+    echo json_encode(['error' => 'Missing platform or is_connected parameter']);
+    exit;
+}
+
+$platform = $data['platform'];
+$isConnected = (bool) $data['is_connected'];
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("UPDATE social_connections SET is_connected = ? WHERE platform = ?");
+    $stmt->execute([$isConnected, $platform]);
+
+    echo json_encode(['success' => true]);
+} catch (PDOException $e) {
+    http_response_code(500);
+    error_log("DB Error: " . $e->getMessage());
+    echo json_encode(['error' => 'Database error']);
+}
+?>

assets/css/custom.css

@@ -0,0 +1,363 @@
+/* General Body Styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: #FFFFFF;
+    color: #3A3A3C;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* --- Palette & Theme --- */
+:root {
+    --primary-color: #5E5DF0;
+    --primary-hover-color: #4948d2;
+    --secondary-color: #F2F2F7;
+    --text-dark: #1D1D1F;
+    --text-light: #6c757d;
+    --border-radius-sm: 8px;
+    --border-radius-md: 12px;
+    --border-radius-lg: 16px;
+}
+
+/* --- Typography --- */
+h1, h2, h3, h4, h5, h6 {
+    color: var(--text-dark);
+    font-weight: 700;
+}
+
+.display-4 {
+    font-weight: 800;
+}
+
+.lead {
+    color: var(--text-light);
+    font-size: 1.15rem;
+    font-weight: 400;
+}
+
+/* --- Header & Navigation --- */
+.navbar {
+    padding: 1.5rem 0;
+}
+.navbar-brand {
+    font-weight: 700;
+    font-size: 1.5rem;
+    color: var(--text-dark);
+}
+.navbar .btn-outline-primary {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    border-radius: var(--border-radius-sm);
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+.navbar .btn-outline-primary:hover {
+    background-color: var(--primary-color);
+    color: #fff;
+}
+
+/* --- Hero Section --- */
+.hero {
+    padding: 6rem 0;
+    text-align: center;
+}
+
+/* --- Buttons --- */
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    border-radius: var(--border-radius-md);
+    padding: 1rem 2rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    transition: background-color 0.2s ease-in-out, transform 0.2s ease;
+}
+.btn-primary:hover {
+    background-color: var(--primary-hover-color);
+    border-color: var(--primary-hover-color);
+    transform: translateY(-2px);
+}
+.btn-secondary {
+    border-radius: var(--border-radius-md);
+    padding: 0.75rem 1.5rem;
+}
+
+
+/* --- Generator Section --- */
+#generator-section {
+    padding: 4rem 0;
+    background-color: var(--secondary-color);
+    border-radius: var(--border-radius-lg);
+}
+.generator-card {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: var(--border-radius-lg);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
+}
+.form-control, .form-select {
+    border-radius: var(--border-radius-sm);
+    padding: 0.75rem 1rem;
+    border: 1px solid #e5e5e5;
+}
+.form-control:focus, .form-select:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.25rem rgba(94, 93, 240, 0.2);
+}
+
+/* --- Result Display --- */
+#result-container {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: var(--border-radius-md);
+    padding: 2rem;
+    margin-top: 2rem;
+    position: relative;
+    white-space: pre-wrap; /* Ensures line breaks are respected */
+    font-family: 'Menlo', 'Monaco', monospace;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    color: #212529;
+}
+#result-container.loading {
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#copy-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: none; /* Initially hidden */
+}
+
+/* --- Features Section --- */
+.features-section {
+    padding: 6rem 0;
+}
+.feature-icon {
+    width: 60px;
+    height: 60px;
+    background-color: var(--primary-color);
+    color: #fff;
+    border-radius: var(--border-radius-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+/* --- Footer --- */
+.footer {
+    padding: 3rem 0;
+    border-top: 1px solid #e9ecef;
+    color: var(--text-light);
+}
+
+/* --- Utility --- */
+.mt-6 {
+    margin-top: 4rem;
+}
+
+/* Dashboard Styles */
+.dashboard-container {
+    padding-top: 80px; /* Space for fixed header */
+}
+
+.dashboard-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.dashboard-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    padding: 1rem;
+}
+
+.dashboard-card {
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+}
+
+.dashboard-card h3 {
+    font-size: 1.5rem;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    color: #1d1d1f;
+}
+
+.dashboard-card p {
+    margin-bottom: 1.5rem;
+    color: #6e6e73;
+    flex-grow: 1;
+}
+
+.social-connections {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+.social-connection {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.status-indicator {
+    font-size: 0.9rem;
+    font-weight: 500;
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+}
+
+.status-indicator.connected {
+    background-color: #d4edda;
+    color: #155724;
+}
+
+.status-indicator.not-connected {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+.social-btn {
+    border: none;
+    padding: 0.75rem;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    color: #fff;
+    width: 180px;
+}
+
+.social-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
+}
+
+.social-btn.youtube { background-color: #FF0000; }
+.social-btn.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
+.social-btn.tiktok { background-color: #010101; }
+.social-btn.facebook { background-color: #1877F2; }
+
+.btn-secondary {
+    background-color: #e7e7f7;
+    color: #5E5DF0;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    align-self: flex-start;
+}
+
+.btn-secondary:hover {
+    background-color: #dcdcf2;
+}
+
+.tools-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.tools-list li {
+    margin-bottom: 0.75rem;
+}
+
+.tools-list a {
+    color: #5E5DF0;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.tools-list a:hover {
+    text-decoration: underline;
+}
+
+/* Report Section */
+#report-section {
+    margin-top: 2rem;
+}
+
+#report-content .kpi-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+#report-content .kpi {
+    background-color: #f8f9fa;
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+#report-content .kpi .kpi-value {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+#report-content .kpi .kpi-label {
+    font-size: 0.9rem;
+    color: #6c757d;
+}
+
+#report-content h4 {
+    margin-top: 2rem;
+    border-bottom: 2px solid #e9ecef;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+#report-content .post-list .post-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+#report-content .post-list .post-thumbnail {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-right: 1rem;
+}
+
+#report-content .post-list .post-info .post-caption {
+    font-weight: 600;
+}
+
+#report-content .post-list .post-info .post-stats {
+    font-size: 0.9rem;
+    color: #6c757d;
+}
+
+/* Strategy Section */
+#strategy-section {
+    margin-top: 2rem;
+}
+
+#strategy-content ul {
+    list-style-type: disc;
+    padding-left: 20px;
+}

assets/js/main.js

@@ -0,0 +1,223 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const generatorForm = document.getElementById('generator-form');
+    const resultContainer = document.getElementById('result-container');
+    const copyButton = document.getElementById('copy-button');
+    const generateButton = generatorForm.querySelector('button[type="submit"]');
+    const originalButtonText = generateButton.innerHTML;
+
+    if (generatorForm) {
+        generatorForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            const genre = document.getElementById('genre').value;
+            const topic = document.getElementById('topic').value;
+            
+            if (!topic.trim()) {
+                alert("Please enter a topic.");
+                return;
+            }
+
+            // --- UI Changes for Loading State ---
+            generateButton.disabled = true;
+            generateButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Generating...';
+            
+            resultContainer.style.display = 'block';
+            resultContainer.classList.add('loading');
+            resultContainer.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
+            copyButton.style.display = 'none';
+
+            // --- API Call ---
+            fetch('/api/generate_script.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ genre: genre, topic: topic }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                // --- Display Success ---
+                resultContainer.classList.remove('loading');
+                resultContainer.innerHTML = `<p id="script-content">${data.script}</p>`; // Use innerHTML to render <br> tags
+                copyButton.style.display = 'block';
+            })
+            .catch(error => {
+                // --- Display Error ---
+                resultContainer.classList.remove('loading');
+                resultContainer.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
+            })
+            .finally(() => {
+                // --- Reset Button ---
+                generateButton.disabled = false;
+                generateButton.innerHTML = originalButtonText;
+            });
+        });
+    }
+
+    if (copyButton) {
+        copyButton.addEventListener('click', function () {
+            const scriptContent = document.getElementById('script-content').innerText; // Use innerText to get clean text
+            navigator.clipboard.writeText(scriptContent).then(() => {
+                const originalCopyText = copyButton.innerHTML;
+                copyButton.innerHTML = 'Copied!';
+                setTimeout(() => {
+                    copyButton.innerHTML = originalCopyText;
+                }, 2000);
+            }).catch(err => {
+                alert('Failed to copy text.');
+            });
+        });
+    }
+
+    // Smooth scroll for hero CTA
+    const heroCta = document.querySelector('.hero .btn');
+    if(heroCta) {
+        heroCta.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector(heroCta.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    }
+
+    // Social Media Connection Logic
+    const socialConnectionSections = document.querySelectorAll('.social-connection');
+    socialConnectionSections.forEach(section => {
+        const button = section.querySelector('.social-btn');
+        const statusIndicator = section.querySelector('.status-indicator');
+
+        button.addEventListener('click', function() {
+            const action = button.dataset.action;
+            const platform = section.dataset.platform;
+            const isConnected = action === 'connect';
+
+            fetch('/api/update_connection.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ platform: platform, is_connected: isConnected }),
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    if (isConnected) {
+                        button.dataset.action = 'disconnect';
+                        button.textContent = 'Disconnect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
+                        statusIndicator.textContent = 'Connected';
+                        statusIndicator.classList.remove('not-connected');
+                        statusIndicator.classList.add('connected');
+                    } else {
+                        button.dataset.action = 'connect';
+                        button.textContent = 'Connect ' + platform.charAt(0).toUpperCase() + platform.slice(1);
+                        statusIndicator.textContent = 'Not Connected';
+                        statusIndicator.classList.remove('connected');
+                        statusIndicator.classList.add('not-connected');
+                    }
+                } else {
+                    alert('Failed to update connection status.');
+                }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                alert('An error occurred while updating connection status.');
+            });
+        });
+    });
+
+    // Report Generation Logic
+    const generateReportBtn = document.getElementById('generate-report-btn');
+    const reportSection = document.getElementById('report-section');
+    const reportContent = document.getElementById('report-content');
+
+    if (generateReportBtn) {
+        generateReportBtn.addEventListener('click', function() {
+            reportSection.style.display = 'block';
+            reportContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
+
+            // Simulate report generation
+            setTimeout(() => {
+                const reportHTML = `
+                    <div class="kpi-grid">
+                        <div class="kpi">
+                            <div class="kpi-value">1.2M</div>
+                            <div class="kpi-label">Total Followers</div>
+                        </div>
+                        <div class="kpi">
+                            <div class="kpi-value">5.8%</div>
+                            <div class="kpi-label">Engagement Rate</div>
+                        </div>
+                        <div class="kpi">
+                            <div class="kpi-value">25.2K</div>
+                            <div class="kpi-label">Avg. Likes per Post</div>
+                        </div>
+                    </div>
+                    <h4>Top Performing Posts</h4>
+                    <div class="post-list">
+                        <div class="post-item">
+                            <img src="https://images.pexels.com/photos/1787235/pexels-photo-1787235.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
+                            <div class="post-info">
+                                <div class="post-caption">Unboxing the new tech gadget! You won't believe what it can do.</div>
+                                <div class="post-stats">Likes: 58.1K | Comments: 2.3K</div>
+                            </div>
+                        </div>
+                        <div class="post-item">
+                            <img src="https://images.pexels.com/photos/2582937/pexels-photo-2582937.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Post thumbnail" class="post-thumbnail">
+                            <div class="post-info">
+                                <div class="post-caption">My morning routine for a productive day. #morningroutine</div>
+                                <div class="post-stats">Likes: 42.7K | Comments: 1.8K</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                reportContent.innerHTML = reportHTML;
+            }, 2000);
+        });
+    }
+
+    // AI Content Strategy Logic
+    const discoverStrategyBtn = document.getElementById('discover-strategy-btn');
+    const strategySection = document.getElementById('strategy-section');
+    const strategyContent = document.getElementById('strategy-content');
+
+    if (discoverStrategyBtn) {
+        discoverStrategyBtn.addEventListener('click', function() {
+            strategySection.style.display = 'block';
+            strategyContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>';
+
+            // --- API Call ---
+            fetch('/api/generate_script.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ genre: 'Content Strategy', topic: 'Give me a content strategy for a tech influencer.' }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
+                }
+                return response.json();
+            })
+            .then(data => {
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                // --- Display Success ---
+                strategyContent.innerHTML = `<p>${data.script}</p>`;
+            })
+            .catch(error => {
+                // --- Display Error ---
+                strategyContent.innerHTML = `<div class="alert alert-danger" role="alert"><strong>Error:</strong> ${error.message}</div>`;
+            });
+        });
+    }
+});

dashboard.php

@@ -0,0 +1,118 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+$platforms = ['youtube', 'instagram', 'tiktok', 'facebook'];
+$connections = [];
+
+try {
+    $pdo = db();
+
+    // Ensure platforms exist in the table
+    $stmt = $pdo->prepare("INSERT IGNORE INTO social_connections (platform) VALUES (?)");
+    foreach ($platforms as $platform) {
+        $stmt->execute([$platform]);
+    }
+
+    // Fetch all connections
+    $stmt = $pdo->query("SELECT platform, is_connected FROM social_connections");
+    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+        $connections[$row['platform']] = $row['is_connected'];
+    }
+} catch (PDOException $e) {
+    // Handle DB error gracefully
+    error_log("DB Error: " . $e->getMessage());
+    // Set all connections to false as a fallback
+    foreach ($platforms as $platform) {
+        $connections[$platform] = false;
+    }
+}
+
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Influencer Dashboard</title>
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <header class="app-header">
+        <div class="logo">
+            <a href="index.php">INFLUENCER AI</a>
+        </div>
+        <nav>
+            <a href="index.php">Home</a>
+            <a href="dashboard.php" class="active">Dashboard</a>
+        </nav>
+    </header>
+
+    <main class="container dashboard-container">
+        <section class="dashboard-header">
+            <h1>Your Dashboard</h1>
+            <p>Connect accounts, generate reports, and discover new tools.</p>
+        </section>
+
+        <section class="dashboard-grid">
+            <div class="dashboard-card">
+                <h3>Social Media Connections</h3>
+                <p>Connect your accounts to unlock powerful analytics and content insights.</p>
+                <div class="social-connections">
+                    <?php foreach ($platforms as $platform): ?>
+                        <div class="social-connection" data-platform="<?php echo $platform; ?>">
+                            <button class="social-btn <?php echo $platform; ?>" data-action="<?php echo $connections[$platform] ? 'disconnect' : 'connect'; ?>">
+                                <?php echo $connections[$platform] ? 'Disconnect' : 'Connect'; ?> <?php echo ucfirst($platform); ?>
+                            </button>
+                            <span class="status-indicator <?php echo $connections[$platform] ? 'connected' : 'not-connected'; ?>">
+                                <?php echo $connections[$platform] ? 'Connected' : 'Not Connected'; ?>
+                            </span>
+                        </div>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+
+            <div class="dashboard-card">
+                <h3>Report Generation</h3>
+                <p>Generate in-depth performance reports for your connected accounts.</p>
+                <button class="btn-secondary" id="generate-report-btn">Generate New Report</button>
+            </div>
+
+            <div class="dashboard-card">
+                <h3>AI Content Strategy</h3>
+                <p>Get personalized content ideas and strategies from our AI.</p>
+                <button class="btn-secondary" id="discover-strategy-btn">Discover Strategies</button>
+            </div>
+
+            <div class="dashboard-card">
+                <h3>Video Editing Tools</h3>
+                <p>Top-rated tools to level up your video production quality.</p>
+                <ul class="tools-list">
+                    <li><a href="https://www.adobe.com/products/premiere.html" target="_blank" rel="noopener noreferrer">Adobe Premiere Pro</a></li>
+                    <li><a href="https://www.blackmagicdesign.com/products/davinciresolve" target="_blank" rel="noopener noreferrer">DaVinci Resolve</a></li>
+                    <li><a href="https://www.apple.com/final-cut-pro/" target="_blank" rel="noopener noreferrer">Final Cut Pro</a></li>
+                    <li><a href="https://www.capcut.com/" target="_blank" rel="noopener noreferrer">CapCut (Mobile)</a></li>
+                </ul>
+            </div>
+        </section>
+
+        <section id="report-section" class="dashboard-card" style="display: none;">
+            <h2>Performance Report</h2>
+            <div id="report-content">
+                <!-- Report content will be injected here -->
+            </div>
+        </section>
+
+        <section id="strategy-section" class="dashboard-card" style="display: none;">
+            <h2>AI Content Strategy</h2>
+            <div id="strategy-content">
+                <!-- Strategy content will be injected here -->
+            </div>
+        </section>
+    </main>
+
+    <footer class="app-footer">
+        <p>&copy; <?php echo date("Y"); ?> Influencer AI. All rights reserved.</p>
+    </footer>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>

db/migrations/001_create_social_connections_table.php

@@ -0,0 +1,17 @@
+<?php
+require_once __DIR__ . '/../../db/config.php';
+
+try {
+    $pdo = db();
+    $sql = "CREATE TABLE IF NOT EXISTS social_connections (
+        id INT(11) AUTO_INCREMENT PRIMARY KEY,
+        platform VARCHAR(255) NOT NULL UNIQUE,
+        is_connected BOOLEAN NOT NULL DEFAULT 0,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    );";
+    $pdo->exec($sql);
+    echo "Table social_connections created successfully.";
+} catch (PDOException $e) {
+    die("DB ERROR: " . $e->getMessage());
+}
+?>

index.php

@@ -1,150 +1,143 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
-
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
-<?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
-?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- SEO & Meta -->
+    <title><?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'AI Script Generator'); ?></title>
+    <meta name="description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'Generate viral scripts for your social media in seconds.'); ?>">
+    
+    <!-- OG Meta -->
+    <meta property="og:title" content="<?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'AI Script Generator'); ?>">
+    <meta property="og:description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'Generate viral scripts for your social media in seconds.'); ?>">
+    <meta property="og:image" content="<?php echo htmlspecialchars(getenv('PROJECT_IMAGE_URL') ?: ''); ?>">
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
 </head>
 <body>
+
+    <!-- Header -->
+    <header class="navbar navbar-expand-lg navbar-light bg-white">
+        <div class="container">
+            <a class="navbar-brand" href="#"><?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'CreatorAI'); ?></a>
+            <a href="dashboard.php" class="btn btn-outline-primary">Dashboard</a>
+        </div>
+    </header>
+
     <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
+        <!-- Hero Section -->
+        <section class="hero text-center">
+            <div class="container">
+                <h1 class="display-4 fw-bold">Generate Viral Scripts in Seconds</h1>
+                <p class="lead col-md-8 mx-auto mt-3">Leverage AI to create engaging scripts for any genre, analyze your social media growth, and discover the perfect time to post.</p>
+                <a href="#generator-section" class="btn btn-primary mt-4">Get Started for Free</a>
             </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
+        </section>
+
+        <!-- Generator Section -->
+        <section id="generator-section" class="py-5">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 mx-auto">
+                        <div class="generator-card">
+                            <h2 class="text-center mb-4">AI Script Generator</h2>
+                            <form id="generator-form">
+                                <div class="mb-3">
+                                    <label for="genre" class="form-label">Select a Genre</label>
+                                    <select class="form-select" id="genre">
+                                        <option>Comedy Sketch</option>
+                                        <option>Tech Review</option>
+                                        <option>Educational Tutorial</option>
+                                        <option>Daily Vlog</option>
+                                        <option>Storytime</option>
+                                        <option>Product Unboxing</option>
+                                        <option>DIY/Craft</option>
+                                        <option>Gaming</option>
+                                        <option>Fitness/Workout</option>
+                                        <option>Cooking/Recipe</option>
+                                        <option>Travel</option>
+                                        <option>Fashion/Beauty</option>
+                                        <option>Music/Dance</option>
+                                        <option>Animation</option>
+                                    </select>
                                 </div>
+                                <div class="mb-3">
+                                    <label for="topic" class="form-label">What is your video about?</label>
+                                    <textarea class="form-control" id="topic" rows="3" placeholder="e.g., 'My cat learning a new trick' or 'The best features of the new iPhone'"></textarea>
+                                </div>
+                                <div class="d-grid">
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="bi bi-stars me-2"></i>Generate Script
+                                    </button>
+                                </div>
+                            </form>
+                            <!-- Result Container -->
+                            <div id="result-container" class="mt-4" style="display: none;">
+                                <!-- AI response will be injected here -->
+                            </div>
+                            <button id="copy-button" class="btn btn-secondary btn-sm">
+                                <i class="bi bi-clipboard me-1"></i> Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="features-section text-center">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 mx-auto">
+                        <h2>Your All-in-One Creator Toolkit</h2>
+                        <p class="lead">Everything you need to scale your content production.</p>
+                    </div>
+                </div>
+                <div class="row mt-5 g-4">
+                    <div class="col-md-4">
+                        <div class="feature-icon">
+                            <i class="bi bi-robot"></i>
+                        </div>
+                        <h3>AI Scripting</h3>
+                        <p>Beat writer's block with endless ideas and ready-to-shoot scripts for any platform.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="feature-icon">
+                            <i class="bi bi-graph-up-arrow"></i>
+                        </div>
+                        <h3>Growth Analytics</h3>
+                        <p>Connect your social accounts to get actionable insights and track your performance.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="feature-icon">
+                            <i class="bi bi-clock-history"></i>
+                        </div>
+                        <h3>Peak Post Times</h3>
+                        <p>Maximize your reach by publishing your content when your audience is most active.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
     </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+    <!-- Footer -->
+    <footer class="footer text-center">
+        <div class="container">
+            <p>&copy; <?php echo date("Y"); ?> <?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'CreatorAI'); ?>. All Rights Reserved.</p>
+        </div>
     </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
 </body>
 </html>