Revert to version 5448d80

api/save_settings.php

@@ -0,0 +1,91 @@
+<?php
+require_once __DIR__ . '/../db/config.php';
+
+header('Content-Type: application/json');
+
+$action = $_POST['action'] ?? '';
+
+// Check if locked for all modifying actions except toggle_lock
+if ($action !== 'toggle_lock' && $action !== '') {
+    $stmt = db()->prepare("SELECT setting_value FROM settings WHERE setting_key = 'is_locked'");
+    $stmt->execute();
+    $isLocked = $stmt->fetchColumn();
+    
+    if ($isLocked === '1') {
+        echo json_encode(['success' => false, 'error' => 'Settings are locked.']);
+        exit;
+    }
+}
+
+if ($action === 'upload_bg_image') {
+    if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
+        $uploadDir = __DIR__ . '/../assets/images/uploads/';
+        if (!is_dir($uploadDir)) {
+            mkdir($uploadDir, 0775, true);
+        }
+        $fileName = 'bg_' . time() . '_' . basename($_FILES['image']['name']);
+        $targetPath = $uploadDir . $fileName;
+
+        if (move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)) {
+            $webPath = 'assets/images/uploads/' . $fileName;
+            
+            $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'bg_image'");
+            $stmt->execute([$webPath]);
+            
+            echo json_encode(['success' => true, 'path' => $webPath]);
+        } else {
+            echo json_encode(['success' => false, 'error' => 'Failed to move uploaded file.']);
+        }
+    } else {
+        echo json_encode(['success' => false, 'error' => 'No file uploaded or upload error.']);
+    }
+} elseif ($action === 'update_bg_color') {
+    $color = $_POST['color'] ?? '';
+    if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'bg_color'");
+        $stmt->execute([$color]);
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
+    }
+} elseif ($action === 'update_popup_color') {
+    $color = $_POST['color'] ?? '';
+    if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'popup_color'");
+        $stmt->execute([$color]);
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
+    }
+} elseif ($action === 'update_setting') {
+    $key = $_POST['key'] ?? '';
+    $value = $_POST['value'] ?? '';
+    $allowedKeys = [
+        'p1_title_color', 'p1_title_size', 'p1_title_font', 'p1_title_text',
+        'p2_text_color', 'p2_text_size', 'p2_text_font', 'p2_line1_text', 'p2_line2_text',
+        'p2_hint_color', 'p2_hint_size', 'p2_hint_font', 'p2_hint_text',
+        'image_radius', 'yes_btn_color', 'no_btn_color'
+    ];
+    if (in_array($key, $allowedKeys)) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = ?");
+        $stmt->execute([$value, $key]);
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'Invalid setting key.']);
+    }
+} elseif ($action === 'remove_bg_image') {
+    $stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
+    $stmt->execute();
+    echo json_encode(['success' => true]);
+} elseif ($action === 'toggle_lock') {
+    $lockValue = $_POST['lock'] === 'true' ? '1' : '0';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'is_locked'");
+    $stmt->execute([$lockValue]);
+    echo json_encode(['success' => true, 'locked' => $lockValue === '1']);
+} elseif ($action === 'reset') {
+    // Reset button positions and sizes is handled by reloading the page in the frontend.
+    // We no longer reset colors or text content here.
+    echo json_encode(['success' => true]);
+} else {
+    echo json_encode(['success' => false, 'error' => 'Invalid action.']);
+}

assets/css/custom.css

@@ -1,346 +1,294 @@
 :root {
-    --color-bg: #ffffff;
-    --color-text: #1a1a1a;
-    --color-primary: #2563EB; /* Vibrant Blue */
-    --color-secondary: #000000;
-    --color-accent: #A3E635; /* Lime Green */
-    --color-surface: #f8f9fa;
-    --font-heading: 'Space Grotesk', sans-serif;
-    --font-body: 'Inter', sans-serif;
-    --border-width: 2px;
-    --shadow-hard: 5px 5px 0px #000;
-    --shadow-hover: 8px 8px 0px #000;
-    --radius-pill: 50rem;
-    --radius-card: 1rem;
+  --primary-color: #e63946;
+  --bg-color: #ffe4e6; /* Default Light Pink */
+  --popup-bg: #ffccd5; /* Default Light Red */
+  --bg-image: none;
+  --text-color: #2d3436;
+  --secondary-text: #636e72;
+  --border-color: rgba(0,0,0,0.05);
+  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  
+  --p1-title-color: #e63946;
+  --p1-title-size: 1.75rem;
+  --p1-title-font: 'Inter';
+  
+  --p2-text-color: #e63946;
+  --p2-text-size: 1.25rem;
+  --p2-text-font: 'Inter';
+  
+  --p2-hint-color: #636e72;
+  --p2-hint-size: 0.85rem;
+  --p2-hint-font: 'Inter';
+  
+  --image-radius: 12px;
+  --yes-btn-color: #e63946;
+  --no-btn-color: #ffffff;
 }
 
 body {
-    font-family: var(--font-body);
-    background-color: var(--color-bg);
-    color: var(--color-text);
+  background-color: var(--bg-color);
+  background-image: var(--bg-image);
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  color: var(--text-color);
+  font-family: var(--font-family);
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
   overflow-x: hidden;
 }
 
