258 lines
11 KiB
HTML
258 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Manage Preferences - Munich News Daily</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#667eea',
|
|
secondary: '#764ba2',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gradient-to-br from-primary to-secondary min-h-screen">
|
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header -->
|
|
<header class="text-center text-white py-12">
|
|
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4">📰 Munich News Daily</h1>
|
|
<p class="text-xl opacity-95">Manage Your Preferences</p>
|
|
</header>
|
|
|
|
<!-- Preferences Form -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-8 mb-8">
|
|
<div id="loadingState" class="text-center py-10">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
|
|
<p class="mt-4 text-gray-600">Loading your preferences...</p>
|
|
</div>
|
|
|
|
<div id="emailForm" class="hidden">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4">Enter Your Email</h2>
|
|
<p class="text-gray-600 mb-6">Enter your email address to manage your newsletter preferences.</p>
|
|
|
|
<input
|
|
type="email"
|
|
id="emailInput"
|
|
placeholder="your@email.com"
|
|
class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary mb-4"
|
|
>
|
|
<button
|
|
onclick="loadPreferences()"
|
|
class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition"
|
|
>
|
|
Load Preferences
|
|
</button>
|
|
<p id="emailError" class="mt-4 text-sm text-red-600 hidden"></p>
|
|
</div>
|
|
|
|
<div id="preferencesForm" class="hidden">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-2">Your Preferences</h2>
|
|
<p class="text-gray-600 mb-6">Email: <strong id="userEmail"></strong></p>
|
|
|
|
<div class="mb-6">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3">Choose your interests:</h3>
|
|
<div class="space-y-3" id="categoryCheckboxes">
|
|
<!-- Categories will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onclick="savePreferences()"
|
|
class="w-full px-6 py-3 bg-primary hover:bg-secondary text-white font-semibold rounded-lg transition mb-3"
|
|
>
|
|
Save Preferences
|
|
</button>
|
|
|
|
<button
|
|
onclick="showEmailForm()"
|
|
class="w-full px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg transition"
|
|
>
|
|
Change Email
|
|
</button>
|
|
|
|
<p id="saveMessage" class="mt-4 text-sm min-h-[20px]"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to Home -->
|
|
<div class="text-center">
|
|
<a href="/" class="text-white underline hover:opacity-80">← Back to Home</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentEmail = '';
|
|
let availableCategories = [];
|
|
|
|
// Load categories from API
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch('/api/categories');
|
|
const data = await response.json();
|
|
availableCategories = data.categories || [];
|
|
renderCategories();
|
|
} catch (error) {
|
|
console.error('Failed to load categories:', error);
|
|
// Fallback to default categories
|
|
availableCategories = [
|
|
{ id: 'general', name: 'Top Trending', description: 'Top trending news and updates', icon: '🔥' },
|
|
{ id: 'local', name: 'Local Events', description: 'Local events and community news', icon: '🏛️' },
|
|
{ id: 'sports', name: 'Sports', description: 'Sports news', icon: '⚽' }
|
|
];
|
|
renderCategories();
|
|
}
|
|
}
|
|
|
|
function renderCategories(selectedCategories = []) {
|
|
const container = document.getElementById('categoryCheckboxes');
|
|
container.innerHTML = '';
|
|
|
|
availableCategories.forEach(category => {
|
|
const isChecked = selectedCategories.length === 0 || selectedCategories.includes(category.id);
|
|
|
|
const label = document.createElement('label');
|
|
label.className = 'flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-primary transition';
|
|
label.innerHTML = `
|
|
<input type="checkbox" value="${category.id}" ${isChecked ? 'checked' : ''} class="w-5 h-5 text-primary rounded focus:ring-2 focus:ring-primary">
|
|
<div>
|
|
<div class="font-semibold text-gray-800">${category.icon} ${category.name}</div>
|
|
<div class="text-sm text-gray-500">${category.description}</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(label);
|
|
});
|
|
}
|
|
|
|
// Check if email is in URL parameter
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
// Load categories first
|
|
await loadCategories();
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const email = urlParams.get('email');
|
|
|
|
if (email) {
|
|
document.getElementById('emailInput').value = email;
|
|
loadPreferences();
|
|
} else {
|
|
showEmailForm();
|
|
}
|
|
});
|
|
|
|
function showEmailForm() {
|
|
document.getElementById('loadingState').classList.add('hidden');
|
|
document.getElementById('emailForm').classList.remove('hidden');
|
|
document.getElementById('preferencesForm').classList.add('hidden');
|
|
}
|
|
|
|
async function loadPreferences() {
|
|
const emailInput = document.getElementById('emailInput');
|
|
const email = emailInput.value.trim().toLowerCase();
|
|
const emailError = document.getElementById('emailError');
|
|
|
|
if (!email || !email.includes('@')) {
|
|
emailError.textContent = 'Please enter a valid email address';
|
|
emailError.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
emailError.classList.add('hidden');
|
|
currentEmail = email;
|
|
|
|
// Show loading
|
|
document.getElementById('emailForm').classList.add('hidden');
|
|
document.getElementById('loadingState').classList.remove('hidden');
|
|
|
|
try {
|
|
// Try to get subscriber info (we'll need to add this endpoint)
|
|
const response = await fetch(`/api/subscribers/${encodeURIComponent(email)}`);
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
const categories = data.categories || [];
|
|
|
|
// Update UI
|
|
document.getElementById('userEmail').textContent = email;
|
|
|
|
// Render categories with user's selections
|
|
renderCategories(categories);
|
|
|
|
// Show preferences form
|
|
document.getElementById('loadingState').classList.add('hidden');
|
|
document.getElementById('preferencesForm').classList.remove('hidden');
|
|
} else if (response.status === 404) {
|
|
// Email not found - show preferences form with all categories checked (new subscription)
|
|
document.getElementById('userEmail').textContent = email;
|
|
|
|
// Render all categories checked by default
|
|
renderCategories([]);
|
|
|
|
// Show preferences form
|
|
document.getElementById('loadingState').classList.add('hidden');
|
|
document.getElementById('preferencesForm').classList.remove('hidden');
|
|
|
|
// Show info message
|
|
const saveMessage = document.getElementById('saveMessage');
|
|
saveMessage.textContent = 'New subscriber - select your preferences and save to subscribe!';
|
|
saveMessage.className = 'mt-4 text-sm text-blue-600';
|
|
} else {
|
|
throw new Error('Failed to load preferences');
|
|
}
|
|
} catch (error) {
|
|
emailError.textContent = 'Error loading preferences. Please try again.';
|
|
emailError.classList.remove('hidden');
|
|
showEmailForm();
|
|
}
|
|
}
|
|
|
|
async function savePreferences() {
|
|
const saveMessage = document.getElementById('saveMessage');
|
|
const checkboxes = document.querySelectorAll('#preferencesForm input[type="checkbox"]:checked');
|
|
const categories = Array.from(checkboxes).map(cb => cb.value);
|
|
|
|
if (categories.length === 0) {
|
|
saveMessage.textContent = 'Please select at least one category';
|
|
saveMessage.className = 'mt-4 text-sm text-red-600';
|
|
return;
|
|
}
|
|
|
|
saveMessage.textContent = 'Saving...';
|
|
saveMessage.className = 'mt-4 text-sm text-gray-600';
|
|
|
|
try {
|
|
const response = await fetch('/api/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: currentEmail,
|
|
categories: categories
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
saveMessage.textContent = '✓ Preferences saved successfully!';
|
|
saveMessage.className = 'mt-4 text-sm text-green-600 font-semibold';
|
|
} else {
|
|
saveMessage.textContent = data.error || 'Failed to save preferences';
|
|
saveMessage.className = 'mt-4 text-sm text-red-600';
|
|
}
|
|
} catch (error) {
|
|
saveMessage.textContent = 'Network error. Please try again.';
|
|
saveMessage.className = 'mt-4 text-sm text-red-600';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|