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

Revert to version ef3b11f

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-06 18:51:30 +00:00
parent 5448d80f77
commit 1c4f4463cb
9 changed files with 150 additions and 662 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
api/save_settings.php
View File

@ -5,31 +5,26 @@ header('Content-Type: application/json');
$action = $_POST['action'] ?? '';
// Check if locked for all modifying actions except toggle_lock
if ($action !== 'toggle_lock' && $action !== '') {
$stmt = db()->prepare("SELECT setting_value FROM settings WHERE setting_key = 'is_locked'");
$stmt->execute();
$isLocked = $stmt->fetchColumn();
if ($isLocked === '1') {
echo json_encode(['success' => false, 'error' => 'Settings are locked.']);
exit;
}
}
if ($action === 'upload_bg_image') {
if ($action === 'upload_image') {
if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
$uploadDir = __DIR__ . '/../assets/images/uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0775, true);
// Check if locked
$stmt = db()->prepare("SELECT setting_value FROM settings WHERE setting_key = 'is_locked'");
$stmt->execute();
$isLocked = $stmt->fetchColumn();
if ($isLocked === '1') {
echo json_encode(['success' => false, 'error' => 'Settings are locked.']);
exit;
}
$fileName = 'bg_' . time() . '_' . basename($_FILES['image']['name']);
$uploadDir = __DIR__ . '/../assets/images/uploads/';
$fileName = 'valentine_' . time() . '_' . basename($_FILES['image']['name']);
$targetPath = $uploadDir . $fileName;
if (move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)) {
$webPath = 'assets/images/uploads/' . $fileName;
$stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'bg_image'");
$stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'valentine_image'");
$stmt->execute([$webPath]);
echo json_encode(['success' => true, 'path' => $webPath]);
@ -39,53 +34,22 @@ if ($action === 'upload_bg_image') {
} else {
echo json_encode(['success' => false, 'error' => 'No file uploaded or upload error.']);
}
} elseif ($action === 'update_bg_color') {
$color = $_POST['color'] ?? '';
if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
$stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'bg_color'");
$stmt->execute([$color]);
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
}
} elseif ($action === 'update_popup_color') {
$color = $_POST['color'] ?? '';
if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
$stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'popup_color'");
$stmt->execute([$color]);
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
}
} elseif ($action === 'update_setting') {
$key = $_POST['key'] ?? '';
$value = $_POST['value'] ?? '';
$allowedKeys = [
'p1_title_color', 'p1_title_size', 'p1_title_font', 'p1_title_text',
'p2_text_color', 'p2_text_size', 'p2_text_font', 'p2_line1_text', 'p2_line2_text',
'p2_hint_color', 'p2_hint_size', 'p2_hint_font', 'p2_hint_text',
'image_radius', 'yes_btn_color', 'no_btn_color'
];
if (in_array($key, $allowedKeys)) {
$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 setting key.']);
}
} 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') {
// Reset button positions and sizes is handled by reloading the page in the frontend.
// We no longer reset colors or text content here.
// We don't necessarily reset the image here unless specified,
// but the user said "reset the experience".
// Maybe it just clears the locked state and image?
// Usually "reset experience" for the user means restart the proposal.
// However, if they want to reset the setup, we can clear the image.
$stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'valentine_image'");
$stmt->execute();
$stmt = db()->prepare("UPDATE settings SET setting_value = '0' WHERE setting_key = 'is_locked'");
$stmt->execute();
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false, 'error' => 'Invalid action.']);
}
}

197
assets/css/custom.css
View File

