Revert to version 5448d80
This commit is contained in:
Flatlogic Bot
parent
da6262f175
commit
907d0aa994
@ -57,69 +57,22 @@ if ($action === 'upload_bg_image') {
|
|||||||
} else {
|
} else {
|
||||||
echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
|
echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
|
||||||
}
|
}
|
||||||
} elseif ($action === 'update_second_page_text_color') {
|
} elseif ($action === 'update_setting') {
|
||||||
$color = $_POST['color'] ?? '';
|
$key = $_POST['key'] ?? '';
|
||||||
if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
|
$value = $_POST['value'] ?? '';
|
||||||
$stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'second_page_text_color'");
|
$allowedKeys = [
|
||||||
$stmt->execute([$color]);
|
'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]);
|
echo json_encode(['success' => true]);
|
||||||
} else {
|
} else {
|
||||||
echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
|
echo json_encode(['success' => false, 'error' => 'Invalid setting key.']);
|
||||||
}
|
}
|
||||||
} 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') {
|
} elseif ($action === 'remove_bg_image') {
|
||||||
$stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
|
$stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
|
||||||
$stmt->execute();
|
$stmt->execute();
|
||||||
@ -130,30 +83,8 @@ if ($action === 'upload_bg_image') {
|
|||||||
$stmt->execute([$lockValue]);
|
$stmt->execute([$lockValue]);
|
||||||
echo json_encode(['success' => true, 'locked' => $lockValue === '1']);
|
echo json_encode(['success' => true, 'locked' => $lockValue === '1']);
|
||||||
} elseif ($action === 'reset') {
|
} elseif ($action === 'reset') {
|
||||||
$defaults = [
|
// Reset button positions and sizes is handled by reloading the page in the frontend.
|
||||||
'valentine_image' => 'assets/pasted-20260206-164030-456a591e.jpg',
|
// We no longer reset colors or text content here.
|
||||||
'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]);
|
echo json_encode(['success' => true]);
|
||||||
} else {
|
} else {
|
||||||
echo json_encode(['success' => false, 'error' => 'Invalid action.']);
|
echo json_encode(['success' => false, 'error' => 'Invalid action.']);
|
||||||
|
|||||||
@ -1,254 +1,294 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg-color: #ffe4e6;
|
--primary-color: #e63946;
|
||||||
--popup-bg: #ffccd5;
|
--bg-color: #ffe4e6; /* Default Light Pink */
|
||||||
--bg-image: none;
|
--popup-bg: #ffccd5; /* Default Light Red */
|
||||||
--font-family: 'Inter', sans-serif;
|
--bg-image: none;
|
||||||
--second-page-text-color: #e63946;
|
--text-color: #2d3436;
|
||||||
--second-page-box-pos-y: 0px;
|
--secondary-text: #636e72;
|
||||||
--image-border-radius: 12px;
|
--border-color: rgba(0,0,0,0.05);
|
||||||
|
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
--proposal-text-color: #e63946;
|
|
||||||
--proposal-text-size: 2rem;
|
--p1-title-color: #e63946;
|
||||||
--success-text-1-size: 1.5rem;
|
--p1-title-size: 1.75rem;
|
||||||
--success-text-2-size: 0.9rem;
|
--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 {
|
body {
|
||||||
margin: 0;
|
background-color: var(--bg-color);
|
||||||
padding: 0;
|
background-image: var(--bg-image);
|
||||||
font-family: var(--font-family);
|
background-size: cover;
|
||||||
background-color: var(--bg-color);
|
background-position: center;
|
||||||
background-image: var(--bg-image);
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
color: var(--text-color);
|
||||||
background-position: center;
|
font-family: var(--font-family);
|
||||||
background-attachment: fixed;
|
margin: 0;
|
||||||
min-height: 100vh;
|
display: flex;
|
||||||
display: flex;
|
justify-content: center;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
align-items: center;
|
min-height: 100vh;
|
||||||
transition: background-color 0.3s ease;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 500px;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#proposal-box, #success-message {
|
|
||||||
background-color: var(--popup-bg);
|
|
||||||
padding: 2.5rem;
|
|
||||||
border-radius: 20px;
|
|
||||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#success-message {
|
|
||||||
display: none;
|
|
||||||
animation: fadeInScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
|
||||||
transform: translateY(var(--second-page-box-pos-y));
|
|
||||||
}
|
|
||||||
|
|
||||||
#success-message.preview-mode {
|
|
||||||
animation: none; /* No animation for preview to make it snappier */
|
|
||||||
}
|
|
||||||
|
|
||||||
#success-message.preview-mode .redirect-hint {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInScale {
|
|
||||||
from { opacity: 0; transform: translateY(calc(var(--second-page-box-pos-y) + 20px)) scale(0.9); }
|
|
||||||
to { opacity: 1; transform: translateY(var(--second-page-box-pos-y)) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: var(--proposal-text-color);
|
|
||||||
font-size: var(--proposal-text-size);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-preview-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 250px;
|
|
||||||
background: #f1f5f9;
|
|
||||||
border-radius: var(--image-border-radius);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
border: 2px dashed #cbd5e1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-preview-container.has-image {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-preview-container img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0.8rem 2rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 50px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-yes {
|
|
||||||
background-color: #e63946;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-no {
|
|
||||||
background-color: #f8fafc;
|
|
||||||
color: #64748b;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-text {
|
|
||||||
font-size: var(--success-text-1-size);
|
|
||||||
color: var(--second-page-text-color);
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-text-small {
|
|
||||||
font-size: var(--success-text-2-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
.redirect-hint {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #64748b;
|
|
||||||
margin-top: 2rem;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin Controls */
|
|
||||||
.admin-controls {
|
.admin-controls {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 20px;
|
top: 1rem;
|
||||||
right: 20px;
|
right: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
gap: 0.5rem;
|
||||||
gap: 10px;
|
z-index: 100;
|
||||||
z-index: 1000;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-buttons {
|
.control-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-controls button {
|
.admin-controls button {
|
||||||
background: white;
|
background: rgba(255, 255, 255, 0.8);
|
||||||
border: 1px solid #e2e8f0;
|
border: none;
|
||||||
padding: 8px;
|
border-radius: 50%;
|
||||||
border-radius: 8px;
|
width: 36px;
|
||||||
cursor: pointer;
|
height: 36px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
color: #64748b;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s ease;
|
||||||
|
color: var(--secondary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-controls button:hover {
|
.admin-controls button:hover {
|
||||||
background: #f8fafc;
|
background: #fff;
|
||||||
color: #e63946;
|
color: var(--primary-color);
|
||||||
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-panel {
|
.settings-panel {
|
||||||
background: white;
|
background: white;
|
||||||
border: 1px solid #e2e8f0;
|
padding: 1rem;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 15px;
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||||
width: 280px;
|
margin-top: 0.5rem;
|
||||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
gap: 0.75rem;
|
||||||
gap: 12px;
|
width: 250px;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
animation: slideDown 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-scroll-area {
|
.settings-tabs {
|
||||||
max-height: 400px;
|
display: flex;
|
||||||
overflow-y: auto;
|
border-bottom: 1px solid #eee;
|
||||||
padding-right: 5px;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-scroll-area::-webkit-scrollbar {
|
.tab-btn {
|
||||||
width: 6px;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-scroll-area::-webkit-scrollbar-thumb {
|
.tab-btn.active {
|
||||||
background: #e2e8f0;
|
border-bottom-color: var(--primary-color) !important;
|
||||||
border-radius: 10px;
|
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 {
|
.settings-group {
|
||||||
margin-bottom: 15px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
.settings-group:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-group label {
|
.settings-group label {
|
||||||
display: block;
|
font-size: 0.75rem;
|
||||||
font-size: 0.8rem;
|
font-weight: 600;
|
||||||
color: #64748b;
|
color: var(--secondary-text);
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-group input[type="color"],
|
.settings-group input[type="color"],
|
||||||
.settings-group input[type="number"],
|
|
||||||
.settings-group select {
|
.settings-group select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 6px;
|
height: 30px;
|
||||||
border: 1px solid #e2e8f0;
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 6px;
|
border-radius: 4px;
|
||||||
outline: none;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-small {
|
.settings-group input[type="range"] {
|
||||||
padding: 4px 10px !important;
|
width: 100%;
|
||||||
font-size: 0.75rem !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#bg-image-input {
|
.settings-group .btn-small {
|
||||||
display: none;
|
padding: 4px 8px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
background: #f1f2f6;
|
||||||
|
border: 1px solid #dfe4ea;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* State management */
|
.container {
|
||||||
.state-locked .admin-controls #lock-btn {
|
max-width: 500px;
|
||||||
opacity: 0.3;
|
width: 90%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: var(--popup-bg);
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.state-locked .admin-controls #lock-btn:hover {
|
|
||||||
opacity: 1;
|
h1.p1-title {
|
||||||
|
font-size: var(--p1-title-size);
|
||||||
|
font-family: var(--p1-title-font), var(--font-family);
|
||||||
|
color: var(--p1-title-color);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; min-height: 200px; max-height: 400px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.5);
|
||||||
|
border: 2px solid rgba(0,0,0,0.05);
|
||||||
|
border-radius: var(--image-radius);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-preview-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; max-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
position: relative;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 1.125rem 2.625rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 12px;
|
||||||
|
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);
|
||||||
|
color: white;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-yes:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-no {
|
||||||
|
background-color: var(--no-btn-color);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-text {
|
||||||
|
font-size: var(--p2-text-size);
|
||||||
|
font-family: var(--p2-text-font), var(--font-family);
|
||||||
|
color: var(--p2-text-color);
|
||||||
|
line-height: 1.6;
|
||||||
|
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-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image-input, #bg-image-input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
@ -1,282 +1,228 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const yesBtn = document.getElementById('yes-btn');
|
|
||||||
const noBtn = document.getElementById('no-btn');
|
const noBtn = document.getElementById('no-btn');
|
||||||
|
const yesBtn = document.getElementById('yes-btn');
|
||||||
const proposalBox = document.getElementById('proposal-box');
|
const proposalBox = document.getElementById('proposal-box');
|
||||||
const successMessage = document.getElementById('success-message');
|
const successBox = document.getElementById('success-message');
|
||||||
const resetBtn = document.getElementById('reset-btn');
|
|
||||||
const lockBtn = document.getElementById('lock-btn');
|
const lockBtn = document.getElementById('lock-btn');
|
||||||
|
const resetBtn = document.getElementById('reset-btn');
|
||||||
const settingsToggle = document.getElementById('settings-toggle');
|
const settingsToggle = document.getElementById('settings-toggle');
|
||||||
const settingsPanel = document.getElementById('settings-panel');
|
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 bgColorPicker = document.getElementById('bg-color-picker');
|
||||||
const popupColorPicker = document.getElementById('popup-color-picker');
|
const popupColorPicker = document.getElementById('popup-color-picker');
|
||||||
const bgImageInput = document.getElementById('bg-image-input');
|
const bgImageInput = document.getElementById('bg-image-input');
|
||||||
const removeBgBtn = document.getElementById('remove-bg-btn');
|
const removeBgBtn = document.getElementById('remove-bg-btn');
|
||||||
const fontFamilySelect = document.getElementById('font-family-select');
|
const imageRadiusPicker = document.getElementById('image-radius-picker');
|
||||||
const secondPageTextColorPicker = document.getElementById('second-page-text-color-picker');
|
const previewPage2Toggle = document.getElementById('preview-page2-toggle');
|
||||||
const secondPageBoxPosYInput = document.getElementById('second-page-box-pos-y-input');
|
|
||||||
const imageBorderRadiusInput = document.getElementById('image-border-radius-input');
|
|
||||||
|
|
||||||
// New setting inputs
|
let yesScale = 1;
|
||||||
const proposalTextColorPicker = document.getElementById('proposal-text-color-picker');
|
let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
|
||||||
const proposalTextSizeInput = document.getElementById('proposal-text-size-input');
|
|
||||||
const successText1SizeInput = document.getElementById('success-text-1-size-input');
|
|
||||||
const successText2SizeInput = document.getElementById('success-text-2-size-input');
|
|
||||||
const proposalTextInput = document.getElementById('proposal-text-input');
|
|
||||||
const successText1Input = document.getElementById('success-text-1-input');
|
|
||||||
const successText2Input = document.getElementById('success-text-2-input');
|
|
||||||
|
|
||||||
// Display elements
|
|
||||||
const proposalTextDisplay = document.getElementById('proposal-text-display');
|
|
||||||
const successText1Display = document.getElementById('success-text-1-display');
|
|
||||||
const successText2Display = document.getElementById('success-text-2-display');
|
|
||||||
|
|
||||||
let noCount = 0;
|
// Audio Context for sounds
|
||||||
const phrases = [
|
const AudioCtx = window.AudioContext || window.webkitAudioContext;
|
||||||
"No", "Are you sure?", "Really sure?", "Think again!", "Last chance!",
|
let audioCtx = null;
|
||||||
"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 ;("
|
|
||||||
];
|
|
||||||
|
|
||||||
// No button movement and text change
|
function playSound(type) {
|
||||||
noBtn.addEventListener('click', () => {
|
if (!audioCtx) audioCtx = new AudioCtx();
|
||||||
noCount++;
|
const osc = audioCtx.createOscillator();
|
||||||
noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)];
|
const gain = audioCtx.createGain();
|
||||||
|
|
||||||
const currentSize = parseFloat(window.getComputedStyle(yesBtn).fontSize);
|
osc.connect(gain);
|
||||||
yesBtn.style.fontSize = `${currentSize * 1.2}px`;
|
gain.connect(audioCtx.destination);
|
||||||
yesBtn.style.padding = `${parseFloat(window.getComputedStyle(yesBtn).paddingTop) * 1.2}px ${parseFloat(window.getComputedStyle(yesBtn).paddingLeft) * 1.2}px`;
|
|
||||||
|
|
||||||
// Randomly move No button
|
const now = audioCtx.currentTime;
|
||||||
const container = document.getElementById('main-container');
|
|
||||||
const containerRect = container.getBoundingClientRect();
|
|
||||||
const btnRect = noBtn.getBoundingClientRect();
|
|
||||||
|
|
||||||
const maxX = containerRect.width - btnRect.width;
|
if (type === 'happy') {
|
||||||
const maxY = containerRect.height - btnRect.height;
|
// Happy sound: Arpeggio
|
||||||
|
osc.type = 'sine';
|
||||||
const randomX = Math.floor(Math.random() * maxX);
|
osc.frequency.setValueAtTime(523.25, now); // C5
|
||||||
const randomY = Math.floor(Math.random() * maxY);
|
osc.frequency.exponentialRampToValueAtTime(880, now + 0.1); // A5
|
||||||
|
gain.gain.setValueAtTime(0.3, now);
|
||||||
noBtn.style.position = 'absolute';
|
gain.gain.exponentialRampToValueAtTime(0.01, now + 0.3);
|
||||||
noBtn.style.left = `${randomX}px`;
|
osc.start(now);
|
||||||
noBtn.style.top = `${randomY}px`;
|
osc.stop(now + 0.3);
|
||||||
});
|
|
||||||
|
|
||||||
// Yes button action
|
|
||||||
yesBtn.addEventListener('click', () => {
|
|
||||||
if (previewSuccessToggle.checked) return; // Ignore if in preview mode
|
|
||||||
|
|
||||||
proposalBox.style.display = 'none';
|
|
||||||
successMessage.style.display = 'block';
|
|
||||||
|
|
||||||
// Confetti effect
|
|
||||||
const duration = 15 * 1000;
|
|
||||||
const animationEnd = Date.now() + duration;
|
|
||||||
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
|
||||||
|
|
||||||
function randomInRange(min, max) {
|
|
||||||
return Math.random() * (max - min) + min;
|
|
||||||
}
|
|
||||||
|
|
||||||
const interval = setInterval(function() {
|
|
||||||
const timeLeft = animationEnd - Date.now();
|
|
||||||
|
|
||||||
if (timeLeft <= 0) {
|
|
||||||
return clearInterval(interval);
|
|
||||||
}
|
|
||||||
|
|
||||||
const particleCount = 50 * (timeLeft / duration);
|
|
||||||
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
|
|
||||||
confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
|
|
||||||
}, 250);
|
|
||||||
|
|
||||||
// Redirect after 15 seconds
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
|
|
||||||
}, 15000);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Preview Success Page logic
|
|
||||||
previewSuccessToggle.addEventListener('change', (e) => {
|
|
||||||
if (e.target.checked) {
|
|
||||||
proposalBox.style.display = 'none';
|
|
||||||
successMessage.style.display = 'block';
|
|
||||||
successMessage.classList.add('preview-mode');
|
|
||||||
} else {
|
} else {
|
||||||
proposalBox.style.display = 'block';
|
// Less happy sound: Low thud
|
||||||
successMessage.style.display = 'none';
|
osc.type = 'triangle';
|
||||||
successMessage.classList.remove('preview-mode');
|
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);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
// Toggle settings panel
|
// Settings Toggle
|
||||||
settingsToggle.addEventListener('click', () => {
|
if (settingsToggle) {
|
||||||
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
|
settingsToggle.addEventListener('click', () => {
|
||||||
});
|
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Update background color
|
// Tabs logic
|
||||||
bgColorPicker.addEventListener('input', (e) => {
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
||||||
document.documentElement.style.setProperty('--bg-color', e.target.value);
|
const tabContents = document.querySelectorAll('.tab-content');
|
||||||
});
|
tabBtns.forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
bgColorPicker.addEventListener('change', (e) => {
|
const tab = btn.dataset.tab;
|
||||||
saveSetting('update_bg_color', { color: e.target.value });
|
tabBtns.forEach(b => b.classList.remove('active'));
|
||||||
});
|
tabContents.forEach(c => c.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
// Update popup color
|
document.getElementById(`tab-${tab}`).classList.add('active');
|
||||||
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
|
// 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) => {
|
||||||
|
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 });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
if (removeBgBtn) {
|
||||||
removeBgBtn.addEventListener('click', () => {
|
removeBgBtn.addEventListener('click', () => {
|
||||||
saveSetting('remove_bg_image', {}).then(() => {
|
const formData = new FormData();
|
||||||
location.reload();
|
formData.append('action', 'remove_bg_image');
|
||||||
|
fetch('api/save_settings.php', { method: 'POST', body: formData })
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
document.documentElement.style.setProperty('--bg-image', 'none');
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Toggle Lock
|
// Lock/Unlock Toggle
|
||||||
lockBtn.addEventListener('click', () => {
|
lockBtn.addEventListener('click', () => {
|
||||||
const newLockState = !IS_LOCKED;
|
const newLockedState = !isLocked;
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('action', 'toggle_lock');
|
formData.append('action', 'toggle_lock');
|
||||||
formData.append('lock', newLockState);
|
formData.append('lock', newLockedState);
|
||||||
|
|
||||||
fetch('api/save_settings.php', {
|
fetch('api/save_settings.php', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData
|
body: formData
|
||||||
})
|
})
|
||||||
.then(res => res.json())
|
.then(response => response.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
location.reload();
|
location.reload();
|
||||||
@ -284,30 +230,101 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Reset settings
|
// Reset Experience
|
||||||
resetBtn.addEventListener('click', () => {
|
resetBtn.addEventListener('click', () => {
|
||||||
if (confirm('Are you sure you want to reset all settings to defaults?')) {
|
if (confirm('Reset experience to page 1? (Positions and sizes will be reset)')) {
|
||||||
saveSetting('reset', {}).then(() => {
|
const formData = new FormData();
|
||||||
location.reload();
|
formData.append('action', 'reset');
|
||||||
|
|
||||||
|
fetch('api/save_settings.php', {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
async function saveSetting(action, data) {
|
// "No" Button Dodging Logic
|
||||||
const formData = new FormData();
|
const dodgeThreshold = 100; // pixels
|
||||||
formData.append('action', action);
|
|
||||||
for (const key in data) {
|
|
||||||
formData.append(key, data[key]);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
document.addEventListener('mousemove', (e) => {
|
||||||
const res = await fetch('api/save_settings.php', {
|
if (!noBtn || (successBox && successBox.style.display === 'block') || (previewPage2Toggle && previewPage2Toggle.checked)) return;
|
||||||
method: 'POST',
|
|
||||||
body: formData
|
const rect = noBtn.getBoundingClientRect();
|
||||||
});
|
const btnCenterX = rect.left + rect.width / 2;
|
||||||
return await res.json();
|
const btnCenterY = rect.top + rect.height / 2;
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to save setting:', err);
|
const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY);
|
||||||
|
|
||||||
|
if (distance < dodgeThreshold) {
|
||||||
|
const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX);
|
||||||
|
const moveDist = dodgeThreshold - distance + 20;
|
||||||
|
|
||||||
|
let newX = rect.left - Math.cos(angle) * moveDist;
|
||||||
|
let newY = rect.top - Math.sin(angle) * moveDist;
|
||||||
|
|
||||||
|
// Keep within viewport bounds
|
||||||
|
const padding = 20;
|
||||||
|
newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX));
|
||||||
|
newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY));
|
||||||
|
|
||||||
|
noBtn.style.position = 'fixed';
|
||||||
|
noBtn.style.left = `${newX}px`;
|
||||||
|
noBtn.style.top = `${newY}px`;
|
||||||
|
noBtn.style.margin = '0';
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// "No" Click Logic
|
||||||
|
if (noBtn) {
|
||||||
|
noBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
playSound('sad');
|
||||||
|
yesScale += 0.15;
|
||||||
|
yesBtn.style.transform = `scale(${yesScale})`;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
// "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';
|
||||||
|
|
||||||
|
// Confetti effect
|
||||||
|
const duration = 15 * 1000;
|
||||||
|
const animationEnd = Date.now() + duration;
|
||||||
|
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
|
||||||
|
|
||||||
|
function randomInRange(min, max) {
|
||||||
|
return Math.random() * (max - min) + min;
|
||||||
|
}
|
||||||
|
|
||||||
|
const interval = setInterval(function() {
|
||||||
|
const timeLeft = animationEnd - Date.now();
|
||||||
|
|
||||||
|
if (timeLeft <= 0) {
|
||||||
|
return clearInterval(interval);
|
||||||
|
}
|
||||||
|
|
||||||
|
const particleCount = 50 * (timeLeft / duration);
|
||||||
|
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
|
||||||
|
confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
|
||||||
|
}, 250);
|
||||||
|
|
||||||
|
// Redirect after 15s
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
|
||||||
|
}, 15000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -1,5 +0,0 @@
|
|||||||
INSERT IGNORE INTO settings (setting_key, setting_value) VALUES
|
|
||||||
('font_family', "'Inter', sans-serif"),
|
|
||||||
('second_page_text_color', '#e63946'),
|
|
||||||
('second_page_box_pos_y', '0'),
|
|
||||||
('image_border_radius', '12');
|
|
||||||
12
db/migrations/003_add_text_and_image_settings.sql
Normal file
12
db/migrations/003_add_text_and_image_settings.sql
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
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);
|
||||||
@ -1,9 +0,0 @@
|
|||||||
INSERT IGNORE INTO settings (setting_key, setting_value) VALUES
|
|
||||||
('proposal_text', 'Gvantsa, would you be my valentine?'),
|
|
||||||
('success_text_1', 'Congratulations, you are now Sam\'s Valentine! ❤️'),
|
|
||||||
('success_text_2', 'He is so incredibly lucky to have someone in his life who would click yes.'),
|
|
||||||
('proposal_text_color', '#e63946'),
|
|
||||||
('proposal_text_size', '2'),
|
|
||||||
('success_text_1_size', '1.5'),
|
|
||||||
('success_text_2_size', '0.9');
|
|
||||||
|
|
||||||
6
db/migrations/004_add_text_content_settings.sql
Normal file
6
db/migrations/004_add_text_content_settings.sql
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
-- 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
Normal file
2
db/migrations/005_add_button_color_settings.sql
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
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);
|
||||||
224
index.php
224
index.php
@ -12,27 +12,36 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
|
|||||||
$bgColor = $settings['bg_color'] ?? '#ffe4e6';
|
$bgColor = $settings['bg_color'] ?? '#ffe4e6';
|
||||||
$bgImage = $settings['bg_image'] ?? '';
|
$bgImage = $settings['bg_image'] ?? '';
|
||||||
$popupColor = $settings['popup_color'] ?? '#ffccd5';
|
$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
|
// New settings
|
||||||
$proposalText = $settings['proposal_text'] ?? 'Gvantsa, would you be my valentine?';
|
$p1TitleColor = $settings['p1_title_color'] ?? '#e63946';
|
||||||
$successText1 = $settings['success_text_1'] ?? "Congratulations, you are now Sam's Valentine! ❤️";
|
$p1TitleSize = $settings['p1_title_size'] ?? '1.75rem';
|
||||||
$successText2 = $settings['success_text_2'] ?? "He is so incredibly lucky to have someone in his life who would click yes.";
|
$p1TitleFont = $settings['p1_title_font'] ?? 'Inter';
|
||||||
$proposalTextColor = $settings['proposal_text_color'] ?? '#e63946';
|
$p1TitleText = $settings['p1_title_text'] ?? 'Gvantsa, would you be my valentine?';
|
||||||
$proposalTextSize = $settings['proposal_text_size'] ?? '2';
|
|
||||||
$successText1Size = $settings['success_text_1_size'] ?? '1.5';
|
|
||||||
$successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|
||||||
|
|
||||||
|
$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>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title><?= htmlspecialchars($proposalText) ?></title>
|
<title><?= htmlspecialchars($p1TitleText) ?></title>
|
||||||
<?php
|
<?php
|
||||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
|
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
|
||||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
|
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
|
||||||
@ -47,22 +56,29 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<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 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(); ?>">
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg-color: <?= htmlspecialchars($bgColor) ?>;
|
--bg-color: <?= htmlspecialchars($bgColor) ?>;
|
||||||
--popup-bg: <?= htmlspecialchars($popupColor) ?>;
|
--popup-bg: <?= htmlspecialchars($popupColor) ?>;
|
||||||
--bg-image: <?= $bgImage ? "url('" . htmlspecialchars($bgImage) . "')" : 'none' ?>;
|
--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) ?>;
|
--p1-title-color: <?= htmlspecialchars($p1TitleColor) ?>;
|
||||||
--proposal-text-size: <?= htmlspecialchars($proposalTextSize) ?>rem;
|
--p1-title-size: <?= htmlspecialchars($p1TitleSize) ?>;
|
||||||
--success-text-1-size: <?= htmlspecialchars($successText1Size) ?>rem;
|
--p1-title-font: <?= htmlspecialchars($p1TitleFont) ?>;
|
||||||
--success-text-2-size: <?= htmlspecialchars($successText2Size) ?>rem;
|
|
||||||
|
--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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@ -86,59 +102,13 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="settings-panel" class="settings-panel" style="display: none;">
|
<div id="settings-panel" class="settings-panel" style="display: none;">
|
||||||
<div class="settings-scroll-area">
|
<div class="settings-tabs">
|
||||||
<div class="settings-group">
|
<button class="tab-btn active" data-tab="general">General</button>
|
||||||
<label style="display: flex; align-items: center; cursor: pointer; color: #e63946; font-weight: bold;">
|
<button class="tab-btn" data-tab="page1">Page 1</button>
|
||||||
<input type="checkbox" id="preview-success-toggle" style="margin-right: 8px; width: auto;">
|
<button class="tab-btn" data-tab="page2">Page 2</button>
|
||||||
Preview Success Page
|
</div>
|
||||||
</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 id="tab-general" class="tab-content active">
|
||||||
<div class="settings-group">
|
<div class="settings-group">
|
||||||
<label>Background Color</label>
|
<label>Background Color</label>
|
||||||
<input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
|
<input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
|
||||||
@ -147,15 +117,6 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|||||||
<label>Pop-up Color</label>
|
<label>Pop-up Color</label>
|
||||||
<input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
|
<input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
|
||||||
</div>
|
</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">
|
<div class="settings-group">
|
||||||
<label>Background Image</label>
|
<label>Background Image</label>
|
||||||
<button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
|
<button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
|
||||||
@ -164,13 +125,102 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<input type="file" id="bg-image-input" accept="image/*">
|
<input type="file" id="bg-image-input" accept="image/*">
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container" id="main-container">
|
<div class="container">
|
||||||
<div id="proposal-box">
|
<div id="proposal-box">
|
||||||
<h1 id="proposal-text-display"><?= htmlspecialchars($proposalText) ?></h1>
|
<h1 class="p1-title"><?= htmlspecialchars($p1TitleText) ?></h1>
|
||||||
|
|
||||||
<div class="image-preview-container has-image">
|
<div class="image-preview-container has-image">
|
||||||
<img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
|
<img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
|
||||||
@ -183,9 +233,9 @@ $successText2Size = $settings['success_text_2_size'] ?? '0.9';
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="success-message">
|
<div id="success-message">
|
||||||
<p class="success-text" id="success-text-1-display"><?= htmlspecialchars($successText1) ?></p>
|
<p class="success-text p2-line1"><?= htmlspecialchars($p2Line1Text) ?></p>
|
||||||
<p class="success-text success-text-small" id="success-text-2-display"><?= htmlspecialchars($successText2) ?></p>
|
<p class="success-text p2-line2"><?= htmlspecialchars($p2Line2Text) ?></p>
|
||||||
<div class="redirect-hint">Redirecting you to a special surprise in 15 seconds...</div>
|
<div class="redirect-hint"><?= htmlspecialchars($p2HintText) ?></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user