diff --git a/api/save_settings.php b/api/save_settings.php index be7fd69..06ca8d4 100644 --- a/api/save_settings.php +++ b/api/save_settings.php @@ -5,31 +5,26 @@ header('Content-Type: application/json'); $action = $_POST['action'] ?? ''; -// 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 ($action === 'upload_image') { if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) { - $uploadDir = __DIR__ . '/../assets/images/uploads/'; - if (!is_dir($uploadDir)) { - mkdir($uploadDir, 0775, true); + // 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; } - $fileName = 'bg_' . time() . '_' . basename($_FILES['image']['name']); + + $uploadDir = __DIR__ . '/../assets/images/uploads/'; + $fileName = 'valentine_' . 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 = 'bg_image'"); + $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'valentine_image'"); $stmt->execute([$webPath]); echo json_encode(['success' => true, 'path' => $webPath]); @@ -39,122 +34,22 @@ if ($action === 'upload_bg_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 === 'update_second_page_text_color') { - $color = $_POST['color'] ?? ''; - if (preg_match('/^#[a-f0-9]{6}$/i', $color)) { - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'second_page_text_color'"); - $stmt->execute([$color]); - echo json_encode(['success' => true]); - } else { - echo json_encode(['success' => false, 'error' => 'Invalid color format.']); - } -} elseif ($action === 'update_proposal_text_color') { - $color = $_POST['color'] ?? ''; - if (preg_match('/^#[a-f0-9]{6}$/i', $color)) { - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text_color'"); - $stmt->execute([$color]); - echo json_encode(['success' => true]); - } else { - echo json_encode(['success' => false, 'error' => 'Invalid color format.']); - } -} elseif ($action === 'update_font_family') { - $font = $_POST['font'] ?? ''; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'font_family'"); - $stmt->execute([$font]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_second_page_box_pos_y') { - $pos = $_POST['pos'] ?? '0'; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'second_page_box_pos_y'"); - $stmt->execute([$pos]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_image_border_radius') { - $radius = $_POST['radius'] ?? '12'; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'image_border_radius'"); - $stmt->execute([$radius]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_proposal_text') { - $text = $_POST['text'] ?? ''; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text'"); - $stmt->execute([$text]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_success_text_1') { - $text = $_POST['text'] ?? ''; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_1'"); - $stmt->execute([$text]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_success_text_2') { - $text = $_POST['text'] ?? ''; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_2'"); - $stmt->execute([$text]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_proposal_text_size') { - $size = $_POST['size'] ?? '2'; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text_size'"); - $stmt->execute([$size]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_success_text_1_size') { - $size = $_POST['size'] ?? '1.5'; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_1_size'"); - $stmt->execute([$size]); - echo json_encode(['success' => true]); -} elseif ($action === 'update_success_text_2_size') { - $size = $_POST['size'] ?? '0.9'; - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_2_size'"); - $stmt->execute([$size]); - echo json_encode(['success' => true]); -} 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') { - $defaults = [ - 'valentine_image' => 'assets/pasted-20260206-164030-456a591e.jpg', - 'is_locked' => '0', - 'bg_color' => '#ffe4e6', - 'bg_image' => '', - 'popup_color' => '#ffccd5', - 'font_family' => "'Inter', sans-serif", - 'second_page_text_color' => '#e63946', - 'second_page_box_pos_y' => '0', - 'image_border_radius' => '12', - 'proposal_text' => 'Gvantsa, would you be my valentine?', - 'success_text_1' => "Congratulations, you are now Sam's Valentine! ❤️", - 'success_text_2' => 'He is so incredibly lucky to have someone in his life who would click yes.', - 'proposal_text_color' => '#e63946', - 'proposal_text_size' => '2', - 'success_text_1_size' => '1.5', - 'success_text_2_size' => '0.9' - ]; - - foreach ($defaults as $key => $value) { - $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = ?"); - $stmt->execute([$value, $key]); - } - + // 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->execute(); + $stmt = db()->prepare("UPDATE settings SET setting_value = '0' WHERE setting_key = 'is_locked'"); + $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 6ebdfdc..87fbc6d 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,254 +1,173 @@ :root { - --bg-color: #ffe4e6; - --popup-bg: #ffccd5; - --bg-image: none; - --font-family: 'Inter', sans-serif; - --second-page-text-color: #e63946; - --second-page-box-pos-y: 0px; - --image-border-radius: 12px; - - --proposal-text-color: #e63946; - --proposal-text-size: 2rem; - --success-text-1-size: 1.5rem; - --success-text-2-size: 0.9rem; + --primary-color: #e63946; + --bg-color: #ffe4e6; /* Light Pink */ + --popup-bg: #ffccd5; /* Light Red */ + --text-color: #2d3436; + --secondary-text: #636e72; + --border-color: rgba(0,0,0,0.05); + --font-family: 'Inter', system-ui, -apple-system, sans-serif; } body { - margin: 0; - padding: 0; - font-family: var(--font-family); - background-color: var(--bg-color); - background-image: var(--bg-image); - background-size: cover; - background-position: center; - background-attachment: fixed; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - transition: background-color 0.3s ease; + background-color: var(--bg-color); + color: var(--text-color); + font-family: var(--font-family); + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow-x: hidden; } -.container { - width: 90%; - max-width: 500px; - text-align: center; - z-index: 1; -} - -#proposal-box, #success-message { - background-color: var(--popup-bg); - padding: 2.5rem; - border-radius: 20px; - box-shadow: 0 10px 25px rgba(0,0,0,0.1); - backdrop-filter: blur(5px); - transition: all 0.3s ease; -} - -#success-message { - display: none; - animation: fadeInScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; - transform: translateY(var(--second-page-box-pos-y)); -} - -#success-message.preview-mode { - animation: none; /* No animation for preview to make it snappier */ -} - -#success-message.preview-mode .redirect-hint { - display: none; -} - -@keyframes fadeInScale { - from { opacity: 0; transform: translateY(calc(var(--second-page-box-pos-y) + 20px)) scale(0.9); } - to { opacity: 1; transform: translateY(var(--second-page-box-pos-y)) scale(1); } -} - -h1 { - color: var(--proposal-text-color); - font-size: var(--proposal-text-size); - margin-bottom: 2rem; -} - -.image-preview-container { - width: 100%; - height: 250px; - background: #f1f5f9; - border-radius: var(--image-border-radius); - margin-bottom: 2rem; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - border: 2px dashed #cbd5e1; -} - -.image-preview-container.has-image { - border: none; -} - -.image-preview-container img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.button-group { - display: flex; - gap: 1.5rem; - justify-content: center; - align-items: center; - min-height: 60px; -} - -.btn { - padding: 0.8rem 2rem; - border: none; - border-radius: 50px; - font-weight: 700; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; - font-family: inherit; -} - -.btn:active { - transform: scale(0.95); -} - -.btn-yes { - background-color: #e63946; - color: white; - font-size: 1.1rem; - box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3); -} - -.btn-no { - background-color: #f8fafc; - color: #64748b; - border: 1px solid #e2e8f0; -} - -.success-text { - font-size: var(--success-text-1-size); - color: var(--second-page-text-color); - font-weight: 700; - margin-bottom: 1.5rem; -} - -.success-text-small { - font-size: var(--success-text-2-size); -} - -.redirect-hint { - font-size: 0.9rem; - color: #64748b; - margin-top: 2rem; - font-style: italic; -} - -/* Admin Controls */ .admin-controls { - position: fixed; - top: 20px; - right: 20px; - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 10px; - z-index: 1000; -} - -.control-buttons { - display: flex; - gap: 10px; + position: fixed; + top: 1rem; + right: 1rem; + display: flex; + gap: 0.5rem; + z-index: 100; } .admin-controls button { - background: white; - border: 1px solid #e2e8f0; - padding: 8px; - border-radius: 8px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: #64748b; - box-shadow: 0 2px 5px rgba(0,0,0,0.05); - transition: all 0.2s; + background: rgba(255, 255, 255, 0.8); + border: none; + border-radius: 50%; + width: 36px; + height: 36px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + transition: all 0.2s ease; + color: var(--secondary-text); } .admin-controls button:hover { - background: #f8fafc; - color: #e63946; + background: #fff; + color: var(--primary-color); + transform: scale(1.1); } -.settings-panel { - background: white; - border: 1px solid #e2e8f0; - border-radius: 12px; - padding: 15px; - width: 280px; - box-shadow: 0 10px 25px rgba(0,0,0,0.1); - display: flex; - flex-direction: column; - gap: 12px; +.container { + max-width: 500px; + width: 90%; + text-align: center; + padding: 2.5rem 2rem; + border-radius: 20px; + background: var(--popup-bg); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + position: relative; } -.settings-scroll-area { - max-height: 400px; - overflow-y: auto; - padding-right: 5px; +h1 { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 1.5rem; + letter-spacing: -0.5px; + color: var(--primary-color); } -.settings-scroll-area::-webkit-scrollbar { - width: 6px; +.image-preview-container { + width: 100%; + height: 250px; + background-color: rgba(255, 255, 255, 0.5); + border: 2px dashed rgba(0,0,0,0.1); + border-radius: 12px; + margin-bottom: 1.5rem; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + cursor: pointer; + transition: all 0.2s ease; } -.settings-scroll-area::-webkit-scrollbar-thumb { - background: #e2e8f0; - border-radius: 10px; +.state-locked .image-preview-container { + cursor: default; + border-style: solid; } -.settings-group { - margin-bottom: 15px; +.image-preview-container img { + width: 100%; + height: 100%; + object-fit: cover; + display: none; } -.settings-group:last-child { - margin-bottom: 0; +.image-preview-container .placeholder-text { + color: var(--secondary-text); + font-size: 0.9rem; + padding: 1rem; } -.settings-group label { - display: block; - font-size: 0.8rem; - color: #64748b; - margin-bottom: 5px; - font-weight: 600; +.button-group { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-top: 2rem; + position: relative; + min-height: 60px; } -.settings-group input[type="color"], -.settings-group input[type="number"], -.settings-group select { - width: 100%; - padding: 6px; - border: 1px solid #e2e8f0; - border-radius: 6px; - outline: none; +.btn { + padding: 0.75rem 1.75rem; + font-size: 1rem; + font-weight: 600; + border-radius: 10px; + border: none; + cursor: pointer; + transition: transform 0.1s ease, font-size 0.2s ease, background-color 0.2s ease; + white-space: nowrap; } -.btn-small { - padding: 4px 10px !important; - font-size: 0.75rem !important; +.btn-yes { + background-color: var(--primary-color); + color: white; + z-index: 10; + box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3); } -#bg-image-input { - display: none; +.btn-yes:hover { + background-color: #d62839; } -/* State management */ -.state-locked .admin-controls #lock-btn { - opacity: 0.3; +.btn-no { + background-color: #fff; + color: var(--text-color); + position: relative; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +#success-message { + display: none; + animation: fadeIn 0.8s ease forwards; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.success-text { + font-size: 1.25rem; + 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-style: italic; +} + +#image-input { + display: none; } -.state-locked .admin-controls #lock-btn:hover { - opacity: 1; -} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 587379a..9a9aeac 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,80 +1,141 @@ document.addEventListener('DOMContentLoaded', () => { - const yesBtn = document.getElementById('yes-btn'); 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 successMessage = document.getElementById('success-message'); - const resetBtn = document.getElementById('reset-btn'); + const successBox = document.getElementById('success-message'); const lockBtn = document.getElementById('lock-btn'); - const settingsToggle = document.getElementById('settings-toggle'); - const settingsPanel = document.getElementById('settings-panel'); - const previewImg = document.getElementById('preview-img'); - const previewSuccessToggle = document.getElementById('preview-success-toggle'); - - // Setting inputs - 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'); - const fontFamilySelect = document.getElementById('font-family-select'); - const secondPageTextColorPicker = document.getElementById('second-page-text-color-picker'); - const secondPageBoxPosYInput = document.getElementById('second-page-box-pos-y-input'); - const imageBorderRadiusInput = document.getElementById('image-border-radius-input'); + const resetBtn = document.getElementById('reset-btn'); - // New setting inputs - const proposalTextColorPicker = document.getElementById('proposal-text-color-picker'); - const proposalTextSizeInput = document.getElementById('proposal-text-size-input'); - const successText1SizeInput = document.getElementById('success-text-1-size-input'); - const successText2SizeInput = document.getElementById('success-text-2-size-input'); - const proposalTextInput = document.getElementById('proposal-text-input'); - const successText1Input = document.getElementById('success-text-1-input'); - const successText2Input = document.getElementById('success-text-2-input'); - - // Display elements - const proposalTextDisplay = document.getElementById('proposal-text-display'); - const successText1Display = document.getElementById('success-text-1-display'); - const successText2Display = document.getElementById('success-text-2-display'); + let yesScale = 1; + let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false; - let noCount = 0; - const phrases = [ - "No", "Are you sure?", "Really sure?", "Think again!", "Last chance!", - "Surely not?", "You might regret this!", "Give it another thought!", - "Are you absolutely sure?", "This could be a mistake!", "Have a heart!", - "Don't be so cold!", "Change of heart?", "Wouldn't you reconsider?", - "Is that your final answer?", "You're breaking my heart ;(" - ]; - - // No button movement and text change - noBtn.addEventListener('click', () => { - noCount++; - noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)]; - - const currentSize = parseFloat(window.getComputedStyle(yesBtn).fontSize); - yesBtn.style.fontSize = `${currentSize * 1.2}px`; - yesBtn.style.padding = `${parseFloat(window.getComputedStyle(yesBtn).paddingTop) * 1.2}px ${parseFloat(window.getComputedStyle(yesBtn).paddingLeft) * 1.2}px`; - - // Randomly move No button - const container = document.getElementById('main-container'); - const containerRect = container.getBoundingClientRect(); - const btnRect = noBtn.getBoundingClientRect(); - - const maxX = containerRect.width - btnRect.width; - const maxY = containerRect.height - btnRect.height; - - const randomX = Math.floor(Math.random() * maxX); - const randomY = Math.floor(Math.random() * maxY); - - noBtn.style.position = 'absolute'; - noBtn.style.left = `${randomX}px`; - noBtn.style.top = `${randomY}px`; + // Image Upload Logic + document.querySelector('.image-preview-container').addEventListener('click', () => { + if (isLocked) return; + imageInput.click(); }); - // Yes button action + imageInput.addEventListener('change', function() { + const file = this.files[0]; + if (file) { + const formData = new FormData(); + formData.append('action', 'upload_image'); + formData.append('image', file); + + 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'); + } + }) + .catch(error => { + console.error('Error:', error); + alert('An error occurred during upload.'); + }); + } + }); + + // Lock/Unlock Toggle + lockBtn.addEventListener('click', () => { + const newLockedState = !isLocked; + const formData = new FormData(); + formData.append('action', 'toggle_lock'); + formData.append('lock', newLockedState); + + fetch('api/save_settings.php', { + method: 'POST', + body: formData + }) + .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(); + } + }); + }); + + // Reset Experience + resetBtn.addEventListener('click', () => { + if (confirm('Reset everything? This will clear the image and unlock changes.')) { + const formData = new FormData(); + formData.append('action', 'reset'); + + fetch('api/save_settings.php', { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + location.reload(); + } + }); + } + }); + + // "No" Button Dodging Logic + const dodgeThreshold = 100; // pixels + + document.addEventListener('mousemove', (e) => { + if (successBox.style.display === 'block') return; + + const rect = noBtn.getBoundingClientRect(); + const btnCenterX = rect.left + rect.width / 2; + const btnCenterY = rect.top + rect.height / 2; + + const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY); + + if (distance < dodgeThreshold) { + const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX); + const moveDist = dodgeThreshold - distance + 20; + + let newX = rect.left - Math.cos(angle) * moveDist; + let newY = rect.top - Math.sin(angle) * moveDist; + + // Keep within viewport bounds + const padding = 20; + newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX)); + newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY)); + + noBtn.style.position = 'fixed'; + noBtn.style.left = `${newX}px`; + noBtn.style.top = `${newY}px`; + noBtn.style.margin = '0'; + } + }); + + // "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") + }); + + // "Yes" Click Logic yesBtn.addEventListener('click', () => { - if (previewSuccessToggle.checked) return; // Ignore if in preview mode - proposalBox.style.display = 'none'; - successMessage.style.display = 'block'; + 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; @@ -92,222 +153,13 @@ document.addEventListener('DOMContentLoaded', () => { } const particleCount = 50 * (timeLeft / duration); - confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }); - confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }); + 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 15 seconds + // Redirect after 15s setTimeout(() => { window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; }, 15000); }); - - // Preview Success Page logic - previewSuccessToggle.addEventListener('change', (e) => { - if (e.target.checked) { - proposalBox.style.display = 'none'; - successMessage.style.display = 'block'; - successMessage.classList.add('preview-mode'); - } else { - proposalBox.style.display = 'block'; - successMessage.style.display = 'none'; - successMessage.classList.remove('preview-mode'); - } - }); - - // Toggle settings panel - settingsToggle.addEventListener('click', () => { - settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none'; - }); - - // Update background color - bgColorPicker.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--bg-color', e.target.value); - }); - - bgColorPicker.addEventListener('change', (e) => { - saveSetting('update_bg_color', { color: e.target.value }); - }); - - // Update popup color - popupColorPicker.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--popup-bg', e.target.value); - }); - - popupColorPicker.addEventListener('change', (e) => { - saveSetting('update_popup_color', { color: e.target.value }); - }); - - // Update second page text color - secondPageTextColorPicker.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--second-page-text-color', e.target.value); - }); - - secondPageTextColorPicker.addEventListener('change', (e) => { - saveSetting('update_second_page_text_color', { color: e.target.value }); - }); - - // Update proposal text color - proposalTextColorPicker.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--proposal-text-color', e.target.value); - }); - - proposalTextColorPicker.addEventListener('change', (e) => { - saveSetting('update_proposal_text_color', { color: e.target.value }); - }); - - // Update font family - fontFamilySelect.addEventListener('change', (e) => { - document.documentElement.style.setProperty('--font-family', e.target.value); - saveSetting('update_font_family', { font: e.target.value }); - }); - - // Update success box Y position - secondPageBoxPosYInput.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--second-page-box-pos-y', `${e.target.value}px`); - }); - - secondPageBoxPosYInput.addEventListener('change', (e) => { - saveSetting('update_second_page_box_pos_y', { pos: e.target.value }); - }); - - // Update image border radius - imageBorderRadiusInput.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--image-border-radius', `${e.target.value}px`); - }); - - imageBorderRadiusInput.addEventListener('change', (e) => { - saveSetting('update_image_border_radius', { radius: e.target.value }); - }); - - // Update proposal text size - proposalTextSizeInput.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--proposal-text-size', `${e.target.value}rem`); - }); - - proposalTextSizeInput.addEventListener('change', (e) => { - saveSetting('update_proposal_text_size', { size: e.target.value }); - }); - - // Update success text 1 size - successText1SizeInput.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--success-text-1-size', `${e.target.value}rem`); - }); - - successText1SizeInput.addEventListener('change', (e) => { - saveSetting('update_success_text_1_size', { size: e.target.value }); - }); - - // Update success text 2 size - successText2SizeInput.addEventListener('input', (e) => { - document.documentElement.style.setProperty('--success-text-2-size', `${e.target.value}rem`); - }); - - successText2SizeInput.addEventListener('change', (e) => { - saveSetting('update_success_text_2_size', { size: e.target.value }); - }); - - // Update proposal text content - proposalTextInput.addEventListener('input', (e) => { - proposalTextDisplay.innerText = e.target.value; - }); - - proposalTextInput.addEventListener('change', (e) => { - saveSetting('update_proposal_text', { text: e.target.value }); - }); - - // Update success text 1 content - successText1Input.addEventListener('input', (e) => { - successText1Display.innerText = e.target.value; - }); - - successText1Input.addEventListener('change', (e) => { - saveSetting('update_success_text_1', { text: e.target.value }); - }); - - // Update success text 2 content - successText2Input.addEventListener('input', (e) => { - successText2Display.innerText = e.target.value; - }); - - successText2Input.addEventListener('change', (e) => { - saveSetting('update_success_text_2', { text: e.target.value }); - }); - - // Upload background image - bgImageInput.addEventListener('change', (e) => { - const file = e.target.files[0]; - if (!file) return; - - const formData = new FormData(); - formData.append('action', 'upload_bg_image'); - formData.append('image', file); - - fetch('api/save_settings.php', { - method: 'POST', - body: formData - }) - .then(res => res.json()) - .then(data => { - if (data.success) { - document.documentElement.style.setProperty('--bg-image', `url('${data.path}?v=${Date.now()}')`); - location.reload(); // Reload to show remove button and update PHP state - } - }); - }); - - // Remove background image - if (removeBgBtn) { - removeBgBtn.addEventListener('click', () => { - saveSetting('remove_bg_image', {}).then(() => { - location.reload(); - }); - }); - } - - // Toggle Lock - lockBtn.addEventListener('click', () => { - const newLockState = !IS_LOCKED; - const formData = new FormData(); - formData.append('action', 'toggle_lock'); - formData.append('lock', newLockState); - - fetch('api/save_settings.php', { - method: 'POST', - body: formData - }) - .then(res => res.json()) - .then(data => { - if (data.success) { - location.reload(); - } - }); - }); - - // Reset settings - resetBtn.addEventListener('click', () => { - if (confirm('Are you sure you want to reset all settings to defaults?')) { - saveSetting('reset', {}).then(() => { - location.reload(); - }); - } - }); - - async function saveSetting(action, data) { - const formData = new FormData(); - formData.append('action', action); - for (const key in data) { - formData.append(key, data[key]); - } - - try { - const res = await fetch('api/save_settings.php', { - method: 'POST', - body: formData - }); - return await res.json(); - } catch (err) { - console.error('Failed to save setting:', err); - } - } -}); +}); \ No newline at end of file diff --git a/assets/pasted-20260206-164030-456a591e.jpg b/assets/pasted-20260206-164030-456a591e.jpg deleted file mode 100644 index ffa1e7b..0000000 Binary files a/assets/pasted-20260206-164030-456a591e.jpg and /dev/null differ diff --git a/db/migrations/002_add_background_settings.sql b/db/migrations/002_add_background_settings.sql deleted file mode 100644 index c13c2d8..0000000 --- a/db/migrations/002_add_background_settings.sql +++ /dev/null @@ -1,2 +0,0 @@ -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/db/migrations/003_add_font_and_pos_settings.sql b/db/migrations/003_add_font_and_pos_settings.sql deleted file mode 100644 index a288b46..0000000 --- a/db/migrations/003_add_font_and_pos_settings.sql +++ /dev/null @@ -1,5 +0,0 @@ -INSERT IGNORE INTO settings (setting_key, setting_value) VALUES -('font_family', "'Inter', sans-serif"), -('second_page_text_color', '#e63946'), -('second_page_box_pos_y', '0'), -('image_border_radius', '12'); diff --git a/db/migrations/004_add_text_content_and_size_settings.sql b/db/migrations/004_add_text_content_and_size_settings.sql deleted file mode 100644 index 6f71cdb..0000000 --- a/db/migrations/004_add_text_content_and_size_settings.sql +++ /dev/null @@ -1,9 +0,0 @@ -INSERT IGNORE INTO settings (setting_key, setting_value) VALUES -('proposal_text', 'Gvantsa, would you be my valentine?'), -('success_text_1', 'Congratulations, you are now Sam\'s Valentine! ❤️'), -('success_text_2', 'He is so incredibly lucky to have someone in his life who would click yes.'), -('proposal_text_color', '#e63946'), -('proposal_text_size', '2'), -('success_text_1_size', '1.5'), -('success_text_2_size', '0.9'); - diff --git a/index.php b/index.php index e5e519a..48dc4ae 100644 --- a/index.php +++ b/index.php @@ -7,34 +7,17 @@ $stmt = db()->prepare("SELECT setting_key, setting_value FROM settings"); $stmt->execute(); $settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR); -$valentineImage = $settings['valentine_image'] ?: 'assets/pasted-20260206-164030-456a591e.jpg'; +$valentineImage = $settings['valentine_image'] ?? ''; $isLocked = ($settings['is_locked'] ?? '0') === '1'; -$bgColor = $settings['bg_color'] ?? '#ffe4e6'; -$bgImage = $settings['bg_image'] ?? ''; -$popupColor = $settings['popup_color'] ?? '#ffccd5'; -$fontFamily = $settings['font_family'] ?? "'Inter', sans-serif"; -$secondPageTextColor = $settings['second_page_text_color'] ?? '#e63946'; -$secondPageBoxPosY = $settings['second_page_box_pos_y'] ?? '0'; -$imageBorderRadius = $settings['image_border_radius'] ?? '12'; - -// New settings -$proposalText = $settings['proposal_text'] ?? 'Gvantsa, would you be my valentine?'; -$successText1 = $settings['success_text_1'] ?? "Congratulations, you are now Sam's Valentine! ❤️"; -$successText2 = $settings['success_text_2'] ?? "He is so incredibly lucky to have someone in his life who would click yes."; -$proposalTextColor = $settings['proposal_text_color'] ?? '#e63946'; -$proposalTextSize = $settings['proposal_text_size'] ?? '2'; -$successText1Size = $settings['success_text_1_size'] ?? '1.5'; -$successText2Size = $settings['success_text_2_size'] ?? '0.9'; - ?> - <?= htmlspecialchars($proposalText) ?> + Gvantsa, would you be my valentine? @@ -47,134 +30,33 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9'; - + -
-
- - - -
- - + +
-
+
-

+

Gvantsa, would you be my valentine?

-
- Valentine Image +
+ Click to upload our photo ❤️ + Valentine Image
+
@@ -183,8 +65,8 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
-

-

+

Congratulations, you are now Sam's Valentine! ❤️

+

He is so incredibly lucky to have someone in his life who would click yes.

Redirecting you to a special surprise in 15 seconds...