314 lines
12 KiB
JavaScript
314 lines
12 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const yesBtn = document.getElementById('yes-btn');
|
|
const noBtn = document.getElementById('no-btn');
|
|
const proposalBox = document.getElementById('proposal-box');
|
|
const successMessage = document.getElementById('success-message');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
const lockBtn = document.getElementById('lock-btn');
|
|
const settingsToggle = document.getElementById('settings-toggle');
|
|
const settingsPanel = document.getElementById('settings-panel');
|
|
const previewImg = document.getElementById('preview-img');
|
|
const previewSuccessToggle = document.getElementById('preview-success-toggle');
|
|
|
|
// Setting inputs
|
|
const bgColorPicker = document.getElementById('bg-color-picker');
|
|
const popupColorPicker = document.getElementById('popup-color-picker');
|
|
const bgImageInput = document.getElementById('bg-image-input');
|
|
const removeBgBtn = document.getElementById('remove-bg-btn');
|
|
const fontFamilySelect = document.getElementById('font-family-select');
|
|
const secondPageTextColorPicker = document.getElementById('second-page-text-color-picker');
|
|
const secondPageBoxPosYInput = document.getElementById('second-page-box-pos-y-input');
|
|
const imageBorderRadiusInput = document.getElementById('image-border-radius-input');
|
|
|
|
// New setting inputs
|
|
const proposalTextColorPicker = document.getElementById('proposal-text-color-picker');
|
|
const proposalTextSizeInput = document.getElementById('proposal-text-size-input');
|
|
const successText1SizeInput = document.getElementById('success-text-1-size-input');
|
|
const successText2SizeInput = document.getElementById('success-text-2-size-input');
|
|
const proposalTextInput = document.getElementById('proposal-text-input');
|
|
const successText1Input = document.getElementById('success-text-1-input');
|
|
const successText2Input = document.getElementById('success-text-2-input');
|
|
|
|
// Display elements
|
|
const proposalTextDisplay = document.getElementById('proposal-text-display');
|
|
const successText1Display = document.getElementById('success-text-1-display');
|
|
const successText2Display = document.getElementById('success-text-2-display');
|
|
|
|
let noCount = 0;
|
|
const phrases = [
|
|
"No", "Are you sure?", "Really sure?", "Think again!", "Last chance!",
|
|
"Surely not?", "You might regret this!", "Give it another thought!",
|
|
"Are you absolutely sure?", "This could be a mistake!", "Have a heart!",
|
|
"Don't be so cold!", "Change of heart?", "Wouldn't you reconsider?",
|
|
"Is that your final answer?", "You're breaking my heart ;("
|
|
];
|
|
|
|
// No button movement and text change
|
|
noBtn.addEventListener('click', () => {
|
|
noCount++;
|
|
noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)];
|
|
|
|
const currentSize = parseFloat(window.getComputedStyle(yesBtn).fontSize);
|
|
yesBtn.style.fontSize = `${currentSize * 1.2}px`;
|
|
yesBtn.style.padding = `${parseFloat(window.getComputedStyle(yesBtn).paddingTop) * 1.2}px ${parseFloat(window.getComputedStyle(yesBtn).paddingLeft) * 1.2}px`;
|
|
|
|
// Randomly move No button
|
|
const container = document.getElementById('main-container');
|
|
const containerRect = container.getBoundingClientRect();
|
|
const btnRect = noBtn.getBoundingClientRect();
|
|
|
|
const maxX = containerRect.width - btnRect.width;
|
|
const maxY = containerRect.height - btnRect.height;
|
|
|
|
const randomX = Math.floor(Math.random() * maxX);
|
|
const randomY = Math.floor(Math.random() * maxY);
|
|
|
|
noBtn.style.position = 'absolute';
|
|
noBtn.style.left = `${randomX}px`;
|
|
noBtn.style.top = `${randomY}px`;
|
|
});
|
|
|
|
// 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 {
|
|
proposalBox.style.display = 'block';
|
|
successMessage.style.display = 'none';
|
|
successMessage.classList.remove('preview-mode');
|
|
}
|
|
});
|
|
|
|
// Toggle settings panel
|
|
settingsToggle.addEventListener('click', () => {
|
|
settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
|
|
});
|
|
|
|
// Update background color
|
|
bgColorPicker.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--bg-color', e.target.value);
|
|
});
|
|
|
|
bgColorPicker.addEventListener('change', (e) => {
|
|
saveSetting('update_bg_color', { color: e.target.value });
|
|
});
|
|
|
|
// Update popup color
|
|
popupColorPicker.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--popup-bg', e.target.value);
|
|
});
|
|
|
|
popupColorPicker.addEventListener('change', (e) => {
|
|
saveSetting('update_popup_color', { color: e.target.value });
|
|
});
|
|
|
|
// Update second page text color
|
|
secondPageTextColorPicker.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--second-page-text-color', e.target.value);
|
|
});
|
|
|
|
secondPageTextColorPicker.addEventListener('change', (e) => {
|
|
saveSetting('update_second_page_text_color', { color: e.target.value });
|
|
});
|
|
|
|
// Update proposal text color
|
|
proposalTextColorPicker.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--proposal-text-color', e.target.value);
|
|
});
|
|
|
|
proposalTextColorPicker.addEventListener('change', (e) => {
|
|
saveSetting('update_proposal_text_color', { color: e.target.value });
|
|
});
|
|
|
|
// Update font family
|
|
fontFamilySelect.addEventListener('change', (e) => {
|
|
document.documentElement.style.setProperty('--font-family', e.target.value);
|
|
saveSetting('update_font_family', { font: e.target.value });
|
|
});
|
|
|
|
// Update success box Y position
|
|
secondPageBoxPosYInput.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--second-page-box-pos-y', `${e.target.value}px`);
|
|
});
|
|
|
|
secondPageBoxPosYInput.addEventListener('change', (e) => {
|
|
saveSetting('update_second_page_box_pos_y', { pos: e.target.value });
|
|
});
|
|
|
|
// Update image border radius
|
|
imageBorderRadiusInput.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--image-border-radius', `${e.target.value}px`);
|
|
});
|
|
|
|
imageBorderRadiusInput.addEventListener('change', (e) => {
|
|
saveSetting('update_image_border_radius', { radius: e.target.value });
|
|
});
|
|
|
|
// Update proposal text size
|
|
proposalTextSizeInput.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--proposal-text-size', `${e.target.value}rem`);
|
|
});
|
|
|
|
proposalTextSizeInput.addEventListener('change', (e) => {
|
|
saveSetting('update_proposal_text_size', { size: e.target.value });
|
|
});
|
|
|
|
// Update success text 1 size
|
|
successText1SizeInput.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--success-text-1-size', `${e.target.value}rem`);
|
|
});
|
|
|
|
successText1SizeInput.addEventListener('change', (e) => {
|
|
saveSetting('update_success_text_1_size', { size: e.target.value });
|
|
});
|
|
|
|
// Update success text 2 size
|
|
successText2SizeInput.addEventListener('input', (e) => {
|
|
document.documentElement.style.setProperty('--success-text-2-size', `${e.target.value}rem`);
|
|
});
|
|
|
|
successText2SizeInput.addEventListener('change', (e) => {
|
|
saveSetting('update_success_text_2_size', { size: e.target.value });
|
|
});
|
|
|
|
// Update proposal text content
|
|
proposalTextInput.addEventListener('input', (e) => {
|
|
proposalTextDisplay.innerText = e.target.value;
|
|
});
|
|
|
|
proposalTextInput.addEventListener('change', (e) => {
|
|
saveSetting('update_proposal_text', { text: e.target.value });
|
|
});
|
|
|
|
// Update success text 1 content
|
|
successText1Input.addEventListener('input', (e) => {
|
|
successText1Display.innerText = e.target.value;
|
|
});
|
|
|
|
successText1Input.addEventListener('change', (e) => {
|
|
saveSetting('update_success_text_1', { text: e.target.value });
|
|
});
|
|
|
|
// Update success text 2 content
|
|
successText2Input.addEventListener('input', (e) => {
|
|
successText2Display.innerText = e.target.value;
|
|
});
|
|
|
|
successText2Input.addEventListener('change', (e) => {
|
|
saveSetting('update_success_text_2', { text: e.target.value });
|
|
});
|
|
|
|
// Upload background image
|
|
bgImageInput.addEventListener('change', (e) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('action', 'upload_bg_image');
|
|
formData.append('image', file);
|
|
|
|
fetch('api/save_settings.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
document.documentElement.style.setProperty('--bg-image', `url('${data.path}?v=${Date.now()}')`);
|
|
location.reload(); // Reload to show remove button and update PHP state
|
|
}
|
|
});
|
|
});
|
|
|
|
// Remove background image
|
|
if (removeBgBtn) {
|
|
removeBgBtn.addEventListener('click', () => {
|
|
saveSetting('remove_bg_image', {}).then(() => {
|
|
location.reload();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Toggle Lock
|
|
lockBtn.addEventListener('click', () => {
|
|
const newLockState = !IS_LOCKED;
|
|
const formData = new FormData();
|
|
formData.append('action', 'toggle_lock');
|
|
formData.append('lock', newLockState);
|
|
|
|
fetch('api/save_settings.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Reset settings
|
|
resetBtn.addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to reset all settings to defaults?')) {
|
|
saveSetting('reset', {}).then(() => {
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
|
|
async function saveSetting(action, data) {
|
|
const formData = new FormData();
|
|
formData.append('action', action);
|
|
for (const key in data) {
|
|
formData.append(key, data[key]);
|
|
}
|
|
|
|
try {
|
|
const res = await fetch('api/save_settings.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
return await res.json();
|
|
} catch (err) {
|
|
console.error('Failed to save setting:', err);
|
|
}
|
|
}
|
|
});
|