Revert to version f0fcbb7

api/save_settings.php

@@ -5,9 +5,8 @@ header('Content-Type: application/json');
 
 $action = $_POST['action'] ?? '';
 
-if ($action === 'upload_image') {
+// Check if locked for all modifying actions except toggle_lock
-    if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
+if ($action !== 'toggle_lock' && $action !== '') {
-        // Check if locked
     $stmt = db()->prepare("SELECT setting_value FROM settings WHERE setting_key = 'is_locked'");
     $stmt->execute();
     $isLocked = $stmt->fetchColumn();
@@ -16,15 +15,21 @@ if ($action === 'upload_image') {
         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/';
-        $fileName = 'valentine_' . time() . '_' . basename($_FILES['image']['name']);
+        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 = 'valentine_image'");
+            $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'bg_image'");
             $stmt->execute([$webPath]);
             
             echo json_encode(['success' => true, 'path' => $webPath]);
@@ -34,21 +39,44 @@ if ($action === 'upload_image') {
     } 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 === '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') {
-    // We don't necessarily reset the image here unless specified, 
+    $stmt = db()->prepare("UPDATE settings SET setting_value = 'assets/pasted-20260206-164030-456a591e.jpg' WHERE setting_key = 'valentine_image'");
-    // but the user said "reset the experience". 
-    // Maybe it just clears the locked state and image? 
-    // Usually "reset experience" for the user means restart the proposal.
-    // However, if they want to reset the setup, we can clear the image.
-    $stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'valentine_image'");
     $stmt->execute();
     $stmt = db()->prepare("UPDATE settings SET setting_value = '0' WHERE setting_key = 'is_locked'");
     $stmt->execute();
+    $stmt = db()->prepare("UPDATE settings SET setting_value = '#ffe4e6' WHERE setting_key = 'bg_color'");
+    $stmt->execute();
+    $stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
+    $stmt->execute();
+    $stmt = db()->prepare("UPDATE settings SET setting_value = '#ffccd5' WHERE setting_key = 'popup_color'");
+    $stmt->execute();
     echo json_encode(['success' => true]);
 } else {
     echo json_encode(['success' => false, 'error' => 'Invalid action.']);

assets/css/custom.css

@@ -1,7 +1,8 @@
 :root {
   --primary-color: #e63946;
-  --bg-color: #ffe4e6; /* Light Pink */
+  --bg-color: #ffe4e6; /* Default Light Pink */
-  --popup-bg: #ffccd5; /* Light Red */
+  --popup-bg: #ffccd5; /* Default Light Red */
+  --bg-image: none;
   --text-color: #2d3436;
   --secondary-text: #636e72;
   --border-color: rgba(0,0,0,0.05);
@@ -10,6 +11,10 @@
 
 body {
   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;
@@ -25,8 +30,15 @@ body {
   top: 1rem;
   right: 1rem;
   display: flex;
+  flex-direction: column;
   gap: 0.5rem;
   z-index: 100;
+  align-items: flex-end;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 0.5rem;
 }
 
 .admin-controls button {
@@ -50,6 +62,53 @@ body {
   transform: scale(1.1);
 }
 
+.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: 200px;
+  animation: slideDown 0.3s ease;
+}
+
+@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"] {
+  width: 100%;
+  height: 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.settings-group .btn-small {
+  padding: 4px 8px;
+  font-size: 0.7rem;
+  background: #f1f2f6;
+  border: 1px solid #dfe4ea;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 .container {
   max-width: 500px;
   width: 90%;
@@ -74,7 +133,7 @@ h1 {
   width: 100%;
   height: 250px;
   background-color: rgba(255, 255, 255, 0.5);
-  border: 2px dashed rgba(0,0,0,0.1);
+  border: 2px solid rgba(0,0,0,0.05);
   border-radius: 12px;
   margin-bottom: 1.5rem;
   display: flex;
@@ -82,26 +141,12 @@ h1 {
   align-items: center;
   overflow: hidden;
   position: relative;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.state-locked .image-preview-container {
-  cursor: default;
-  border-style: solid;
 }
 
 .image-preview-container img {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  display: none;
-}
-
-.image-preview-container .placeholder-text {
-  color: var(--secondary-text);
-  font-size: 0.9rem;
-  padding: 1rem;
 }
 
 .button-group {
@@ -168,6 +213,6 @@ h1 {
   font-style: italic;
 }
 
-#image-input {
+#image-input, #bg-image-input {
   display: none;
 }

assets/js/main.js

@@ -1,28 +1,59 @@
 document.addEventListener('DOMContentLoaded', () => {
     const noBtn = document.getElementById('no-btn');
     const yesBtn = document.getElementById('yes-btn');
-    const imageInput = document.getElementById('image-input');
-    const imagePreview = document.getElementById('preview-img');
-    const placeholderText = document.querySelector('.placeholder-text');
     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');
     
     let yesScale = 1;
     let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
 
-    // Image Upload Logic
+    // Settings Toggle
-    document.querySelector('.image-preview-container').addEventListener('click', () => {
+    if (settingsToggle) {
-        if (isLocked) return;
+        settingsToggle.addEventListener('click', () => {
-        imageInput.click();
+            settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
         });
+    }
 
-    imageInput.addEventListener('change', function() {
+    // 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_image');
+                formData.append('action', 'upload_bg_image');
                 formData.append('image', file);
 
                 fetch('api/save_settings.php', {
@@ -32,12 +63,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                    imagePreview.src = data.path + '?t=' + new Date().getTime();
+                        document.documentElement.style.setProperty('--bg-image', `url('${data.path}?t=${new Date().getTime()}')`);
-                    imagePreview.style.display = 'block';
+                        location.reload(); // Reload to update the "Remove" button visibility
-                    placeholderText.style.display = 'none';
-                    document.querySelector('.image-preview-container').classList.add('has-image');
                     } else {
-                    alert(data.error || 'Failed to upload image');
+                        alert(data.error || 'Failed to upload background image');
                     }
                 })
                 .catch(error => {
@@ -46,6 +75,22 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
             }
         });
+    }
+
+    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', () => {
@@ -61,9 +106,6 @@ document.addEventListener('DOMContentLoaded', () => {
         .then(response => response.json())
         .then(data => {
             if (data.success) {
-                isLocked = data.locked;
-                document.body.classList.toggle('state-locked', isLocked);
-                // Update icon (re-fetch or just refresh page is easier, but let's just refresh)
                 location.reload();
             }
         });
@@ -71,7 +113,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Reset Experience
     resetBtn.addEventListener('click', () => {
-        if (confirm('Reset everything? This will clear the image and unlock changes.')) {
+        if (confirm('Reset everything to defaults?')) {
             const formData = new FormData();
             formData.append('action', 'reset');
 
@@ -92,7 +134,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const dodgeThreshold = 100; // pixels
 
     document.addEventListener('mousemove', (e) => {
-        if (successBox.style.display === 'block') return;
+        if (!noBtn || (successBox && successBox.style.display === 'block')) return;
 
         const rect = noBtn.getBoundingClientRect();
         const btnCenterX = rect.left + rect.width / 2;
@@ -120,15 +162,16 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // "No" Click Logic
+    if (noBtn) {
         noBtn.addEventListener('click', (e) => {
             e.preventDefault();
             yesScale += 0.15;
             yesBtn.style.transform = `scale(${yesScale})`;
-        // We don't change font-size via style attribute directly to avoid layout jumps if possible, 
-        // but it's what was requested ("yes button gets slightly bigger")
         });
+    }
 
     // "Yes" Click Logic
+    if (yesBtn) {
         yesBtn.addEventListener('click', () => {
             proposalBox.style.display = 'none';
             successBox.style.display = 'block';
@@ -162,4 +205,5 @@ document.addEventListener('DOMContentLoaded', () => {
                 window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
             }, 15000);
         });
+    }
 });

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';

index.php

@@ -7,8 +7,11 @@ $stmt = db()->prepare("SELECT setting_key, setting_value FROM settings");
 $stmt->execute();
 $settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
 
-$valentineImage = $settings['valentine_image'] ?? '';
+$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';
 ?>
 <!doctype html>
 <html lang="en">
@@ -32,10 +35,21 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <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: <?= htmlspecialchars($bgColor) ?>;
+            --popup-bg: <?= htmlspecialchars($popupColor) ?>;
+            --bg-image: <?= $bgImage ? "url('" . htmlspecialchars($bgImage) . "')" : 'none' ?>;
+        }
+    </style>
 </head>
 <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>
@@ -48,15 +62,33 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
             </button>
         </div>
 
+        <div id="settings-panel" class="settings-panel" style="display: none;">
+            <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>
+    </div>
+
     <div class="container">
         <div id="proposal-box">
             <h1>Gvantsa, would you be my valentine?</h1>
             
-            <div class="image-preview-container <?= $valentineImage ? 'has-image' : '' ?>">
+            <div class="image-preview-container has-image">
-                <span class="placeholder-text" style="<?= $valentineImage ? 'display:none' : '' ?>">Click to upload our photo ❤️</span>
+                <img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
-                <img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image" style="<?= $valentineImage ? 'display:block' : '' ?>">
             </div>
-            <input type="file" id="image-input" accept="image/*">
 
             <div class="button-group">
                 <button id="yes-btn" class="btn btn-yes">Yes</button>