Hugging Face's logo

Spaces:
x1101
/
mass
Running

App Files Community
x1101 commited on
Commit
f4a4ecb
·
verified ·
1 Parent(s): dbcc19a

make cool login form with 2 seperate sign in and login side by side, with fluid animation, add animated matrix background - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +278 -565
index.html CHANGED
@@ -3,595 +3,308 @@
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="your@email.com">
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Animated Login Form</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
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% {
12
+ transform: translateY(0);
13
+ }
14
+ 50% {
15
+ transform: translateY(-20px);
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
  }
18
+
19
+ @keyframes fadeIn {
20
+ from {
21
+ opacity: 0;
22
+ transform: translateY(20px);
23
+ }
24
+ to {
25
+ opacity: 1;
26
+ transform: translateY(0);
27
+ }
28
  }
29
+
30
+ @keyframes matrix {
31
+ 0% {
32
+ transform: translateY(0);
33
+ }
34
+ 100% {
35
+ transform: translateY(-100%);
36
+ }
37
  }
38
+
39
+ .matrix-bg {
40
+ position: absolute;
41
+ top: 0;
42
+ left: 0;
43
+ width: 100%;
44
+ height: 100%;
45
  overflow: hidden;
46
+ z-index: -1;
47
+ background-color: #000;
48
  }
49
+
50
+ .matrix-column {
51
+ position: relative;
52
  display: inline-block;
53
+ width: 1.2ch;
54
+ color: #0f0;
55
+ font-family: monospace;
56
+ font-size: 16px;
57
+ text-shadow: 0 0 5px #0f0;
58
+ animation: matrix 5s linear infinite;
59
+ animation-delay: calc(var(--delay) * 0.1s);
60
  }
61
+
62
+ .form-container {
63
+ perspective: 1000px;
64
  }
65
+
66
+ .form-card {
67
+ transition: transform 0.6s, box-shadow 0.3s;
68
+ transform-style: preserve-3d;
69
  }
70
+
71
+ .form-card:hover {
72
+ transform: translateY(-5px);
73
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
74
+ }
75
+
76
+ .float-animation {
77
+ animation: float 6s ease-in-out infinite;
78
+ }
79
+
80
+ .fade-in {
81
+ animation: fadeIn 0.8s ease-out forwards;
82
+ }
83
+
84
+ .delay-1 {
85
+ animation-delay: 0.2s;
86
+ }
87
+
88
+ .delay-2 {
89
+ animation-delay: 0.4s;
90
+ }
91
+
92
+ .delay-3 {
93
+ animation-delay: 0.6s;
94
+ }
95
+
96
+ .glow-text {
97
+ text-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
98
+ }
99
+
100
+ .glow-input:focus {
101
+ box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.5);
102
+ }
103
+
104
+ .toggle-form {
105
+ position: relative;
106
+ overflow: hidden;
107
+ }
108
+
109
+ .toggle-form::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: 0;
113
+ left: 0;
114
+ width: 100%;
115
+ height: 3px;
116
+ background: linear-gradient(90deg, #4ade80, #3b82f6);
117
+ transform: scaleX(0);
118
+ transform-origin: left;
119
+ transition: transform 0.3s ease;
120
+ }
121
+
122
+ .toggle-form.active::after {
123
+ transform: scaleX(1);
124
  }
125
  </style>
126
  </head>
