update
This commit is contained in:
@@ -4,58 +4,123 @@
|
||||
<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>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<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>
|
||||
<div class="container">
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>📰 Munich News Daily</h1>
|
||||
<p class="tagline">Get the latest Munich news delivered to your inbox every morning</p>
|
||||
<p class="description">Stay informed about what's happening in Munich with our curated daily newsletter. No fluff, just the news that matters.</p>
|
||||
<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>
|
||||
|
||||
<div class="subscription-form" id="subscriptionForm">
|
||||
<!-- 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()">Subscribe Free</button>
|
||||
<p class="form-message" id="formMessage"></p>
|
||||
<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>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="subscriberCount">-</span>
|
||||
<span class="stat-label">Subscribers</span>
|
||||
<!-- 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>
|
||||
|
||||
<section class="news-section">
|
||||
<h2>Latest Munich News</h2>
|
||||
<div class="news-grid" id="newsGrid">
|
||||
<div class="loading">Loading news...</div>
|
||||
<!-- 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>
|
||||
<p>© 2024 Munich News Daily. Made with ❤️ for Munich.</p>
|
||||
<p><a href="#" onclick="showUnsubscribe()">Unsubscribe</a></p>
|
||||
<!-- 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 class="modal" id="unsubscribeModal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeUnsubscribe()">×</span>
|
||||
<h2>Unsubscribe</h2>
|
||||
<p>Enter your email to unsubscribe from Munich News Daily:</p>
|
||||
<input type="email" id="unsubscribeEmail" placeholder="Enter your email">
|
||||
<button onclick="unsubscribe()">Unsubscribe</button>
|
||||
<p class="form-message" id="unsubscribeMessage"></p>
|
||||
<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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user