-h1, h2, h3, h4, h5, h6, .navbar-brand {
-    font-family: var(--font-heading);
-    letter-spacing: -0.03em;
-}
-
-/* Utilities */
-.text-primary { color: var(--color-primary) !important; }
-.bg-black { background-color: #000 !important; }
-.text-white { color: #fff !important; }
-.shadow-hard { box-shadow: var(--shadow-hard); }
-.border-2-black { border: var(--border-width) solid #000; }
-.py-section { padding-top: 5rem; padding-bottom: 5rem; }
-
-/* Navbar */
-.navbar {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(10px);
-    border-bottom: var(--border-width) solid transparent;
-    transition: all 0.3s;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-}
-
-.navbar.scrolled {
-    border-bottom-color: #000;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-}
-
-.brand-text {
-    font-size: 1.5rem;
-    font-weight: 800;
-}
-
-.nav-link {
-    font-weight: 500;
-    color: var(--color-text);
-    margin-left: 1rem;
-    position: relative;
-}
-
-.nav-link:hover, .nav-link.active {
-    color: var(--color-primary);
-}
-
-/* Buttons */
-.btn {
-    font-weight: 700;
-    font-family: var(--font-heading);
-    padding: 0.8rem 2rem;
-    border-radius: var(--radius-pill);
-    border: var(--border-width) solid #000;
-    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
-    box-shadow: var(--shadow-hard);
-}
-
-.btn:hover {
-    transform: translate(-2px, -2px);
-    box-shadow: var(--shadow-hover);
-}
-
-.btn:active {
-    transform: translate(2px, 2px);
-    box-shadow: 0 0 0 #000;
-}
-
-.btn-primary {
-    background-color: var(--color-primary);
-    border-color: #000;
-    color: #fff;
-}
-
-.btn-primary:hover {
-    background-color: #1d4ed8;
-    border-color: #000;
-    color: #fff;
-}
-
-.btn-outline-dark {
-    background-color: #fff;
-    color: #000;
-}
-
-.btn-cta {
-    background-color: var(--color-accent);
-    color: #000;
-}
-
-.btn-cta:hover {
-    background-color: #8cc629;
-    color: #000;
-}
-
-/* Hero Section */
-.hero-section {
-    min-height: 100vh;
-    padding-top: 80px;
-}
-
-.background-blob {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(80px);
-    opacity: 0.6;
-    z-index: 1;
-}
-
-.blob-1 {
-    top: -10%;
-    right: -10%;
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, var(--color-accent), transparent);
-}
-
-.blob-2 {
-    bottom: 10%;
-    left: -10%;
-    width: 500px;
-    height: 500px;
-    background: radial-gradient(circle, var(--color-primary), transparent);
-}
-
-.highlight-text {
-    background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%);
-    background-repeat: no-repeat;
-    background-size: 100% 40%;
-    background-position: 0 88%;
-    padding: 0 5px;
-}
-
-.dot { color: var(--color-primary); }
-
-.badge-pill {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    border: 2px solid #000;
-    border-radius: 50px;
-    font-weight: 700;
-    background: #fff;
-    box-shadow: 4px 4px 0 #000;
-    font-family: var(--font-heading);
-    font-size: 0.9rem;
-}
-
-/* Marquee */
-.marquee-container {
-    overflow: hidden;
-    white-space: nowrap;
-    border-top: 2px solid #000;
-    border-bottom: 2px solid #000;
-}
-
-.rotate-divider {
-    transform: rotate(-2deg) scale(1.05);
-    z-index: 10;
-    position: relative;
-    margin-top: -50px;
-    margin-bottom: 30px;
-}
-
-.marquee-content {
-    display: inline-block;
-    animation: marquee 20s linear infinite;
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: 1.5rem;
-    letter-spacing: 2px;
-}
-
-@keyframes marquee {
-    0% { transform: translateX(0); }
-    100% { transform: translateX(-50%); }
-}
-
-/* Portfolio Cards */
-.project-card {
-    border: 2px solid #000;
-    border-radius: var(--radius-card);
-    overflow: hidden;
-    background: #fff;
-    transition: transform 0.3s ease;
-    box-shadow: var(--shadow-hard);
-    height: 100%;
+.admin-controls {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
   display: flex;
   flex-direction: column;
+  gap: 0.5rem;
+  z-index: 100;
+  align-items: flex-end;
 }
 
-.project-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 8px 8px 0 #000;
-}
-
-.card-img-holder {
-    height: 250px;
+.control-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.admin-controls button {
+  background: rgba(255, 255, 255, 0.8);
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
   display: flex;
-    align-items: center;
   justify-content: center;
-    border-bottom: 2px solid #000;
-    position: relative;
-    font-size: 4rem;
-}
-
-.placeholder-art {
-    transition: transform 0.3s ease;
-}
-
-.project-card:hover .placeholder-art {
-    transform: scale(1.2) rotate(10deg);
-}
-
-.bg-soft-blue { background-color: #e0f2fe; }
-.bg-soft-green { background-color: #dcfce7; }
-.bg-soft-purple { background-color: #f3e8ff; }
-.bg-soft-yellow { background-color: #fef9c3; }
-
-.category-tag {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    background: #000;
-    color: #fff;
-    padding: 5px 12px;
-    border-radius: 20px;
-    font-size: 0.75rem;
-    font-weight: 700;
-}
-
-.card-body { padding: 1.5rem; }
-
-.link-arrow {
-    text-decoration: none;
-    color: #000;
-    font-weight: 700;
-    display: inline-flex;
   align-items: center;
-    margin-top: auto;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: all 0.2s ease;
+  color: var(--secondary-text);
 }
 
-.link-arrow i { transition: transform 0.2s; margin-left: 5px; }
-.link-arrow:hover i { transform: translateX(5px); }
+.admin-controls button:hover {
+  background: #fff;
+  color: var(--primary-color);
+  transform: scale(1.1);
+}
 
-/* About */
-.about-image-stack {
-    position: relative;
-    height: 400px;
+.settings-panel {
+  background: white;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 250px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideDown 0.3s ease;
+}
+
+.settings-tabs {
+  display: flex;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 0.5rem;
+}
+
+.tab-btn {
+  background: none !important;
+  border: none !important;
+  border-bottom: 2px solid transparent !important;
+  border-radius: 0 !important;
+  padding: 0.5rem !important;
+  width: auto !important;
+  height: auto !important;
+  font-size: 0.8rem !important;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--secondary-text) !important;
+  box-shadow: none !important;
+}
+
+.tab-btn.active {
+  border-bottom-color: var(--primary-color) !important;
+  color: var(--primary-color) !important;
+}
+
+.tab-content {
+  display: none;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.tab-content.active {
+  display: flex;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.settings-group label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--secondary-text);
+}
+
+.settings-group input[type="color"],
+.settings-group select {
+  width: 100%;
+  height: 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.settings-group input[type="range"] {
   width: 100%;
 }
 
-.stack-card {
-    position: absolute;
-    width: 80%;
-    height: 100%;
-    border-radius: var(--radius-card);
-    border: 2px solid #000;
-    box-shadow: var(--shadow-hard);
-    left: 10%;
-    transform: rotate(-3deg);
-    background-size: cover;
+.settings-group .btn-small {
+  padding: 4px 8px;
+  font-size: 0.7rem;
+  background: #f1f2f6;
+  border: 1px solid #dfe4ea;
+  border-radius: 4px;
+  cursor: pointer;
 }
 
-/* Forms */
-.form-control {
-    border: 2px solid #000;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    font-weight: 500;
-    background: #f8f9fa;
-}
-
-.form-control:focus {
-    box-shadow: 4px 4px 0 var(--color-primary);
-    border-color: #000;
-    background: #fff;
-}
-
-/* Animations */
-.animate-up {
-    opacity: 0;
-    transform: translateY(30px);
-    animation: fadeUp 0.8s ease forwards;
-}
-
-.delay-100 { animation-delay: 0.1s; }
-.delay-200 { animation-delay: 0.2s; }
-
-@keyframes fadeUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Social */
-.social-links a {
-    transition: transform 0.2s;
-    display: inline-block;
-}
-.social-links a:hover {
-    transform: scale(1.2) rotate(10deg);
-    color: var(--color-accent) !important;
-}
-
-/* Responsive */
-@media (max-width: 991px) {
-    .rotate-divider {
-        transform: rotate(0);
-        margin-top: 0;
-        margin-bottom: 2rem;
-    }
-    
-    .hero-section {
-        padding-top: 120px;
+.container {
+  max-width: 500px;
+  width: 90%;
   text-align: center;
-        min-height: auto;
-        padding-bottom: 100px;
+  padding: 2.5rem 2rem;
+  border-radius: 20px;
+  background: var(--popup-bg);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  position: relative;
 }
 
-    .display-1 { font-size: 3.5rem; }
-    
-    .blob-1 { width: 300px; height: 300px; right: -20%; }
-    .blob-2 { width: 300px; height: 300px; left: -20%; }
+h1.p1-title {
+  font-size: var(--p1-title-size);
+  font-family: var(--p1-title-font), var(--font-family);
+  color: var(--p1-title-color);
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  letter-spacing: -0.5px;
+}
+
+.image-preview-container {
+  width: 100%;
+  height: auto; min-height: 200px; max-height: 400px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 2px solid rgba(0,0,0,0.05);
+  border-radius: var(--image-radius);
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-preview-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; max-height: 400px;
+}
+
+.button-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+  align-items: center;
+  margin-top: 2rem;
+  position: relative;
+  min-height: 80px;
+}
+
+.btn {
+  padding: 1.125rem 2.625rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.1s ease, font-size 0.2s ease, background-color 0.2s ease;
+  white-space: nowrap;
+}
+
+.btn:active {
+  transform: scale(0.9) !important;
+}
+
+.btn-yes {
+  background-color: var(--yes-btn-color);
+  color: white;
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
+}
+
+.btn-yes:hover {
+  filter: brightness(0.9);
+}
+
+.btn-no {
+  background-color: var(--no-btn-color);
+  color: var(--text-color);
+  position: relative;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.btn-no:hover {
+  filter: brightness(0.95);
+}
+
+#success-message {
+  display: none;
+  animation: fadeIn 0.8s ease forwards;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.success-text {
+  font-size: var(--p2-text-size);
+  font-family: var(--p2-text-font), var(--font-family);
+  color: var(--p2-text-color);
+  line-height: 1.6;
+  font-weight: 700;
+  margin-bottom: 0.5rem;
+}
+
+.redirect-hint {
+  margin-top: 2rem;
+  font-size: var(--p2-hint-size);
+  font-family: var(--p2-hint-font), var(--font-family);
+  color: var(--p2-hint-color);
+  font-style: italic;
+}
+
+#image-input, #bg-image-input {
+  display: none;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #eee;
+  margin: 0.5rem 0;
 }

assets/js/main.js

@@ -1,73 +1,330 @@
 document.addEventListener('DOMContentLoaded', () => {
+    const noBtn = document.getElementById('no-btn');
+    const yesBtn = document.getElementById('yes-btn');
+    const proposalBox = document.getElementById('proposal-box');
+    const successBox = document.getElementById('success-message');
+    const lockBtn = document.getElementById('lock-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const settingsToggle = document.getElementById('settings-toggle');
+    const settingsPanel = document.getElementById('settings-panel');
+    const bgColorPicker = document.getElementById('bg-color-picker');
+    const popupColorPicker = document.getElementById('popup-color-picker');
+    const bgImageInput = document.getElementById('bg-image-input');
+    const removeBgBtn = document.getElementById('remove-bg-btn');
+    const imageRadiusPicker = document.getElementById('image-radius-picker');
+    const previewPage2Toggle = document.getElementById('preview-page2-toggle');
     
-    // Smooth scrolling for navigation links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function (e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            if (targetId === '#') return;
+    let yesScale = 1;
+    let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
 
-            const targetElement = document.querySelector(targetId);
-            if (targetElement) {
-                // Close mobile menu if open
-                const navbarToggler = document.querySelector('.navbar-toggler');
-                const navbarCollapse = document.querySelector('.navbar-collapse');
-                if (navbarCollapse.classList.contains('show')) {
-                    navbarToggler.click();
-                }
+    // Audio Context for sounds
+    const AudioCtx = window.AudioContext || window.webkitAudioContext;
+    let audioCtx = null;
 
-                // Scroll with offset
-                const offset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - offset;
+    function playSound(type) {
+        if (!audioCtx) audioCtx = new AudioCtx();
+        const osc = audioCtx.createOscillator();
+        const gain = audioCtx.createGain();
         
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: "smooth"
-                });
-            }
-        });
-    });
+        osc.connect(gain);
+        gain.connect(audioCtx.destination);
         
-    // Navbar scroll effect
-    const navbar = document.querySelector('.navbar');
-    window.addEventListener('scroll', () => {
-        if (window.scrollY > 50) {
-            navbar.classList.add('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.remove('bg-transparent');
+        const now = audioCtx.currentTime;
+        
+        if (type === 'happy') {
+            // Happy sound: Arpeggio
+            osc.type = 'sine';
+            osc.frequency.setValueAtTime(523.25, now); // C5
+            osc.frequency.exponentialRampToValueAtTime(880, now + 0.1); // A5
+            gain.gain.setValueAtTime(0.3, now);
+            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
+            osc.start(now);
+            osc.stop(now + 0.3);
         } else {
-            navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white');
-            navbar.classList.add('bg-transparent');
+            // Less happy sound: Low thud
+            osc.type = 'triangle';
+            osc.frequency.setValueAtTime(150, now);
+            osc.frequency.exponentialRampToValueAtTime(40, now + 0.2);
+            gain.gain.setValueAtTime(0.3, now);
+            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
+            osc.start(now);
+            osc.stop(now + 0.2);
+        }
+    }
+
+    // Settings Toggle
+    if (settingsToggle) {
+        settingsToggle.addEventListener('click', () => {
+            settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
+        });
+    }
+
+    // Tabs logic
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const tab = btn.dataset.tab;
+            tabBtns.forEach(b => b.classList.remove('active'));
+            tabContents.forEach(c => c.classList.remove('active'));
+            btn.classList.add('active');
+            document.getElementById(`tab-${tab}`).classList.add('active');
+        });
+    });
+
+    // Preview Page 2 Toggle
+    if (previewPage2Toggle) {
+        previewPage2Toggle.addEventListener('change', (e) => {
+            if (e.target.checked) {
+                proposalBox.style.display = 'none';
+                successBox.style.display = 'block';
+            } else {
+                proposalBox.style.display = 'block';
+                successBox.style.display = 'none';
+            }
+        });
+    }
+
+    // Image Radius
+    if (imageRadiusPicker) {
+        imageRadiusPicker.addEventListener('input', (e) => {
+            document.documentElement.style.setProperty('--image-radius', `${e.target.value}px`);
+        });
+        imageRadiusPicker.addEventListener('change', (e) => {
+            saveSetting('image_radius', `${e.target.value}px`);
+        });
+    }
+
+    // Generic Setting Inputs
+    const settingInputs = document.querySelectorAll('.setting-input');
+    settingInputs.forEach(input => {
+        const key = input.dataset.key;
+        
+        input.addEventListener('input', (e) => {
+            let value = e.target.value;
+            
+            // Handle Text Updates
+            if (key === 'p1_title_text') {
+                document.querySelector('.p1-title').textContent = value;
+            } else if (key === 'p2_line1_text') {
+                document.querySelector('.p2-line1').textContent = value;
+            } else if (key === 'p2_line2_text') {
+                document.querySelector('.p2-line2').textContent = value;
+            } else if (key === 'p2_hint_text') {
+                document.querySelector('.redirect-hint').textContent = value;
+            }
+            
+            // Handle CSS Variable Updates
+            let cssKey = key.replace(/_/g, '-');
+            if (input.type === 'range') {
+                if (key.includes('size')) value += 'rem';
+                else if (key.includes('radius')) value += 'px';
+            }
+            document.documentElement.style.setProperty(`--${cssKey}`, value);
+        });
+
+        input.addEventListener('change', (e) => {
+            let value = e.target.value;
+            if (input.type === 'range') {
+                if (key.includes('size')) value += 'rem';
+                else if (key.includes('radius')) value += 'px';
+            }
+            saveSetting(key, value);
+        });
+    });
+
+    function saveSetting(key, value) {
+        const formData = new FormData();
+        formData.append('action', 'update_setting');
+        formData.append('key', key);
+        formData.append('value', value);
+        return fetch('api/save_settings.php', { method: 'POST', body: formData });
+    }
+
+    // Color Pickers
+    if (bgColorPicker) {
+        bgColorPicker.addEventListener('input', (e) => {
+            document.documentElement.style.setProperty('--bg-color', e.target.value);
+        });
+        bgColorPicker.addEventListener('change', (e) => {
+            const formData = new FormData();
+            formData.append('action', 'update_bg_color');
+            formData.append('color', e.target.value);
+            fetch('api/save_settings.php', { method: 'POST', body: formData });
+        });
+    }
+
+    if (popupColorPicker) {
+        popupColorPicker.addEventListener('input', (e) => {
+            document.documentElement.style.setProperty('--popup-bg', e.target.value);
+        });
+        popupColorPicker.addEventListener('change', (e) => {
+            const formData = new FormData();
+            formData.append('action', 'update_popup_color');
+            formData.append('color', e.target.value);
+            fetch('api/save_settings.php', { method: 'POST', body: formData });
+        });
+    }
+
+    // Background Image Upload
+    if (bgImageInput) {
+        bgImageInput.addEventListener('change', function() {
+            const file = this.files[0];
+            if (file) {
+                const formData = new FormData();
+                formData.append('action', 'upload_bg_image');
+                formData.append('image', file);
+
+                fetch('api/save_settings.php', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        document.documentElement.style.setProperty('--bg-image', `url('${data.path}?t=${new Date().getTime()}')`);
+                        location.reload(); // Reload to update the "Remove" button visibility
+                    } else {
+                        alert(data.error || 'Failed to upload background image');
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('An error occurred during upload.');
+                });
+            }
+        });
+    }
+
+    if (removeBgBtn) {
+        removeBgBtn.addEventListener('click', () => {
+            const formData = new FormData();
+            formData.append('action', 'remove_bg_image');
+            fetch('api/save_settings.php', { method: 'POST', body: formData })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    document.documentElement.style.setProperty('--bg-image', 'none');
+                    location.reload();
+                }
+            });
+        });
+    }
+
+    // Lock/Unlock Toggle
+    lockBtn.addEventListener('click', () => {
+        const newLockedState = !isLocked;
+        const formData = new FormData();
+        formData.append('action', 'toggle_lock');
+        formData.append('lock', newLockedState);
+
+        fetch('api/save_settings.php', {
+            method: 'POST',
+            body: formData
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                location.reload();
+            }
+        });
+    });
+
+    // Reset Experience
+    resetBtn.addEventListener('click', () => {
+        if (confirm('Reset experience to page 1? (Positions and sizes will be reset)')) {
+            const formData = new FormData();
+            formData.append('action', 'reset');
+
+            fetch('api/save_settings.php', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    location.reload();
+                }
+            });
         }
     });
 
