131 lines
5.8 KiB
HTML
131 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Munich News Daily - Your Daily Dose of Munich News</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#667eea',
|
||
secondary: '#764ba2',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gradient-to-br from-primary to-secondary min-h-screen">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
<!-- Hero Section -->
|
||
<header class="text-center text-white py-16 sm:py-20">
|
||
<div class="max-w-3xl mx-auto">
|
||
<h1 class="text-5xl sm:text-6xl font-extrabold mb-6 tracking-tight">📰 Munich News Daily</h1>
|
||
<p class="text-2xl sm:text-3xl font-light mb-4">Get the latest Munich news delivered to your inbox every morning</p>
|
||
<p class="text-lg sm:text-xl opacity-95 mb-10">Stay informed about what's happening in Munich with our curated daily newsletter. No fluff, just the news that matters.</p>
|
||
|
||
<!-- Subscription Form -->
|
||
<div class="max-w-md mx-auto space-y-4 mb-10">
|
||
<input
|
||
type="email"
|
||
id="emailInput"
|
||
placeholder="Enter your email address"
|
||
class="w-full px-6 py-4 rounded-lg text-gray-800 text-lg focus:outline-none focus:ring-4 focus:ring-white/30 shadow-lg"
|
||
required
|
||
>
|
||
<button
|
||
id="subscribeBtn"
|
||
onclick="subscribe()"
|
||
class="w-full px-8 py-4 bg-red-500 hover:bg-red-600 text-white font-semibold text-lg rounded-lg shadow-lg transform transition hover:scale-105 active:scale-95"
|
||
>
|
||
Subscribe Free
|
||
</button>
|
||
<p id="formMessage" class="text-sm min-h-[20px]"></p>
|
||
</div>
|
||
|
||
<!-- Stats -->
|
||
<div class="flex justify-center">
|
||
<div class="text-center">
|
||
<div class="text-4xl font-bold mb-1" id="subscriberCount">-</div>
|
||
<div class="text-sm opacity-80">Subscribers</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- News Section -->
|
||
<section class="bg-white rounded-2xl shadow-2xl p-6 sm:p-10 mb-8">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Latest Munich News</h2>
|
||
|
||
<!-- Search Bar -->
|
||
<div class="max-w-2xl mx-auto mb-8">
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
id="searchInput"
|
||
placeholder="🔍 Search articles by title, content, or source..."
|
||
class="w-full px-6 py-4 pr-12 rounded-lg border-2 border-gray-200 focus:border-primary focus:outline-none text-gray-800 text-lg transition-all"
|
||
oninput="handleSearch()"
|
||
>
|
||
<button
|
||
id="clearSearch"
|
||
onclick="clearSearch()"
|
||
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-2xl hidden"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
<div id="searchStats" class="text-sm text-gray-500 mt-2 text-center"></div>
|
||
</div>
|
||
|
||
<div id="newsGrid" class="space-y-6">
|
||
<div class="text-center py-10 text-gray-500">Loading news...</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="text-center text-white py-8">
|
||
<p class="mb-2">© 2024 Munich News Daily. Made with ❤️ for Munich.</p>
|
||
<p class="space-x-2">
|
||
<a href="#" onclick="showUnsubscribe()" class="underline hover:opacity-80">Unsubscribe</a>
|
||
<span>|</span>
|
||
<a href="/admin.html" class="underline hover:opacity-80">Admin Dashboard</a>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Unsubscribe Modal -->
|
||
<div id="unsubscribeModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||
<div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 relative">
|
||
<button onclick="closeUnsubscribe()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-3xl leading-none">×</button>
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-4">Unsubscribe</h2>
|
||
<p class="text-gray-600 mb-6">Enter your email to unsubscribe from Munich News Daily:</p>
|
||
<input
|
||
type="email"
|
||
id="unsubscribeEmail"
|
||
placeholder="Enter your email"
|
||
class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-primary mb-4"
|
||
>
|
||
<button
|
||
onclick="unsubscribe()"
|
||
class="w-full px-6 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-lg transition"
|
||
>
|
||
Unsubscribe
|
||
</button>
|
||
<p id="unsubscribeMessage" class="mt-4 text-sm min-h-[20px]"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|
||
|