305 lines
No EOL
10 KiB
HTML
305 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Movie Details - KV-Stream</title>
|
|
<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@400;500;600;700&family=Outfit:wght@500;600;700;900&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="/styles/index.css">
|
|
<style>
|
|
/* Info Page Specific Styles */
|
|
.info-page-container {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Backdrop */
|
|
.info-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 70vh;
|
|
background-size: cover;
|
|
background-position: center;
|
|
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
|
|
z-index: 0;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.info-content-wrapper {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 100px 40px 40px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
gap: 50px;
|
|
}
|
|
|
|
/* Left Column: Poster */
|
|
.info-poster-col {
|
|
flex-shrink: 0;
|
|
width: 300px;
|
|
}
|
|
|
|
.info-poster {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
aspect-ratio: 2/3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Right Column: Details */
|
|
.info-details-col {
|
|
flex-grow: 1;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
margin-bottom: 10px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.info-original-title {
|
|
font-size: 1.2rem;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-rating {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 20px;
|
|
color: #f5c518;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Metadata Grid */
|
|
.meta-box {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 30px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.meta-row {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.meta-label {
|
|
width: 150px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.meta-value {
|
|
color: #fff;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.meta-tag {
|
|
display: inline-block;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Actions */
|
|
.info-actions {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Description */
|
|
.section-header {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.info-desc {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
margin-bottom: 40px;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* Recommendations */
|
|
.rec-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.rec-card {
|
|
text-decoration: none;
|
|
color: white;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.rec-card:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.rec-img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
aspect-ratio: 2/3;
|
|
object-fit: cover;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.info-content-wrapper {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.info-poster-col {
|
|
width: 200px;
|
|
}
|
|
|
|
.info-details-col {
|
|
text-align: center;
|
|
}
|
|
|
|
.meta-row {
|
|
text-align: left;
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar__logo">
|
|
<a href="/" style="color:white;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M4 8H2v12c0 1.1.9 2 2 2h12v-2H4V8z" />
|
|
<path
|
|
d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<nav class="sidebar__nav">
|
|
<a href="/" class="sidebar__nav-item" title="Home">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
|
</svg>
|
|
</a>
|
|
<a href="/history.html" class="sidebar__nav-item" title="History">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-7 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content" style="margin-left: 80px; width: calc(100% - 80px);">
|
|
<div class="info-page-container">
|
|
<!-- Backdrop -->
|
|
<div class="info-backdrop" id="backdrop"></div>
|
|
|
|
<div class="info-content-wrapper">
|
|
<!-- Poster -->
|
|
<div class="info-poster-col">
|
|
<img src="" alt="Poster" class="info-poster" id="poster">
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<div class="info-details-col">
|
|
<h1 class="info-title" id="title">Loading...</h1>
|
|
<div class="info-original-title" id="originalTitle"></div>
|
|
|
|
<div class="info-rating" id="rating">
|
|
<!-- e.g. ⭐⭐⭐⭐⭐ (0 votes) -->
|
|
</div>
|
|
|
|
<!-- Metadata Box -->
|
|
<div class="meta-box">
|
|
<div class="meta-row">
|
|
<span class="meta-label">Trạng thái:</span>
|
|
<span class="meta-value" id="status">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Năm phát hành:</span>
|
|
<span class="meta-value" id="year">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Số tập:</span>
|
|
<span class="meta-value" id="episodes">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Quốc gia:</span>
|
|
<span class="meta-value" id="country">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Thể loại:</span>
|
|
<span class="meta-value" id="genre">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Đạo diễn:</span>
|
|
<span class="meta-value" id="director">...</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="meta-label">Diễn viên:</span>
|
|
<span class="meta-value" id="cast">...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="info-actions">
|
|
<a href="#" class="action-btn action-btn--primary" id="btnWatch">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
|
|
<path d="M8 5v14l11-7z" />
|
|
</svg>
|
|
Xem Phim
|
|
</a>
|
|
<!-- My List Button can go here -->
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="section-header">Nội dung chi tiết</div>
|
|
<div class="info-desc" id="description"></div>
|
|
|
|
<!-- Tags/Keywords -->
|
|
<div style="margin-bottom: 40px; display:flex; gap:10px; flex-wrap:wrap;" id="tags"></div>
|
|
|
|
<!-- Recommendations -->
|
|
<div class="section-header">Có thể bạn sẽ thích (Top phim hay)</div>
|
|
<div class="rec-grid" id="recommendations"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module" src="/scripts/info.js"></script>
|
|
</body>
|
|
|
|
</html> |