-    // Intersection Observer for fade-up animations
-    const observerOptions = {
-        threshold: 0.1,
-        rootMargin: "0px 0px -50px 0px"
-    };
+    // "No" Button Dodging Logic
+    const dodgeThreshold = 100; // pixels
 
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-up');
-                entry.target.style.opacity = "1";
-                observer.unobserve(entry.target); // Only animate once
+    document.addEventListener('mousemove', (e) => {
+        if (!noBtn || (successBox && successBox.style.display === 'block') || (previewPage2Toggle && previewPage2Toggle.checked)) return;
+
+        const rect = noBtn.getBoundingClientRect();
+        const btnCenterX = rect.left + rect.width / 2;
+        const btnCenterY = rect.top + rect.height / 2;
+
+        const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY);
+
+        if (distance < dodgeThreshold) {
+            const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX);
+            const moveDist = dodgeThreshold - distance + 20;
+
+            let newX = rect.left - Math.cos(angle) * moveDist;
+            let newY = rect.top - Math.sin(angle) * moveDist;
+
+            // Keep within viewport bounds
+            const padding = 20;
+            newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX));
+            newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY));
+
+            noBtn.style.position = 'fixed';
+            noBtn.style.left = `${newX}px`;
+            noBtn.style.top = `${newY}px`;
+            noBtn.style.margin = '0';
         }
     });
