|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CineStream - Your Ultimate Streaming Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#E50914', |
|
|
dark: '#141414', |
|
|
secondary: '#222222', |
|
|
}, |
|
|
animation: { |
|
|
'slide-infinite': 'slide 60s linear infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
slide: { |
|
|
'0%': { transform: 'translateX(0)' }, |
|
|
'100%': { transform: 'translateX(-50%)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.movie-card:hover .movie-poster { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.movie-poster { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.hero-slider { |
|
|
overflow: hidden; |
|
|
white-space: nowrap; |
|
|
} |
|
|
.slider-track { |
|
|
display: inline-block; |
|
|
white-space: nowrap; |
|
|
} |
|
|
.slider-item { |
|
|
display: inline-block; |
|
|
margin-right: 1rem; |
|
|
} |
|
|
.blur-overlay { |
|
|
background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 20%, rgba(20, 20, 20, 0) 80%, rgba(20, 20, 20, 1) 100%); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.blur-overlay { |
|
|
background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 10%, rgba(20, 20, 20, 0) 90%, rgba(20, 20, 20, 1) 100%); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 dark:bg-dark text-gray-900 dark:text-gray-100 transition-colors duration-300"> |
|
|
|
|
|
<header class="sticky top-0 z-50 bg-white/80 dark:bg-dark/80 backdrop-blur-md shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-2xl font-bold text-primary">CineStream</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-secondary transition-colors"> |
|
|
<i class="fas fa-moon dark:hidden"></i> |
|
|
<i class="fas fa-sun hidden dark:block"></i> |
|
|
</button> |
|
|
<button id="login-btn" class="bg-primary hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium transition-colors"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden h-80 md:h-[28rem] w-full mt-4"> |
|
|
<div class="absolute inset-0 blur-overlay z-10"></div> |
|
|
<div class="hero-slider h-full"> |
|
|
<div class="slider-track animate-slide-infinite h-full"> |
|
|
|
|
|
<div class="slider-item h-full w-48 md:w-64 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
</div> |
|
|
<div class="slider-item h-full w-64 md:w-80 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
</div> |
|
|
<div class="slider-item h-full w-64 md:w-80 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div> |
|
|
</div> |
|
|
<div class="slider-item h-full w-64 md:w-80 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
</div> |
|
|
<div class="slider-item h-full w-64 md:w-80 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
</div> |
|
|
<div class="slider-item h-full w-64 md:w-80 inline-block"> |
|
|
<div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 z-20 p-8 bg-gradient-to-t from-dark to-transparent"> |
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-2">Trending Now</h2> |
|
|
<p class="text-lg md:text-xl max-w-2xl">Discover the most popular movies streaming right now. Updated daily with new releases.</p> |
|
|
<button class="mt-4 bg-primary hover:bg-red-700 text-white px-6 py-3 rounded-md font-medium transition-colors"> |
|
|
<i class="fas fa-play mr-2"></i> Watch Now |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Popular Movies</h2> |
|
|
<a href="#" class="text-primary hover:underline">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
<div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer relative"> |
|
|
<div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.5 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Shawshank Redemption</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer relative"> |
|
|
<div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
9.0 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Godfather</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1972</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer relative"> |
|
|
<div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.8 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Dark Knight</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2008</span> |
|
|
<span>Action</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.7 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Pulp Fiction</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.6 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Fight Club</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1999</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.5 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Shawshank Redemption</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
9.0 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Godfather</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1972</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.8 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Dark Knight</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2008</span> |
|
|
<span>Action</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.7 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Pulp Fiction</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.6 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Fight Club</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1999</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">New Releases</h2> |
|
|
<a href="#" class="text-primary hover:underline">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
<div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
7.8 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Dune: Part Two</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2024</span> |
|
|
<span>Sci-Fi</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.5 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Oppenheimer</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2023</span> |
|
|
<span>Biography</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
7.2 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Batman</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2022</span> |
|
|
<span>Action</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.0 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Everything Everywhere All at Once</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2022</span> |
|
|
<span>Adventure</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
7.5 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Top Gun: Maverick</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2022</span> |
|
|
<span>Action</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Top Rated</h2> |
|
|
<a href="#" class="text-primary hover:underline">View All</a> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
|
|
<div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div> |
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
9.2 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Shawshank Redemption</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
9.0 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Godfather</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1972</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.9 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">The Dark Knight</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>2008</span> |
|
|
<span>Action</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.8 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Pulp Fiction</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1994</span> |
|
|
<span>Crime</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="movie-card rounded-lg overflow-hidden cursor-pointer"> |
|
|
<div class="relative pb-[150%] overflow-hidden"> |
|
|
<div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded"> |
|
|
8.7 |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-2"> |
|
|
<h3 class="font-semibold truncate">Fight Club</h3> |
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1"> |
|
|
<span>1999</span> |
|
|
<span>Drama</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-secondary text-gray-400 py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h2 class="text-2xl font-bold text-white mb-4">CineStream</h2> |
|
|
<p class="max-w-md">The ultimate streaming platform for movie lovers. Watch anytime, anywhere.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white">Home</a></li> |
|
|
<li><a href="#" class="hover:text-white">Movies</a></li> |
|
|
<li><a href="#" class="hover:text-white">TV Shows</a></li> |
|
|
<li><a href="#" class="hover:text-white">My List</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="hover:text-white">Cookie Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center"> |
|
|
<p>© 2023 CineStream. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="login-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-70"> |
|
|
<div class="bg-white dark:bg-secondary rounded-lg shadow-xl w-full max-w-md p-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Sign In</h2> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-sm font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700" placeholder="[email protected]"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="password" class="block text-sm font-medium mb-2">Password</label> |
|
|
<input type="password" id="password" class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700" placeholder="••••••••"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-primary hover:bg-red-700 text-white py-2 px-4 rounded-md font-medium transition-colors"> |
|
|
Sign In |
|
|
</button> |
|
|
</form> |
|
|
<div class="mt-4 text-center text-sm"> |
|
|
<p>Don't have an account? <a href="#" class="text-primary hover:underline">Sign up</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
themeToggle.addEventListener('click', () => { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light'); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
} |
|
|
|
|
|
|
|
|
const loginBtn = document.getElementById('login-btn'); |
|
|
const loginModal = document.getElementById('login-modal'); |
|
|
const closeModal = document.getElementById('close-modal'); |
|
|
|
|
|
loginBtn.addEventListener('click', () => { |
|
|
loginModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
loginModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
loginModal.addEventListener('click', (e) => { |
|
|
if (e.target === loginModal) { |
|
|
loginModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=x1101/mass" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
