HalalReels

api/pexels.php

@@ -0,0 +1,71 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__.'/../includes/pexels.php';
+
+$q = $_GET['query'] ?? 'nature';
+// Adding negative keywords to filter results
+$haram_elements = [
+    'bikini', 'uncovered woman', 'alcohol', 'bar', 'gambling', 'pork', 'haram',
+    'dating', 'romance', 'kissing', 'nightclub', 'party', 'dog' // dog is controversial for some, better to be safe
+];
+$negative_query = implode(' ', $haram_elements);
+
+// Pexels API does not support negative keywords in the `query` parameter directly.
+// The search will be broad and then filtered, which is not ideal but a limitation of the free API.
+// A better approach is to append " halal" or similar positive keywords.
+$query = $q . ' halal islamic';
+
+$orientation = $_GET['orientation'] ?? 'portrait';
+$url = 'https://api.pexels.com/videos/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=6';
+
+$data = pexels_get($url);
+
+if (!$data || empty($data['videos'])) {
+    echo json_encode(['error' => 'Failed to fetch videos for query: ' . $query, 'videos' => []]);
+    exit;
+}
+
+$videos = [];
+foreach ($data['videos'] as $video) {
+    $video_file = null;
+    // Find a suitable video file link
+    foreach ($video['video_files'] as $file) {
+        if ($file['quality'] === 'hd' && (strpos($file['link'], '.mp4') !== false)) {
+            $video_file = $file;
+            break;
+        }
+    }
+    // Fallback to any mp4 file
+    if (!$video_file) {
+        foreach ($video['video_files'] as $file) {
+            if (strpos($file['link'], '.mp4') !== false) {
+                $video_file = $file;
+                break;
+            }
+        }
+    }
+
+    if ($video_file) {
+        $videos[] = [
+            'id' => $video['id'],
+            'thumbnail' => $video['image'],
+            'download_url' => $video_file['link'],
+            'photographer' => $video['user']['name'] ?? 'Unknown',
+            'photographer_url' => $video['user']['url'] ?? '',
+        ];
+    }
+}
+
+// Second-level filtering for haram terms in video tags, if available
+$filtered_videos = array_filter($videos, function($video) use ($haram_elements) {
+    if (isset($video['tags']) && is_array($video['tags'])) {
+        foreach ($haram_elements as $haram) {
+            if (in_array($haram, $video['tags'])) {
+                return false;
+            }
+        }
+    }
+    return true;
+});
+
+echo json_encode(['videos' => array_values($filtered_videos)]);

assets/css/custom.css

@@ -0,0 +1,75 @@
+
+body {
+    background-color: #121212;
+    color: #FFFFFF;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
+    padding-top: 70px; /* For fixed navbar */
+}
+
+.navbar {
+    background-color: #1E1E1E !important;
+}
+
+.navbar-brand {
+    color: #E50914 !important;
+    font-weight: bold;
+}
+
+.hero {
+    padding: 6rem 0;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    font-weight: bold;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    color: #a0a0a0;
+}
+
+.btn-primary-custom {
+    background-color: #E50914;
+    border-color: #E50914;
+    font-weight: bold;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+}
+
+.btn-primary-custom:hover {
+    background-color: #c40812;
+    border-color: #c40812;
+}
+
+.btn-danger-custom {
+    background-color: #6c757d;
+    border-color: #6c757d;
+    color: #fff;
+}
+
+.btn-danger-custom:hover {
+    background-color: #5a6268;
+    border-color: #545b62;
+}
+
+.feature-card {
+    background-color: #1E1E1E;
+    border: 1px solid #333333;
+    border-radius: 0.5rem;
+    padding: 2rem;
+    height: 100%;
+}
+
+.feature-icon {
+    font-size: 2.5rem;
+    color: #E50914;
+}
+
+footer {
+    background-color: #1E1E1E;
+    color: #a0a0a0;
+    padding: 2rem 0;
+    margin-top: 4rem;
+}

assets/js/main.js

@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const ctaButton = document.querySelector('#cta-button');
+    const createSection = document.querySelector('#create');
+
+    if (ctaButton && createSection) {
+        ctaButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            createSection.scrollIntoView({ behavior: 'smooth' });
+        });
+    }
+});

includes/pexels.php