-    }, observerOptions);
 
-    // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation)
-    // For now, let's just make sure the hero animations run. 
-    // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here.
-    // Given the request, the CSS animation I added runs on load for Hero. 
-    // Let's make the project cards animate in.
-    
-    const projectCards = document.querySelectorAll('.project-card');
-    projectCards.forEach((card, index) => {
-        card.style.opacity = "0";
-        card.style.animationDelay = `${index * 0.1}s`;
-        observer.observe(card);
+    // "No" Click Logic
+    if (noBtn) {
+        noBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            playSound('sad');
+            yesScale += 0.15;
+            yesBtn.style.transform = `scale(${yesScale})`;
         });
+    }
 
+    // "Yes" Click Logic
+    if (yesBtn) {
+        yesBtn.addEventListener('click', () => {
+            playSound('happy');
+            proposalBox.style.display = 'none';
+            successBox.style.display = 'block';
+            
+            // Hide controls during celebration
+            document.querySelector('.admin-controls').style.display = 'none';
+
+            // Confetti effect
+            const duration = 15 * 1000;
+            const animationEnd = Date.now() + duration;
+            const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+
+            function randomInRange(min, max) {
+                return Math.random() * (max - min) + min;
+            }
+
+            const interval = setInterval(function() {
+                const timeLeft = animationEnd - Date.now();
+
+                if (timeLeft <= 0) {
+                    return clearInterval(interval);
+                }
+
+                const particleCount = 50 * (timeLeft / duration);
+                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
+                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
+            }, 250);
+
+            // Redirect after 15s
+            setTimeout(() => {
+                window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+            }, 15000);
+        });
+    }
 });

