admin/38230-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert to version 0965b0a

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-06 18:51:55 +00:00
parent 1c4f4463cb
commit da6262f175
8 changed files with 796 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
api/save_settings.php
View File

@ -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.']);
}
}

381
assets/css/custom.css
View File

@ -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;
}

414
assets/js/main.js
View File

@ -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);
});
});
// 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);
}
}
});

BIN
assets/pasted-20260206-164030-456a591e.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

2
db/migrations/002_add_background_settings.sql Normal file
View File

@ -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';

5
db/migrations/003_add_font_and_pos_settings.sql Normal file
View File

@ -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');

9
db/migrations/004_add_text_content_and_size_settings.sql Normal file
View File

@ -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');

162
index.php
View File

@ -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';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gvantsa, would you be my valentine?</title>
<title><?= htmlspecialchars($proposalText) ?></title>
<?php
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal for Gvantsa.';
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
?>
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
@ -30,33 +47,134 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Dancing+Script:wght@400;700&family=Pacifico&family=Quicksand:wght@400;700&family=Caveat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
<style>
:root {
--bg-color: <?= htmlspecialchars($bgColor) ?>;
--popup-bg: <?= htmlspecialchars($popupColor) ?>;
--bg-image: <?= $bgImage ? "url('" . htmlspecialchars($bgImage) . "')" : 'none' ?>;
--font-family: <?= $fontFamily ?>;
--second-page-text-color: <?= htmlspecialchars($secondPageTextColor) ?>;
--second-page-box-pos-y: <?= htmlspecialchars($secondPageBoxPosY) ?>px;
--image-border-radius: <?= htmlspecialchars($imageBorderRadius) ?>px;
--proposal-text-color: <?= htmlspecialchars($proposalTextColor) ?>;
--proposal-text-size: <?= htmlspecialchars($proposalTextSize) ?>rem;
--success-text-1-size: <?= htmlspecialchars($successText1Size) ?>rem;
--success-text-2-size: <?= htmlspecialchars($successText2Size) ?>rem;
}
</style>
</head>
<body class="<?= $isLocked ? 'state-locked' : '' ?>">
<div class="admin-controls">
<button id="lock-btn" title="<?= $isLocked ? 'Unlock' : 'Lock' ?> changes">
<?php if ($isLocked): ?>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<?php else: ?>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
<?php endif; ?>
</button>
<button id="reset-btn" title="Reset Experience">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
</button>
<div class="control-buttons">
<button id="settings-toggle" title="Settings" style="<?= $isLocked ? 'display:none' : '' ?>">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33 1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82 1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</button>
<button id="lock-btn" title="<?= $isLocked ? 'Unlock' : 'Lock' ?> changes">
<?php if ($isLocked): ?>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<?php else: ?>
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
<?php endif; ?>
</button>
<button id="reset-btn" title="Reset Experience">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
</button>
</div>
<div id="settings-panel" class="settings-panel" style="display: none;">
<div class="settings-scroll-area">
<div class="settings-group">
<label style="display: flex; align-items: center; cursor: pointer; color: #e63946; font-weight: bold;">
<input type="checkbox" id="preview-success-toggle" style="margin-right: 8px; width: auto;">
Preview Success Page
</label>
</div>
<div class="settings-group">
<label>Proposal Text</label>
<textarea id="proposal-text-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($proposalText) ?></textarea>
</div>
<div class="settings-group">
<label>Success Text Line 1</label>
<textarea id="success-text-1-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($successText1) ?></textarea>
</div>
<div class="settings-group">
<label>Success Text Line 2</label>
<textarea id="success-text-2-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($successText2) ?></textarea>
</div>
<div class="settings-group">
<label>Font Family</label>
<select id="font-family-select">
<option value="'Inter', sans-serif" <?= $fontFamily === "'Inter', sans-serif" ? 'selected' : '' ?>>Inter</option>
<option value="'Dancing Script', cursive" <?= $fontFamily === "'Dancing Script', cursive" ? 'selected' : '' ?>>Dancing Script</option>
<option value="'Pacifico', cursive" <?= $fontFamily === "'Pacifico', cursive" ? 'selected' : '' ?>>Pacifico</option>
<option value="'Quicksand', sans-serif" <?= $fontFamily === "'Quicksand', sans-serif" ? 'selected' : '' ?>>Quicksand</option>
<option value="'Caveat', cursive" <?= $fontFamily === "'Caveat', cursive" ? 'selected' : '' ?>>Caveat</option>
</select>
</div>
<div class="settings-group">
<label>Proposal Text Color</label>
<input type="color" id="proposal-text-color-picker" value="<?= htmlspecialchars($proposalTextColor) ?>">
</div>
<div class="settings-group">
<label>Success Page Text Color</label>
<input type="color" id="second-page-text-color-picker" value="<?= htmlspecialchars($secondPageTextColor) ?>">
</div>
<div class="settings-group">
<label>Proposal Text Size (rem)</label>
<input type="number" id="proposal-text-size-input" step="0.1" value="<?= htmlspecialchars($proposalTextSize) ?>">
</div>
<div class="settings-group">
<label>Success Text 1 Size (rem)</label>
<input type="number" id="success-text-1-size-input" step="0.1" value="<?= htmlspecialchars($successText1Size) ?>">
</div>
<div class="settings-group">
<label>Success Text 2 Size (rem)</label>
<input type="number" id="success-text-2-size-input" step="0.1" value="<?= htmlspecialchars($successText2Size) ?>">
</div>
<div class="settings-group">
<label>Background Color</label>
<input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
</div>
<div class="settings-group">
<label>Pop-up Color</label>
<input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
</div>
<div class="settings-group">
<label>Success Box Y Offset (px)</label>
<input type="number" id="second-page-box-pos-y-input" value="<?= htmlspecialchars($secondPageBoxPosY) ?>">
</div>
<div class="settings-group">
<label>Image Border Radius (px)</label>
<input type="number" id="image-border-radius-input" value="<?= htmlspecialchars($imageBorderRadius) ?>">
</div>
<div class="settings-group">
<label>Background Image</label>
<button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
<?php if ($bgImage): ?>
<button class="btn-small" id="remove-bg-btn" style="margin-top:2px">Remove</button>
<?php endif; ?>
<input type="file" id="bg-image-input" accept="image/*">
</div>
</div>
</div>
</div>
<div class="container">
<div class="container" id="main-container">
<div id="proposal-box">
<h1>Gvantsa, would you be my valentine?</h1>
<h1 id="proposal-text-display"><?= htmlspecialchars($proposalText) ?></h1>
<div class="image-preview-container <?= $valentineImage ? 'has-image' : '' ?>">
<span class="placeholder-text" style="<?= $valentineImage ? 'display:none' : '' ?>">Click to upload our photo ❤️</span>
<img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image" style="<?= $valentineImage ? 'display:block' : '' ?>">
<div class="image-preview-container has-image">
<img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
</div>
<input type="file" id="image-input" accept="image/*">
<div class="button-group">
<button id="yes-btn" class="btn btn-yes">Yes</button>
@ -65,8 +183,8 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
</div>
<div id="success-message">
<p class="success-text">Congratulations, you are now Sam's Valentine! ❤️</p>
<p class="success-text">He is so incredibly lucky to have someone in his life who would click yes.</p>
<p class="success-text" id="success-text-1-display"><?= htmlspecialchars($successText1) ?></p>
<p class="success-text success-text-small" id="success-text-2-display"><?= htmlspecialchars($successText2) ?></p>
<div class="redirect-hint">Redirecting you to a special surprise in 15 seconds...</div>
</div>
</div>