|
|
<!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> |
