Valentine 10.0

2026-02-06 18:30:56 +00:00 · 2026-02-06 18:30:56 +00:00 · de7a8ef3e0
commit de7a8ef3e0
parent db2b036408
6 changed files with 339 additions and 43 deletions
--- a/api/save_settings.php
+++ b/api/save_settings.php
@ -57,6 +57,22 @@ if ($action === 'upload_bg_image') {
    } 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'
+    ];
+    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();
@ -67,16 +83,8 @@ if ($action === 'upload_bg_image') {
    $stmt->execute([$lockValue]);
    echo json_encode(['success' => true, 'locked' => $lockValue === '1']);
 } elseif ($action === 'reset') {
-    $stmt = db()->prepare("UPDATE settings SET setting_value = 'assets/pasted-20260206-164030-456a591e.jpg' 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();
+    // 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.']);
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -7,6 +7,20 @@
  --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;
 }

 body {
@ -71,10 +85,46 @@ body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
-  width: 200px;
+  width: 250px;
  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); }
@ -92,7 +142,8 @@ body {
  color: var(--secondary-text);
 }

-.settings-group input[type="color"] {
+.settings-group input[type="color"],
+.settings-group select {
  width: 100%;
  height: 30px;
  border: 1px solid var(--border-color);
@ -100,6 +151,10 @@ body {
  cursor: pointer;
 }

+.settings-group input[type="range"] {
+  width: 100%;
+}
+
 .settings-group .btn-small {
  padding: 4px 8px;
  font-size: 0.7rem;
@ -121,12 +176,13 @@ body {
  position: relative;
 }

-h1 {
-  font-size: 1.75rem;
+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;
-  color: var(--primary-color);
 }

 .image-preview-container {
@ -134,7 +190,7 @@ h1 {
  height: 250px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0,0,0,0.05);
-  border-radius: 12px;
+  border-radius: var(--image-radius);
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
@ -199,20 +255,28 @@ h1 {
 }

 .success-text {
-  font-size: 1.25rem;
+  font-size: var(--p2-text-size);
+  font-family: var(--p2-text-font), var(--font-family);
+  color: var(--p2-text-color);
  line-height: 1.6;
-  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 0.5rem;
 }

 .redirect-hint {
  margin-top: 2rem;
-  font-size: 0.85rem;
-  color: var(--secondary-text);
+  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;
 }
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -11,6 +11,8 @@ document.addEventListener('DOMContentLoaded', () => {
    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');
    
    let yesScale = 1;
    let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
@ -22,6 +24,87 @@ document.addEventListener('DOMContentLoaded', () => {
        });
    }

+    // 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
+            if (input.type === 'range') {
+                if (key.includes('size')) value += 'rem';
+                else if (key.includes('radius')) value += 'px';
+            }
+            document.documentElement.style.setProperty(`--${key.replace(/_/g, '-')}`, 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) => {
@ -113,7 +196,7 @@ document.addEventListener('DOMContentLoaded', () => {

    // Reset Experience
    resetBtn.addEventListener('click', () => {
-        if (confirm('Reset everything to defaults?')) {
+        if (confirm('Reset experience to page 1? (Positions and sizes will be reset)')) {
            const formData = new FormData();
            formData.append('action', 'reset');

@ -134,7 +217,7 @@ document.addEventListener('DOMContentLoaded', () => {
    const dodgeThreshold = 100; // pixels

    document.addEventListener('mousemove', (e) => {
-        if (!noBtn || (successBox && successBox.style.display === 'block')) return;
+        if (!noBtn || (successBox && successBox.style.display === 'block') || (previewPage2Toggle && previewPage2Toggle.checked)) return;

        const rect = noBtn.getBoundingClientRect();
        const btnCenterX = rect.left + rect.width / 2;
@ -206,4 +289,4 @@ document.addEventListener('DOMContentLoaded', () => {
            }, 15000);
        });
    }
-});
+});
--- a/db/migrations/003_add_text_and_image_settings.sql
+++ b/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);
--- a/db/migrations/004_add_text_content_settings.sql
+++ b/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...');
--- a/index.php
+++ b/index.php
@ -12,15 +12,36 @@ $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';
+
+$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>Gvantsa, would you be my valentine?</title>
+    <title><?= htmlspecialchars($p1TitleText) ?></title>
    <?php
-    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal for Gvantsa.';
+    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
    $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
    ?>
    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
@ -40,6 +61,20 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
            --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) ?>;
        }
    </style>
 </head>
@ -63,28 +98,116 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
        </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 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>
-            <div class="settings-group">
-                <label>Pop-up Color</label>
-                <input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
+
+            <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 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 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>
+            </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>Gvantsa, would you be my valentine?</h1>
+            <h1 class="p1-title"><?= htmlspecialchars($p1TitleText) ?></h1>
            
            <div class="image-preview-container has-image">
                <img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
@ -97,9 +220,9 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
        </div>

        <div id="success-message">
-            <p class="success-text">Congratulations, you are now Sam's Valentine! ❤️</p>
-            <p class="success-text">He is so incredibly lucky to have someone in his life who would click yes.</p>
-            <div class="redirect-hint">Redirecting you to a special surprise in 15 seconds...</div>
+            <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>

@ -109,4 +232,4 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
    </script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
-</html>
+</html>