Valentine 10.5

api/save_settings.php

@@ -64,7 +64,7 @@ if ($action === 'upload_bg_image') {
         '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'
+        'image_radius', 'yes_btn_color', 'no_btn_color'
     ];
     if (in_array($key, $allowedKeys)) {
         $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = ?");

assets/css/custom.css

@@ -21,6 +21,8 @@
   --p2-hint-font: 'Inter';
   
   --image-radius: 12px;
+  --yes-btn-color: #e63946;
+  --no-btn-color: #ffffff;
 }
 
 body {
@@ -86,6 +88,8 @@ body {
   flex-direction: column;
   gap: 0.75rem;
   width: 250px;
+  max-height: 80vh;
+  overflow-y: auto;
   animation: slideDown 0.3s ease;
 }
 
@@ -226,24 +230,32 @@ h1.p1-title {
   white-space: nowrap;
 }
 
+.btn:active {
+  transform: scale(0.9) !important;
+}
+
 .btn-yes {
-  background-color: var(--primary-color);
+  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 {
-  background-color: #d62839;
+  filter: brightness(0.9);
 }
 
 .btn-no {
-  background-color: #fff;
+  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;

assets/js/main.js

@@ -17,6 +17,41 @@ document.addEventListener('DOMContentLoaded', () => {
     let yesScale = 1;
     let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
 
+    // Audio Context for sounds
+    const AudioCtx = window.AudioContext || window.webkitAudioContext;
+    let audioCtx = null;
+
+    function playSound(type) {
+        if (!audioCtx) audioCtx = new AudioCtx();
+        const osc = audioCtx.createOscillator();
+        const gain = audioCtx.createGain();
+        
+        osc.connect(gain);
+        gain.connect(audioCtx.destination);
+        
+        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 {
+            // 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', () => {
@@ -80,11 +115,12 @@ document.addEventListener('DOMContentLoaded', () => {
             }
             
             // 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(`--${key.replace(/_/g, '-')}`, value);
+            document.documentElement.style.setProperty(`--${cssKey}`, value);
         });
 
         input.addEventListener('change', (e) => {
@@ -248,6 +284,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (noBtn) {
         noBtn.addEventListener('click', (e) => {
             e.preventDefault();
+            playSound('sad');
             yesScale += 0.15;
             yesBtn.style.transform = `scale(${yesScale})`;
         });
@@ -256,6 +293,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // "Yes" Click Logic
     if (yesBtn) {
         yesBtn.addEventListener('click', () => {
+            playSound('happy');
             proposalBox.style.display = 'none';
             successBox.style.display = 'block';
             

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

@@ -31,6 +31,8 @@ $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'];
 ?>
@@ -75,6 +77,8 @@ $fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier Ne
             --p2-hint-font: <?= htmlspecialchars($p2HintFont) ?>;
             
             --image-radius: <?= htmlspecialchars($imageRadius) ?>;
+            --yes-btn-color: <?= htmlspecialchars($yesBtnColor) ?>;
+            --no-btn-color: <?= htmlspecialchars($noBtnColor) ?>;
         }
     </style>
 </head>
@@ -148,6 +152,15 @@ $fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier Ne
                         <?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">