diff --git a/api/save_settings.php b/api/save_settings.php
index be7fd69..9340e8e 100644
--- a/api/save_settings.php
+++ b/api/save_settings.php
@@ -57,69 +57,6 @@ if ($action === 'upload_bg_image') {
} 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();
@@ -130,30 +67,16 @@ if ($action === 'upload_bg_image') {
$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]);
- }
-
+ $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.']);
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 6ebdfdc..2694f50 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,254 +1,218 @@
: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; /* 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);
+ --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);
+ 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;
+ 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;
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ z-index: 100;
+ align-items: flex-end;
}
.control-buttons {
- display: flex;
- gap: 10px;
+ display: flex;
+ gap: 0.5rem;
}
.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;
+ 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;
}
-.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;
+@keyframes slideDown {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
}
.settings-group {
- margin-bottom: 15px;
-}
-
-.settings-group:last-child {
- margin-bottom: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
}
.settings-group label {
- display: block;
- font-size: 0.8rem;
- color: #64748b;
- margin-bottom: 5px;
- font-weight: 600;
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--secondary-text);
}
-.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;
+.settings-group input[type="color"] {
+ width: 100%;
+ height: 30px;
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ cursor: pointer;
}
-.btn-small {
- padding: 4px 10px !important;
- font-size: 0.75rem !important;
+.settings-group .btn-small {
+ padding: 4px 8px;
+ font-size: 0.7rem;
+ background: #f1f2f6;
+ border: 1px solid #dfe4ea;
+ border-radius: 4px;
+ cursor: pointer;
}
-#bg-image-input {
- display: none;
+.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;
}
-/* State management */
-.state-locked .admin-controls #lock-btn {
- opacity: 0.3;
+h1 {
+ font-size: 1.75rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ letter-spacing: -0.5px;
+ color: var(--primary-color);
}
-.state-locked .admin-controls #lock-btn:hover {
- opacity: 1;
+
+.image-preview-container {
+ width: 100%;
+ height: 250px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: 2px solid rgba(0,0,0,0.05);
+ border-radius: 12px;
+ margin-bottom: 1.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ position: relative;
+}
+
+.image-preview-container img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.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);
+}
+
+#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, #bg-image-input {
+ display: none;
}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 587379a..fc15cca 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,282 +1,109 @@
document.addEventListener('DOMContentLoaded', () => {
- const yesBtn = document.getElementById('yes-btn');
const noBtn = document.getElementById('no-btn');
+ const yesBtn = document.getElementById('yes-btn');
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 resetBtn = document.getElementById('reset-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');
- // 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 ;("
- ];
+ // Settings Toggle
+ if (settingsToggle) {
+ settingsToggle.addEventListener('click', () => {
+ settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
+ });
+ }
- // 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`;
- });
+ // 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', 'update_bg_color');
+ formData.append('color', e.target.value);
+ fetch('api/save_settings.php', { method: 'POST', body: formData });
+ });
+ }
- // 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;
- const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
+ 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 });
+ });
+ }
- function randomInRange(min, max) {
- return Math.random() * (max - min) + min;
- }
+ // 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);
- const interval = setInterval(function() {
- const timeLeft = animationEnd - Date.now();
-
- if (timeLeft <= 0) {
- return clearInterval(interval);
- }
-
- 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 } });
- }, 250);
-
- // Redirect after 15 seconds
- 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
+ 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.');
+ });
}
});
- });
+ }
- // Remove background image
if (removeBgBtn) {
removeBgBtn.addEventListener('click', () => {
- saveSetting('remove_bg_image', {}).then(() => {
- location.reload();
+ 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) {
+ document.documentElement.style.setProperty('--bg-image', 'none');
+ location.reload();
+ }
});
});
}
- // Toggle Lock
+ // Lock/Unlock Toggle
lockBtn.addEventListener('click', () => {
- const newLockState = !IS_LOCKED;
+ const newLockedState = !isLocked;
const formData = new FormData();
formData.append('action', 'toggle_lock');
- formData.append('lock', newLockState);
+ formData.append('lock', newLockedState);
fetch('api/save_settings.php', {
method: 'POST',
body: formData
})
- .then(res => res.json())
+ .then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
@@ -284,30 +111,99 @@ document.addEventListener('DOMContentLoaded', () => {
});
});
- // Reset settings
+ // Reset Experience
resetBtn.addEventListener('click', () => {
- if (confirm('Are you sure you want to reset all settings to defaults?')) {
- saveSetting('reset', {}).then(() => {
- location.reload();
+ if (confirm('Reset everything to defaults?')) {
+ 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();
+ }
});
}
});
- async function saveSetting(action, data) {
- const formData = new FormData();
- formData.append('action', action);
- for (const key in data) {
- formData.append(key, data[key]);
- }
+ // "No" Button Dodging Logic
+ const dodgeThreshold = 100; // pixels
- 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);
+ document.addEventListener('mousemove', (e) => {
+ if (!noBtn || (successBox && 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
+ if (noBtn) {
+ noBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ yesScale += 0.15;
+ yesBtn.style.transform = `scale(${yesScale})`;
+ });
+ }
+
+ // "Yes" Click Logic
+ 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 };
+
+ 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);
+ }
+
+ 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/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..3b39361 100644
--- a/index.php
+++ b/index.php
@@ -12,29 +12,15 @@ $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,22 +33,13 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
-
+
@@ -86,91 +63,28 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
-
+
-
= htmlspecialchars($proposalText) ?>
+
Gvantsa, would you be my valentine?
 ?>)
@@ -183,8 +97,8 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
-
= htmlspecialchars($successText1) ?>
-
= htmlspecialchars($successText2) ?>
+
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...
@@ -195,4 +109,4 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
-