Spaces:

nurserf
/

anibla

Running

App Files Files Community

anibla / index.html

nurserf

Please make it look like the amediatv.uz website - Follow Up Deployment

4fb926f verified 8 months ago

raw

history blame contribute delete

70.5 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AnimeVerse - Your Ultimate Anime Destination</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">
	<style>
	/* Notification animation */
	@keyframes fadeInOut {
	0% { opacity: 0; transform: translateY(20px); }
	10% { opacity: 1; transform: translateY(0); }
	90% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(20px); }
	}
	.animate-fade-in-out {
	animation: fadeInOut 3s ease forwards;
	}
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

	body {
	font-family: 'Roboto', sans-serif;
	background-color: #0a0a0a;
	color: #ffffff;
	}

	.hero-gradient {
	background: linear-gradient(90deg, #0a0a0a 0%, rgba(10, 10, 10, 0.8) 100%);
	}

	.anime-card {
	transition: all 0.3s ease;
	transform-style: preserve-3d;
	}

	.anime-card:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
	}

	.watchlist-btn {
	transition: all 0.3s ease;
	}

	.watchlist-btn:hover {
	transform: scale(1.1);
	}

	.episode-btn {
	transition: all 0.2s ease;
	}

	.episode-btn:hover {
	transform: translateY(-2px);
	}

	.genre-badge {
	transition: all 0.2s ease;
	}

	.genre-badge:hover {
	transform: scale(1.05);
	}

	@keyframes pulse {
	0%, 100% {
	opacity: 1;
	}
	50% {
	opacity: 0.5;
	}
	}

	.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	.scrollbar-hide::-webkit-scrollbar {
	display: none;
	}

	.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
	}

	/* Modal animation */
	.modal-animate {
	animation: modalFadeIn 0.3s ease-out;
	}

	/* Video player aspect ratio */
	.aspect-w-16 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	}

	.aspect-w-16 video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	@keyframes modalFadeIn {
	from {
	opacity: 0;
	transform: translateY(-20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}
	</style>
	<script>
	// Anime Data - 2000 entries (sample structure, in real app this would come from API)
	const animeData = Array.from({length: 2000}, (_, i) => ({
	id: i + 1,
	title: `Anime Title ${i + 1}`,
	image: `https://picsum.photos/300/450?random=${i}`,
	episode: Math.floor(Math.random() * 100) + 1,
	rating: (Math.random() * 1 + 4).toFixed(1),
	genres: ['Action', 'Adventure', 'Comedy', 'Drama', 'Fantasy', 'Horror', 'Mystery', 'Romance', 'Sci-Fi', 'Slice of Life'],
	status: ['NEW', 'TRENDING', 'POPULAR', 'HOT', 'CLASSIC'][Math.floor(Math.random() * 5)],
	description: `This is a description for anime ${i + 1}. It's a great show with amazing characters and story.`,
	releaseDate: new Date(Date.now() - Math.random() * 10000000000).toLocaleDateString()
	}));

	// Generate anime cards
	function generateAnimeCards(containerSelector, count, templateFunction) {
	const container = document.querySelector(containerSelector);
	if (!container) return;

	container.innerHTML = '';
	const fragment = document.createDocumentFragment();

	for (let i = 0; i < count && i < animeData.length; i++) {
	const anime = animeData[i];
	const card = templateFunction(anime);
	fragment.appendChild(card);
	}

	container.appendChild(fragment);
	}

	// Template for featured anime cards
	function featuredAnimeTemplate(anime) {
	const card = document.createElement('div');
	card.className = 'flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative cursor-pointer';
	card.addEventListener('click', () => openVideoModal(anime));
	card.innerHTML = `
	<img src="${anime.image}" alt="${anime.title}" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#6246ea] text-white text-xs font-semibold px-2 py-1 rounded">${anime.status}</span>
	<h4 class="text-lg font-bold text-white mt-2">${anime.title}</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. ${anime.episode}</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	`;
	return card;
	}

	// Template for trending anime cards
	function trendingAnimeTemplate(anime) {
	const card = document.createElement('div');
	card.className = 'bg-[#2e3856] rounded-lg overflow-hidden anime-card relative cursor-pointer';
	card.addEventListener('click', () => openVideoModal(anime));
	card.innerHTML = `
	<img src="${anime.image}" alt="${anime.title}" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#6246ea] text-white text-xs font-bold px-2 py-1 rounded">${anime.status}</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">${anime.title}</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. ${anime.episode}</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">${anime.rating}</span>
	</div>
	</div>
	</div>
	`;
	return card;
	}

	// Video Player Functions
	function openVideoModal(anime) {
	const modal = document.getElementById('videoModal');
	const videoPlayer = document.getElementById('animeVideoPlayer');
	const videoTitle = document.getElementById('videoTitle');
	const videoDescription = document.getElementById('videoDescription');

	// For demo purposes, we'll use a placeholder video
	// In a real app, you'd use the actual video URL from your anime data
	videoPlayer.src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
	videoTitle.textContent = anime.title;
	videoDescription.textContent = anime.description;

	modal.classList.remove('hidden');
	videoPlayer.play();
	}

	function closeVideoModal() {
	const modal = document.getElementById('videoModal');
	const videoPlayer = document.getElementById('animeVideoPlayer');

	videoPlayer.pause();
	videoPlayer.currentTime = 0;
	modal.classList.add('hidden');
	}

	// Sign In Modal Functions
	function openSignInModal() {
	document.getElementById('signInModal').classList.remove('hidden');
	}

	function closeSignInModal() {
	document.getElementById('signInModal').classList.add('hidden');
	}

	// Mobile menu toggle
	// Search anime function
	function searchAnime(query) {
	query = query.toLowerCase().trim();
	if (!query) {
	// If search is empty, show all anime
	generateAnimeCards('.trending-grid', itemsPerPage, trendingAnimeTemplate);
	return;
	}

	const results = animeData.filter(anime =>
	anime.title.toLowerCase().includes(query) \|\|
	anime.genres.some(genre => genre.toLowerCase().includes(query))
	);

	const container = document.querySelector('.trending-grid');
	container.innerHTML = '';

	if (results.length === 0) {
	container.innerHTML = `
	<div class="col-span-5 text-center py-10">
	<i class="fas fa-search text-4xl text-[#6246ea] mb-4"></i>
	<h3 class="text-xl text-white font-bold mb-2">No results found</h3>
	<p class="text-[#b8c1ec]">Try different keywords</p>
	</div>
	`;
	return;
	}

	const fragment = document.createDocumentFragment();
	results.slice(0, 20).forEach(anime => {
	const card = trendingAnimeTemplate(anime);
	fragment.appendChild(card);
	});

	container.appendChild(fragment);
	}

	document.addEventListener('DOMContentLoaded', function() {
	// Search functionality
	const searchInput = document.getElementById('searchInput');
	const searchBtn = document.getElementById('searchBtn');
	const mobileSearchInput = document.getElementById('mobileSearchInput');
	const mobileSearchBtn = document.getElementById('mobileSearchBtn');

	function handleSearch() {
	const query = searchInput.value \|\| mobileSearchInput.value;
	searchAnime(query);
	}

	if (searchBtn) {
	searchBtn.addEventListener('click', handleSearch);
	searchInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	handleSearch();
	}
	});
	}

	if (mobileSearchBtn) {
	mobileSearchBtn.addEventListener('click', handleSearch);
	mobileSearchInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	handleSearch();
	}
	});
	}
	// Generate anime content
	generateAnimeCards('.featured-slider', 10, featuredAnimeTemplate);
	generateAnimeCards('.trending-grid', 20, trendingAnimeTemplate);

	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const mobileMenu = document.getElementById('mobile-menu');

	mobileMenuButton.addEventListener('click', function() {
	mobileMenu.classList.toggle('hidden');
	});

	// Featured anime slider
	const slider = document.querySelector('.featured-slider');
	const prevBtn = document.querySelector('.featured-prev');
	const nextBtn = document.querySelector('.featured-next');

	if (slider && prevBtn && nextBtn) {
	nextBtn.addEventListener('click', () => {
	slider.scrollBy({ left: 300, behavior: 'smooth' });
	});

	prevBtn.addEventListener('click', () => {
	slider.scrollBy({ left: -300, behavior: 'smooth' });
	});
	}

	// Pagination
	let currentPage = 1;
	const itemsPerPage = 20;
	const totalPages = Math.ceil(animeData.length / itemsPerPage);

	function updatePagination() {
	document.getElementById('current-page').textContent = currentPage;
	const startIdx = (currentPage - 1) * itemsPerPage;
	generateAnimeCards('.trending-grid', itemsPerPage, trendingAnimeTemplate, startIdx);
	}

	document.querySelectorAll('.pagination-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	if (this.dataset.page === 'prev' && currentPage > 1) {
	currentPage--;
	} else if (this.dataset.page === 'next' && currentPage < totalPages) {
	currentPage++;
	}
	updatePagination();
	});
	});

	// Watchlist functionality
	const watchlistButtons = document.querySelectorAll('.watchlist-btn');
	watchlistButtons.forEach(button => {
	button.addEventListener('click', function(e) {
	e.stopPropagation();
	const icon = this.querySelector('i');

	if (icon.classList.contains('fa-plus')) {
	icon.classList.remove('fa-plus');
	icon.classList.add('fa-check');
	this.classList.add('bg-green-500');
	this.classList.remove('bg-[#6246ea]/70');
	} else {
	icon.classList.remove('fa-check');
	icon.classList.add('fa-plus');
	this.classList.remove('bg-green-500');
	this.classList.add('bg-[#6246ea]/70');
	}
	});
	});
	});
	</script>
	</head>
	<body>
	<!-- Navigation -->
	<nav class="bg-black bg-opacity-90 shadow-lg sticky top-0 z-50 backdrop-blur-sm">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex items-center justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<span class="text-2xl font-bold text-white"><span class="text-red-600">Amedia</span>TV</span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="text-white hover:text-red-600 px-3 py-2 text-sm font-medium transition">Home</a>
	<a href="#" class="text-gray-400 hover:text-red-600 px-3 py-2 text-sm font-medium transition">Movies</a>
	<a href="#" class="text-gray-400 hover:text-red-600 px-3 py-2 text-sm font-medium transition">TV Shows</a>
	<a href="#" class="text-gray-400 hover:text-red-600 px-3 py-2 text-sm font-medium transition">Series</a>
	<a href="#" class="text-gray-400 hover:text-red-600 px-3 py-2 text-sm font-medium transition">Cartoons</a>
	</div>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-4 flex items-center md:ml-6">
	<div class="relative mx-4">
	<input type="text" id="searchInput" class="bg-[#232946] border border-[#6246ea] rounded-full py-1 px-4 text-white focus:outline-none focus:ring-2 focus:ring-[#6246ea]" placeholder="Search anime...">
	<button id="searchBtn" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#b8c1ec] hover:text-[#6246ea]">
	<i class="fas fa-search"></i>
	</button>
	</div>
	<button onclick="openSignInModal()" class="bg-red-600 text-white px-4 py-1 rounded text-sm font-medium hover:bg-red-700 transition">Sign In</button>
	</div>
	</div>
	<div class="-mr-2 flex md:hidden">
	<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-[#fffffe] hover:text-white hover:bg-[#6246ea] focus:outline-none">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div id="mobile-menu" class="hidden md:hidden bg-[#232946]">
	<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
	<a href="#" class="text-[#fffffe] hover:bg-[#6246ea] hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
	<a href="#" class="text-[#b8c1ec] hover:bg-[#6246ea] hover:text-white block px-3 py-2 rounded-md text-base font-medium">Trending</a>
	<a href="#" class="text-[#b8c1ec] hover:bg-[#6246ea] hover:text-white block px-3 py-2 rounded-md text-base font-medium">Genres</a>
	<a href="#" class="text-[#b8c1ec] hover:bg-[#6246ea] hover:text-white block px-3 py-2 rounded-md text-base font-medium">Seasonal</a>
	<a href="#" class="text-[#b8c1ec] hover:bg-[#6246ea] hover:text-white block px-3 py-2 rounded-md text-base font-medium">My List</a>
	<div class="pt-4 pb-3 border-t border-[#6246ea]">
	<div class="flex items-center px-5">
	<input type="text" id="mobileSearchInput" class="bg-[#232946] border border-[#6246ea] rounded-full py-1 px-4 text-white focus:outline-none focus:ring-2 focus:ring-[#6246ea] flex-grow" placeholder="Search anime...">
	<button id="mobileSearchBtn" class="ml-2 bg-[#6246ea] hover:bg-[#7b61ff] text-white px-3 py-1 rounded-full text-sm font-medium transition">Go</button>
	</div>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="relative">
	<div class="hero-gradient h-96 md:h-screen/2 md:max-h-[600px] flex items-center">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-16">
	<div class="md:w-2/3 lg:w-1/2">
	<h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">Unlimited <span class="text-[#E50914]">Movies</span>, TV Shows</h1>
	<p class="text-lg md:text-xl text-[#b8c1ec] mb-8">Watch hit movies, popular TV series and exclusive Amedia Originals.</p>
	<div class="flex flex-col sm:flex-row gap-4">
	<button class="bg-[#6246ea] hover:bg-[#7b61ff] text-white font-bold py-3 px-6 rounded-full transition flex items-center justify-center gap-2">
	<i class="fas fa-play"></i> Start Watching
	</button>
	<button class="bg-transparent hover:bg-[#6246ea]/20 text-white font-bold py-3 px-6 rounded-full border border-[#6246ea] transition flex items-center justify-center gap-2">
	<i class="fas fa-plus"></i> My Watchlist
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Featured Anime Slider -->
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-32 relative z-20">
	<div class="bg-[#232946] rounded-xl shadow-2xl overflow-hidden">
	<div class="flex justify-between items-center p-4 border-b border-[#6246ea]">
	<h3 class="text-xl font-bold text-white">Popular on Amedia</h3>
	<div class="flex gap-2">
	<button class="featured-prev hover:bg-[#6246ea]/20 text-white p-2 rounded-full transition">
	<i class="fas fa-chevron-left"></i>
	</button>
	<button class="featured-next hover:bg-[#6246ea]/20 text-white p-2 rounded-full transition">
	<i class="fas fa-chevron-right"></i>
	</button>
	</div>
	</div>
	<div class="featured-slider p-4 flex overflow-x-auto scrollbar-hide gap-6">
	<!-- Featured Anime Cards -->
	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80" alt="Attack on Titan" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#6246ea] text-white text-xs font-semibold px-2 py-1 rounded">NEW EPISODE</span>
	<h4 class="text-lg font-bold text-white mt-2">Attack on Titan Final</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 88</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1560164097-06a571f22535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Demon Slayer" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#e53170] text-white text-xs font-semibold px-2 py-1 rounded">POPULAR</span>
	<h4 class="text-lg font-bold text-white mt-2">Demon Slayer Season 3</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 11</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1578632767115-24eb07c05a8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Jujutsu Kaisen" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#ff8906] text-white text-xs font-semibold px-2 py-1 rounded">TRENDING</span>
	<h4 class="text-lg font-bold text-white mt-2">Jujutsu Kaisen S2</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 5</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Spy x Family" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#6246ea] text-white text-xs font-semibold px-2 py-1 rounded">NEW EPISODE</span>
	<h4 class="text-lg font-bold text-white mt-2">Spy x Family Part 2</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 24</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1589254065874-1e32917b8e11?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Chainsaw Man" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#e53170] text-white text-xs font-semibold px-2 py-1 rounded">POPULAR</span>
	<h4 class="text-lg font-bold text-white mt-2">Chainsaw Man</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 12</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>

	<div class="flex-shrink-0 w-64 h-96 bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1633613286848-6f628a6a4747?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Naruto" class="w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<span class="bg-[#e53170] text-white text-xs font-semibold px-2 py-1 rounded">POPULAR</span>
	<h4 class="text-lg font-bold text-white mt-2">Chainsaw Man</h4>
	<div class="flex justify-between items-center mt-2">
	<span class="text-sm text-[#b8c1ec]">Ep. 12</span>
	<button class="watchlist-btn p-1 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-plus"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Trending Now Section -->
	<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
	<div class="flex justify-center gap-4 mb-6">
	<button class="pagination-btn bg-[#6246ea] text-white px-4 py-2 rounded" data-page="prev">Previous</button>
	<span class="text-white flex items-center">Page <span id="current-page">1</span></span>
	<button class="pagination-btn bg-[#6246ea] text-white px-4 py-2 rounded" data-page="next">Next</button>
	</div>
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl md:text-3xl font-bold text-white">Trending Movies</h2>
	<a href="#" class="text-[#b8c1ec] hover:text-[#6246ea] text-sm md:text-base transition">View All</a>
	</div>

	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6 trending-grid">
	<!-- Trend Anime Card 1 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1531259736756-6caccf485f18?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="One Piece" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#ff8906] text-white text-xs font-bold px-2 py-1 rounded">TRENDING #1</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">One Piece: Wano Arc</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 1072</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.9</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 2 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1540228238269-18b343325284?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="My Hero Academia" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#6246ea] text-white text-xs font-bold px-2 py-1 rounded">NEW</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">My Hero Academia S6</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 25</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.8</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 3 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1494607239405-9f6c1a88dc52?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Vinland Saga" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#e53170] text-white text-xs font-bold px-2 py-1 rounded">HOT</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Vinland Saga S2</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 12</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.9</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 4 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1608889825205-eebdb9fc5806?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Blue Lock" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#ff8906] text-white text-xs font-bold px-2 py-1 rounded">TRENDING</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Blue Lock</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 24</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.7</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 5 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mob Psycho" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#6246ea] text-white text-xs font-bold px-2 py-1 rounded">FINAL</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Mob Psycho 100 III</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 12</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.9</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 6 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1633613286848-6f628a6a4747?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Naruto" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#ff8906] text-white text-xs font-bold px-2 py-1 rounded">CLASSIC</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Naruto Shippuden</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 500</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.8</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Trend Anime Card 7 -->
	<div class="bg-[#2e3856] rounded-lg overflow-hidden anime-card relative">
	<img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Spy x Family" class="w-full h-48 object-cover">
	<div class="absolute top-2 right-2">
	<span class="bg-[#6246ea] text-white text-xs font-bold px-2 py-1 rounded">NEW</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Spy x Family Part 2</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 24</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.7</span>
	</div>
	</div>
	</div>
	</div>
	<div class="absolute top-2 right-2">
	<span class="bg-[#6246ea] text-white text-xs font-bold px-2 py-1 rounded">FINAL</span>
	</div>
	<div class="p-3">
	<h4 class="font-bold text-white truncate">Mob Psycho 100 III</h4>
	<div class="flex justify-between items-center mt-2 text-sm">
	<span class="text-[#b8c1ec]">Ep. 12</span>
	<div class="flex gap-1 items-center">
	<i class="fas fa-star text-yellow-400"></i>
	<span class="text-white">4.9</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Popular Genres Section -->
	<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 bg-[#232946] rounded-xl">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl md:text-3xl font-bold text-white">Browse Categories</h2>
	<a href="#" class="text-[#b8c1ec] hover:text-[#E50914] text-sm md:text-base transition">All Categories</a>
	</div>

	<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4">
	<!-- Genre Badge 1 -->
	<a href="#" class="genre-badge">
	<div class="bg-[#6246ea] hover:bg-[#7b61ff] rounded-lg p-4 text-center transition">
	<div class="w-12 h-12 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-fist-raised text-white"></i>
	</div>
	<h4 class="font-bold text-white">Action</h4>
	<span class="text-xs text-[#b8c1ec]">1,245 Titles</span>
	</div>
	</a>

	<!-- Genre Badge 2 -->
	<a href="#" class="genre-badge">
	<div class="bg-[#e53170] hover:bg-[#ff4d88] rounded-lg p-4 text-center transition">
	<div class="w-12 h-12 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-heart text-white"></i>
	</div>
	<h4 class="font-bold text-white">Romance</h4>
	<span class="text-xs text-[#b8c1ec]">892 Titles</span>
	</div>
	</a>

	<!-- Genre Badge 3 -->
	<a href="#" class="genre-badge">
	<div class="bg-[#ff8906] hover:bg-[#ff9e2c] rounded-lg p-4 text-center transition">
	<div class="w-12 h-12 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-laugh-beam text-white"></i>
	</div>
	<h4 class="font-bold text-white">Comedy</h4>
	<span class="text-xs text-[#b8c1ec]">756 Titles</span>
	</div>
	</a>

	<!-- Genre Badge 4 -->
	<a href="#" class="genre-badge">
	<div class="bg-[#0f0e17] hover:bg-[#232946] rounded-lg p-4 text-center transition border border-[#6246ea]">
	<div class="w-12 h-12 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-brain text-white"></i>
	</div>
	<h4 class="font-bold text-white">Psychological</h4>
	<span class="text-xs text-[#b8c1ec]">325 Titles</span>
	</div>
	</a>

	<!-- Genre Badge 5 -->
	<a href="#" class="genre-badge">
	<div class="bg-[#8bd3dd] hover:bg-[#a8e6f0] rounded-lg p-4 text-center transition">
	<div class="w-12 h-12 mx-auto bg-[#232946]/20 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-ghost text-[#232946]"></i>
	</div>
	<h4 class="font-bold text-[#232946]">Horror</h4>
	<span class="text-xs text-[#232946]">418 Titles</span>
	</div>
	</a>
	</div>
	</section>

	<!-- Currently Airing Section with Episode Grid -->
	<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl md:text-3xl font-bold text-white">New Episodes</h2>
	<div class="flex items-center gap-2">
	<span class="text-sm text-[#b8c1ec] hidden md:block">Today's releases:</span>
	<div class="relative">
	<select class="bg-[#232946] border border-[#6246ea] text-white rounded-full pl-3 pr-8 py-1 appearance-none focus:outline-none text-sm">
	<option>Tuesday, July 25</option>
	<option>Monday, July 24</option>
	<option>Sunday, July 23</option>
	</select>
	<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-[#b8c1ec] pointer-events-none"></i>
	</div>
	</div>
	</div>

	<div class="bg-[#2e3856] rounded-xl overflow-hidden">
	<!-- Episode Header -->
	<div class="grid grid-cols-12 gap-4 p-4 border-b border-[#6246ea] text-sm font-medium text-[#b8c1ec] hidden md:grid">
	<div class="col-span-5">Title</div>
	<div class="col-span-2">Episode</div>
	<div class="col-span-2">Time</div>
	<div class="col-span-3 text-right">Action</div>
	</div>

	<!-- Episode Item 1 -->
	<div class="grid grid-cols-2 md:grid-cols-12 gap-4 p-4 border-b border-[#6246ea]/30 items-center hover:bg-[#3a4568] transition">
	<div class="col-span-1 md:col-span-5 flex items-center gap-3">
	<img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80" alt="Attack on Titan" class="w-12 h-16 object-cover rounded">
	<div>
	<h4 class="font-bold text-white">Attack on Titan: Final Season</h4>
	<div class="flex gap-2 flex-wrap mt-1">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded">Action</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Drama</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Dark Fantasy</span>
	</div>
	</div>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Ep:</span>
	<span class="text-white font-medium">Episode 88</span>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Released:</span>
	<span class="text-white">2 hours ago</span>
	</div>
	<div class="col-span-1 md:col-span-3 flex justify-end">
	<button class="episode-btn bg-[#6246ea] hover:bg-[#7b61ff] text-white px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2">
	<i class="fas fa-play"></i> <span class="hidden md:inline">Watch Now</span>
	</button>
	</div>
	</div>

	<!-- Episode Item 2 -->
	<div class="grid grid-cols-2 md:grid-cols-12 gap-4 p-4 border-b border-[#6246ea]/30 items-center hover:bg-[#3a4568] transition">
	<div class="col-span-1 md:col-span-5 flex items-center gap-3">
	<img src="https://images.unsplash.com/photo-1560164097-06a571f22535?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Demon Slayer" class="w-12 h-16 object-cover rounded">
	<div>
	<h4 class="font-bold text-white">Demon Slayer: Swordsmith Village Arc</h4>
	<div class="flex gap-2 flex-wrap mt-1">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded">Action</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Adventure</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Supernatural</span>
	</div>
	</div>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Ep:</span>
	<span class="text-white font-medium">Episode 11</span>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Released:</span>
	<span class="text-white">5 hours ago</span>
	</div>
	<div class="col-span-1 md:col-span-3 flex justify-end">
	<button class="episode-btn bg-[#6246ea] hover:bg-[#7b61ff] text-white px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2">
	<i class="fas fa-play"></i> <span class="hidden md:inline">Watch Now</span>
	</button>
	</div>
	</div>

	<!-- Episode Item 3 -->
	<div class="grid grid-cols-2 md:grid-cols-12 gap-4 p-4 items-center hover:bg-[#3a4568] transition">
	<div class="col-span-1 md:col-span-5 flex items-center gap-3">
	<img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Spy x Family" class="w-12 h-16 object-cover rounded">
	<div>
	<h4 class="font-bold text-white">Spy x Family Season 2</h4>
	<div class="flex gap-2 flex-wrap mt-1">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded">Comedy</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Action</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded">Slice of Life</span>
	</div>
	</div>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Ep:</span>
	<span class="text-white font-medium">Episode 24</span>
	</div>
	<div class="col-span-1 md:col-span-2">
	<span class="text-sm text-[#b8c1ec] md:hidden">Released:</span>
	<span class="text-white">Yesterday</span>
	</div>
	<div class="col-span-1 md:col-span-3 flex justify-end">
	<button class="episode-btn bg-[#6246ea] hover:bg-[#7b61ff] text-white px-3 py-1 rounded text-sm font-medium transition flex items-center gap-2">
	<i class="fas fa-play"></i> <span class="hidden md:inline">Watch Now</span>
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Coming Soon Section -->
	<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl md:text-3xl font-bold text-white">Coming Soon</h2>
	<div class="flex items-center gap-2">
	<span class="text-sm text-[#b8c1ec] hidden md:block">Filter by:</span>
	<div class="relative">
	<select class="bg-[#232946] border border-[#6246ea] text-white rounded-full pl-3 pr-8 py-1 appearance-none focus:outline-none text-sm">
	<option>Summer 2023</option>
	<option>Fall 2023</option>
	<option>Winter 2024</option>
	</select>
	<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-xs text-[#b8c1ec] pointer-events-none"></i>
	</div>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Coming Soon Card 1 -->
	<div class="bg-[#2e3856] rounded-xl overflow-hidden anime-card flex flex-col">
	<div class="relative pt-[56.25%]">
	<img src="https://images.unsplash.com/photo-1633328198397-a4be44f5f204?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80" alt="Hell's Paradise" class="absolute inset-0 w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<div class="flex justify-between items-center">
	<span class="bg-[#6246ea] text-white text-xs font-semibold px-2 py-1 rounded">JULY 12</span>
	<button class="watchlist-btn p-1.5 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-bell"></i>
	</button>
	</div>
	</div>
	</div>
	<div class="p-4 flex-grow">
	<h3 class="font-bold text-xl text-white mb-2">Hell's Paradise: Final Arc</h3>
	<p class="text-[#b8c1ec] text-sm mb-3">The thrilling conclusion to Gabimaru's journey as he faces his ultimate challenge in the mysterious island's depths.</p>
	<div class="flex flex-wrap gap-2">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded genre-badge">Action</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Dark Fantasy</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Historical</span>
	</div>
	</div>
	</div>

	<!-- Coming Soon Card 2 -->
	<div class="bg-[#2e3856] rounded-xl overflow-hidden anime-card flex flex-col">
	<div class="relative pt-[56.25%]">
	<img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dr. Stone" class="absolute inset-0 w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<div class="flex justify-between items-center">
	<span class="bg-[#e53170] text-white text-xs font-semibold px-2 py-1 rounded">AUG 5</span>
	<button class="watchlist-btn p-1.5 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-bell"></i>
	</button>
	</div>
	</div>
	</div>
	<div class="p-4 flex-grow">
	<h3 class="font-bold text-xl text-white mb-2">Dr. Stone: New World Part 2</h3>
	<p class="text-[#b8c1ec] text-sm mb-3">Senku and the Kingdom of Science continue their journey to uncover the secrets of petrification and revive civilization.</p>
	<div class="flex flex-wrap gap-2">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded genre-badge">Adventure</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Sci-Fi</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Comedy</span>
	</div>
	</div>
	</div>

	<!-- Coming Soon Card 3 -->
	<div class="bg-[#2e3856] rounded-xl overflow-hidden anime-card flex flex-col">
	<div class="relative pt-[56.25%]">
	<img src="https://images.unsplash.com/photo-1633613286991-611fe299c4be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bleach" class="absolute inset-0 w-full h-full object-cover">
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<div class="flex justify-between items-center">
	<span class="bg-[#ff8906] text-white text-xs font-semibold px-2 py-1 rounded">OCT 12</span>
	<button class="watchlist-btn p-1.5 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-bell"></i>
	</button>
	</div>
	</div>
	</div>
	<div class="p-4 flex-grow">
	<h3 class="font-bold text-xl text-white mb-2">Bleach: Thousand-Year Blood War Part 2</h3>
	<p class="text-[#b8c1ec] text-sm mb-3">Ichigo Kurosaki returns in the second cour of the final arc as the war between Soul Reapers and Quincy reaches its climax.</p>
	<div class="flex flex-wrap gap-2">
	<span class="text-xs bg-[#6246ea] text-white px-2 py-0.5 rounded genre-badge">Action</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Supernatural</span>
	<span class="text-xs bg-[#232946] text-[#b8c1ec] px-2 py-0.5 rounded genre-badge">Shounen</span>
	</div>
	</div>
	</div>
	<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
	<div class="absolute bottom-0 left-0 p-4 w-full">
	<div class="flex justify-between items-center">
	<span class="bg-[#e53170] text-white text-xs font-semibold px-2 py-1 rounded">AUG 5</span>
	<button class="watchlist-btn p-1.5 text-white rounded-full bg-[#6246ea]/70 hover:bg-[#6246ea]">
	<i class="fas fa-bell"></i>
	</button>
	<footer class="bg-[#232946] py-12">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-white font-bold mb-4">Navigation</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Home</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Movies</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">TV Shows</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Kids</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-white font-bold mb-4">Legal</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Terms of Use</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Privacy Policy</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Cookie Policy</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-white font-bold mb-4">Help</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">FAQ</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Contact Us</a></li>
	<li><a href="#" class="text-[#b8c1ec] hover:text-[#E50914]">Feedback</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-white font-bold mb-4">Connect</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-[#b8c1ec] hover:text-[#E50914]"><i class="fab fa-facebook-f"></i></a>
	<a href="#" class="text-[#b8c1ec] hover:text-[#E50914]"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-[#b8c1ec] hover:text-[#E50914]"><i class="fab fa-instagram"></i></a>
	<a href="#" class="text-[#b8c1ec] hover:text-[#E50914]"><i class="fab fa-telegram"></i></a>
	</div>
	</div>
	</div>
	<div class="mt-12 pt-8 border-t border-[#E50914]/20">
	<p class="text-[#b8c1ec] text-center">© 2023 AmediaTV. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<!-- Video Player Modal -->
	<div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden">
	<div class="relative w-full max-w-4xl">
	<button onclick="closeVideoModal()" class="absolute -top-10 right-0 text-white hover:text-[#E50914] text-2xl">
	<i class="fas fa-times"></i>
	</button>
	<div class="aspect-w-16 aspect-h-9">
	<video id="animeVideoPlayer" controls class="w-full">
	<source src="" type="video/mp4">
	Your browser does not support the video tag.
	</video>
	</div>
	<div class="mt-4 text-white">
	<h3 id="videoTitle" class="text-xl font-bold"></h3>
	<p id="videoDescription" class="text-[#b8c1ec] mt-2"></p>
	</div>
	</div>
	</div>

	<!-- Auth Modal -->
	<div id="signInModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-[#232946] rounded-lg p-6 w-full max-w-md">
	<div class="flex justify-between items-center mb-4">
	<h3 id="authModalTitle" class="text-xl font-bold text-white">Sign In</h3>
	<button onclick="closeSignInModal()" class="text-[#b8c1ec] hover:text-white">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<!-- Sign In Form -->
	<form id="signInForm" class="space-y-4">
	<div>
	<label for="email" class="block text-sm font-medium text-[#b8c1ec] mb-1">Email</label>
	<input type="email" id="email" name="email" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<div>
	<label for="password" class="block text-sm font-medium text-[#b8c1ec] mb-1">Password</label>
	<input type="password" id="password" name="password" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<button type="submit" class="w-full bg-[#6246ea] hover:bg-[#7b61ff] text-white font-medium py-2 px-4 rounded-md transition">
	Sign In
	</button>
	</form>

	<!-- Sign Up Form (hidden by default) -->
	<form id="signUpForm" class="space-y-4 hidden">
	<div>
	<label for="signup-username" class="block text-sm font-medium text-[#b8c1ec] mb-1">Username</label>
	<input type="text" id="signup-username" name="username" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<div>
	<label for="signup-email" class="block text-sm font-medium text-[#b8c1ec] mb-1">Email</label>
	<input type="email" id="signup-email" name="email" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<div>
	<label for="signup-password" class="block text-sm font-medium text-[#b8c1ec] mb-1">Password</label>
	<input type="password" id="signup-password" name="password" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<div>
	<label for="signup-confirm-password" class="block text-sm font-medium text-[#b8c1ec] mb-1">Confirm Password</label>
	<input type="password" id="signup-confirm-password" name="confirm-password" required
	class="w-full bg-[#2e3856] border border-[#6246ea] rounded-md px-3 py-2 text-white focus:outline-none focus:ring-1 focus:ring-[#6246ea]">
	</div>
	<button type="submit" class="w-full bg-[#6246ea] hover:bg-[#7b61ff] text-white font-medium py-2 px-4 rounded-md transition">
	Sign Up
	</button>
	</form>

	<div class="mt-4 text-center text-sm text-[#b8c1ec]">
	<span id="authToggleText">Don't have an account? </span>
	<button id="authToggleBtn" class="text-[#6246ea] hover:underline">Sign up</button>
	</div>
	</div>
	</div>

	<script>
	// Auth Modal Toggle
	const authToggleBtn = document.getElementById('authToggleBtn');
	const authModalTitle = document.getElementById('authModalTitle');
	const authToggleText = document.getElementById('authToggleText');
	const signInForm = document.getElementById('signInForm');
	const signUpForm = document.getElementById('signUpForm');

	let isSignUp = false;

	if (authToggleBtn) {
	authToggleBtn.addEventListener('click', function(e) {
	e.preventDefault();
	isSignUp = !isSignUp;

	if (isSignUp) {
	signInForm.classList.add('hidden');
	signUpForm.classList.remove('hidden');
	authModalTitle.textContent = 'Sign Up';
	authToggleText.textContent = 'Already have an account? ';
	authToggleBtn.textContent = 'Sign in';
	} else {
	signUpForm.classList.add('hidden');
	signInForm.classList.remove('hidden');
	authModalTitle.textContent = 'Sign In';
	authToggleText.textContent = 'Don\'t have an account? ';
	authToggleBtn.textContent = 'Sign up';
	}
	});
	}

	// Handle sign in form submission
	if (signInForm) {
	signInForm.addEventListener('submit', function(e) {
	e.preventDefault();
	const email = document.getElementById('email').value;
	const password = document.getElementById('password').value;

	// Basic validation
	if (!email \|\| !password) {
	showNotification('Please fill in all fields', 'error');
	return;
	}

	// For demo purposes, just show a success message
	showNotification('Sign in successful!', 'success');
	closeSignInModal();
	});
	}

	// Handle sign up form submission
	if (signUpForm) {
	signUpForm.addEventListener('submit', function(e) {
	e.preventDefault();
	const username = document.getElementById('signup-username').value;
	const email = document.getElementById('signup-email').value;
	const password = document.getElementById('signup-password').value;
	const confirmPassword = document.getElementById('signup-confirm-password').value;

	// Validation
	if (!username \|\| !email \|\| !password \|\| !confirmPassword) {
	showNotification('Please fill in all fields', 'error');
	return;
	}

	if (password !== confirmPassword) {
	showNotification('Passwords do not match', 'error');
	return;
	}

	if (password.length < 6) {
	showNotification('Password must be at least 6 characters', 'error');
	return;
	}

	// In a real app, you would send this data to your backend
	// For demo purposes, just show a success message
	showNotification('Account created successfully!', 'success');

	// Reset form and switch to sign in
	signUpForm.reset();
	isSignUp = false;
	signUpForm.classList.add('hidden');
	signInForm.classList.remove('hidden');
	authModalTitle.textContent = 'Sign In';
	authToggleText.textContent = 'Don\'t have an account? ';
	authToggleBtn.textContent = 'Sign up';
	});
	}

	// Notification function
	function showNotification(message, type = 'success') {
	const notification = document.createElement('div');
	const bgColor = type === 'error' ? 'bg-red-500' : 'bg-[#6246ea]';
	notification.className = `fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded-lg shadow-lg animate-fade-in-out`;
	notification.textContent = message;
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
	setTimeout(() => {
	notification.remove();
	}, 300);
	}, 3000);
	}
	</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=nurserf/anibla" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>