@@ -0,0 +1,25 @@
+<?php
+function pexels_key() {
+  $k = getenv('PEXELS_KEY');
+  return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
+}
+function pexels_get($url) {
+  $ch = curl_init();
+  curl_setopt_array($ch, [
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
+    CURLOPT_TIMEOUT => 15,
+  ]);
+  $resp = curl_exec($ch);
+  $code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+  curl_close($ch);
+  if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
+  return null;
+}
+function download_to($srcUrl, $destPath) {
+  $data = file_get_contents($srcUrl);
+  if ($data === false) return false;
+  if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
+  return file_put_contents($destPath, $data) !== false;
+}

index.php

@@ -1,150 +1,295 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/mail/MailService.php';
+require_once __DIR__ . '/ai/LocalAIApi.php';
+require_once __DIR__ . '/db/config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Fetch Affiliate Products
+try {
+    $pdo = db();
+    $stmt = $pdo->query('SELECT id, name FROM affiliate_products ORDER BY name ASC');
+    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
+} catch (PDOException $e) {
+    error_log('Database Error: ' . $e->getMessage());
+    $products = []; // Ensure products is an array even on error
+}
+
+// Form & AI Processing
+$form_submitted = false;
+$form_success = false;
+$form_message = '';
+$generated_script = '';
+$filtered_script = '';
+$ai_error = '';
+$video_clips = [];
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $form_submitted = true;
+    $name = htmlspecialchars($_POST['name'] ?? 'N/A');
+    $email = htmlspecialchars($_POST['email'] ?? 'N/A');
+    $topic = htmlspecialchars($_POST['topic'] ?? '');
+    $product_id = $_POST['product_id'] ?? null;
+
+    $selected_product = null;
+    if ($product_id && !empty($products)) {
+        foreach ($products as $p) {
+            if ($p['id'] == $product_id) {
+                $selected_product = $p;
+                break;
+            }
+        }
+    }
+
+    // 1. Send Email Notification
+    $email_message = "Reel Request: " . $topic;
+    if ($selected_product) {
+        $email_message .= "\nAffiliate Product: " . htmlspecialchars($selected_product['name']);
+    }
+    $to = getenv('MAIL_TO') ?: null;
+    $res = MailService::sendContactMessage($name, $email, $email_message, $to, 'New Reel Generation Request');
+    
+    if (!empty($res['success'])) {
+        $form_success = true;
+        $form_message = 'Your request has been submitted! The AI is now generating your script below.';
+    } else {
+        $form_success = false;
+        $form_message = 'Sorry, there was an error sending your request. Please try again later.';
+        error_log('MailService Error: ' . ($res['error'] ?? 'Unknown'));
+    }
+
+    // 2. AI Script Generation & Filtering
+    if ($form_success && !empty($topic)) {
+        $system_prompt = 'You are an expert scriptwriter for short, high-retention social media videos. Create a script up to 60 seconds long.';
+        $user_prompt = 'Write a video script about: ' . $topic;
+
+        if ($selected_product) {
+            $user_prompt .= "\n\nIncorporate the following affiliate product naturally into the script: " . htmlspecialchars($selected_product['name']) . ".";
+        }
+
+        $generation_prompt = [
+            'input' => [
+                ['role' => 'system', 'content' => $system_prompt],
+                ['role' => 'user', 'content' => $user_prompt],
+            ],
+        ];
+        $generation_resp = LocalAIApi::createResponse($generation_prompt);
+
+        if (!empty($generation_resp['success'])) {
+            $generated_script = LocalAIApi::extractText($generation_resp);
+
+            if (!empty($generated_script)) {
+                $filtering_prompt = [
+                    'input' => [
+                        ['role' => 'system', 'content' => 'You are a content moderator. Review the following script. Remove or rewrite any parts that are not compliant. Non-compliant ("haram") content includes explicit material, alcohol, pork, gambling, violence, offensive language, and religious insensitivity. Be conservative in your filtering. Output only the clean, final script. Do not add any introductory text or commentary.'],
+                        ['role' => 'user', 'content' => $generated_script],
+                    ],
+                ];
+                $filtering_resp = LocalAIApi::createResponse($filtering_prompt);
+
+                if (!empty($filtering_resp['success'])) {
+                    $filtered_script = LocalAIApi::extractText($filtering_resp);
+                    if (empty($filtered_script)) {
+                        $ai_error = 'The AI moderated the content but returned an empty script. This can happen with sensitive topics.';
+                    } else {
+                        // 3. AI Keyword Extraction
+                        $keyword_prompt = [
+                            'input' => [
+                                ['role' => 'system', 'content' => 'You are a keyword extraction specialist. From the following script, extract 3-5 relevant keywords for a stock video search. The keywords should be single words or short phrases that visually represent the scenes. Output only a comma-separated list of keywords. For example: "sunrise, coffee, laptop, city view".'],
+                                ['role' => 'user', 'content' => $filtered_script],
+                            ],
+                        ];
+                        $keyword_resp = LocalAIApi::createResponse($keyword_prompt);
+
+                        if (!empty($keyword_resp['success'])) {
+                            $keywords = LocalAIApi::extractText($keyword_resp);
+                            if (!empty($keywords)) {
+                                // 4. Fetch Video Clips
+                                $api_url = 'http://' . $_SERVER['HTTP_HOST'] . '/api/pexels.php?query=' . urlencode($keywords) . '&orientation=portrait';
+                                $videos_json = @file_get_contents($api_url);
+                                if ($videos_json) {
+                                    $videos_data = json_decode($videos_json, true);
+                                    if (!empty($videos_data['videos'])) {
+                                        $video_clips = $videos_data['videos'];
+                                    }
+                                }
+                            }
+                        }
+                    }
+                } else {
+                    $ai_error = 'The AI failed to moderate the script. Error: ' . ($filtering_resp['error'] ?? 'Unknown');
+                    error_log('AI Filtering Error: ' . ($filtering_resp['error'] ?? 'Unknown'));
+                }
+            } else {
+                $ai_error = 'The AI generated an empty script. Please try a different topic.';
+            }
+        } else {
+            $ai_error = 'The AI failed to generate a script. Error: ' . ($generation_resp['error'] ?? 'Unknown');
+            error_log('AI Generation Error: ' . ($generation_resp['error'] ?? 'Unknown'));
+        }
+    }
+}
 ?>
