Spaces:
Running
Running
File size: 6,323 Bytes
1bfe13b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watch Movie - NeonFlix</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0a0a0f;
--neon-purple: #8a2be2;
--neon-cyan: #00ffff;
--text-light: #ffffff;
--text-muted: #a0a0a0;
--glass-bg: rgba(255, 255, 255, 0.05);
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-dark);
color: var(--text-light);
}
.neon-glow-purple {
box-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
}
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-container {
position: relative;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.player-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body class="min-h-screen">
<!-- Sticky Header -->
<header class="sticky top-0 z-50 backdrop-blur-md bg-gray-900/80 border-b border-gray-800 neon-glow-purple">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<a href="index.html">
<i data-feather="film" class="text-purple-500"></i>
</a>
<a href="index.html" class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-cyan-500">NeonFlix</a>
</div>
<div class="flex items-center space-x-4">
<a href="movie.html?id=123" class="glass-card py-2 px-4 rounded-full neon-border-purple text-white hover:neon-glow-purple transition-all flex items-center">
<i data-feather="arrow-left" class="mr-2"></i> Back to Details
</a>
</div>
</div>
</header>
<!-- Video Player -->
<main class="container mx-auto px-4 py-8">
<div class="mb-6">
<h1 class="text-2xl md:text-3xl font-bold mb-2">Cyber Revolution</h1>
<p class="text-gray-400">You are watching: Chapter 1 - The Awakening</p>
</div>
<div class="player-container glass-card rounded-xl overflow-hidden mb-6">
<iframe class="player-iframe" src="https://vidsrc.me/embed/123" allowfullscreen></iframe>
</div>
<!-- Player Controls -->
<div class="glass-card p-4 mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="font-semibold">Chapters</h2>
<div class="flex items-center text-sm text-gray-400">
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
<span>2:15:30 remaining</span>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-5 gap-2">
<button class="py-2 px-3 rounded glass-card text-sm hover:bg-purple-900/30 transition-colors">Chapter 1</button>
<button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 2</button>
<button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 3</button>
<button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 4</button>
<button class="py-2 px-3 rounded bg-gray-700 text-sm hover:bg-gray-600 transition-colors">Chapter 5</button>
</div>
</div>
<!-- Movie Info -->
<div class="glass-card p-6">
<h2 class="text-xl font-bold mb-4">About This Movie</h2>
<p class="text-gray-300 mb-4">
In a dystopian future where corporations rule the world and human emotions are commodified,
a rogue hacker discovers a revolutionary AI that could free humanity or destroy it completely.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<h3 class="font-semibold text-purple-400 mb-1">Director</h3>
<p class="text-sm">Alexandra Chen</p>
</div>
<div>
<h3 class="font-semibold text-purple-400 mb-1">Release Year</h3>
<p class="text-sm">2023</p>
</div>
<div>
<h3 class="font-semibold text-purple-400 mb-1">Duration</h3>
<p class="text-sm">2h 15m</p>
</div>
<div>
<h3 class="font-semibold text-purple-400 mb-1">Rating</h3>
<p class="text-sm">PG-13</p>
</div>
</div>
</div>
</main>
<script>
feather.replace();
// Get movie ID from URL
document.addEventListener('DOMContentLoaded', function() {
const urlParams = new URLSearchParams(window.location.search);
const movieId = urlParams.get('id');
// In a real implementation, this would set the iframe src to vidsrc.me/embed/{movieId}
console.log("Playing movie with ID:", movieId);
});
</script>
</body>
</html>
|