| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>{% block title %}Binge{% endblock %}</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
|
| <script>
|
| tailwind.config = {
|
| theme: {
|
| extend: {
|
| colors: {
|
| dark: '#121212',
|
| 'dark-lighter': '#1E1E1E',
|
| 'dark-accent': '#2D2D2D',
|
| }
|
| }
|
| }
|
| }
|
| </script>
|
| </head>
|
| <body class="bg-dark text-white min-h-screen flex flex-col">
|
|
|
| <nav class="bg-dark-lighter fixed w-full top-0 z-50 border-b border-dark-accent">
|
| <div class="container mx-auto px-4 py-3">
|
| <div class="flex items-center justify-between">
|
| <a href="/" class="text-2xl font-bold tracking-tighter">BINGE</a>
|
| <button id="menuBtn" class="md:hidden p-2">
|
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-16 6h16"></path>
|
| </svg>
|
| </button>
|
| <div class="hidden md:flex space-x-6">
|
| <a href="/" class="hover:text-gray-300 transition-colors">Home</a>
|
| <a href="#" class="hover:text-gray-300 transition-colors">Movies</a>
|
| <a href="#" class="hover:text-gray-300 transition-colors">TV Shows</a>
|
| </div>
|
| </div>
|
| </div>
|
| </nav>
|
|
|
|
|
| <div id="mobileMenu" class="hidden fixed inset-0 bg-dark z-40 pt-16">
|
| <div class="container mx-auto px-4 py-6">
|
| <div class="flex flex-col space-y-4">
|
| <a href="/" class="text-lg hover:text-gray-300 transition-colors">Home</a>
|
| <a href="#" class="text-lg hover:text-gray-300 transition-colors">Movies</a>
|
| <a href="#" class="text-lg hover:text-gray-300 transition-colors">TV Shows</a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <main class="container mx-auto px-4 py-8 mt-16 flex-grow">
|
| {% block content %}{% endblock %}
|
| </main>
|
|
|
| <footer class="bg-dark-lighter py-6 mt-auto">
|
| <div class="container mx-auto px-4 text-center text-sm text-gray-400">
|
| <p>© 2024 Binge. All rights reserved.</p>
|
| </div>
|
| </footer>
|
|
|
| <script>
|
|
|
| const menuBtn = document.getElementById('menuBtn');
|
| const mobileMenu = document.getElementById('mobileMenu');
|
|
|
| menuBtn.addEventListener('click', () => {
|
| mobileMenu.classList.toggle('hidden');
|
| });
|
| </script>
|
| </body>
|
| </html> |