-<!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">
+    <title>AI Reel Generator</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
 </head>
-<body>
-  <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>
+<body class="bg-dark text-white">
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+        <div class="container">
+            <a class="navbar-brand" href="index.php">AI Reel Creator</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php#features">Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php#create">Create</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="products.php">Products</a>
+                    </li>
+                </ul>
             </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>
         </div>
+    </nav>
+
+    <main class="container my-5 pt-5">
+        <section id="hero" class="text-center py-5">
+            <h1 class="display-4 fw-bold">AI-Powered Reels. Pure Content.</h1>
+            <p class="lead col-lg-6 mx-auto">Generate high-retention video scripts, automatically filtered for brand safety. Focus on your message, we'll handle the rest.</p>
+            <a href="#create" class="btn btn-primary-custom btn-lg">Start Creating</a>
+        </section>
+
+        <section id="features" class="py-5">
+            <div class="row text-center g-4">
+                <div class="col-md-4">
+                    <div class="card bg-darker h-100 p-3">
+                        <div class="card-body">
+                            <i class="bi bi-robot fs-1 text-primary"></i>
+                            <h3 class="card-title mt-3">AI Generation</h3>
+                            <p class="card-text">From a simple idea to a full video script in seconds. Our AI crafts engaging content tailored for short-form video.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card bg-darker h-100 p-3">
+                        <div class="card-body">
+                            <i class="bi bi-shield-check fs-1 text-primary"></i>
+                            <h3 class="card-title mt-3">Haram-Free Content</h3>
+                            <p class="card-text">Automatic, conservative filtering removes non-compliant elements, ensuring your content is always safe for your audience.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="card bg-darker h-100 p-3">
+                        <div class="card-body">
+                            <i class="bi bi-link-45deg fs-1 text-primary"></i>
+                            <h3 class="card-title mt-3">Affiliate Integration</h3>
+                            <p class="card-text">Easily attach affiliate products to your content and track performance with our simple, built-in tools.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="create" class="py-5 bg-darker rounded p-4 p-md-5 mt-5">
+            <h2 class="text-center mb-4">Generate Your Script</h2>
+            
+            <?php if ($form_submitted): ?>
+                <div class="alert <?php echo $form_success ? 'alert-success' : 'alert-danger'; ?>">
+                    <?php echo $form_message; ?>
+                </div>
+            <?php endif; ?>
+
+            <form action="index.php#create" method="POST">
+                <div class="mb-3">
+                    <label for="name" class="form-label">Your Name</label>
+                    <input type="text" class="form-control bg-dark text-white" id="name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="email" class="form-label">Your Email</label>
+                    <input type="email" class="form-control bg-dark text-white" id="email" name="email" required>
+                </div>
+                <div class="mb-3">
+                    <label for="topic" class="form-label">Topic / Idea</label>
+                    <textarea class="form-control bg-dark text-white" id="topic" name="topic" rows="3" placeholder="e.g., '''a 30-second video on the benefits of waking up early'''" required></textarea>
+                </div>
+                <?php if (!empty($products)): ?>
+                <div class="mb-3">
+                    <label for="product_id" class="form-label">Affiliate Product (Optional)</label>
+                    <select class="form-select bg-dark text-white" id="product_id" name="product_id">
+                        <option value="">None</option>
+                        <?php foreach ($products as $product): ?>
+                            <option value="<?php echo htmlspecialchars($product['id']); ?>">
+                                <?php echo htmlspecialchars($product['name']); ?>
+                            </option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+                <?php endif; ?>
+                <button type="submit" class="btn btn-primary w-100">Generate AI Script</button>
+            </form>
+
+            <?php if ($form_submitted && ($filtered_script || $ai_error)): ?>
+            <div id="ai-result" class="mt-5">
+                <h3 class="text-center">Your AI-Generated Script</h3>
+                <?php if ($ai_error): ?>
+                    <div class="alert alert-warning mt-3">
+                        <strong>AI Error:</strong> <?php echo htmlspecialchars($ai_error); ?>
+                    </div>
+                <?php endif; ?>
+                <?php if ($filtered_script): ?>
+                    <div class="card bg-dark mt-3">
+                        <div class="card-body">
+                            <pre class="text-white" style="white-space: pre-wrap;"><?php echo htmlspecialchars($filtered_script); ?></pre>
+                        </div>
+                    </div>
+                <?php endif; ?>
+
+                <?php if (!empty($video_clips)): ?>
+                <div id="video-clips" class="mt-5">
+                    <h3 class="text-center">Suggested Halal Video Clips</h3>
+                    <p class="text-center text-muted">Based on your script, here are some pre-filtered, royalty-free video clips you can download and use.</p>
+                    <div class="row g-4 mt-3">
+                        <?php foreach ($video_clips as $clip): ?>
+                        <div class="col-md-4">
+                            <div class="card bg-darker h-100 shadow-sm">
+                                <a href="<?php echo htmlspecialchars($clip['download_url']); ?>" target="_blank" rel="noopener noreferrer" title="View and Download Video">
+                                    <img src="<?php echo htmlspecialchars($clip['thumbnail']); ?>" class="card-img-top" alt="Video thumbnail" style="aspect-ratio: 9/16; object-fit: cover;">
+                                </a>
+                                <div class="card-body text-center d-flex flex-column">
+                                    <a href="<?php echo htmlspecialchars($clip['download_url']); ?>" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-light mt-auto">Download</a>
+                                </div>
+                                <div class="card-footer text-center" style="background-color: #212529;">
+                                     <small class="text-muted">by <a href="<?php echo htmlspecialchars($clip['photographer_url']); ?>" target="_blank" rel="noopener noreferrer" class="text-white-50"><?php echo htmlspecialchars($clip['photographer']); ?></a></small>
+                                </div>
+                            </div>
+                        </div>
+                        <?php endforeach; ?>
+                    </div>
+                </div>
+                <?php endif; ?>
+            </div>
+            <?php endif; ?>
+
+        </section>
     </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