@ -1,36 +1,15 @@
:root {
--primary-color: #e63946;
--bg-color: #ffe4e6; /* Default Light Pink */
--popup-bg: #ffccd5; /* Default Light Red */
--bg-image: none;
--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;
--p1-title-color: #e63946;
--p1-title-size: 1.75rem;
--p1-title-font: 'Inter';
--p2-text-color: #e63946;
--p2-text-size: 1.25rem;
--p2-text-font: 'Inter';
--p2-hint-color: #636e72;
--p2-hint-size: 0.85rem;
--p2-hint-font: 'Inter';
--image-radius: 12px;
--yes-btn-color: #e63946;
--no-btn-color: #ffffff;
}
body {
background-color: var(--bg-color);
background-image: var(--bg-image);
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--text-color);
font-family: var(--font-family);
margin: 0;
@ -46,15 +25,8 @@ body {
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 100;
align-items: flex-end;
}
.control-buttons {
display: flex;
gap: 0.5rem;
}
.admin-controls button {
@ -78,96 +50,6 @@ body {
transform: scale(1.1);
}
.settings-panel {
background: white;
padding: 1rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 250px;
max-height: 80vh;
overflow-y: auto;
animation: slideDown 0.3s ease;
}
.settings-tabs {
display: flex;
border-bottom: 1px solid #eee;
margin-bottom: 0.5rem;
}
.tab-btn {
background: none !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: 0.5rem !important;
width: auto !important;
height: auto !important;
font-size: 0.8rem !important;
font-weight: 600;
cursor: pointer;
color: var(--secondary-text) !important;
box-shadow: none !important;
}
.tab-btn.active {
border-bottom-color: var(--primary-color) !important;
color: var(--primary-color) !important;
}
.tab-content {
display: none;
flex-direction: column;
gap: 0.75rem;
}
.tab-content.active {
display: flex;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.settings-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.settings-group label {
font-size: 0.75rem;
font-weight: 600;
color: var(--secondary-text);
}
.settings-group input[type="color"],
.settings-group select {
width: 100%;
height: 30px;
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
}
.settings-group input[type="range"] {
width: 100%;
}
.settings-group .btn-small {
padding: 4px 8px;
font-size: 0.7rem;
background: #f1f2f6;
border: 1px solid #dfe4ea;
border-radius: 4px;
cursor: pointer;
}
.container {
max-width: 500px;
width: 90%;
@ -180,82 +62,87 @@ body {
position: relative;
}
h1.p1-title {
font-size: var(--p1-title-size);
font-family: var(--p1-title-font), var(--font-family);
color: var(--p1-title-color);
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: auto; min-height: 200px; max-height: 400px;
height: 250px;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(0,0,0,0.05);
border-radius: var(--image-radius);
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: contain; max-height: 400px;
object-fit: cover;
display: none;
}
.image-preview-container .placeholder-text {
color: var(--secondary-text);
font-size: 0.9rem;
padding: 1rem;
}
.button-group {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 2rem;
position: relative;
min-height: 80px;
min-height: 60px;
}
.btn {
padding: 1.125rem 2.625rem;
font-size: 1.5rem;
padding: 0.75rem 1.75rem;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
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:active {
transform: scale(0.9) !important;
}
.btn-yes {
background-color: var(--yes-btn-color);
background-color: var(--primary-color);
color: white;
z-index: 10;
box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}
.btn-yes:hover {
filter: brightness(0.9);
background-color: #d62839;
}
.btn-no {
background-color: var(--no-btn-color);
background-color: #fff;
color: var(--text-color);
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.btn-no:hover {
filter: brightness(0.95);
}
#success-message {
display: none;
animation: fadeIn 0.8s ease forwards;
@ -267,28 +154,20 @@ h1.p1-title {
}
.success-text {
font-size: var(--p2-text-size);
font-family: var(--p2-text-font), var(--font-family);
color: var(--p2-text-color);
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: var(--p2-hint-size);
font-family: var(--p2-hint-font), var(--font-family);
color: var(--p2-hint-color);
font-size: 0.85rem;
color: var(--secondary-text);
font-style: italic;
}
#image-input, #bg-image-input {
#image-input {
display: none;
}
hr {
border: none;
border-top: 1px solid #eee;
margin: 0.5rem 0;
}

301
assets/js/main.js
View File

@ -1,215 +1,51 @@
document.addEventListener('DOMContentLoaded', () => {
const noBtn = document.getElementById('no-btn');
const yesBtn = document.getElementById('yes-btn');
const imageInput = document.getElementById('image-input');
const imagePreview = document.getElementById('preview-img');
const placeholderText = document.querySelector('.placeholder-text');
const proposalBox = document.getElementById('proposal-box');
const successBox = document.getElementById('success-message');
const lockBtn = document.getElementById('lock-btn');
const resetBtn = document.getElementById('reset-btn');
const settingsToggle = document.getElementById('settings-toggle');
const settingsPanel = document.getElementById('settings-panel');
const bgColorPicker = document.getElementById('bg-color-picker');
const popupColorPicker = document.getElementById('popup-color-picker');
const bgImageInput = document.getElementById('bg-image-input');
const removeBgBtn = document.getElementById('remove-bg-btn');
const imageRadiusPicker = document.getElementById('image-radius-picker');
const previewPage2Toggle = document.getElementById('preview-page2-toggle');
let yesScale = 1;
let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
// Audio Context for sounds
const AudioCtx = window.AudioContext || window.webkitAudioContext;
let audioCtx = null;
function playSound(type) {
if (!audioCtx) audioCtx = new AudioCtx();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
const now = audioCtx.currentTime;
if (type === 'happy') {
// Happy sound: Arpeggio
osc.type = 'sine';
osc.frequency.setValueAtTime(523.25, now); // C5
osc.frequency.exponentialRampToValueAtTime(880, now + 0.1); // A5
gain.gain.setValueAtTime(0.3, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
osc.start(now);
osc.stop(now + 0.3);
} else {
// Less happy sound: Low thud
osc.type = 'triangle';
osc.frequency.setValueAtTime(150, now);
osc.frequency.exponentialRampToValueAtTime(40, now + 0.2);
gain.gain.setValueAtTime(0.3, now);
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);
osc.start(now);
osc.stop(now + 0.2);
}
}
// Settings Toggle
if (settingsToggle) {
settingsToggle.addEventListener('click', () => {
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
});
}
// Tabs logic
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
const tab = btn.dataset.tab;
tabBtns.forEach(b => b.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
btn.classList.add('active');
document.getElementById(`tab-${tab}`).classList.add('active');
});
// Image Upload Logic
document.querySelector('.image-preview-container').addEventListener('click', () => {
if (isLocked) return;
imageInput.click();
});
// Preview Page 2 Toggle
if (previewPage2Toggle) {
previewPage2Toggle.addEventListener('change', (e) => {
if (e.target.checked) {
proposalBox.style.display = 'none';
successBox.style.display = 'block';
} else {
proposalBox.style.display = 'block';
successBox.style.display = 'none';
}
});
}
// Image Radius
if (imageRadiusPicker) {
imageRadiusPicker.addEventListener('input', (e) => {
document.documentElement.style.setProperty('--image-radius', `${e.target.value}px`);
});
imageRadiusPicker.addEventListener('change', (e) => {
saveSetting('image_radius', `${e.target.value}px`);
});
}
// Generic Setting Inputs
const settingInputs = document.querySelectorAll('.setting-input');
settingInputs.forEach(input => {
const key = input.dataset.key;
input.addEventListener('input', (e) => {
let value = e.target.value;
// Handle Text Updates
if (key === 'p1_title_text') {
document.querySelector('.p1-title').textContent = value;
} else if (key === 'p2_line1_text') {
document.querySelector('.p2-line1').textContent = value;
} else if (key === 'p2_line2_text') {
document.querySelector('.p2-line2').textContent = value;
} else if (key === 'p2_hint_text') {
document.querySelector('.redirect-hint').textContent = value;
}
// Handle CSS Variable Updates
let cssKey = key.replace(/_/g, '-');
if (input.type === 'range') {
if (key.includes('size')) value += 'rem';
else if (key.includes('radius')) value += 'px';
}
document.documentElement.style.setProperty(`--${cssKey}`, value);
});
input.addEventListener('change', (e) => {
let value = e.target.value;
if (input.type === 'range') {
if (key.includes('size')) value += 'rem';
else if (key.includes('radius')) value += 'px';
}
saveSetting(key, value);
});
});
function saveSetting(key, value) {
const formData = new FormData();
formData.append('action', 'update_setting');
formData.append('key', key);
formData.append('value', value);
return fetch('api/save_settings.php', { method: 'POST', body: formData });
}
// Color Pickers
if (bgColorPicker) {
bgColorPicker.addEventListener('input', (e) => {
document.documentElement.style.setProperty('--bg-color', e.target.value);
});
bgColorPicker.addEventListener('change', (e) => {
imageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
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 });
});
}
formData.append('action', 'upload_image');
formData.append('image', file);
if (popupColorPicker) {
popupColorPicker.addEventListener('input', (e) => {
document.documentElement.style.setProperty('--popup-bg', e.target.value);
});
popupColorPicker.addEventListener('change', (e) => {
const formData = new FormData();
formData.append('action', 'update_popup_color');
formData.append('color', e.target.value);
fetch('api/save_settings.php', { method: 'POST', body: formData });
});
}
// Background Image Upload
if (bgImageInput) {
bgImageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const formData = new FormData();
formData.append('action', 'upload_bg_image');
formData.append('image', file);
fetch('api/save_settings.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.documentElement.style.setProperty('--bg-image', `url('${data.path}?t=${new Date().getTime()}')`);
location.reload(); // Reload to update the "Remove" button visibility
} else {
alert(data.error || 'Failed to upload background image');
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred during upload.');
});
}
});
}
if (removeBgBtn) {
removeBgBtn.addEventListener('click', () => {
const formData = new FormData();
formData.append('action', 'remove_bg_image');
fetch('api/save_settings.php', { method: 'POST', body: formData })
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();
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', () => {
@ -225,6 +61,9 @@ document.addEventListener('DOMContentLoaded', () => {
.then(response => response.json())
.then(data => {
if (data.success) {
isLocked = data.locked;
document.body.classList.toggle('state-locked', isLocked);
// Update icon (re-fetch or just refresh page is easier, but let's just refresh)
location.reload();
}
});
@ -232,7 +71,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Reset Experience
resetBtn.addEventListener('click', () => {
if (confirm('Reset experience to page 1? (Positions and sizes will be reset)')) {
if (confirm('Reset everything? This will clear the image and unlock changes.')) {
const formData = new FormData();
formData.append('action', 'reset');
@ -253,7 +92,7 @@ document.addEventListener('DOMContentLoaded', () => {
const dodgeThreshold = 100; // pixels
document.addEventListener('mousemove', (e) => {
if (!noBtn || (successBox && successBox.style.display === 'block') || (previewPage2Toggle && previewPage2Toggle.checked)) return;
if (successBox.style.display === 'block') return;
const rect = noBtn.getBoundingClientRect();
const btnCenterX = rect.left + rect.width / 2;
@ -281,50 +120,46 @@ document.addEventListener('DOMContentLoaded', () => {
});
// "No" Click Logic
if (noBtn) {
noBtn.addEventListener('click', (e) => {
e.preventDefault();
playSound('sad');
yesScale += 0.15;
yesBtn.style.transform = `scale(${yesScale})`;
});
}
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
if (yesBtn) {
yesBtn.addEventListener('click', () => {
playSound('happy');
proposalBox.style.display = 'none';
successBox.style.display = 'block';
// Hide controls during celebration
document.querySelector('.admin-controls').style.display = 'none';
yesBtn.addEventListener('click', () => {
proposalBox.style.display = 'none';
successBox.style.display = 'block';
// Hide controls during celebration
document.querySelector('.admin-controls').style.display = 'none';
// Confetti effect
const duration = 15 * 1000;
const animationEnd = Date.now() + duration;
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
// Confetti effect
const duration = 15 * 1000;
const animationEnd = Date.now() + duration;
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
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 interval = setInterval(function() {
const timeLeft = animationEnd - Date.now();
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);
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);
});
}
// Redirect after 15s
setTimeout(() => {
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
}, 15000);
});
});

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 260 KiB

2
db/migrations/002_add_background_settings.sql
View File

@ -1,2 +0,0 @@
INSERT IGNORE INTO settings (setting_key, setting_value) VALUES ('bg_color', '#ffe4e6'), ('bg_image', ''), ('popup_color', '#ffccd5');
UPDATE settings SET setting_value = 'assets/pasted-20260206-164030-456a591e.jpg' WHERE setting_key = 'valentine_image';

12
db/migrations/003_add_text_and_image_settings.sql
View File

@ -1,12 +0,0 @@
INSERT INTO settings (setting_key, setting_value) VALUES
('p1_title_color', '#e63946'),
('p1_title_size', '1.75rem'),
('p1_title_font', 'Inter'),
('p2_text_color', '#e63946'),
('p2_text_size', '1.25rem'),
('p2_text_font', 'Inter'),
('p2_hint_color', '#636e72'),
('p2_hint_size', '0.85rem'),
('p2_hint_font', 'Inter'),
('image_radius', '12px')
ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);

6
db/migrations/004_add_text_content_settings.sql
View File

@ -1,6 +0,0 @@
-- Add text content settings
INSERT IGNORE INTO settings (setting_key, setting_value) VALUES
('p1_title_text', 'Gvantsa, would you be my valentine?'),
('p2_line1_text', 'Congratulations, you are now Sam\'s Valentine! ❤️'),
('p2_line2_text', 'He is so incredibly lucky to have someone in his life who would click yes.'),
('p2_hint_text', 'Redirecting you to a special surprise in 15 seconds...');

2
db/migrations/005_add_button_color_settings.sql
View File

@ -1,2 +0,0 @@
INSERT INTO settings (setting_key, setting_value) VALUES ('yes_btn_color', '#e63946') ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);
INSERT INTO settings (setting_key, setting_value) VALUES ('no_btn_color', '#ffffff') ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value);

210
index.php
View File

@ -7,43 +7,17 @@ $stmt = db()->prepare("SELECT setting_key, setting_value FROM settings");
$stmt->execute();
$settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
$valentineImage = $settings['valentine_image'] ?: 'assets/pasted-20260206-164030-456a591e.jpg';
$valentineImage = $settings['valentine_image'] ?? '';
$isLocked = ($settings['is_locked'] ?? '0') === '1';
$bgColor = $settings['bg_color'] ?? '#ffe4e6';
$bgImage = $settings['bg_image'] ?? '';
$popupColor = $settings['popup_color'] ?? '#ffccd5';
// New settings
$p1TitleColor = $settings['p1_title_color'] ?? '#e63946';
$p1TitleSize = $settings['p1_title_size'] ?? '1.75rem';
$p1TitleFont = $settings['p1_title_font'] ?? 'Inter';
$p1TitleText = $settings['p1_title_text'] ?? 'Gvantsa, would you be my valentine?';
$p2TextColor = $settings['p2_text_color'] ?? '#e63946';
$p2TextSize = $settings['p2_text_size'] ?? '1.25rem';
$p2TextFont = $settings['p2_text_font'] ?? 'Inter';
$p2Line1Text = $settings['p2_line1_text'] ?? "Congratulations, you are now Sam's Valentine! ❤️";
$p2Line2Text = $settings['p2_line2_text'] ?? 'He is so incredibly lucky to have someone in his life who would click yes.';
$p2HintColor = $settings['p2_hint_color'] ?? '#636e72';
$p2HintSize = $settings['p2_hint_size'] ?? '0.85rem';
$p2HintFont = $settings['p2_hint_font'] ?? 'Inter';
$p2HintText = $settings['p2_hint_text'] ?? 'Redirecting you to a special surprise in 15 seconds...';
$imageRadius = $settings['image_radius'] ?? '12px';
$yesBtnColor = $settings['yes_btn_color'] ?? '#e63946';
$noBtnColor = $settings['no_btn_color'] ?? '#ffffff';
$fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier New', 'Brush Script MT', 'Comic Sans MS'];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?= htmlspecialchars($p1TitleText) ?></title>
<title>Gvantsa, would you be my valentine?</title>
<?php
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal for Gvantsa.';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
?>
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
@ -58,173 +32,31 @@ $fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier Ne
<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 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' ?>;
--p1-title-color: <?= htmlspecialchars($p1TitleColor) ?>;
--p1-title-size: <?= htmlspecialchars($p1TitleSize) ?>;
--p1-title-font: <?= htmlspecialchars($p1TitleFont) ?>;
--p2-text-color: <?= htmlspecialchars($p2TextColor) ?>;
--p2-text-size: <?= htmlspecialchars($p2TextSize) ?>;
--p2-text-font: <?= htmlspecialchars($p2TextFont) ?>;
--p2-hint-color: <?= htmlspecialchars($p2HintColor) ?>;
--p2-hint-size: <?= htmlspecialchars($p2HintSize) ?>;
--p2-hint-font: <?= htmlspecialchars($p2HintFont) ?>;
--image-radius: <?= htmlspecialchars($imageRadius) ?>;
--yes-btn-color: <?= htmlspecialchars($yesBtnColor) ?>;
--no-btn-color: <?= htmlspecialchars($noBtnColor) ?>;
}
</style>
</head>
<body class="<?= $isLocked ? 'state-locked' : '' ?>">
<div class="admin-controls">
<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-tabs">
<button class="tab-btn active" data-tab="general">General</button>
<button class="tab-btn" data-tab="page1">Page 1</button>
<button class="tab-btn" data-tab="page2">Page 2</button>
</div>
<div id="tab-general" class="tab-content active">
<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>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 class="settings-group">
<label>Image Rounding (px)</label>
<input type="range" id="image-radius-picker" min="0" max="100" value="<?= (int)str_replace('px', '', $imageRadius) ?>">
</div>
</div>
<div id="tab-page1" class="tab-content">
<div class="settings-group">
<label>Title Text</label>
<input type="text" class="setting-input" data-key="p1_title_text" value="<?= htmlspecialchars($p1TitleText) ?>">
</div>
<div class="settings-group">
<label>Title Color</label>
<input type="color" class="setting-input" data-key="p1_title_color" value="<?= htmlspecialchars($p1TitleColor) ?>">
</div>
<div class="settings-group">
<label>Title Size (rem)</label>
<input type="range" class="setting-input" data-key="p1_title_size" min="1" max="5" step="0.1" value="<?= (float)str_replace('rem', '', $p1TitleSize) ?>">
</div>
<div class="settings-group">
<label>Title Font</label>
<select class="setting-input" data-key="p1_title_font">
<?php foreach ($fonts as $font): ?>
<option value="<?= $font ?>" <?= $p1TitleFont === $font ? 'selected' : '' ?>><?= $font ?></option>
<?php endforeach; ?>
</select>
</div>
<hr>
<div class="settings-group">
<label>Yes Button Color</label>
<input type="color" class="setting-input" data-key="yes_btn_color" value="<?= htmlspecialchars($yesBtnColor) ?>">
</div>
<div class="settings-group">
<label>No Button Color</label>
<input type="color" class="setting-input" data-key="no_btn_color" value="<?= htmlspecialchars($noBtnColor) ?>">
</div>
</div>
<div id="tab-page2" class="tab-content">
<div class="settings-group">
<label style="display: flex; align-items: center; gap: 5px;">
<input type="checkbox" id="preview-page2-toggle"> Preview Page 2
</label>
</div>
<div class="settings-group">
<label>Line 1 Text</label>
<input type="text" class="setting-input" data-key="p2_line1_text" value="<?= htmlspecialchars($p2Line1Text) ?>">
</div>
<div class="settings-group">
<label>Line 2 Text</label>
<input type="text" class="setting-input" data-key="p2_line2_text" value="<?= htmlspecialchars($p2Line2Text) ?>">
</div>
<div class="settings-group">
<label>Text Color</label>
<input type="color" class="setting-input" data-key="p2_text_color" value="<?= htmlspecialchars($p2TextColor) ?>">
</div>
<div class="settings-group">
<label>Text Size (rem)</label>
<input type="range" class="setting-input" data-key="p2_text_size" min="1" max="3" step="0.1" value="<?= (float)str_replace('rem', '', $p2TextSize) ?>">
</div>
<div class="settings-group">
<label>Text Font</label>
<select class="setting-input" data-key="p2_text_font">
<?php foreach ($fonts as $font): ?>
<option value="<?= $font ?>" <?= $p2TextFont === $font ? 'selected' : '' ?>><?= $font ?></option>
<?php endforeach; ?>
</select>
</div>
<hr>
<div class="settings-group">
<label>Hint Text</label>
<input type="text" class="setting-input" data-key="p2_hint_text" value="<?= htmlspecialchars($p2HintText) ?>">
</div>
<div class="settings-group">
<label>Hint Color</label>
<input type="color" class="setting-input" data-key="p2_hint_color" value="<?= htmlspecialchars($p2HintColor) ?>">
</div>
<div class="settings-group">
<label>Hint Size (rem)</label>
<input type="range" class="setting-input" data-key="p2_hint_size" min="0.5" max="2" step="0.05" value="<?= (float)str_replace('rem', '', $p2HintSize) ?>">
</div>
<div class="settings-group">
<label>Hint Font</label>
<select class="setting-input" data-key="p2_hint_font">
<?php foreach ($fonts as $font): ?>
<option value="<?= $font ?>" <?= $p2HintFont === $font ? 'selected' : '' ?>><?= $font ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<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 class="container">
<div id="proposal-box">
<h1 class="p1-title"><?= htmlspecialchars($p1TitleText) ?></h1>
<h1>Gvantsa, would you be my valentine?</h1>
<div class="image-preview-container has-image">
<img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
<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>
<input type="file" id="image-input" accept="image/*">
<div class="button-group">
<button id="yes-btn" class="btn btn-yes">Yes</button>
@ -233,9 +65,9 @@ $fonts = ['Inter', 'Arial', 'Verdana', 'Times New Roman', 'Georgia', 'Courier Ne
</div>
<div id="success-message">
<p class="success-text p2-line1"><?= htmlspecialchars($p2Line1Text) ?></p>
<p class="success-text p2-line2"><?= htmlspecialchars($p2Line2Text) ?></p>
<div class="redirect-hint"><?= htmlspecialchars($p2HintText) ?></div>
<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>
<div class="redirect-hint">Redirecting you to a special surprise in 15 seconds...</div>
</div>
</div>