127
+ <body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4 overflow-hidden">
128
+ <!-- Matrix Background -->
129
+ <div class="matrix-bg" id="matrixBg"></div>
130
+
131
+ <div class="container mx-auto max-w-6xl">
132
+ <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
133
+ <!-- Left Side - Sign In -->
134
+ <div class="form-container w-full lg:w-1/2 fade-in">
135
+ <div class="form-card bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl border border-gray-700 float-animation">
136
+ <div class="flex justify-between items-center mb-8">
137
+ <h2 class="text-3xl font-bold glow-text">Welcome Back</h2>
138
+ <div class="flex space-x-1 bg-gray-700 rounded-full p-1">
139
+ <button class="toggle-form px-4 py-2 rounded-full active" id="loginTab">Sign In</button>
140
+ <button class="toggle-form px-4 py-2 rounded-full" id="signupTab">Sign Up</button>
141
+ </div>
142
+ </div>
143
+
144
+ <form id="loginForm" class="space-y-6">
145
+ <div class="space-y-2 fade-in delay-1">
146
+ <label class="block text-sm font-medium text-gray-300">Email</label>
147
+ <input type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="your@email.com" required>
148
+ </div>
149
+
150
+ <div class="space-y-2 fade-in delay-2">
151
+ <label class="block text-sm font-medium text-gray-300">Password</label>
152
+ <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="••••••••" required>
153
+ </div>
154
+
155
+ <div class="flex items-center justify-between fade-in delay-3">
156
+ <div class="flex items-center">
157
+ <input type="checkbox" id="remember" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500">
158
+ <label for="remember" class="ml-2 text-sm text-gray-300">Remember me</label>
159
+ </div>
160
+ <a href="#" class="text-sm text-green-400 hover:text-green-300 transition">Forgot password?</a>
161
+ </div>
162
+
163
+ <button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-green-500 to-blue-500 text-white font-medium rounded-lg hover:from-green-600 hover:to-blue-600 transition-all transform hover:scale-105 fade-in delay-3">
164
+ Sign In
165
+ </button>
166
+
167
+ <div class="text-center text-gray-400 fade-in delay-3">
168
+ <p>Or continue with</p>
169
+ </div>
170
+
171
+ <div class="flex justify-center space-x-4 fade-in delay-3">
172
+ <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
173
+ <i class="fab fa-google text-red-400"></i>
174
+ </button>
175
+ <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
176
+ <i class="fab fa-facebook-f text-blue-400"></i>
177
+ </button>
178
+ <button type="button" class="p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
179
+ <i class="fab fa-twitter text-blue-300"></i>
180
+ </button>
181
+ </div>
182
+ </form>
183
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
+
186
+ <!-- Right Side - Sign Up -->
187
+ <div class="form-container w-full lg:w-1/2 fade-in delay-1">
188
+ <div class="form-card bg-gray-800 bg-opacity-70 backdrop-blur-md rounded-xl p-8 shadow-2xl border border-gray-700 float-animation" style="animation-delay: 0.5s;">
189
+ <div class="mb-8">
190
+ <h2 class="text-3xl font-bold glow-text">Create Account</h2>
191
+ <p class="text-gray-400">Join our community today</p>
192
+ </div>
193
+
194
+ <form id="signupForm" class="space-y-6">
195
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 fade-in delay-1">
196
+ <div class="space-y-2">
197
+ <label class="block text-sm font-medium text-gray-300">First Name</label>
198
+ <input type="text" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="John" required>
199
+ </div>
200
+ <div class="space-y-2">
201
+ <label class="block text-sm font-medium text-gray-300">Last Name</label>
202
+ <input type="text" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="Doe" required>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="space-y-2 fade-in delay-2">
207
+ <label class="block text-sm font-medium text-gray-300">Email</label>
208
+ <input type="email" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="your@email.com" required>
209
+ </div>
210
+
211
+ <div class="space-y-2 fade-in delay-3">
212
+ <label class="block text-sm font-medium text-gray-300">Password</label>
213
+ <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="••••••••" required>
214
+ </div>
215
+
216
+ <div class="space-y-2 fade-in delay-3">
217
+ <label class="block text-sm font-medium text-gray-300">Confirm Password</label>
218
+ <input type="password" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none glow-input transition-all" placeholder="••••••••" required>
219
+ </div>
220
+
221
+ <div class="flex items-center fade-in delay-3">
222
+ <input type="checkbox" id="terms" class="w-4 h-4 text-green-500 bg-gray-700 border-gray-600 rounded focus:ring-green-500" required>
223
+ <label for="terms" class="ml-2 text-sm text-gray-300">
224
+ I agree to the <a href="#" class="text-green-400 hover:text-green-300 transition">Terms</a> and <a href="#" class="text-green-400 hover:text-green-300 transition">Privacy Policy</a>
225
+ </label>
226
+ </div>
227
+
228
+ <button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all transform hover:scale-105 fade-in delay-3">
229
+ Sign Up
230
+ </button>
231
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  </div>
233
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  </div>
235
  </div>
236
 
237
  <script>
238
+ // Matrix background effect
239
+ document.addEventListener('DOMContentLoaded', function() {
240
+ const matrixBg = document.getElementById('matrixBg');
241
+ const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
242
+
243
+ const fontSize = 16;
244
+ const columns = Math.floor(window.innerWidth / (fontSize * 1.2));
245
+
246
+ for (let i = 0; i < columns; i++) {
247
+ const column = document.createElement('div');
248
+ column.className = 'matrix-column';
249
+ column.style.left = i * (fontSize * 1.2) + 'px';
250
+ column.style.animationDuration = (5 + Math.random() * 10) + 's';
251
+ column.style.setProperty('--delay', i);
252
+
253
+ // Create initial characters
254
+ const rows = Math.floor(window.innerHeight / fontSize) + 1;
255
+ for (let j = 0; j < rows; j++) {
256
+ const char = document.createElement('div');
257
+ char.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
258
+ char.style.opacity = Math.random();
259
+ column.appendChild(char);
260
+ }
261
+
262
+ matrixBg.appendChild(column);
263
+
264
+ // Animate the column
265
+ setInterval(() => {
266
+ const firstChar = column.firstChild;
267
+ const newChar = document.createElement('div');
268
+ newChar.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
269
+ newChar.style.opacity = Math.random();
270
+
271
+ column.removeChild(firstChar);
272
+ column.appendChild(newChar);
273
+ }, 100 + Math.random() * 200);
274
  }
275
+
276
+ // Form toggle functionality
277
+ const loginTab = document.getElementById('loginTab');
278
+ const signupTab = document.getElementById('signupTab');
279
+ const loginForm = document.getElementById('loginForm');
280
+ const signupForm = document.getElementById('signupForm');
281
+
282
+ loginTab.addEventListener('click', function(e) {
283
+ e.preventDefault();
284
+ loginTab.classList.add('active');
285
+ signupTab.classList.remove('active');
286
+ loginForm.style.display = 'block';
287
+ signupForm.style.display = 'none';
288
+ });
289
+
290
+ signupTab.addEventListener('click', function(e) {
291
+ e.preventDefault();
292
+ signupTab.classList.add('active');
293
+ loginTab.classList.remove('active');
294
+ signupForm.style.display = 'block';
295
+ loginForm.style.display = 'none';
296
+ });
297
+
298
+ // Form submission
299
+ loginForm.addEventListener('submit', function(e) {
300
+ e.preventDefault();
301
+ alert('Login functionality would go here!');
302
+ });
303
+
304
+ signupForm.addEventListener('submit', function(e) {
305
+ e.preventDefault();
306
+ alert('Sign up functionality would go here!');
307
+ });
308
  });
309
  </script>
310
  <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>