diff --git a/api/save_settings.php b/api/save_settings.php index 06ca8d4..be7fd69 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,122 @@ 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 === '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') { - // 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(); + $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]); + } + 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..6ebdfdc 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,173 +1,254 @@ :root { - --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; + --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; } body { - 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; -} - -.admin-controls { - position: fixed; - top: 1rem; - right: 1rem; - display: flex; - gap: 0.5rem; - z-index: 100; -} - -.admin-controls button { - 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: #fff; - color: var(--primary-color); - transform: scale(1.1); + 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; } .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; + width: 90%; + max-width: 500px; + text-align: center; + z-index: 1; } -h1 { - font-size: 1.75rem; - font-weight: 700; - margin-bottom: 1.5rem; - letter-spacing: -0.5px; - color: var(--primary-color); -} - -.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; -} - -.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 { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - margin-top: 2rem; - position: relative; - min-height: 60px; -} - -.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-yes { - background-color: var(--primary-color); - color: white; - z-index: 10; - box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3); -} - -.btn-yes:hover { - background-color: #d62839; -} - -.btn-no { - background-color: #fff; - color: var(--text-color); - position: relative; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +#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: fadeIn 0.8s ease forwards; + 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)); } -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } +#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: 1.25rem; - line-height: 1.6; - color: var(--primary-color); - font-weight: 700; - margin-bottom: 0.5rem; + 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 { - margin-top: 2rem; - font-size: 0.85rem; - color: var(--secondary-text); - font-style: italic; + font-size: 0.9rem; + color: #64748b; + margin-top: 2rem; + font-style: italic; } -#image-input { - display: none; +/* 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; +} + +.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; +} + +.admin-controls button:hover { + background: #f8fafc; + color: #e63946; +} + +.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; +} + +.settings-scroll-area { + max-height: 400px; + overflow-y: auto; + padding-right: 5px; +} + +.settings-scroll-area::-webkit-scrollbar { + width: 6px; +} + +.settings-scroll-area::-webkit-scrollbar-thumb { + background: #e2e8f0; + border-radius: 10px; +} + +.settings-group { + margin-bottom: 15px; +} + +.settings-group:last-child { + margin-bottom: 0; +} + +.settings-group label { + display: block; + font-size: 0.8rem; + color: #64748b; + margin-bottom: 5px; + font-weight: 600; +} + +.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-small { + padding: 4px 10px !important; + font-size: 0.75rem !important; +} + +#bg-image-input { + display: none; +} + +/* State management */ +.state-locked .admin-controls #lock-btn { + opacity: 0.3; +} +.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 9a9aeac..587379a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,141 +1,80 @@ 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 noBtn = document.getElementById('no-btn'); const proposalBox = document.getElementById('proposal-box'); - const successBox = document.getElementById('success-message'); - const lockBtn = document.getElementById('lock-btn'); + const successMessage = document.getElementById('success-message'); const resetBtn = document.getElementById('reset-btn'); + 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'); - let yesScale = 1; - let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false; + // 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'); - // Image Upload Logic - document.querySelector('.image-preview-container').addEventListener('click', () => { - if (isLocked) return; - imageInput.click(); - }); + 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 ;(" + ]; - 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', () => { - proposalBox.style.display = 'none'; - successBox.style.display = 'block'; + // No button movement and text change + noBtn.addEventListener('click', () => { + noCount++; + noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)]; - // Hide controls during celebration - document.querySelector('.admin-controls').style.display = 'none'; + 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`; + }); + // Yes button action + yesBtn.addEventListener('click', () => { + if (previewSuccessToggle.checked) return; // Ignore if in preview mode + + proposalBox.style.display = 'none'; + successMessage.style.display = 'block'; + // Confetti effect const duration = 15 * 1000; const animationEnd = Date.now() + duration; @@ -153,13 +92,222 @@ document.addEventListener('DOMContentLoaded', () => { } 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 } })); + 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 } }); }, 250); - // Redirect after 15s + // Redirect after 15 seconds setTimeout(() => { window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"; }, 15000); }); -}); \ No newline at end of file + + // 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); + } + } +}); 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/db/migrations/003_add_font_and_pos_settings.sql b/db/migrations/003_add_font_and_pos_settings.sql new file mode 100644 index 0000000..a288b46 --- /dev/null +++ b/db/migrations/003_add_font_and_pos_settings.sql @@ -0,0 +1,5 @@ +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 new file mode 100644 index 0000000..6f71cdb --- /dev/null +++ b/db/migrations/004_add_text_content_and_size_settings.sql @@ -0,0 +1,9 @@ +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 48dc4ae..e5e519a 100644 --- a/index.php +++ b/index.php @@ -7,17 +7,34 @@ $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'; +$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'; + ?> - Gvantsa, would you be my valentine? + <?= htmlspecialchars($proposalText) ?> @@ -30,33 +47,134 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1'; - + +
- - +
+ + + +
+ +
-
+
-

Gvantsa, would you be my valentine?

+

-
- Click to upload our photo ❤️ - Valentine Image +
+ Valentine Image
-
@@ -65,8 +183,8 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
-

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...