Hugging Face's logo

Spaces:
docto41
/
cineflix
Running

App Files Community
docto41 commited on
Commit
6cdbf8d
·
verified ·
1 Parent(s): 7a28f67

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +596 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cineflix
3
- emoji: 🏢
4
- colorFrom: green
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: cineflix
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: yellow
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,596 @@
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>CIN-FLIX | Movie Streaming</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #0f0f1a;
15
+ color: white;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .hero-gradient {
20
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
21
+ }
22
+
23
+ .movie-card {
24
+ transition: all 0.3s ease;
25
+ transform: scale(0.95);
26
+ }
27
+
28
+ .movie-card:hover {
29
+ transform: scale(1);
30
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
31
+ z-index: 10;
32
+ }
33
+
34
+ .glow {
35
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
36
+ }
37
+
38
+ .video-container {
39
+ position: relative;
40
+ padding-bottom: 56.25%;
41
+ height: 0;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .video-container iframe {
46
+ position: absolute;
47
+ top: 0;
48
+ left: 0;
49
+ width: 100%;
50
+ height: 100%;
51
+ }
52
+
53
+ .scroll-container {
54
+ scroll-snap-type: x mandatory;
55
+ }
56
+
57
+ .scroll-item {
58
+ scroll-snap-align: start;
59
+ }
60
+
61
+ @keyframes float {
62
+ 0%, 100% {
63
+ transform: translateY(0);
64
+ }
65
+ 50% {
66
+ transform: translateY(-10px);
67
+ }
68
+ }
69
+
70
+ .floating {
71
+ animation: float 3s ease-in-out infinite;
72
+ }
73
+
74
+ .blur-bg {
75
+ backdrop-filter: blur(10px);
76
+ background-color: rgba(15, 15, 26, 0.7);
77
+ }
78
+
79
+ .progress-bar {
80
+ height: 4px;
81
+ background-color: rgba(255, 255, 255, 0.2);
82
+ }
83
+
84
+ .progress-fill {
85
+ height: 100%;
86
+ background-color: #3b82f6;
87
+ transition: width 0.3s ease;
88
+ }
89
+
90
+ .genre-tag {
91
+ transition: all 0.2s ease;
92
+ }
93
+
94
+ .genre-tag:hover {
95
+ transform: translateY(-2px);
96
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
97
+ }
98
+
99
+ .fade-in {
100
+ animation: fadeIn 0.5s ease-in;
101
+ }
102
+
103
+ @keyframes fadeIn {
104
+ from { opacity: 0; }
105
+ to { opacity: 1; }
106
+ }
107
+ </style>
108
+ </head>
109
+ <body class="min-h-screen">
110
+ <!-- Navigation -->
111
+ <nav class="blur-bg fixed w-full z-50 py-4 px-6 flex justify-between items-center">
112
+ <div class="flex items-center space-x-2">
113
+ <i class="fas fa-film text-3xl text-blue-500"></i>
114
+ <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">CIN-FLIX</span>
115
+ </div>
116
+
117
+ <div class="hidden md:flex space-x-6">
118
+ <a href="#" class="hover:text-blue-400 transition">Home</a>
119
+ <a href="#" class="hover:text-blue-400 transition">Movies</a>
120
+ <a href="#" class="hover:text-blue-400 transition">TV Shows</a>
121
+ <a href="#" class="hover:text-blue-400 transition">My List</a>
122
+ </div>
123
+
124
+ <div class="flex items-center space-x-4">
125
+ <button class="p-2 rounded-full hover:bg-gray-800 transition">
126
+ <i class="fas fa-search"></i>
127
+ </button>
128
+ <button class="p-2 rounded-full hover:bg-gray-800 transition">
129
+ <i class="fas fa-bell"></i>
130
+ </button>
131
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
132
+ <i class="fas fa-user"></i>
133
+ </div>
134
+ </div>
135
+ </nav>
136
+
137
+ <!-- Hero Section with Auto-playing Video -->
138
+ <section class="hero-gradient pt-20 pb-16">
139
+ <div class="container mx-auto px-4">
140
+ <div class="flex flex-col lg:flex-row items-center gap-8">
141
+ <div class="lg:w-1/2 space-y-6 mt-12">
142
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight">
143
+ <span class="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Stream Unlimited</span><br>
144
+ Movies & TV Shows
145
+ </h1>
146
+ <p class="text-gray-300 text-lg">Watch anywhere. Cancel anytime. Premium content from around the world.</p>
147
+
148
+ <div class="flex flex-wrap gap-3 mt-6">
149
+ <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-full font-medium flex items-center gap-2 transition transform hover:scale-105">
150
+ <i class="fas fa-play"></i> Watch Now
151
+ </button>
152
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full font-medium flex items-center gap-2 transition transform hover:scale-105">
153
+ <i class="fas fa-info-circle"></i> More Info
154
+ </button>
155
+ </div>
156
+
157
+ <div class="mt-8">
158
+ <div class="flex items-center gap-3 mb-2">
159
+ <span class="text-sm text-gray-400">New episodes every Friday</span>
160
+ <span class="w-1 h-1 bg-gray-500 rounded-full"></span>
161
+ <span class="text-sm text-gray-400">4K Ultra HD</span>
162
+ </div>
163
+ <div class="progress-bar rounded-full">
164
+ <div class="progress-fill rounded-full" style="width: 65%"></div>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="lg:w-1/2 mt-12 lg:mt-0 relative floating">
170
+ <div class="video-container rounded-xl overflow-hidden shadow-2xl glow">
171
+ <iframe id="hero-video" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&controls=0&loop=1&playlist=dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
172
+ </div>
173
+ <div class="absolute -bottom-4 -left-4 w-24 h-24 bg-purple-500 rounded-full opacity-20 blur-xl"></div>
174
+ <div class="absolute -top-4 -right-4 w-20 h-20 bg-blue-500 rounded-full opacity-20 blur-xl"></div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <!-- Main Content -->
181
+ <main class="py-12">
182
+ <div class="container mx-auto px-4">
183
+ <!-- Trending Now -->
184
+ <section class="mb-16 fade-in">
185
+ <div class="flex justify-between items-center mb-6">
186
+ <h2 class="text-2xl font-bold flex items-center gap-2">
187
+ <i class="fas fa-fire text-red-500"></i>
188
+ <span>Trending Now</span>
189
+ </h2>
190
+ <a href="#" class="text-blue-400 hover:underline">View All</a>
191
+ </div>
192
+
193
+ <div class="relative">
194
+ <div class="scroll-container flex overflow-x-auto pb-6 gap-4 scrollbar-hide">
195
+ <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden">
196
+ <img src="https://source.unsplash.com/random/300x450/?movie,action" alt="Movie poster" class="w-full h-full object-cover transition group-hover:opacity-70">
197
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
198
+ <h3 class="font-bold text-lg">Action Adventure</h3>
199
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
200
+ <span>2023</span>
201
+ <span>•</span>
202
+ <span>2h 15m</span>
203
+ </div>
204
+ <div class="flex gap-2 mt-2 flex-wrap">
205
+ <span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">Action</span>
206
+ <span class="genre-tag px-2 py-1 bg-purple-900/50 text-xs rounded">Adventure</span>
207
+ </div>
208
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden">
213
+ <img src="https://source.unsplash.com/random/300x450/?movie,sci-fi" alt="Movie poster" class="w-full h-full object-cover transition group-hover:opacity-70">
214
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
215
+ <h3 class="font-bold text-lg">Sci-Fi Thriller</h3>
216
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
217
+ <span>2023</span>
218
+ <span>•</span>
219
+ <span>1h 52m</span>
220
+ </div>
221
+ <div class="flex gap-2 mt-2 flex-wrap">
222
+ <span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">Sci-Fi</span>
223
+ <span class="genre-tag px-2 py-1 bg-purple-900/50 text-xs rounded">Thriller</span>
224
+ </div>
225
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden">
230
+ <img src="https://source.unsplash.com/random/300x450/?movie,comedy" alt="Movie poster" class="w-full h-full object-cover transition group-hover:opacity-70">
231
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
232
+ <h3 class="font-bold text-lg">Romantic Comedy</h3>
233
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
234
+ <span>2023</span>
235
+ <span>•</span>
236
+ <span>1h 45m</span>
237
+ </div>
238
+ <div class="flex gap-2 mt-2 flex-wrap">
239
+ <span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">Romance</span>
240
+ <span class="genre-tag px-2 py-1 bg-purple-900/50 text-xs rounded">Comedy</span>
241
+ </div>
242
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden">
247
+ <img src="https://source.unsplash.com/random/300x450/?movie,drama" alt="Movie poster" class="w-full h-full object-cover transition group-hover:opacity-70">
248
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
249
+ <h3 class="font-bold text-lg">Drama Series</h3>
250
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
251
+ <span>2023</span>
252
+ <span>•</span>
253
+ <span>Season 2</span>
254
+ </div>
255
+ <div class="flex gap-2 mt-2 flex-wrap">
256
+ <span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">Drama</span>
257
+ <span class="genre-tag px-2 py-1 bg-purple-900/50 text-xs rounded">Crime</span>
258
+ </div>
259
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="scroll-item flex-shrink-0 w-64 movie-card group relative rounded-xl overflow-hidden">
264
+ <img src="https://source.unsplash.com/random/300x450/?movie,horror" alt="Movie poster" class="w-full h-full object-cover transition group-hover:opacity-70">
265
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
266
+ <h3 class="font-bold text-lg">Horror Night</h3>
267
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
268
+ <span>2023</span>
269
+ <span>•</span>
270
+ <span>1h 38m</span>
271
+ </div>
272
+ <div class="flex gap-2 mt-2 flex-wrap">
273
+ <span class="genre-tag px-2 py-1 bg-blue-900/50 text-xs rounded">Horror</span>
274
+ <span class="genre-tag px-2 py-1 bg-purple-900/50 text-xs rounded">Mystery</span>
275
+ </div>
276
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Continue Watching -->
284
+ <section class="mb-16 fade-in">
285
+ <div class="flex justify-between items-center mb-6">
286
+ <h2 class="text-2xl font-bold flex items-center gap-2">
287
+ <i class="fas fa-history text-blue-400"></i>
288
+ <span>Continue Watching</span>
289
+ </h2>
290
+ <a href="#" class="text-blue-400 hover:underline">View All</a>
291
+ </div>
292
+
293
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
294
+ <div class="movie-card group relative rounded-xl overflow-hidden bg-gray-800/50 hover:bg-gray-800/70 transition p-4 flex gap-4 items-center">
295
+ <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
296
+ <img src="https://source.unsplash.com/random/100x100/?movie,action" alt="Movie poster" class="w-full h-full object-cover">
297
+ </div>
298
+ <div class="flex-1">
299
+ <h3 class="font-bold">The Last Adventure</h3>
300
+ <p class="text-sm text-gray-400 mt-1">S1:E5 - The Hidden Truth</p>
301
+ <div class="progress-bar rounded-full mt-3">
302
+ <div class="progress-fill rounded-full" style="width: 45%"></div>
303
+ </div>
304
+ </div>
305
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
306
+ <i class="fas fa-play"></i>
307
+ </button>
308
+ </div>
309
+
310
+ <div class="movie-card group relative rounded-xl overflow-hidden bg-gray-800/50 hover:bg-gray-800/70 transition p-4 flex gap-4 items-center">
311
+ <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
312
+ <img src="https://source.unsplash.com/random/100x100/?movie,sci-fi" alt="Movie poster" class="w-full h-full object-cover">
313
+ </div>
314
+ <div class="flex-1">
315
+ <h3 class="font-bold">Galaxy Explorers</h3>
316
+ <p class="text-sm text-gray-400 mt-1">Episode 8 - New Frontier</p>
317
+ <div class="progress-bar rounded-full mt-3">
318
+ <div class="progress-fill rounded-full" style="width: 78%"></div>
319
+ </div>
320
+ </div>
321
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
322
+ <i class="fas fa-play"></i>
323
+ </button>
324
+ </div>
325
+
326
+ <div class="movie-card group relative rounded-xl overflow-hidden bg-gray-800/50 hover:bg-gray-800/70 transition p-4 flex gap-4 items-center">
327
+ <div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden">
328
+ <img src="https://source.unsplash.com/random/100x100/?movie,drama" alt="Movie poster" class="w-full h-full object-cover">
329
+ </div>
330
+ <div class="flex-1">
331
+ <h3 class="font-bold">Family Ties</h3>
332
+ <p class="text-sm text-gray-400 mt-1">S2:E3 - Reunion</p>
333
+ <div class="progress-bar rounded-full mt-3">
334
+ <div class="progress-fill rounded-full" style="width: 32%"></div>
335
+ </div>
336
+ </div>
337
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
338
+ <i class="fas fa-play"></i>
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </section>
343
+
344
+ <!-- Popular Genres -->
345
+ <section class="mb-16 fade-in">
346
+ <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
347
+ <i class="fas fa-tags text-purple-500"></i>
348
+ <span>Popular Genres</span>
349
+ </h2>
350
+
351
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
352
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-blue-900/50 to-blue-600/30 hover:from-blue-900/70 hover:to-blue-600/40 transition flex flex-col items-center justify-center border border-blue-900/30 hover:border-blue-900/50">
353
+ <i class="fas fa-explosion text-3xl mb-2 text-blue-400"></i>
354
+ <span class="font-medium">Action</span>
355
+ </a>
356
+
357
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-purple-900/50 to-purple-600/30 hover:from-purple-900/70 hover:to-purple-600/40 transition flex flex-col items-center justify-center border border-purple-900/30 hover:border-purple-900/50">
358
+ <i class="fas fa-heart text-3xl mb-2 text-purple-400"></i>
359
+ <span class="font-medium">Romance</span>
360
+ </a>
361
+
362
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-red-900/50 to-red-600/30 hover:from-red-900/70 hover:to-red-600/40 transition flex flex-col items-center justify-center border border-red-900/30 hover:border-red-900/50">
363
+ <i class="fas fa-ghost text-3xl mb-2 text-red-400"></i>
364
+ <span class="font-medium">Horror</span>
365
+ </a>
366
+
367
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-yellow-900/50 to-yellow-600/30 hover:from-yellow-900/70 hover:to-yellow-600/40 transition flex flex-col items-center justify-center border border-yellow-900/30 hover:border-yellow-900/50">
368
+ <i class="fas fa-laugh-squint text-3xl mb-2 text-yellow-400"></i>
369
+ <span class="font-medium">Comedy</span>
370
+ </a>
371
+
372
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-green-900/50 to-green-600/30 hover:from-green-900/70 hover:to-green-600/40 transition flex flex-col items-center justify-center border border-green-900/30 hover:border-green-900/50">
373
+ <i class="fas fa-rocket text-3xl mb-2 text-green-400"></i>
374
+ <span class="font-medium">Sci-Fi</span>
375
+ </a>
376
+
377
+ <a href="#" class="genre-card h-32 rounded-xl bg-gradient-to-br from-indigo-900/50 to-indigo-600/30 hover:from-indigo-900/70 hover:to-indigo-600/40 transition flex flex-col items-center justify-center border border-indigo-900/30 hover:border-indigo-900/50">
378
+ <i class="fas fa-user-secret text-3xl mb-2 text-indigo-400"></i>
379
+ <span class="font-medium">Thriller</span>
380
+ </a>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- New Releases -->
385
+ <section class="mb-16 fade-in">
386
+ <div class="flex justify-between items-center mb-6">
387
+ <h2 class="text-2xl font-bold flex items-center gap-2">
388
+ <i class="fas fa-star text-yellow-400"></i>
389
+ <span>New Releases</span>
390
+ </h2>
391
+ <a href="#" class="text-blue-400 hover:underline">View All</a>
392
+ </div>
393
+
394
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
395
+ <div class="movie-card group relative rounded-xl overflow-hidden">
396
+ <img src="https://source.unsplash.com/random/300x450/?movie,new" alt="Movie poster" class="w-full h-64 object-cover transition group-hover:opacity-70">
397
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
398
+ <h3 class="font-bold">The New Era</h3>
399
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
400
+ <span>2023</span>
401
+ <span>•</span>
402
+ <span>2h 5m</span>
403
+ </div>
404
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
405
+ </div>
406
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>
407
+ </div>
408
+
409
+ <div class="movie-card group relative rounded-xl overflow-hidden">
410
+ <img src="https://source.unsplash.com/random/300x450/?movie,fresh" alt="Movie poster" class="w-full h-64 object-cover transition group-hover:opacity-70">
411
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
412
+ <h3 class="font-bold">Summer Love</h3>
413
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
414
+ <span>2023</span>
415
+ <span>•</span>
416
+ <span>1h 48m</span>
417
+ </div>
418
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
419
+ </div>
420
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>
421
+ </div>
422
+
423
+ <div class="movie-card group relative rounded-xl overflow-hidden">
424
+ <img src="https://source.unsplash.com/random/300x450/?movie,latest" alt="Movie poster" class="w-full h-64 object-cover transition group-hover:opacity-70">
425
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
426
+ <h3 class="font-bold">Dark Secrets</h3>
427
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
428
+ <span>2023</span>
429
+ <span>•</span>
430
+ <span>2h 12m</span>
431
+ </div>
432
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
433
+ </div>
434
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>
435
+ </div>
436
+
437
+ <div class="movie-card group relative rounded-xl overflow-hidden">
438
+ <img src="https://source.unsplash.com/random/300x450/?movie,recent" alt="Movie poster" class="w-full h-64 object-cover transition group-hover:opacity-70">
439
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
440
+ <h3 class="font-bold">Lost City</h3>
441
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
442
+ <span>2023</span>
443
+ <span>•</span>
444
+ <span>1h 56m</span>
445
+ </div>
446
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
447
+ </div>
448
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>
449
+ </div>
450
+
451
+ <div class="movie-card group relative rounded-xl overflow-hidden">
452
+ <img src="https://source.unsplash.com/random/300x450/?movie,premiere" alt="Movie poster" class="w-full h-64 object-cover transition group-hover:opacity-70">
453
+ <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex flex-col justify-end p-4">
454
+ <h3 class="font-bold">The Final Chapter</h3>
455
+ <div class="flex items-center gap-2 text-sm text-gray-300 mt-1">
456
+ <span>2023</span>
457
+ <span>•</span>
458
+ <span>2h 22m</span>
459
+ </div>
460
+ <button class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition">Watch Now</button>
461
+ </div>
462
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded">NEW</div>
463
+ </div>
464
+ </div>
465
+ </section>
466
+ </div>
467
+ </main>
468
+
469
+ <!-- Footer -->
470
+ <footer class="bg-gray-900/50 py-12 border-t border-gray-800">
471
+ <div class="container mx-auto px-4">
472
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
473
+ <div>
474
+ <div class="flex items-center space-x-2 mb-4">
475
+ <i class="fas fa-film text-3xl text-blue-500"></i>
476
+ <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">CIN-FLIX</span>
477
+ </div>
478
+ <p class="text-gray-400">The ultimate streaming experience with thousands of movies and TV shows.</p>
479
+ <div class="flex space-x-4 mt-6">
480
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-facebook-f"></i></a>
481
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-twitter"></i></a>
482
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-instagram"></i></a>
483
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i class="fab fa-youtube"></i></a>
484
+ </div>
485
+ </div>
486
+
487
+ <div>
488
+ <h3 class="text-lg font-semibold mb-4">Navigation</h3>
489
+ <ul class="space-y-2">
490
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Home</a></li>
491
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Movies</a></li>
492
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">TV Shows</a></li>
493
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">My List</a></li>
494
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Browse</a></li>
495
+ </ul>
496
+ </div>
497
+
498
+ <div>
499
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
500
+ <ul class="space-y-2">
501
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Terms of Service</a></li>
502
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Privacy Policy</a></li>
503
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Cookie Policy</a></li>
504
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">GDPR</a></li>
505
+ </ul>
506
+ </div>
507
+
508
+ <div>
509
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
510
+ <ul class="space-y-2">
511
+ <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> support@cinflix.com</li>
512
+ <li class="text-gray-400"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li>
513
+ <li class="text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> 123 Movie St, Hollywood</li>
514
+ </ul>
515
+ </div>
516
+ </div>
517
+
518
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
519
+ <p class="text-gray-500 text-sm">© 2023 CIN-FLIX. All rights reserved.</p>
520
+ <div class="flex space-x-6 mt-4 md:mt-0">
521
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Help Center</a>
522
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Jobs</a>
523
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition">Gift Cards</a>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </footer>
528
+
529
+ <script>
530
+ // Auto-scroll for trending section
531
+ document.addEventListener('DOMContentLoaded', function() {
532
+ // Hero video autoplay is handled by YouTube embed parameters
533
+
534
+ // Add animation delay to elements
535
+ const fadeElements = document.querySelectorAll('.fade-in');
536
+ fadeElements.forEach((el, index) => {
537
+ el.style.animationDelay = `${index * 0.1}s`;
538
+ });
539
+
540
+ // Simulate loading progress
541
+ const progressBars = document.querySelectorAll('.progress-fill');
542
+ progressBars.forEach(bar => {
543
+ const targetWidth = bar.style.width;
544
+ bar.style.width = '0';
545
+ setTimeout(() => {
546
+ bar.style.width = targetWidth;
547
+ }, 300);
548
+ });
549
+
550
+ // Movie card hover effects
551
+ const movieCards = document.querySelectorAll('.movie-card');
552
+ movieCards.forEach(card => {
553
+ card.addEventListener('mouseenter', () => {
554
+ card.classList.add('glow');
555
+ });
556
+ card.addEventListener('mouseleave', () => {
557
+ card.classList.remove('glow');
558
+ });
559
+ });
560
+
561
+ // Auto-scroll trending section
562
+ const trendingContainer = document.querySelector('.scroll-container');
563
+ let scrollPos = 0;
564
+ let scrollDirection = 1;
565
+
566
+ function autoScroll() {
567
+ const maxScroll = trendingContainer.scrollWidth - trendingContainer.clientWidth;
568
+
569
+ if (scrollPos >= maxScroll) {
570
+ scrollDirection = -1;
571
+ } else if (scrollPos <= 0) {
572
+ scrollDirection = 1;
573
+ }
574
+
575
+ scrollPos += scrollDirection * 0.5;
576
+ trendingContainer.scrollLeft = scrollPos;
577
+
578
+ requestAnimationFrame(autoScroll);
579
+ }
580
+
581
+ // Start auto-scroll after a delay
582
+ setTimeout(autoScroll, 3000);
583
+
584
+ // Pause auto-scroll on hover
585
+ trendingContainer.addEventListener('mouseenter', () => {
586
+ scrollDirection = 0;
587
+ });
588
+
589
+ trendingContainer.addEventListener('mouseleave', () => {
590
+ scrollDirection = 1;
591
+ autoScroll();
592
+ });
593
+ });
594
+ </script>
595
+ <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=docto41/cineflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
596
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé