From 5448d80f774827bb44953915a58f316cf0f8b813 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Fri, 6 Feb 2026 18:51:17 +0000 Subject: [PATCH] Valentine 10.5 --- api/save_settings.php | 2 +- assets/css/custom.css | 18 +++++++-- assets/js/main.js | 40 ++++++++++++++++++- .../005_add_button_color_settings.sql | 2 + index.php | 13 ++++++ 5 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 db/migrations/005_add_button_color_settings.sql diff --git a/api/save_settings.php b/api/save_settings.php index 36d9eb0..f852eae 100644 --- a/api/save_settings.php +++ b/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 = ?"); diff --git a/assets/css/custom.css b/assets/css/custom.css index 66cc55b..033b807 100644 --- a/assets/css/custom.css +++ b/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; diff --git a/assets/js/main.js b/assets/js/main.js index bd8da88..0b2f900 100644 --- a/assets/js/main.js +++ b/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'; diff --git a/db/migrations/005_add_button_color_settings.sql b/db/migrations/005_add_button_color_settings.sql new file mode 100644 index 0000000..b6e9f1f --- /dev/null +++ b/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); diff --git a/index.php b/index.php index 683ee9a..3031c0f 100644 --- a/index.php +++ b/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: ; --image-radius: ; + --yes-btn-color: ; + --no-btn-color: ; } @@ -148,6 +152,15 @@ $fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier Ne +
+
+ + +
+
+ + +