Hugging Face's logo

Spaces:
x1101
/
mass
Running

App Files Community
x1101 commited on
Commit
8609898
·
verified ·
1 Parent(s): 80a9848

add seperator for each movie card - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +598 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mass
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mass
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,598 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CineStream - Your Ultimate Streaming Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#E50914',
16
+ dark: '#141414',
17
+ secondary: '#222222',
18
+ },
19
+ animation: {
20
+ 'slide-infinite': 'slide 60s linear infinite',
21
+ },
22
+ keyframes: {
23
+ slide: {
24
+ '0%': { transform: 'translateX(0)' },
25
+ '100%': { transform: 'translateX(-50%)' },
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ <style>
33
+ .movie-card:hover .movie-poster {
34
+ transform: scale(1.05);
35
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
36
+ }
37
+ .movie-poster {
38
+ transition: all 0.3s ease;
39
+ }
40
+ .hero-slider {
41
+ overflow: hidden;
42
+ white-space: nowrap;
43
+ }
44
+ .slider-track {
45
+ display: inline-block;
46
+ white-space: nowrap;
47
+ }
48
+ .slider-item {
49
+ display: inline-block;
50
+ margin-right: 1rem;
51
+ }
52
+ .blur-overlay {
53
+ background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 20%, rgba(20, 20, 20, 0) 80%, rgba(20, 20, 20, 1) 100%);
54
+ }
55
+ @media (max-width: 768px) {
56
+ .blur-overlay {
57
+ background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 10%, rgba(20, 20, 20, 0) 90%, rgba(20, 20, 20, 1) 100%);
58
+ }
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="bg-gray-100 dark:bg-dark text-gray-900 dark:text-gray-100 transition-colors duration-300">
63
+ <!-- Header -->
64
+ <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark/80 backdrop-blur-md shadow-sm">
65
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
66
+ <div class="flex items-center">
67
+ <h1 class="text-2xl font-bold text-primary">CineStream</h1>
68
+ </div>
69
+ <div class="flex items-center space-x-4">
70
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-secondary transition-colors">
71
+ <i class="fas fa-moon dark:hidden"></i>
72
+ <i class="fas fa-sun hidden dark:block"></i>
73
+ </button>
74
+ <button id="login-btn" class="bg-primary hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
75
+ Sign In
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </header>
80
+
81
+ <!-- Hero Section with Sliding Movies -->
82
+ <section class="relative overflow-hidden h-80 md:h-[28rem] w-full mt-4">
83
+ <div class="absolute inset-0 blur-overlay z-10"></div>
84
+ <div class="hero-slider h-full">
85
+ <div class="slider-track animate-slide-infinite h-full">
86
+ <!-- Duplicate items for infinite effect -->
87
+ <div class="slider-item h-full w-48 md:w-64 inline-block">
88
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
89
+ </div>
90
+ <div class="slider-item h-full w-64 md:w-80 inline-block">
91
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
92
+ </div>
93
+ <div class="slider-item h-full w-64 md:w-80 inline-block">
94
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div>
95
+ </div>
96
+ <div class="slider-item h-full w-64 md:w-80 inline-block">
97
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
98
+ </div>
99
+ <div class="slider-item h-full w-64 md:w-80 inline-block">
100
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
101
+ </div>
102
+ <div class="slider-item h-full w-64 md:w-80 inline-block">
103
+ <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w780/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="absolute bottom-0 left-0 right-0 z-20 p-8 bg-gradient-to-t from-dark to-transparent">
108
+ <h2 class="text-3xl md:text-5xl font-bold mb-2">Trending Now</h2>
109
+ <p class="text-lg md:text-xl max-w-2xl">Discover the most popular movies streaming right now. Updated daily with new releases.</p>
110
+ <button class="mt-4 bg-primary hover:bg-red-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
111
+ <i class="fas fa-play mr-2"></i> Watch Now
112
+ </button>
113
+ </div>
114
+ </section>
115
+
116
+ <!-- Main Content -->
117
+ <main class="container mx-auto px-4 py-8">
118
+ <!-- Popular Movies Section -->
119
+ <section class="mb-12">
120
+ <div class="flex justify-between items-center mb-6">
121
+ <h2 class="text-2xl font-bold">Popular Movies</h2>
122
+ <a href="#" class="text-primary hover:underline">View All</a>
123
+ </div>
124
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
125
+ <div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div>
126
+ <!-- Movie Card 1 -->
127
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer relative">
128
+ <div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
129
+ <div class="relative pb-[150%] overflow-hidden">
130
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
131
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
132
+ 8.5
133
+ </div>
134
+ </div>
135
+ <div class="p-2">
136
+ <h3 class="font-semibold truncate">The Shawshank Redemption</h3>
137
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
138
+ <span>1994</span>
139
+ <span>Drama</span>
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <!-- Movie Card 2 -->
145
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer relative">
146
+ <div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
147
+ <div class="relative pb-[150%] overflow-hidden">
148
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
149
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
150
+ 9.0
151
+ </div>
152
+ </div>
153
+ <div class="p-2">
154
+ <h3 class="font-semibold truncate">The Godfather</h3>
155
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
156
+ <span>1972</span>
157
+ <span>Crime</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Movie Card 3 -->
163
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer relative">
164
+ <div class="absolute -left-3 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"></div>
165
+ <div class="relative pb-[150%] overflow-hidden">
166
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div>
167
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
168
+ 8.8
169
+ </div>
170
+ </div>
171
+ <div class="p-2">
172
+ <h3 class="font-semibold truncate">The Dark Knight</h3>
173
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
174
+ <span>2008</span>
175
+ <span>Action</span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Movie Card 4 -->
181
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
182
+ <div class="relative pb-[150%] overflow-hidden">
183
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div>
184
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
185
+ 8.7
186
+ </div>
187
+ </div>
188
+ <div class="p-2">
189
+ <h3 class="font-semibold truncate">Pulp Fiction</h3>
190
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
191
+ <span>1994</span>
192
+ <span>Crime</span>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Movie Card 5 -->
198
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
199
+ <div class="relative pb-[150%] overflow-hidden">
200
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div>
201
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
202
+ 8.6
203
+ </div>
204
+ </div>
205
+ <div class="p-2">
206
+ <h3 class="font-semibold truncate">Fight Club</h3>
207
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
208
+ <span>1999</span>
209
+ <span>Drama</span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <!-- Movie Card 1 -->
214
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
215
+ <div class="relative pb-[150%] overflow-hidden">
216
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
217
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
218
+ 8.5
219
+ </div>
220
+ </div>
221
+ <div class="p-2">
222
+ <h3 class="font-semibold truncate">The Shawshank Redemption</h3>
223
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
224
+ <span>1994</span>
225
+ <span>Drama</span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Movie Card 2 -->
231
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
232
+ <div class="relative pb-[150%] overflow-hidden">
233
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
234
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
235
+ 9.0
236
+ </div>
237
+ </div>
238
+ <div class="p-2">
239
+ <h3 class="font-semibold truncate">The Godfather</h3>
240
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
241
+ <span>1972</span>
242
+ <span>Crime</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Movie Card 3 -->
248
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
249
+ <div class="relative pb-[150%] overflow-hidden">
250
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/7gKI9hpEMcZUQpNgKrkDzJpbnNS.jpg');"></div>
251
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
252
+ 8.8
253
+ </div>
254
+ </div>
255
+ <div class="p-2">
256
+ <h3 class="font-semibold truncate">The Dark Knight</h3>
257
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
258
+ <span>2008</span>
259
+ <span>Action</span>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Movie Card 4 -->
265
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
266
+ <div class="relative pb-[150%] overflow-hidden">
267
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div>
268
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
269
+ 8.7
270
+ </div>
271
+ </div>
272
+ <div class="p-2">
273
+ <h3 class="font-semibold truncate">Pulp Fiction</h3>
274
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
275
+ <span>1994</span>
276
+ <span>Crime</span>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Movie Card 5 -->
282
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
283
+ <div class="relative pb-[150%] overflow-hidden">
284
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div>
285
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
286
+ 8.6
287
+ </div>
288
+ </div>
289
+ <div class="p-2">
290
+ <h3 class="font-semibold truncate">Fight Club</h3>
291
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
292
+ <span>1999</span>
293
+ <span>Drama</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </section>
299
+
300
+ <!-- New Releases Section -->
301
+ <section class="mb-12">
302
+ <div class="flex justify-between items-center mb-6">
303
+ <h2 class="text-2xl font-bold">New Releases</h2>
304
+ <a href="#" class="text-primary hover:underline">View All</a>
305
+ </div>
306
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
307
+ <div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div>
308
+ <!-- Movie Card 1 -->
309
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
310
+ <div class="relative pb-[150%] overflow-hidden">
311
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg');"></div>
312
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
313
+ 7.8
314
+ </div>
315
+ </div>
316
+ <div class="p-2">
317
+ <h3 class="font-semibold truncate">Dune: Part Two</h3>
318
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
319
+ <span>2024</span>
320
+ <span>Sci-Fi</span>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Movie Card 2 -->
326
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
327
+ <div class="relative pb-[150%] overflow-hidden">
328
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
329
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
330
+ 8.5
331
+ </div>
332
+ </div>
333
+ <div class="p-2">
334
+ <h3 class="font-semibold truncate">Oppenheimer</h3>
335
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
336
+ <span>2023</span>
337
+ <span>Biography</span>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Movie Card 3 -->
343
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
344
+ <div class="relative pb-[150%] overflow-hidden">
345
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
346
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
347
+ 7.2
348
+ </div>
349
+ </div>
350
+ <div class="p-2">
351
+ <h3 class="font-semibold truncate">The Batman</h3>
352
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
353
+ <span>2022</span>
354
+ <span>Action</span>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <!-- Movie Card 4 -->
360
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
361
+ <div class="relative pb-[150%] overflow-hidden">
362
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div>
363
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
364
+ 8.0
365
+ </div>
366
+ </div>
367
+ <div class="p-2">
368
+ <h3 class="font-semibold truncate">Everything Everywhere All at Once</h3>
369
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
370
+ <span>2022</span>
371
+ <span>Adventure</span>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Movie Card 5 -->
377
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
378
+ <div class="relative pb-[150%] overflow-hidden">
379
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div>
380
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
381
+ 7.5
382
+ </div>
383
+ </div>
384
+ <div class="p-2">
385
+ <h3 class="font-semibold truncate">Top Gun: Maverick</h3>
386
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
387
+ <span>2022</span>
388
+ <span>Action</span>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </section>
394
+
395
+ <!-- Top Rated Section -->
396
+ <section class="mb-12">
397
+ <div class="flex justify-between items-center mb-6">
398
+ <h2 class="text-2xl font-bold">Top Rated</h2>
399
+ <a href="#" class="text-primary hover:underline">View All</a>
400
+ </div>
401
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
402
+ <div class="absolute inset-y-0 left-0 w-px bg-gray-200 dark:bg-gray-700"></div>
403
+ <!-- Movie Card 1 -->
404
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
405
+ <div class="relative pb-[150%] overflow-hidden">
406
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg');"></div>
407
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
408
+ 9.2
409
+ </div>
410
+ </div>
411
+ <div class="p-2">
412
+ <h3 class="font-semibold truncate">The Shawshank Redemption</h3>
413
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
414
+ <span>1994</span>
415
+ <span>Drama</span>
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Movie Card 2 -->
421
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
422
+ <div class="relative pb-[150%] overflow-hidden">
423
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg');"></div>
424
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
425
+ 9.0
426
+ </div>
427
+ </div>
428
+ <div class="p-2">
429
+ <h3 class="font-semibold truncate">The Godfather</h3>
430
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
431
+ <span>1972</span>
432
+ <span>Crime</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Movie Card 3 -->
438
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
439
+ <div class="relative pb-[150%] overflow-hidden">
440
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/8Vt6mWRCeAcujWdrxT2eRQuX3o9.jpg');"></div>
441
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
442
+ 8.9
443
+ </div>
444
+ </div>
445
+ <div class="p-2">
446
+ <h3 class="font-semibold truncate">The Dark Knight</h3>
447
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
448
+ <span>2008</span>
449
+ <span>Action</span>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- Movie Card 4 -->
455
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
456
+ <div class="relative pb-[150%] overflow-hidden">
457
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/q719jXXEz3oF7bH6XXsOkIdDM8.jpg');"></div>
458
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
459
+ 8.8
460
+ </div>
461
+ </div>
462
+ <div class="p-2">
463
+ <h3 class="font-semibold truncate">Pulp Fiction</h3>
464
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
465
+ <span>1994</span>
466
+ <span>Crime</span>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <!-- Movie Card 5 -->
472
+ <div class="movie-card rounded-lg overflow-hidden cursor-pointer">
473
+ <div class="relative pb-[150%] overflow-hidden">
474
+ <div class="movie-poster absolute inset-0 bg-cover bg-center" style="background-image: url('https://image.tmdb.org/t/p/w500/arw2vcBveWOVZr6pxd9XTd1TdQa.jpg');"></div>
475
+ <div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
476
+ 8.7
477
+ </div>
478
+ </div>
479
+ <div class="p-2">
480
+ <h3 class="font-semibold truncate">Fight Club</h3>
481
+ <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
482
+ <span>1999</span>
483
+ <span>Drama</span>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+ </main>
490
+
491
+ <!-- Footer -->
492
+ <footer class="bg-secondary text-gray-400 py-8">
493
+ <div class="container mx-auto px-4">
494
+ <div class="flex flex-col md:flex-row justify-between">
495
+ <div class="mb-6 md:mb-0">
496
+ <h2 class="text-2xl font-bold text-white mb-4">CineStream</h2>
497
+ <p class="max-w-md">The ultimate streaming platform for movie lovers. Watch anytime, anywhere.</p>
498
+ </div>
499
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
500
+ <div>
501
+ <h3 class="text-white font-semibold mb-4">Navigation</h3>
502
+ <ul class="space-y-2">
503
+ <li><a href="#" class="hover:text-white">Home</a></li>
504
+ <li><a href="#" class="hover:text-white">Movies</a></li>
505
+ <li><a href="#" class="hover:text-white">TV Shows</a></li>
506
+ <li><a href="#" class="hover:text-white">My List</a></li>
507
+ </ul>
508
+ </div>
509
+ <div>
510
+ <h3 class="text-white font-semibold mb-4">Legal</h3>
511
+ <ul class="space-y-2">
512
+ <li><a href="#" class="hover:text-white">Terms of Service</a></li>
513
+ <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
514
+ <li><a href="#" class="hover:text-white">Cookie Policy</a></li>
515
+ </ul>
516
+ </div>
517
+ <div>
518
+ <h3 class="text-white font-semibold mb-4">Connect</h3>
519
+ <div class="flex space-x-4">
520
+ <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a>
521
+ <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
522
+ <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
523
+ <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-center">
529
+ <p>&copy; 2023 CineStream. All rights reserved.</p>
530
+ </div>
531
+ </div>
532
+ </footer>
533
+
534
+ <!-- Login Modal -->
535
+ <div id="login-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-70">
536
+ <div class="bg-white dark:bg-secondary rounded-lg shadow-xl w-full max-w-md p-8">
537
+ <div class="flex justify-between items-center mb-6">
538
+ <h2 class="text-2xl font-bold">Sign In</h2>
539
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
540
+ <i class="fas fa-times"></i>
541
+ </button>
542
+ </div>
543
+ <form>
544
+ <div class="mb-4">
545
+ <label for="email" class="block text-sm font-medium mb-2">Email</label>
546
+ <input type="email" id="email" class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700" placeholder="[email protected]">
547
+ </div>
548
+ <div class="mb-6">
549
+ <label for="password" class="block text-sm font-medium mb-2">Password</label>
550
+ <input type="password" id="password" class="w-full px-3 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700" placeholder="••••••••">
551
+ </div>
552
+ <button type="submit" class="w-full bg-primary hover:bg-red-700 text-white py-2 px-4 rounded-md font-medium transition-colors">
553
+ Sign In
554
+ </button>
555
+ </form>
556
+ <div class="mt-4 text-center text-sm">
557
+ <p>Don't have an account? <a href="#" class="text-primary hover:underline">Sign up</a></p>
558
+ </div>
559
+ </div>
560
+ </div>
561
+
562
+ <script>
563
+ // Dark/Light mode toggle
564
+ const themeToggle = document.getElementById('theme-toggle');
565
+ themeToggle.addEventListener('click', () => {
566
+ document.documentElement.classList.toggle('dark');
567
+ localStorage.setItem('color-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
568
+ });
569
+
570
+ // Check for saved theme preference
571
+ if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
572
+ document.documentElement.classList.add('dark');
573
+ } else {
574
+ document.documentElement.classList.remove('dark');
575
+ }
576
+
577
+ // Login modal functionality
578
+ const loginBtn = document.getElementById('login-btn');
579
+ const loginModal = document.getElementById('login-modal');
580
+ const closeModal = document.getElementById('close-modal');
581
+
582
+ loginBtn.addEventListener('click', () => {
583
+ loginModal.classList.remove('hidden');
584
+ });
585
+
586
+ closeModal.addEventListener('click', () => {
587
+ loginModal.classList.add('hidden');
588
+ });
589
+
590
+ // Close modal when clicking outside
591
+ loginModal.addEventListener('click', (e) => {
592
+ if (e.target === loginModal) {
593
+ loginModal.classList.add('hidden');
594
+ }
595
+ });
596
+ </script>
597
+ <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=x1101/mass" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
598
+ </html>