db/migrations/001_create_settings.sql

@@ -0,0 +1,2 @@
+CREATE TABLE IF NOT EXISTS settings (id INT AUTO_INCREMENT PRIMARY KEY, setting_key VARCHAR(255) UNIQUE NOT NULL, setting_value TEXT);
+INSERT IGNORE INTO settings (setting_key, setting_value) VALUES ('valentine_image', ''), ('is_locked', '0');

db/migrations/002_add_background_settings.sql

@@ -0,0 +1,2 @@
+INSERT IGNORE INTO settings (setting_key, setting_value) VALUES ('bg_color', '#ffe4e6'), ('bg_image', ''), ('popup_color', '#ffccd5');
+UPDATE settings SET setting_value = 'assets/pasted-20260206-164030-456a591e.jpg' WHERE setting_key = 'valentine_image';

db/migrations/003_add_text_and_image_settings.sql

@@ -0,0 +1,12 @@
+INSERT INTO settings (setting_key, setting_value) VALUES 
+('p1_title_color', '#e63946'),
+('p1_title_size', '1.75rem'),
+('p1_title_font', 'Inter'),
+('p2_text_color', '#e63946'),
+('p2_text_size', '1.25rem'),
+('p2_text_font', 'Inter'),
+('p2_hint_color', '#636e72'),
+('p2_hint_size', '0.85rem'),
+('p2_hint_font', 'Inter'),
+('image_radius', '12px')
+ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);

