File size: 3,042 Bytes
3bb5d2e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!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">
<!-- Mobile-first navigation -->
<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>
<!-- Mobile menu -->
<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>
// Mobile menu toggle
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
</body>
</html> |