diff --git a/api/save_settings.php b/api/save_settings.php index 06ca8d4..9340e8e 100644 --- a/api/save_settings.php +++ b/api/save_settings.php @@ -5,26 +5,31 @@ header('Content-Type: application/json'); $action = $_POST['action'] ?? ''; -if ($action === 'upload_image') { - if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) { - // Check if locked - $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; - } +// 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/'; - $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,22 +39,45 @@ 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, - // 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 = 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(); echo json_encode(['success' => true]); } else { echo json_encode(['success' => false, 'error' => 'Invalid action.']); -} +} \ No newline at end of file diff --git a/assets/css/custom.css b/assets/css/custom.css index 87fbc6d..2694f50 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,7 +1,8 @@ :root { --primary-color: #e63946; - --bg-color: #ffe4e6; /* Light Pink */ - --popup-bg: #ffccd5; /* Light Red */ + --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); @@ -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; -} +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 9a9aeac..fc15cca 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,51 +1,96 @@ 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 - document.querySelector('.image-preview-container').addEventListener('click', () => { - if (isLocked) return; - imageInput.click(); - }); + // Settings Toggle + if (settingsToggle) { + settingsToggle.addEventListener('click', () => { + settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none'; + }); + } - imageInput.addEventListener('change', function() { - const file = this.files[0]; - if (file) { + // 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', 'upload_image'); - formData.append('image', file); + formData.append('action', 'update_bg_color'); + formData.append('color', e.target.value); + fetch('api/save_settings.php', { method: 'POST', body: formData }); + }); + } - 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) { - imagePreview.src = data.path + '?t=' + new Date().getTime(); - imagePreview.style.display = 'block'; - placeholderText.style.display = 'none'; - document.querySelector('.image-preview-container').classList.add('has-image'); - } else { - alert(data.error || 'Failed to upload image'); + document.documentElement.style.setProperty('--bg-image', 'none'); + location.reload(); } - }) - .catch(error => { - console.error('Error:', error); - alert('An error occurred during upload.'); }); - } - }); + }); + } // 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,46 +162,48 @@ document.addEventListener('DOMContentLoaded', () => { }); // "No" Click Logic - 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") - }); + if (noBtn) { + noBtn.addEventListener('click', (e) => { + e.preventDefault(); + yesScale += 0.15; + yesBtn.style.transform = `scale(${yesScale})`; + }); + } // "Yes" Click Logic - yesBtn.addEventListener('click', () => { - proposalBox.style.display = 'none'; - successBox.style.display = 'block'; - - // Hide controls during celebration - document.querySelector('.admin-controls').style.display = 'none'; + if (yesBtn) { + yesBtn.addEventListener('click', () => { + 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 }; + // 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); + function randomInRange(min, max) { + return Math.random() * (max - min) + min; } - 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); + const interval = setInterval(function() { + const timeLeft = animationEnd - Date.now(); - // Redirect after 15s - setTimeout(() => { - window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; - }, 15000); - }); -}); \ No newline at end of file + 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); + }); + } +}); diff --git a/assets/pasted-20260206-164030-456a591e.jpg b/assets/pasted-20260206-164030-456a591e.jpg new file mode 100644 index 0000000..ffa1e7b Binary files /dev/null and b/assets/pasted-20260206-164030-456a591e.jpg differ diff --git a/db/migrations/002_add_background_settings.sql b/db/migrations/002_add_background_settings.sql new file mode 100644 index 0000000..c13c2d8 --- /dev/null +++ b/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'; diff --git a/index.php b/index.php index 48dc4ae..3b39361 100644 --- a/index.php +++ b/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'; ?> @@ -32,31 +35,60 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1'; +
- - +
+ + + +
+ +

Gvantsa, would you be my valentine?

-
- Click to upload our photo ❤️ - Valentine Image +
+ Valentine Image
-
@@ -77,4 +109,4 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1'; - \ No newline at end of file +