db/migrations/004_add_text_content_settings.sql

@@ -0,0 +1,6 @@
+-- Add text content settings
+INSERT IGNORE INTO settings (setting_key, setting_value) VALUES 
+('p1_title_text', 'Gvantsa, would you be my valentine?'),
+('p2_line1_text', 'Congratulations, you are now Sam\'s Valentine! ❤️'),
+('p2_line2_text', 'He is so incredibly lucky to have someone in his life who would click yes.'),
+('p2_hint_text', 'Redirecting you to a special surprise in 15 seconds...');

db/migrations/005_add_button_color_settings.sql

@@ -0,0 +1,2 @@
+INSERT INTO settings (setting_key, setting_value) VALUES ('yes_btn_color', '#e63946') ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);
+INSERT INTO settings (setting_key, setting_value) VALUES ('no_btn_color', '#ffffff') ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);

index.php

@@ -1,150 +1,248 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/db/config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Fetch settings
+$stmt = db()->prepare("SELECT setting_key, setting_value FROM settings");
+$stmt->execute();
+$settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
+
+$valentineImage = $settings['valentine_image'] ?: 'assets/pasted-20260206-164030-456a591e.jpg';
+$isLocked = ($settings['is_locked'] ?? '0') === '1';
+$bgColor = $settings['bg_color'] ?? '#ffe4e6';
+$bgImage = $settings['bg_image'] ?? '';
+$popupColor = $settings['popup_color'] ?? '#ffccd5';
+
+// New settings
+$p1TitleColor = $settings['p1_title_color'] ?? '#e63946';
+$p1TitleSize = $settings['p1_title_size'] ?? '1.75rem';
+$p1TitleFont = $settings['p1_title_font'] ?? 'Inter';
+$p1TitleText = $settings['p1_title_text'] ?? 'Gvantsa, would you be my valentine?';
+
+$p2TextColor = $settings['p2_text_color'] ?? '#e63946';
+$p2TextSize = $settings['p2_text_size'] ?? '1.25rem';
+$p2TextFont = $settings['p2_text_font'] ?? 'Inter';
+$p2Line1Text = $settings['p2_line1_text'] ?? "Congratulations, you are now Sam's Valentine! ❤️";
+$p2Line2Text = $settings['p2_line2_text'] ?? 'He is so incredibly lucky to have someone in his life who would click yes.';
+
+$p2HintColor = $settings['p2_hint_color'] ?? '#636e72';
+$p2HintSize = $settings['p2_hint_size'] ?? '0.85rem';
+$p2HintFont = $settings['p2_hint_font'] ?? 'Inter';
+$p2HintText = $settings['p2_hint_text'] ?? 'Redirecting you to a special surprise in 15 seconds...';
+
+$imageRadius = $settings['image_radius'] ?? '12px';
+$yesBtnColor = $settings['yes_btn_color'] ?? '#e63946';
+$noBtnColor = $settings['no_btn_color'] ?? '#ffffff';
+
+$fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier New', 'Brush Script MT', 'Comic Sans MS'];
 ?>
 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
