Insta app

ai/LocalAIApi.php

@@ -0,0 +1,311 @@
+<?php
+// LocalAIApi — proxy client for the Responses API.
+// Usage:
+//   require_once __DIR__ . '/ai/LocalAIApi.php';
+//   $response = LocalAIApi::createResponse([
+//       'input' => [
+//           ['role' => 'system', 'content' => 'You are a helpful assistant.'],
+//           ['role' => 'user', 'content' => 'Tell me a bedtime story.'],
+//       ],
+//   ]);
+//   if (!empty($response['success'])) {
+//       $decoded = LocalAIApi::decodeJsonFromResponse($response);
+//   }
+
+class LocalAIApi
+{
+    /** @var array<string,mixed>|null */
+    private static ?array $configCache = null;
+
+    /**
+     * Signature compatible with the OpenAI Responses API.
+     *
+     * @param array<string,mixed> $params Request body (model, input, text, reasoning, metadata, etc.).
+     * @param array<string,mixed> $options Extra options (timeout, verify_tls, headers, path, project_uuid).
+     * @return array{
+     *   success:bool,
+     *   status?:int,
+     *   data?:mixed,
+     *   error?:string,
+     *   response?:mixed,
+     *   message?:string
+     * }
+     */
+    public static function createResponse(array $params, array $options = []): array
+    {
+        $cfg = self::config();
+        $payload = $params;
+
+        if (empty($payload['input']) || !is_array($payload['input'])) {
+            return [
+                'success' => false,
+                'error'   => 'input_missing',
+                'message' => 'Parameter "input" is required and must be an array.',
+            ];
+        }
+
+        if (!isset($payload['model']) || $payload['model'] === '') {
+            $payload['model'] = $cfg['default_model'];
+        }
+
+        return self::request($options['path'] ?? null, $payload, $options);
+    }
+
+    /**
+     * Snake_case alias for createResponse (matches the provided example).
+     *
+     * @param array<string,mixed> $params
+     * @param array<string,mixed> $options
+     * @return array<string,mixed>
+     */
+    public static function create_response(array $params, array $options = []): array
+    {
+        return self::createResponse($params, $options);
+    }
+
+    /**
+     * Perform a raw request to the AI proxy.
+     *
+     * @param string $path Endpoint (may be an absolute URL).
+     * @param array<string,mixed> $payload JSON payload.
+     * @param array<string,mixed> $options Additional request options.
+     * @return array<string,mixed>
+     */
+    public static function request(?string $path = null, array $payload = [], array $options = []): array
+    {
+        if (!function_exists('curl_init')) {
+            return [
+                'success' => false,
+                'error'   => 'curl_missing',
+                'message' => 'PHP cURL extension is missing. Install or enable it on the VM.',
+            ];
+        }
+
+        $cfg = self::config();
+
+        $projectUuid = $cfg['project_uuid'];
+        if (empty($projectUuid)) {
+            return [
+                'success' => false,
+                'error'   => 'project_uuid_missing',
+                'message' => 'PROJECT_UUID is not defined; aborting AI request.',
+            ];
+        }
+
+        $defaultPath = $cfg['responses_path'] ?? null;
+        $resolvedPath = $path ?? ($options['path'] ?? $defaultPath);
+        if (empty($resolvedPath)) {
+            return [
+                'success' => false,
+                'error'   => 'project_id_missing',
+                'message' => 'PROJECT_ID is not defined; cannot resolve AI proxy endpoint.',
+            ];
+        }
+
+        $url = self::buildUrl($resolvedPath, $cfg['base_url']);
+        $baseTimeout = isset($cfg['timeout']) ? (int) $cfg['timeout'] : 30;
+        $timeout = isset($options['timeout']) ? (int) $options['timeout'] : $baseTimeout;
+        if ($timeout <= 0) {
+            $timeout = 30;
+        }
+
+        $baseVerifyTls = array_key_exists('verify_tls', $cfg) ? (bool) $cfg['verify_tls'] : true;
+        $verifyTls = array_key_exists('verify_tls', $options)
+            ? (bool) $options['verify_tls']
+            : $baseVerifyTls;
+
+        $projectHeader = $cfg['project_header'];
+
+        $headers = [
+            'Content-Type: application/json',
+            'Accept: application/json',
+        ];
+        $headers[] = $projectHeader . ': ' . $projectUuid;
+        if (!empty($options['headers']) && is_array($options['headers'])) {
+            foreach ($options['headers'] as $header) {
+                if (is_string($header) && $header !== '') {
+                    $headers[] = $header;
+                }
+            }
+        }
+
+        if (!empty($projectUuid) && !array_key_exists('project_uuid', $payload)) {
+            $payload['project_uuid'] = $projectUuid;
+        }
+
+        $body = json_encode($payload, JSON_UNESCAPED_UNICODE);
+        if ($body === false) {
+            return [
+                'success' => false,
+                'error'   => 'json_encode_failed',
+                'message' => 'Failed to encode request body to JSON.',
+            ];
+        }
+
+        $ch = curl_init($url);
+        curl_setopt($ch, CURLOPT_POST, true);
+        curl_setopt($ch, CURLOPT_POSTFIELDS, $body);
+        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
+        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, $verifyTls);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, $verifyTls ? 2 : 0);
+        curl_setopt($ch, CURLOPT_FAILONERROR, false);
+
+        $responseBody = curl_exec($ch);
+        if ($responseBody === false) {
+            $error = curl_error($ch) ?: 'Unknown cURL error';
+            curl_close($ch);
+            return [
+                'success' => false,
+                'error'   => 'curl_error',
+                'message' => $error,
+            ];
+        }
+
+        $status = (int) curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        $decoded = null;
+        if ($responseBody !== '' && $responseBody !== null) {
+            $decoded = json_decode($responseBody, true);
+            if (json_last_error() !== JSON_ERROR_NONE) {
+                $decoded = null;
+            }
+        }
+
+        if ($status >= 200 && $status < 300) {
+            return [
+                'success' => true,
+                'status'  => $status,
+                'data'    => $decoded ?? $responseBody,
+            ];
+        }
+
+        $errorMessage = 'AI proxy request failed';
+        if (is_array($decoded)) {
+            $errorMessage = $decoded['error'] ?? $decoded['message'] ?? $errorMessage;
+        } elseif (is_string($responseBody) && $responseBody !== '') {
+            $errorMessage = $responseBody;
+        }
+
+        return [
+            'success'  => false,
+            'status'   => $status,
+            'error'    => $errorMessage,
+            'response' => $decoded ?? $responseBody,
+        ];
+    }
+
+    /**
+     * Extract plain text from a Responses API payload.
+     *
+     * @param array<string,mixed> $response Result of LocalAIApi::createResponse|request.
+     * @return string
+     */
+    public static function extractText(array $response): string
+    {
+        $payload = $response['data'] ?? $response;
+        if (!is_array($payload)) {
+            return '';
+        }
+
+        if (!empty($payload['output']) && is_array($payload['output'])) {
+            $combined = '';
+            foreach ($payload['output'] as $item) {
+                if (!isset($item['content']) || !is_array($item['content'])) {
+                    continue;
+                }
+                foreach ($item['content'] as $block) {
+                    if (is_array($block) && ($block['type'] ?? '') === 'output_text' && !empty($block['text'])) {
+                        $combined .= $block['text'];
+                    }
+                }
+            }
+            if ($combined !== '') {
+                return $combined;
+            }
+        }
+
+        if (!empty($payload['choices'][0]['message']['content'])) {
+            return (string) $payload['choices'][0]['message']['content'];
+        }
+
+        return '';
+    }
+
+    /**
+     * Attempt to decode JSON emitted by the model (handles markdown fences).
+     *
+     * @param array<string,mixed> $response
+     * @return array<string,mixed>|null
+     */
+    public static function decodeJsonFromResponse(array $response): ?array
+    {
+        $text = self::extractText($response);
+        if ($text === '') {
+            return null;
+        }
+
+        $decoded = json_decode($text, true);
+        if (is_array($decoded)) {
+            return $decoded;
+        }
+
+        $stripped = preg_replace('/^```json|```$/m', '', trim($text));
+        if ($stripped !== null && $stripped !== $text) {
+            $decoded = json_decode($stripped, true);
+            if (is_array($decoded)) {
+                return $decoded;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Load configuration from ai/config.php.
+     *
+     * @return array<string,mixed>
+     */
+    private static function config(): array
+    {
+        if (self::$configCache === null) {
+            $configPath = __DIR__ . '/config.php';
+            if (!file_exists($configPath)) {
+                throw new RuntimeException('AI config file not found: ai/config.php');
+            }
+            $cfg = require $configPath;
+            if (!is_array($cfg)) {
+                throw new RuntimeException('Invalid AI config format: expected array');
+            }
+            self::$configCache = $cfg;
+        }
+
+        return self::$configCache;
+    }
+
+    /**
+     * Build an absolute URL from base_url and a path.
+     */
+    private static function buildUrl(string $path, string $baseUrl): string
+    {
+        $trimmed = trim($path);
+        if ($trimmed === '') {
+            return $baseUrl;
+        }
+        if (str_starts_with($trimmed, 'http://') || str_starts_with($trimmed, 'https://')) {
+            return $trimmed;
+        }
+        if ($trimmed[0] === '/') {
+            return $baseUrl . $trimmed;
+        }
+        return $baseUrl . '/' . $trimmed;
+    }
+}
+
+// Legacy alias for backward compatibility with the previous class name.
+if (!class_exists('OpenAIService')) {
+    class_alias(LocalAIApi::class, 'OpenAIService');
+}

ai/config.php

@@ -0,0 +1,52 @@
+<?php
+// OpenAI proxy configuration (workspace scope).
+// Reads values from environment variables or executor/.env.
+
+$projectUuid = getenv('PROJECT_UUID');
+$projectId   = getenv('PROJECT_ID');
+
+if (
+    ($projectUuid === false || $projectUuid === null || $projectUuid === '') ||
+    ($projectId === false || $projectId === null || $projectId === '')
+) {
+    $envPath = realpath(__DIR__ . '/../../.env'); // executor/.env
+    if ($envPath && is_readable($envPath)) {
+        $lines = @file($envPath, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) ?: [];
+        foreach ($lines as $line) {
+            $line = trim($line);
+            if ($line === '' || $line[0] === '#') {
+                continue;
+            }
+            if (!str_contains($line, '=')) {
+                continue;
+            }
+            [$key, $value] = array_map('trim', explode('=', $line, 2));
+            if ($key === '') {
+                continue;
+            }
+            $value = trim($value, "\"' ");
+            if (getenv($key) === false || getenv($key) === '') {
+                putenv("{$key}={$value}");
+            }
+        }
+        $projectUuid = getenv('PROJECT_UUID');
+        $projectId   = getenv('PROJECT_ID');
+    }
+}
+
+$projectUuid = ($projectUuid === false) ? null : $projectUuid;
+$projectId   = ($projectId === false) ? null : $projectId;
+
+$baseUrl       = 'https://flatlogic.com';
+$responsesPath = $projectId ? "/projects/{$projectId}/ai-request" : null;
+
+return [
+    'base_url'       => $baseUrl,
+    'responses_path' => $responsesPath,
+    'project_id'     => $projectId,
+    'project_uuid'   => $projectUuid,
+    'project_header' => 'project-uuid',
+    'default_model'  => 'gpt-5',
+    'timeout'        => 30,
+    'verify_tls'     => true,
+];

assets/css/custom.css

@@ -0,0 +1,56 @@
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #F9FAFB;
+    color: #1F2937;
+}
+
+.navbar {
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.hero-section {
+    background: linear-gradient(45deg, #3B82F6, #2563EB);
+    color: white;
+    padding: 6rem 0;
+}
+
+.features-section .card {
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.features-section .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
+}
+
+.btn-primary {
+    background-color: #3B82F6;
+    border-color: #3B82F6;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.btn-primary:hover {
+    background-color: #2563EB;
+    border-color: #2563EB;
+}
+
+.modal-content {
+    border-radius: 0.5rem;
+}
+
+.toast-header .btn-close {
+    margin: -0.375rem -0.375rem -0.375rem auto;
+}
+
+.toast.success .toast-header {
+    background-color: #10B981;
+    color: white;
+}
+
+.toast.error .toast-header {
+    background-color: #EF4444;
+    color: white;
+}

assets/js/main.js

@@ -0,0 +1,17 @@
+function showToast(title, message, type = 'info') {
+    const toastEl = document.getElementById('notificationToast');
+    const toastTitle = document.getElementById('toast-title');
+    const toastBody = document.getElementById('toast-body');
+
+    toastTitle.innerText = title;
+    toastBody.innerText = message;
+    
+    const toast = new bootstrap.Toast(toastEl);
+    
+    toastEl.classList.remove('success', 'error', 'info');
+    if(type) {
+        toastEl.classList.add(type);
+    }
+
+    toast.show();
+}

db/config.php

@@ -15,3 +15,13 @@ function db() {
   }
   return $pdo;
 }
+
+function run_migrations() {
+    $pdo = db();
+    $migrations_dir = __DIR__ . '/migrations';
+    $files = glob($migrations_dir . '/*.sql');
+    foreach ($files as $file) {
+        $sql = file_get_contents($file);
+        $pdo->exec($sql);
+    }
+}

db/migrations/001_create_users_table.sql

@@ -0,0 +1,7 @@
+CREATE TABLE IF NOT EXISTS `users` (
+  `id` INT AUTO_INCREMENT PRIMARY KEY,
+  `email` VARCHAR(255) NOT NULL UNIQUE,
+  `password` VARCHAR(255) NOT NULL,
+  `paid_status` BOOLEAN NOT NULL DEFAULT FALSE,
+  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

index.php

@@ -1,150 +1,150 @@
-<?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">
+    <title>Instagram Board</title>
+    <meta name="description" content="Organize your saved Instagram posts into beautiful boards.">
+    <meta name="keywords" content="instagram saver, instagram organizer, content curation, social media tools, instagram board, visual bookmarking, Built with Flatlogic Generator">
+    <meta property="og:title" content="Instagram Board">
+    <meta property="og:description" content="Organize your saved Instagram posts into beautiful boards.">
+    <meta property="og:image" content="">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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="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;500;600;700&display=swap" rel="stylesheet">
+    <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>
-      </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>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="#">InstaBoard</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="#">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="btn btn-primary ms-lg-2" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">Sign Up</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <header class="hero-section">
+        <div class="container text-center">
+            <h1 class="display-4 fw-bold">Organize Your Instagram Inspiration</h1>
+            <p class="lead my-4">Turn your saved posts into powerful, organized boards. <br> Find what you need, when you need it.</p>
+            <a href="#" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#signupModal">Get Started for Free</a>
+        </div>
+    </header>
+
+    <section class="features-section py-5">
+        <div class="container">
+            <div class="row text-center">
+                <div class="col-md-4 mb-4">
+                    <div class="card h-100 border-0 shadow-sm">
+                        <div class="card-body">
+                            <i class="bi bi-magic fs-1 text-primary"></i>
+                            <h3 class="h4 my-3">Auto-Categorize</h3>
+                            <p class="text-muted">Let AI do the heavy lifting. Automatically sort your saved posts into relevant boards.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-4">
+                    <div class="card h-100 border-0 shadow-sm">
+                        <div class="card-body">
+                            <i class="bi bi-search fs-1 text-primary"></i>
+                            <h3 class="h4 my-3">Powerful Search</h3>
+                            <p class="text-muted">Instantly find any post by keyword, tag, or date. Never lose a great idea again.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-4">
+                    <div class="card h-100 border-0 shadow-sm">
+                        <div class="card-body">
+                            <i class="bi bi-share fs-1 text-primary"></i>
+                            <h3 class="h4 my-3">Shareable Boards</h3>
+                            <p class="text-muted">Create public or private boards to share your collections with friends or clients.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <footer class="py-4 bg-light">
+        <div class="container text-center">
+            <p class="mb-0">&copy; 2025 InstaBoard. All Rights Reserved.</p>
+        </div>
+    </footer>
+
+    <!-- Signup Modal -->
+    <div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="signupModalLabel">Create Your Account</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form action="signup.php" method="POST">
+                        <div class="mb-3">
+                            <label for="email" class="form-label">Email address</label>
+                            <input type="email" class="form-control" id="email" name="email" required>
+                        </div>
+                        <div class="mb-3">
+                            <label for="password" class="form-label">Password</label>
+                            <input type="password" class="form-control" id="password" name="password" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-100">Sign Up</button>
+                    </form>
+                </div>
+            </div>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+    
+    <!-- Toast container -->
+    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+      <div id="notificationToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto" id="toast-title"></strong>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" id="toast-body">
+        </div>
+      </div>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const signedUp = urlParams.get('signed_up');
+            const signupError = urlParams.get('signup_error');
+
+            if (signedUp === 'true') {
+                showToast('Success', 'You have successfully signed up! Please log in.', 'success');
+            }
+            
+            if (signupError) {
+                showToast('Error', decodeURIComponent(signupError), 'error');
+            }
+        });
+    </script>
 </body>
-</html>
+</html>

signup.php

@@ -0,0 +1,42 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+// Run migrations
+run_migrations();
+
+$error = '';
+$success = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $email = $_POST['email'] ?? '';
+    $password = $_POST['password'] ?? '';
+
+    if (empty($email) || empty($password)) {
+        $error = 'Email and password are required.';
+    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        $error = 'Invalid email format.';
+    } else {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare('SELECT id FROM users WHERE email = ?');
+            $stmt->execute([$email]);
+            if ($stmt->fetch()) {
+                $error = 'Email already exists.';
+            } else {
+                $hashed_password = password_hash($password, PASSWORD_DEFAULT);
+                $stmt = $pdo->prepare('INSERT INTO users (email, password) VALUES (?, ?)');
+                $stmt->execute([$email, $hashed_password]);
+                header('Location: index.php?signed_up=true');
+                exit;
+            }
+        } catch (PDOException $e) {
+            // In a real app, you would log this error.
+            $error = 'Database error. Please try again later.';
+        }
+    }
+    
+    if ($error) {
+        header('Location: index.php?signup_error=' . urlencode($error));
+        exit;
+    }
+}