Spaces:

dothanhcong1110
/

anycoder-7bf8b630

Running

App Files Files Community

anycoder-7bf8b630 / index.html

dothanhcong1110

Upload folder using huggingface_hub

2281bce verified 2 months ago

raw

history blame contribute delete

22.9 kB

	<!DOCTYPE html>
	<html lang="vi">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Ho Den Tu Than - Modern Cinema</title>
	<meta name="description" content="Watch Black Movie online in HD quality">

	<!-- Google Fonts: Inter for modern readability -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">

	<!-- Font Awesome for Icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<style>
	:root {
	--primary-color: #e50914; /* Cinematic Red */
	--primary-hover: #b20710;
	--dark-bg: #0f0f0f;
	--card-bg: #1a1a1a;
	--text-main: #ffffff;
	--text-secondary: #b3b3b3;
	--gradient-overlay: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
	--shadow-card: 0 4px 6px rgba(0,0,0,0.3);
	--shadow-hover: 0 10px 20px rgba(0,0,0,0.5);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Inter', sans-serif;
	background-color: var(--dark-bg);
	color: var(--text-main);
	line-height: 1.6;
	overflow-x: hidden;
	}

	/* --- Header / Navbar --- */
	header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 20px 5%;
	transition: all 0.3s ease;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
	}

	header.scrolled {
	background-color: var(--dark-bg);
	padding: 15px 5%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.8);
	border-bottom: 1px solid #333;
	}

	.logo {
	font-size: 28px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--text-main);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.logo i {
	color: var(--primary-color);
	}

	.nav-links {
	display: flex;
	gap: 30px;
	}

	.nav-links a {
	color: var(--text-main);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	transition: color 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	.nav-links a:hover {
	color: var(--primary-color);
	}

	.user-actions {
	display: flex;
	gap: 20px;
	align-items: center;
	}

	.btn-login {
	color: var(--text-main);
	text-decoration: none;
	font-size: 14px;
	transition: 0.3s;
	}

	.btn-signup {
	background-color: var(--primary-color);
	color: white;
	padding: 8px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.3s;
	}

	.btn-signup:hover {
	background-color: var(--primary-hover);
	}

	/* --- Hero Section (The Main Movie) --- */
	.hero {
	position: relative;
	height: 85vh;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	}

	.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	/* Placeholder for a dark movie poster background */
	background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1/1920/1080');
	background-size: cover;
	background-position: center;
	}

	.hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
	display: flex;
	align-items: center;
	gap: 50px;
	}

	.hero-text {
	max-width: 600px;
	}

	.movie-title {
	font-size: 64px;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 20px;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
	}

	.movie-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	font-size: 16px;
	color: var(--text-secondary);
	}

	.rating {
	color: #ffd700;
	font-weight: bold;
	}

	.movie-desc {
	font-size: 18px;
	color: #ddd;
	margin-bottom: 30px;
	line-height: 1.8;
	}

	.hero-buttons {
	display: flex;
	gap: 15px;
	}

	.btn-play {
	background-color: white;
	color: black;
	padding: 12px 35px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.2s, background 0.3s;
	text-decoration: none;
	}

	.btn-play:hover {
	background-color: #f0f0f0;
	transform: scale(1.05);
	}

	.btn-more {
	background-color: rgba(109, 109, 110, 0.75);
	color: white;
	padding: 12px 35px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s;
	text-decoration: none;
	border: 1px solid rgba(255,255,255,0.2);
	}

	.btn-more:hover {
	background-color: rgba(109, 109, 110, 0.9);
	}

	/* --- Categories / Movie Grid --- */
	.section-container {
	padding: 60px 5%;
	max-width: 1400px;
	margin: 0 auto;
	}

	.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 30px;
	border-bottom: 1px solid #333;
	padding-bottom: 15px;
	}

	.section-title {
	font-size: 28px;
	font-weight: 700;
	text-transform: uppercase;
	}

	.view-all {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color 0.3s;
	}

	.view-all:hover {
	color: var(--text-main);
	}

	.movie-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 30px;
	}

	.movie-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background-color: var(--card-bg);
	}

	.movie-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-hover);
	}

	.card-img {
	width: 100%;
	height: 330px;
	object-fit: cover;
	transition: opacity 0.3s;
	}

	.movie-card:hover .card-img {
	opacity: 0.8;
	}

	.card-content {
	padding: 15px;
	}

	.card-title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.card-meta {
	font-size: 13px;
	color: var(--text-secondary);
	display: flex;
	justify-content: space-between;
	}

	.badge {
	background-color: var(--primary-color);
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	}

	/* --- Modal (Popup) --- */
	.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.85);
	z-index: 2000;
	display: none; /* Hidden by default */
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.modal-overlay.active {
	display: flex;
	opacity: 1;
	}

	.modal-content {
	background-color: var(--dark-bg);
	width: 90%;
	max-width: 900px;
	height: 80vh;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	animation: slideUp 0.4s ease;
	border: 1px solid #333;
	}

	@keyframes slideUp {
	from { transform: translateY(50px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
	}

	.close-modal {
	position: absolute;
	top: 20px;
	right: 20px;
	background-color: rgba(0,0,0,0.7);
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 10;
	font-size: 20px;
	transition: background 0.3s;
	}

	.close-modal:hover {
	background-color: var(--primary-color);
	}

	.video-placeholder {
	width: 100%;
	height: 100%;
	background-color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
	}

	.video-placeholder i {
	font-size: 60px;
	margin-bottom: 20px;
	color: var(--primary-color);
	}

	/* --- Footer --- */
	footer {
	background-color: #000;
	padding: 60px 5% 20px;
	border-top: 1px solid #333;
	margin-top: 60px;
	}

	.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	}

	.footer-col h4 {
	color: white;
	margin-bottom: 20px;
	font-size: 16px;
	text-transform: uppercase;
	}

	.footer-col ul {
	list-style: none;
	}

	.footer-col li {
	margin-bottom: 10px;
	}

	.footer-col a {
	color: var(--text-secondary);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s;
	}

	.footer-col a:hover {
	color: white;
	}

	.copyright {
	text-align: center;
	margin-top: 50px;
	color: #777;
	font-size: 13px;
	padding-top: 20px;
	border-top: 1px solid #222;
	}

	/* --- Built with anycoder Link --- */
	.anycoder-link {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: rgba(255,255,255,0.1);
	backdrop-filter: blur(5px);
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	color: #a0a0a0;
	font-size: 12px;
	border: 1px solid rgba(255,255,255,0.2);
	transition: all 0.3s;
	z-index: 9999;
	}

	.anycoder-link:hover {
	background-color: white;
	color: black;
	transform: translateY(-5px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	}

	/* --- Responsive Design --- */
	@media (max-width: 768px) {
	.hero-content {
	flex-direction: column;
	text-align: center;
	align-items: center;
	}

	.hero-text {
	margin-top: 100px;
	}

	.movie-title {
	font-size: 40px;
	}

	.hero-buttons {
	flex-direction: column;
	width: 100%;
	}

	.btn-play, .btn-more {
	width: 100%;
	justify-content: center;
	}

	.nav-links {
	display: none; /* Simple hide for mobile in this demo */
	}

	.logo {
	font-size: 22px;
	}
	}
	</style>
	</head>
	<body>

	<!-- Navbar -->
	<header id="navbar">
	<a href="#" class="logo"><i class="fas fa-film"></i> HO ĐEN</a>

	<nav class="nav-links">
	<a href="#" class="active">Trang Chủ</a>
	<a href="#">Phim Mới</a>
	<a href="#">Bộ Sưu Tập</a>
	<a href="#">Thể Loại</a>
	<a href="#">Danh Sách Xem Sau</a>
	</nav>

	<div class="user-actions">
	<a href="#" class="btn-login"><i class="fas fa-user"></i> Đăng Nhập</a>
	<a href="#" class="btn-signup">Đăng Ký</a>
	</div>
	</header>

	<!-- Hero Section -->
	<section class="hero">
	<div class="hero-bg"></div>
	<div class="hero-content">
	<div class="hero-text">
	<div class="movie-meta">
	<span class="rating"><i class="fas fa-star"></i> 9.8/10</span>
	<span>2023</span>
	<span>HD VietSub</span>
	<span>1h 58m</span>
	<span class="badge">Hot</span>
	</div>
	<h1 class="movie-title">HỒ ĐEN TỪ THẦN</h1>
	<p class="movie-desc">
	Trong một thế giới tối tăm đầy bí ẩn, một hiện tượng siêu nhiên xảy ra khiến cả thành phố chìm trong bóng tối. Một nhóm nhỏ những người dũng cảm phải đối mặt với nỗi sợ hãi nội tâm và những thế lực hắc ám để tìm ra sự thật bị chôn vùi hàng trăm năm trước.
	</p>
	<div class="hero-buttons">
	<button class="btn-play" onclick="openModal()">
	<i class="fas fa-play"></i> XEM NGAY
	</button>
	<button class="btn-more" onclick="openModal()">
	<i class="fas fa-info-circle"></i> Chi Tiết
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Categories / Movie Grid -->
	<section class="section-container">
	<div class="section-header">
	<h2 class="section-title">Phim Đề Cử</h2>
	<a href="#" class="view-all">Xem tất cả <i class="fas fa-arrow-right"></i></a>
	</div>

	<div class="movie-grid" id="movieGrid">
	<!-- Movies will be injected here by JS -->
	</div>
	</section>

	<section class="section-container" style="background-color: #111;">
	<div class="section-header">
	<h2 class="section-title">Thể Loại Kinh Dị</h2>
	<a href="#" class="view-all">Xem tất cả <i class="fas fa-arrow-right"></i></a>
	</div>
	<div class="movie-grid" id="horrorGrid">
	<!-- Movies will be injected here by JS -->
	</div>
	</section>

	<!-- Footer -->
	<footer>
	<div class="footer-content">
	<div class="footer-col">
	<h4>Liên Hệ</h4>
	<ul>
	<li><a href="#">Giới thiệu</a></li>
	<li><a href="#">Tuyển dụng</a></li>
	<li><a href="#">Quy chế hoạt động</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>Hỗ Trợ</h4>
	<ul>
	<li><a href="#">Trung tâm Trợ giúp</a></li>
	<li><a href="#">Quyền riêng tư</a></li>
	<li><a href="#">Điều khoản sử dụng</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>Theo Dõi</h4>
	<ul>
	<li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
	<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
	<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
	</ul>
	</div>
	<div class="footer-col">
	<h4>Ứng Dụng</h4>
	<p style="color: #777; font-size: 14px; margin-top: 10px;">
	Tải ngay ứng dụng để xem phim mọi lúc mọi nơi.
	</p>
	<div style="display: flex; gap: 10px; margin-top: 15px;">
	<i class="fab fa-apple fa-2x" style="color: white;"></i>
	<i class="fab fa-google-play fa-2x" style="color: white;"></i>
	</div>
	</div>
	</div>
	<div class="copyright">
	© 2023 HoDenTuThan Cinema. All rights reserved. This is a demo redesign.
	</div>
	</footer>

	<!-- Built with anycoder Link -->
	<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
	Built with anycoder
	</a>

	<!-- Video Modal -->
	<div class="modal-overlay" id="videoModal">
	<div class="modal-content">
	<div class="close-modal" onclick="closeModal()">
	<i class="fas fa-times"></i>
	</div>
	<div class="video-placeholder">
	<i class="fas fa-circle-play"></i>
	<h2>Trailer: Hồ Đen Từ Thần</h2>
	<p style="margin-top: 20px; color: #aaa;">(Video player placeholder for streaming)</p>
	</div>
	</div>
	</div>

	<!-- JavaScript Logic -->
	<script>
	// 1. Navbar Scroll Effect
	window.addEventListener('scroll', function() {
	const header = document.getElementById('navbar');
	if (window.scrollY > 50) {
	header.classList.add('scrolled');
	} else {
	header.classList.remove('scrolled');
	}
	});

	// 2. Mock Data for Movies
	const movies = [
	{ title: "Bóng Ma Trong Nhà Cũ", year: "2023", rating: "9.2", img: "https://picsum.photos/id/106/300/450" },
	{ title: "Hầm Tối Bí Ẩn", year: "2022", rating: "8.8", img: "https://picsum.photos/id/24/300/450" },
	{ title: "Tiếng Gọi Từ Xa Xăm", year: "2023", rating: "9.5", img: "https://picsum.photos/id/85/300/450" },
	{ title: "Chuyến Xe Đêm Định Mệnh", year: "2021", rating: "8.5", img: "https://picsum.photos/id/137/300/450" },
	{ title: "Ngôi Nhà Không Chủ", year: "2020", rating: "7.9", img: "https://picsum.photos/id/153/300/450" },
	{ title: "Cuốn Sách Chứa Lời Nguyền", year: "2023", rating: "9.0", img: "https://picsum.photos/id/182/300/450" },
	{ title: "Đêm Hội Ma", year: "2022", rating: "8.2", img: "https://picsum.photos/id/249/300/450" },
	{ title: "Gương Thần Bí", year: "2019", rating: "7.5", img: "https://picsum.photos/id/250/300/450" },
	{ title: "Âm Phủ Báo Thù", year: "2023", rating: "9.1", img: "https://picsum.photos/id/293/300/450" },
	{ title: "Lời Thầm thì", year: "2021", rating: "8.0", img: "https://picsum.photos/id/337/300/450" },
	{ title: "Hồn Ma Cô Độc", year: "2022", rating: "8.7", img: "https://picsum.photos/id/426/300/450" },
	{ title: "Căn Hộ 304", year: "2020", rating: "7.8", img: "https://picsum.photos/id/535/300/450" }
	];

	// 3. Function to Render Movies
	function renderMovies(gridId, movieList) {
	const grid = document.getElementById(gridId);
	grid.innerHTML = movieList.map(movie => `
	<div class="movie-card" onclick="openModal()">
	<img src="${movie.img}" alt="${movie.title}" class="card-img" loading="lazy">
	<div class="card-content">
	<h3 class="card-title">${movie.title}</h3>
	<div class="card-meta">
	<span>${movie.year}</span>
	<span class="rating"><i class="fas fa-star"></i> ${movie.rating}</span>
	</div>
	</div>
	</div>
	`).join('');
	}

	// Initialize Grids
	renderMovies('movieGrid', movies);
	renderMovies('horrorGrid', movies.slice(5, 11)); // Show different subset

	// 4. Modal Logic
	const modal = document.getElementById('videoModal');

	function openModal() {
	modal.classList.add('active');
	document.body.style.overflow = 'hidden'; // Prevent background scrolling
	}

	function closeModal() {
	modal.classList.remove('active');
	document.body.style.overflow = 'auto'; // Restore scrolling
	}

	// Close modal when clicking outside content
	modal.addEventListener('click', (e) => {
	if (e.target === modal) {
	closeModal();
	}
	});

	// Close with Escape key
	document.addEventListener('keydown', (e) => {
	if (e.key === 'Escape' && modal.classList.contains('active')) {
	closeModal();
	}
	});
	</script>
	</body>
	</html>