+    <title><?= htmlspecialchars($p1TitleText) ?></title>
     <?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
+    $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
     ?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
     <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">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
     <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;
+            --bg-color: <?= htmlspecialchars($bgColor) ?>;
+            --popup-bg: <?= htmlspecialchars($popupColor) ?>;
+            --bg-image: <?= $bgImage ? "url('" . htmlspecialchars($bgImage) . "')" : 'none' ?>;
+            
+            --p1-title-color: <?= htmlspecialchars($p1TitleColor) ?>;
+            --p1-title-size: <?= htmlspecialchars($p1TitleSize) ?>;
+            --p1-title-font: <?= htmlspecialchars($p1TitleFont) ?>;
+            
+            --p2-text-color: <?= htmlspecialchars($p2TextColor) ?>;
+            --p2-text-size: <?= htmlspecialchars($p2TextSize) ?>;
+            --p2-text-font: <?= htmlspecialchars($p2TextFont) ?>;
+            
+            --p2-hint-color: <?= htmlspecialchars($p2HintColor) ?>;
+            --p2-hint-size: <?= htmlspecialchars($p2HintSize) ?>;
+            --p2-hint-font: <?= htmlspecialchars($p2HintFont) ?>;
+            
+            --image-radius: <?= htmlspecialchars($imageRadius) ?>;
+            --yes-btn-color: <?= htmlspecialchars($yesBtnColor) ?>;
+            --no-btn-color: <?= htmlspecialchars($noBtnColor) ?>;
         }
     </style>
 </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="<?= $isLocked ? 'state-locked' : '' ?>">
+
+    <div class="admin-controls">
+        <div class="control-buttons">
+            <button id="settings-toggle" title="Settings" style="<?= $isLocked ? 'display:none' : '' ?>">
+                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33 1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82 1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+            </button>
+            <button id="lock-btn" title="<?= $isLocked ? 'Unlock' : 'Lock' ?> changes">
+                <?php if ($isLocked): ?>
+                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                <?php else: ?>
+                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
+                <?php endif; ?>
+            </button>
+            <button id="reset-btn" title="Reset Experience">
+                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
+            </button>
         </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 id="settings-panel" class="settings-panel" style="display: none;">
+            <div class="settings-tabs">
+                <button class="tab-btn active" data-tab="general">General</button>
+                <button class="tab-btn" data-tab="page1">Page 1</button>
+                <button class="tab-btn" data-tab="page2">Page 2</button>
             </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+            <div id="tab-general" class="tab-content active">
