Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Retro Cinema - Night of the Living Dead</title> | |
| <!-- Importing FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS VARIABLES & RESET --- */ | |
| :root { | |
| --bg-body: #0f0f0f; | |
| --bg-surface: #1f1f1f; | |
| --bg-surface-hover: #2a2a2a; | |
| --bg-header: rgba(15, 15, 15, 0.95); | |
| --text-primary: #ffffff; | |
| --text-secondary: #aaaaaa; | |
| --accent-color: #e50914; /* Netflix-like Red */ | |
| --accent-hover: #b20710; | |
| --border-color: #333; | |
| --spacing-unit: 1rem; | |
| --max-width: 1400px; | |
| --radius: 8px; | |
| --shadow: 0 4px 20px rgba(0,0,0,0.5); | |
| --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background-color: var(--bg-body); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| a { text-decoration: none; color: inherit; transition: var(--transition); } | |
| ul { list-style: none; } | |
| button { cursor: pointer; border: none; font-family: inherit; } | |
| /* --- HEADER --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 70px; | |
| background-color: var(--bg-header); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 2rem; | |
| z-index: 1000; | |
| transition: transform 0.3s ease; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--accent-color); | |
| letter-spacing: -0.5px; | |
| } | |
| .brand i { font-size: 1.8rem; } | |
| .nav-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--text-primary); | |
| } | |
| .anycoder-credit { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| background: rgba(255,255,255,0.05); | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| border: 1px solid transparent; | |
| } | |
| .anycoder-credit:hover { | |
| border-color: var(--accent-color); | |
| color: var(--text-primary); | |
| background: rgba(229, 9, 20, 0.1); | |
| } | |
| /* --- MAIN LAYOUT --- */ | |
| main { | |
| margin-top: 70px; | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 350px; /* Video area + Sidebar */ | |
| gap: 2rem; | |
| padding: 2rem; | |
| max-width: var(--max-width); | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* --- VIDEO PLAYER SECTION --- */ | |
| .video-container { | |
| width: 100%; | |
| background: #000; | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| /* Aspect Ratio Hack for responsiveness if needed, but video tag handles it well */ | |
| } | |
| /* The user requested specific video tag attributes */ | |
| video { | |
| display: block; | |
| width: 100%; | |
| max-height: 80vh; | |
| outline: none; | |
| } | |
| .video-controls-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| } | |
| .btn-action { | |
| background: var(--bg-surface); | |
| color: var(--text-primary); | |
| padding: 10px 20px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: var(--transition); | |
| } | |
| .btn-action:hover { | |
| background: var(--bg-surface-hover); | |
| transform: translateY(-2px); | |
| } | |
| .btn-action.primary { | |
| background: var(--accent-color); | |
| } | |
| .btn-action.primary:hover { | |
| background: var(--accent-hover); | |
| } | |
| .btn-action i { font-size: 1.1rem; } | |
| /* --- VIDEO INFO --- */ | |
| .video-meta { | |
| margin-top: 1.5rem; | |
| } | |
| .video-title { | |
| font-size: 2rem; | |
| font-weight: 800; | |
| margin-bottom: 0.5rem; | |
| line-height: 1.2; | |
| } | |
| .video-stats { | |
| display: flex; | |
| gap: 15px; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-bottom: 1.5rem; | |
| align-items: center; | |
| } | |
| .badge { | |
| background: var(--bg-surface); | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| border: 1px solid var(--border-color); | |
| } | |
| .video-description { | |
| background: var(--bg-surface); | |
| padding: 1.5rem; | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| color: #ddd; | |
| line-height: 1.7; | |
| border: 1px solid var(--border-color); | |
| } | |
| .video-description h3 { | |
| margin-bottom: 10px; | |
| color: var(--text-primary); | |
| } | |
| /* --- SIDEBAR (Up Next) --- */ | |
| .sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .sidebar-title { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .recommended-card { | |
| display: flex; | |
| gap: 10px; | |
| background: var(--bg-surface); | |
| padding: 10px; | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .recommended-card:hover { | |
| background: var(--bg-surface-hover); | |
| transform: translateX(-5px); | |
| } | |
| .rec-thumb { | |
| width: 120px; | |
| height: 68px; | |
| background-color: #333; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| } | |
| .rec-thumb img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .rec-info { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .rec-title { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| line-height: 1.3; | |
| color: var(--text-primary); | |
| } | |
| .rec-meta { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* --- CINEMA MODE --- */ | |
| body.cinema-mode header, | |
| body.cinema-mode .sidebar, | |
| body.cinema-mode .footer { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| body.cinema-mode main { | |
| grid-template-columns: 1fr; | |
| max-width: 100%; | |
| padding: 1rem; | |
| margin-top: 60px; /* slight offset */ | |
| gap: 0; | |
| display: block; | |
| } | |
| body.cinema-mode .video-container { | |
| border-radius: 0; | |
| max-width: 100%; | |
| box-shadow: none; | |
| position: sticky; | |
| top: 0; | |
| z-index: 999; | |
| } | |
| body.cinema-mode .video-meta, | |
| body.cinema-mode .video-controls-bar, | |
| body.cinema-mode .video-description { | |
| display: none; | |
| } | |
| body.cinema-mode .cinema-toggle { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1001; | |
| opacity: 1; | |
| pointer-events: auto; | |
| background: rgba(0,0,0,0.7); | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| margin-top: auto; | |
| padding: 2rem; | |
| text-align: center; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--border-color); | |
| background: var(--bg-surface); | |
| } | |
| /* --- TOAST --- */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(100px); | |
| background: var(--text-primary); | |
| color: var(--bg-body); | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.3); | |
| opacity: 0; | |
| transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| opacity: 1; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 900px) { | |
| main { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| display: none; /* Hide sidebar on tablet/mobile for cleaner look */ | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| header { | |
| padding: 0 1rem; | |
| } | |
| .brand span { display: none; } /* Hide text logo on small screens */ | |
| .video-title { font-size: 1.5rem; } | |
| .nav-links { display: none; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="main-header"> | |
| <div class="brand"> | |
| <i class="fas fa-film"></i> | |
| <span>RetroStream</span> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#" class="active">Home</a> | |
| <a href="#">Movies</a> | |
| <a href="#">Classics</a> | |
| <a href="#">My List</a> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit"> | |
| Built with anycoder <i class="fas fa-external-link-alt" style="font-size:0.7em; margin-left:4px;"></i> | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Left Column: Video Player --> | |
| <div class="content-column"> | |
| <div class="video-container"> | |
| <!-- USER REQUESTED VIDEO TAG --> | |
| <video controls width="100%" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Night-of-the-Living-Dead-1968-Theater-Poster.jpg/800px-Night-of-the-Living-Dead-1968-Theater-Poster.jpg"> | |
| <source src="https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| <!-- Controls --> | |
| <div class="video-controls-bar"> | |
| <button class="btn-action" onclick="toggleCinemaMode()" title="Toggle Cinema Mode"> | |
| <i class="fas fa-expand"></i> <span style="display:none; @media(min-width:600px){display:inline;}">Cinema Mode</span> | |
| </button> | |
| <div style="display:flex; gap:10px;"> | |
| <button class="btn-action" onclick="copyLink()"> | |
| <i class="fas fa-share"></i> Share | |
| </button> | |
| <button class="btn-action primary" onclick="likeVideo(this)"> | |
| <i class="far fa-thumbs-up"></i> Like | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Meta Data --> | |
| <div class="video-meta"> | |
| <h1 class="video-title">Night of the Living Dead (1968)</h1> | |
| <div class="video-stats"> | |
| <span class="badge">4K REMASTERED</span> | |
| <span class="badge">HD</span> | |
| <span><i class="fas fa-eye"></i> 1.2M Views</span> | |
| <span><i class="fas fa-calendar"></i> 1968</span> | |
| <span><i class="fas fa-clock"></i> 1h 36m</span> | |
| </div> | |
| <div class="video-description"> | |
| <h3>About the film</h3> | |
| <p> | |
| A ragtag group of Pennsylvanians barricade themselves in an old farmhouse to remain safe from a bloodthirsty, flesh-eating ghoul horde that is ravaging the East Coast of the United States. This film is a landmark in the zombie genre, establishing many tropes that would become standard in later works. | |
| </p> | |
| <br> | |
| <p><strong>Director:</strong> George A. Romero</p> | |
| <p><strong>Stars:</strong> Duane Jones, Judith O'Dea, Karl Hardman</p> | |
| <p><strong>Genre:</strong> Horror / Thriller</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Sidebar / Recommendations --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-title"> | |
| <i class="fas fa-history"></i> Up Next | |
| </div> | |
| <!-- Card 1 --> | |
| <div class="recommended-card"> | |
| <div class="rec-thumb"> | |
| <img src="https://picsum.photos/seed/nosferatu/300/200" alt="Thumb"> | |
| </div> | |
| <div class="rec-info"> | |
| <div class="rec-title">Nosferatu (1922)</div> | |
| <div class="rec-meta">1h 33m • Horror</div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="recommended-card"> | |
| <div class="rec-thumb"> | |
| <img src="https://picsum.photos/seed/carnival/300/200" alt="Thumb"> | |
| </div> | |
| <div class="rec-info"> | |
| <div class="rec-title">Carnival of Souls</div> | |
| <div class="rec-meta">1h 18m • Mystery</div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="recommended-card"> | |
| <div class="rec-thumb"> | |
| <img src="https://picsum.photos/seed/plan9/300/200" alt="Thumb"> | |
| </div> | |
| <div class="rec-info"> | |
| <div class="rec-title">Plan 9 from Outer Space</div> | |
| <div class="rec-meta">1h 19m • Sci-Fi</div> | |
| </div> | |
| </div> | |
| <!-- Card 4 --> | |
| <div class="recommended-card"> | |
| <div class="rec-thumb"> | |
| <img src="https://picsum.photos/seed/house/300/200" alt="Thumb"> | |
| </div> | |
| <div class="rec-info"> | |
| <div class="rec-title">House on Haunted Hill</div> | |
| <div class="rec-meta">1h 15m • Horror</div> | |
| </div> | |
| </div> | |
| <div style="margin-top: 20px; padding: 15px; background: #1a1a1a; border-radius: 8px;"> | |
| <h4 style="margin-bottom: 10px; color: var(--text-primary);">Subscribe to Channel</h4> | |
| <p style="font-size: 0.85rem; color: #888; margin-bottom: 10px;">Get notified when we add new classic public domain films.</p> | |
| <button class="btn-action primary" style="width: 100%; justify-content: center;">Subscribe</button> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer"> | |
| <p>© 2023 RetroStream Classics. All rights reserved.</p> | |
| <p style="margin-top: 5px; font-size: 0.8rem; opacity: 0.6;">Content provided by Archive.org. Public Domain.</p> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast"> | |
| <i class="fas fa-check-circle"></i> | |
| <span>Link copied to clipboard!</span> | |
| </div> | |
| <!-- Scripts --> | |
| <script> | |
| // Toggle Cinema Mode | |
| function toggleCinemaMode() { | |
| document.body.classList.toggle('cinema-mode'); | |
| const isCinema = document.body.classList.contains('cinema-mode'); | |
| const icon = document.querySelector('.btn-action i'); | |
| if (isCinema) { | |
| icon.classList.remove('fa-expand'); | |
| icon.classList.add('fa-compress'); | |
| } else { | |
| icon.classList.remove('fa-compress'); | |
| icon.classList.add('fa-expand'); | |
| } | |
| } | |
| // Copy Link Functionality | |
| function copyLink() { | |
| const url = window.location.href; | |
| navigator.clipboard.writeText(url).then(() => { | |
| showToast(); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| // Show Toast Notification | |
| function showToast() { | |
| const toast = document.getElementById('toast'); | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Like Button Interaction | |
| function likeVideo(btn) { | |
| const icon = btn.querySelector('i'); | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas'); | |
| btn.style.color = 'var(--accent-color)'; | |
| showToastText("Added to Liked Videos"); | |
| } else { | |
| icon.classList.remove('fas'); | |
| icon.classList.add('far'); | |
| btn.style.color = 'var(--text-primary)'; | |
| showToastText("Removed from Liked Videos"); | |
| } | |
| } | |
| // Helper to change toast text dynamically | |
| function showToastText(message) { | |
| const toast = document.getElementById('toast'); | |
| const span = toast.querySelector('span'); | |
| const originalText = span.innerText; | |
| span.innerText = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| setTimeout(() => { | |
| span.innerText = originalText; // Reset text | |
| }, 300); | |
| }, 3000); | |
| } | |
| // Keyboard shortcut for Cinema Mode (Esc to exit) | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape' && document.body.classList.contains('cinema-mode')) { | |
| toggleCinemaMode(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |