Revert to version f0fcbb7
This commit is contained in:
Flatlogic Bot
parent
ef3b11f0eb
commit
db2b036408
@ -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,45 @@ 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 === '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 = 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.']);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,8 @@
|
||||
:root {
|
||||
--primary-color: #e63946;
|
||||
--bg-color: #ffe4e6; /* Light Pink */
|
||||
--popup-bg: #ffccd5; /* Light Red */
|
||||
--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);
|
||||
@ -10,6 +11,10 @@
|
||||
|
||||
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;
|
||||
@ -25,8 +30,15 @@ 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 {
|
||||
@ -50,6 +62,53 @@ 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: 200px;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@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"] {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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%;
|
||||
@ -74,7 +133,7 @@ h1 {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border: 2px dashed rgba(0,0,0,0.1);
|
||||
border: 2px solid rgba(0,0,0,0.05);
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
@ -82,26 +141,12 @@ h1 {
|
||||
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 {
|
||||
@ -168,6 +213,6 @@ h1 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#image-input {
|
||||
#image-input, #bg-image-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,51 +1,96 @@
|
||||
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');
|
||||
|
||||
let yesScale = 1;
|
||||
let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
|
||||
|
||||
// Image Upload Logic
|
||||
document.querySelector('.image-preview-container').addEventListener('click', () => {
|
||||
if (isLocked) return;
|
||||
imageInput.click();
|
||||
});
|
||||
// Settings Toggle
|
||||
if (settingsToggle) {
|
||||
settingsToggle.addEventListener('click', () => {
|
||||
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
imageInput.addEventListener('change', function() {
|
||||
const file = this.files[0];
|
||||
if (file) {
|
||||
// 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', 'upload_image');
|
||||
formData.append('image', file);
|
||||
formData.append('action', 'update_bg_color');
|
||||
formData.append('color', e.target.value);
|
||||
fetch('api/save_settings.php', { method: 'POST', body: formData });
|
||||
});
|
||||
}
|
||||
|
||||
fetch('api/save_settings.php', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
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 })
|
||||
.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');
|
||||
document.documentElement.style.setProperty('--bg-image', 'none');
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
alert('An error occurred during upload.');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Lock/Unlock Toggle
|
||||
lockBtn.addEventListener('click', () => {
|
||||
@ -61,9 +106,6 @@ 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();
|
||||
}
|
||||
});
|
||||
@ -71,7 +113,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Reset Experience
|
||||
resetBtn.addEventListener('click', () => {
|
||||
if (confirm('Reset everything? This will clear the image and unlock changes.')) {
|
||||
if (confirm('Reset everything to defaults?')) {
|
||||
const formData = new FormData();
|
||||
formData.append('action', 'reset');
|
||||
|
||||
@ -92,7 +134,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const dodgeThreshold = 100; // pixels
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (successBox.style.display === 'block') return;
|
||||
if (!noBtn || (successBox && successBox.style.display === 'block')) return;
|
||||
|
||||
const rect = noBtn.getBoundingClientRect();
|
||||
const btnCenterX = rect.left + rect.width / 2;
|
||||
@ -120,46 +162,48 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
// "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")
|
||||
});
|
||||
if (noBtn) {
|
||||
noBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
yesScale += 0.15;
|
||||
yesBtn.style.transform = `scale(${yesScale})`;
|
||||
});
|
||||
}
|
||||
|
||||
// "Yes" Click Logic
|
||||
yesBtn.addEventListener('click', () => {
|
||||
proposalBox.style.display = 'none';
|
||||
successBox.style.display = 'block';
|
||||
|
||||
// Hide controls during celebration
|
||||
document.querySelector('.admin-controls').style.display = 'none';
|
||||
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 };
|
||||
// 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);
|
||||
function randomInRange(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
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);
|
||||
const interval = setInterval(function() {
|
||||
const timeLeft = animationEnd - Date.now();
|
||||
|
||||
// Redirect after 15s
|
||||
setTimeout(() => {
|
||||
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
|
||||
}, 15000);
|
||||
});
|
||||
});
|
||||
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
BIN
assets/pasted-20260206-164030-456a591e.jpg
Normal file
BIN
assets/pasted-20260206-164030-456a591e.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
2
db/migrations/002_add_background_settings.sql
Normal file
2
db/migrations/002_add_background_settings.sql
Normal 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';
|
||||
64
index.php
64
index.php
@ -7,8 +7,11 @@ $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';
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
@ -32,31 +35,60 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
|
||||
<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' ?>;
|
||||
}
|
||||
</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-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>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="proposal-box">
|
||||
<h1>Gvantsa, would you be my valentine?</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>
|
||||
@ -77,4 +109,4 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
|
||||
</script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user