+                <div class="settings-group">
+                    <label>Background Color</label>
+                    <input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Pop-up Color</label>
+                    <input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Background Image</label>
+                    <button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
+                    <?php if ($bgImage): ?>
+                        <button class="btn-small" id="remove-bg-btn" style="margin-top:2px">Remove</button>
+                    <?php endif; ?>
+                    <input type="file" id="bg-image-input" accept="image/*">
+                </div>
+                <div class="settings-group">
+                    <label>Image Rounding (px)</label>
+                    <input type="range" id="image-radius-picker" min="0" max="100" value="<?= (int)str_replace('px', '', $imageRadius) ?>">
+                </div>
+            </div>
+
+            <div id="tab-page1" class="tab-content">
+                <div class="settings-group">
+                    <label>Title Text</label>
+                    <input type="text" class="setting-input" data-key="p1_title_text" value="<?= htmlspecialchars($p1TitleText) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Title Color</label>
+                    <input type="color" class="setting-input" data-key="p1_title_color" value="<?= htmlspecialchars($p1TitleColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Title Size (rem)</label>
+                    <input type="range" class="setting-input" data-key="p1_title_size" min="1" max="5" step="0.1" value="<?= (float)str_replace('rem', '', $p1TitleSize) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Title Font</label>
+                    <select class="setting-input" data-key="p1_title_font">
+                        <?php foreach ($fonts as $font): ?>
+                            <option value="<?= $font ?>" <?= $p1TitleFont === $font ? 'selected' : '' ?>><?= $font ?></option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+                <hr>
+                <div class="settings-group">
+                    <label>Yes Button Color</label>
+                    <input type="color" class="setting-input" data-key="yes_btn_color" value="<?= htmlspecialchars($yesBtnColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>No Button Color</label>
+                    <input type="color" class="setting-input" data-key="no_btn_color" value="<?= htmlspecialchars($noBtnColor) ?>">
+                </div>
+            </div>
+
+            <div id="tab-page2" class="tab-content">
+                <div class="settings-group">
+                    <label style="display: flex; align-items: center; gap: 5px;">
+                        <input type="checkbox" id="preview-page2-toggle"> Preview Page 2
+                    </label>
+                </div>
+                <div class="settings-group">
+                    <label>Line 1 Text</label>
+                    <input type="text" class="setting-input" data-key="p2_line1_text" value="<?= htmlspecialchars($p2Line1Text) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Line 2 Text</label>
+                    <input type="text" class="setting-input" data-key="p2_line2_text" value="<?= htmlspecialchars($p2Line2Text) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Text Color</label>
+                    <input type="color" class="setting-input" data-key="p2_text_color" value="<?= htmlspecialchars($p2TextColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Text Size (rem)</label>
+                    <input type="range" class="setting-input" data-key="p2_text_size" min="1" max="3" step="0.1" value="<?= (float)str_replace('rem', '', $p2TextSize) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Text Font</label>
+                    <select class="setting-input" data-key="p2_text_font">
+                        <?php foreach ($fonts as $font): ?>
+                            <option value="<?= $font ?>" <?= $p2TextFont === $font ? 'selected' : '' ?>><?= $font ?></option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+                <hr>
+                <div class="settings-group">
+                    <label>Hint Text</label>
+                    <input type="text" class="setting-input" data-key="p2_hint_text" value="<?= htmlspecialchars($p2HintText) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Hint Color</label>
+                    <input type="color" class="setting-input" data-key="p2_hint_color" value="<?= htmlspecialchars($p2HintColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Hint Size (rem)</label>
+                    <input type="range" class="setting-input" data-key="p2_hint_size" min="0.5" max="2" step="0.05" value="<?= (float)str_replace('rem', '', $p2HintSize) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Hint Font</label>
+                    <select class="setting-input" data-key="p2_hint_font">
+                        <?php foreach ($fonts as $font): ?>
+                            <option value="<?= $font ?>" <?= $p2HintFont === $font ? 'selected' : '' ?>><?= $font ?></option>
+                        <?php endforeach; ?>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div id="proposal-box">
+            <h1 class="p1-title"><?= htmlspecialchars($p1TitleText) ?></h1>
+            
+            <div class="image-preview-container has-image">
+                <img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
+            </div>
+
+            <div class="button-group">
+                <button id="yes-btn" class="btn btn-yes">Yes</button>
+                <button id="no-btn" class="btn btn-no">No</button>
+            </div>
+        </div>
+
+        <div id="success-message">
+            <p class="success-text p2-line1"><?= htmlspecialchars($p2Line1Text) ?></p>
+            <p class="success-text p2-line2"><?= htmlspecialchars($p2Line2Text) ?></p>
+            <div class="redirect-hint"><?= htmlspecialchars($p2HintText) ?></div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+    <script>
+        const IS_LOCKED = <?= $isLocked ? 'true' : 'false' ?>;
+    </script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>