+
+    <footer class="bg-darker text-center py-4 mt-5">
+        <div class="container">
+            <p class="mb-0">&copy; <?php echo date("Y"); ?> AI Reel Generator. All Rights Reserved.</p>
+        </div>
     </footer>
+
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>

products.php

@@ -0,0 +1,163 @@
+<?php
+require_once 'db/config.php';
+
+try {
+    $pdo = db();
+    // Create table if it doesn't exist
+    $pdo->exec("CREATE TABLE IF NOT EXISTS `affiliate_products` (
+        `id` INT AUTO_INCREMENT PRIMARY KEY,
+        `product_name` VARCHAR(255) NOT NULL,
+        `affiliate_link` VARCHAR(2048) NOT NULL,
+        `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )");
+
+    // Handle form submission for adding a new product
+    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_product'])) {
+        $product_name = trim($_POST['product_name']);
+        $affiliate_link = trim($_POST['affiliate_link']);
+
+        if (!empty($product_name) && !empty($affiliate_link) && filter_var($affiliate_link, FILTER_VALIDATE_URL)) {
+            $stmt = $pdo->prepare("INSERT INTO affiliate_products (product_name, affiliate_link) VALUES (?, ?)");
+            $stmt->execute([$product_name, $affiliate_link]);
+            header("Location: products.php?status=success");
+            exit;
+        } else {
+            $error = "Invalid input. Please provide a valid product name and URL.";
+        }
+    }
+
+    // Handle deletion
+    if (isset($_GET['action']) && $_GET['action'] === 'delete' && isset($_GET['id'])) {
+        $id = filter_var($_GET['id'], FILTER_VALIDATE_INT);
+        if ($id) {
+            $stmt = $pdo->prepare("DELETE FROM affiliate_products WHERE id = ?");
+            $stmt->execute([$id]);
+            header("Location: products.php?status=deleted");
+            exit;
+        }
+    }
+
+    // Fetch all products
+    $products = $pdo->query("SELECT * FROM affiliate_products ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
+
+} catch (PDOException $e) {
+    $error = "Database error: " . $e->getMessage();
+    $products = [];
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Affiliate Product Management</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body data-bs-theme="dark">
+
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+        <div class="container">
+            <a class="navbar-brand" href="index.php">AI Reel Creator</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php#features">Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="index.php#create">Create</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link active" href="products.php">Products</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mt-5 pt-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-10">
+                <h1 class="display-4 text-center mb-5">Affiliate Product Management</h1>
+
+                <?php if (isset($error)): ?>
+                    <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
+                <?php endif; ?>
+                <?php if (isset($_GET['status']) && $_GET['status'] === 'success'): ?>
+                    <div class="alert alert-success">Product added successfully!</div>
+                <?php endif; ?>
+                <?php if (isset($_GET['status']) && $_GET['status'] === 'deleted'): ?>
+                    <div class="alert alert-info">Product deleted.</div>
+                <?php endif; ?>
+
+                <!-- Add Product Form -->
+                <div class="card bg-dark-surface mb-5">
+                    <div class="card-body">
+                        <h2 class="card-title h4">Add New Product</h2>
+                        <form action="products.php" method="POST">
+                            <div class="mb-3">
+                                <label for="product_name" class="form-label">Product Name</label>
+                                <input type="text" class="form-control" id="product_name" name="product_name" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="affiliate_link" class="form-label">Affiliate Link (URL)</label>
+                                <input type="url" class="form-control" id="affiliate_link" name="affiliate_link" placeholder="https://..." required>
+                            </div>
+                            <button type="submit" name="add_product" class="btn btn-primary-custom">Add Product</button>
+                        </form>
+                    </div>
+                </div>
+
+                <!-- Product List -->
+                <div class="card bg-dark-surface">
+                    <div class="card-body">
+                        <h2 class="card-title h4">Existing Products</h2>
+                        <div class="table-responsive">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th>Product Name</th>
+                                        <th>Affiliate Link</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <?php if (empty($products)): ?>
+                                        <tr>
+                                            <td colspan="3" class="text-center">No products found.</td>
+                                        </tr>
+                                    <?php else: ?>
+                                        <?php foreach ($products as $product): ?>
+                                            <tr>
+                                                <td><?php echo htmlspecialchars($product['product_name']); ?></td>
+                                                <td><a href="<?php echo htmlspecialchars($product['affiliate_link']); ?>" target="_blank"><?php echo htmlspecialchars($product['affiliate_link']); ?></a></td>
+                                                <td>
+                                                    <a href="products.php?action=delete&id=<?php echo $product['id']; ?>" class="btn btn-sm btn-danger-custom" onclick="return confirm('Are you sure you want to delete this product?');">
+                                                        <i class="bi bi-trash"></i> Delete
+                                                    </a>
+                                                </td>
+                                            </tr>
+                                        <?php endforeach; ?>
+                                    <?php endif; ?>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-dark text-white text-center py-4 mt-5">
+        <div class="container">
+            <p>&copy; <?php echo date('Y'); ?> AI Reel Creator. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>