Hugging Face's logo

Spaces:
docto41
/
cin-plus
Running

App Files Community
docto41 commited on
Commit
2d6415e
·
verified ·
1 Parent(s): a0ec696

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +606 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cin Plus
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: green
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: cin-plus
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
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,606 @@
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 - Premium 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: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
15
+ color: white;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .hero-gradient {
20
+ background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.3));
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(255, 255, 255, 0.5);
36
+ }
37
+
38
+ .progress-bar {
39
+ height: 4px;
40
+ background: rgba(255, 255, 255, 0.3);
41
+ }
42
+
43
+ .progress-fill {
44
+ height: 100%;
45
+ background: #e50914;
46
+ width: 0%;
47
+ transition: width 0.1s linear;
48
+ }
49
+
50
+ .video-container {
51
+ perspective: 1000px;
52
+ }
53
+
54
+ .video-wrapper {
55
+ transform-style: preserve-3d;
56
+ transition: transform 0.5s;
57
+ }
58
+
59
+ .video-wrapper:hover {
60
+ transform: rotateY(10deg) rotateX(5deg);
61
+ }
62
+
63
+ @keyframes float {
64
+ 0%, 100% { transform: translateY(0); }
65
+ 50% { transform: translateY(-10px); }
66
+ }
67
+
68
+ .floating {
69
+ animation: float 6s ease-in-out infinite;
70
+ }
71
+
72
+ .blur-bg {
73
+ backdrop-filter: blur(10px);
74
+ background: rgba(0, 0, 0, 0.5);
75
+ }
76
+
77
+ .genre-tag {
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ .genre-tag:hover {
82
+ transform: translateY(-3px);
83
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
84
+ }
85
+
86
+ .scroll-container {
87
+ scroll-behavior: smooth;
88
+ }
89
+
90
+ .scroll-container::-webkit-scrollbar {
91
+ height: 6px;
92
+ }
93
+
94
+ .scroll-container::-webkit-scrollbar-track {
95
+ background: rgba(255, 255, 255, 0.1);
96
+ }
97
+
98
+ .scroll-container::-webkit-scrollbar-thumb {
99
+ background: rgba(255, 255, 255, 0.3);
100
+ border-radius: 3px;
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="min-h-screen">
105
+ <!-- Navbar -->
106
+ <nav class="fixed w-full z-50 blur-bg">
107
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
108
+ <div class="flex items-center space-x-2">
109
+ <i class="fas fa-film text-red-500 text-2xl"></i>
110
+ <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
111
+ </div>
112
+ <div class="hidden md:flex space-x-6">
113
+ <a href="#" class="hover:text-red-400 transition">Home</a>
114
+ <a href="#" class="hover:text-red-400 transition">Movies</a>
115
+ <a href="#" class="hover:text-red-400 transition">TV Shows</a>
116
+ <a href="#" class="hover:text-red-400 transition">New & Popular</a>
117
+ <a href="#" class="hover:text-red-400 transition">My List</a>
118
+ </div>
119
+ <div class="flex items-center space-x-4">
120
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
121
+ <i class="fas fa-search"></i>
122
+ </button>
123
+ <button class="p-2 rounded-full hover:bg-gray-700 transition">
124
+ <i class="fas fa-bell"></i>
125
+ </button>
126
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
127
+ <i class="fas fa-user"></i>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </nav>
132
+
133
+ <!-- Hero Section with Autoplay Video -->
134
+ <section class="relative h-screen flex items-center">
135
+ <div class="absolute inset-0 overflow-hidden">
136
+ <video id="heroVideo" autoplay muted loop class="w-full h-full object-cover">
137
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
138
+ </video>
139
+ <div class="absolute inset-0 hero-gradient"></div>
140
+ </div>
141
+
142
+ <div class="container mx-auto px-4 relative z-10 mt-16">
143
+ <div class="max-w-2xl">
144
+ <h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">Big Buck Bunny</h1>
145
+ <div class="flex space-x-4 mb-6">
146
+ <span class="px-3 py-1 bg-red-500 rounded-full text-sm">HD</span>
147
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">4K</span>
148
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Animation</span>
149
+ <span class="px-3 py-1 bg-gray-800 rounded-full text-sm">Family</span>
150
+ </div>
151
+ <p class="text-lg mb-8 text-gray-300">A large and lovable rabbit deals with three tiny bullies, led by a flying squirrel, who are determined to squelch his happiness.</p>
152
+ <div class="flex space-x-4">
153
+ <button class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
154
+ <i class="fas fa-play"></i>
155
+ <span>Play Now</span>
156
+ </button>
157
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center space-x-2 transition transform hover:scale-105">
158
+ <i class="fas fa-info-circle"></i>
159
+ <span>More Info</span>
160
+ </button>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Progress bar -->
166
+ <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-800">
167
+ <div id="progressBar" class="h-full bg-red-600" style="width: 0%"></div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Main Content -->
172
+ <div class="container mx-auto px-4 py-16">
173
+ <!-- Trending Now -->
174
+ <section class="mb-16">
175
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
176
+ <span class="w-1 h-8 bg-red-500 mr-3"></span>
177
+ Trending Now
178
+ <span class="ml-auto text-sm text-gray-400">Autoplay: <span id="autoplayStatus" class="text-red-500">ON</span></span>
179
+ </h2>
180
+ <div class="relative">
181
+ <div class="scroll-container overflow-x-auto flex space-x-6 pb-6">
182
+ <!-- Movie cards will be added here by JavaScript -->
183
+ </div>
184
+ <button id="scrollLeft" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10">
185
+ <i class="fas fa-chevron-left"></i>
186
+ </button>
187
+ <button id="scrollRight" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-70 rounded-full w-10 h-10 flex items-center justify-center z-10">
188
+ <i class="fas fa-chevron-right"></i>
189
+ </button>
190
+ </div>
191
+ </section>
192
+
193
+ <!-- Popular on CinéFlix -->
194
+ <section class="mb-16">
195
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
196
+ <span class="w-1 h-8 bg-purple-500 mr-3"></span>
197
+ Popular on CinéFlix
198
+ </h2>
199
+ <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
200
+ <!-- Movie cards will be added here by JavaScript -->
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Continue Watching -->
205
+ <section class="mb-16">
206
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
207
+ <span class="w-1 h-8 bg-blue-500 mr-3"></span>
208
+ Continue Watching
209
+ </h2>
210
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
211
+ <!-- Continue watching cards will be added here by JavaScript -->
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Genres -->
216
+ <section class="mb-16">
217
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
218
+ <span class="w-1 h-8 bg-green-500 mr-3"></span>
219
+ Browse by Genre
220
+ </h2>
221
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
222
+ <div class="genre-tag bg-gradient-to-br from-red-500 to-red-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
223
+ <i class="fas fa-bolt text-3xl mb-2"></i>
224
+ <h3 class="font-semibold">Action</h3>
225
+ </div>
226
+ <div class="genre-tag bg-gradient-to-br from-blue-500 to-blue-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
227
+ <i class="fas fa-laugh-beam text-3xl mb-2"></i>
228
+ <h3 class="font-semibold">Comedy</h3>
229
+ </div>
230
+ <div class="genre-tag bg-gradient-to-br from-purple-500 to-purple-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
231
+ <i class="fas fa-heart text-3xl mb-2"></i>
232
+ <h3 class="font-semibold">Romance</h3>
233
+ </div>
234
+ <div class="genre-tag bg-gradient-to-br from-yellow-500 to-yellow-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
235
+ <i class="fas fa-ghost text-3xl mb-2"></i>
236
+ <h3 class="font-semibold">Horror</h3>
237
+ </div>
238
+ <div class="genre-tag bg-gradient-to-br from-green-500 to-green-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
239
+ <i class="fas fa-rocket text-3xl mb-2"></i>
240
+ <h3 class="font-semibold">Sci-Fi</h3>
241
+ </div>
242
+ <div class="genre-tag bg-gradient-to-br from-pink-500 to-pink-700 p-6 rounded-lg text-center cursor-pointer hover:shadow-lg">
243
+ <i class="fas fa-magic text-3xl mb-2"></i>
244
+ <h3 class="font-semibold">Fantasy</h3>
245
+ </div>
246
+ </div>
247
+ </section>
248
+ </div>
249
+
250
+ <!-- Footer -->
251
+ <footer class="bg-black bg-opacity-50 py-12">
252
+ <div class="container mx-auto px-4">
253
+ <div class="flex flex-col md:flex-row justify-between">
254
+ <div class="mb-8 md:mb-0">
255
+ <div class="flex items-center space-x-2 mb-4">
256
+ <i class="fas fa-film text-red-500 text-2xl"></i>
257
+ <span class="text-xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéFlix</span>
258
+ </div>
259
+ <p class="text-gray-400 max-w-md">The ultimate streaming experience with thousands of movies and TV shows. Watch anywhere, anytime.</p>
260
+ </div>
261
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
262
+ <div>
263
+ <h3 class="text-lg font-semibold mb-4">Navigation</h3>
264
+ <ul class="space-y-2">
265
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Movies</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-white transition">TV Shows</a></li>
268
+ <li><a href="#" class="text-gray-400 hover:text-white transition">My List</a></li>
269
+ </ul>
270
+ </div>
271
+ <div>
272
+ <h3 class="text-lg font-semibold mb-4">Legal</h3>
273
+ <ul class="space-y-2">
274
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
275
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
276
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
277
+ </ul>
278
+ </div>
279
+ <div>
280
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
281
+ <div class="flex space-x-4">
282
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
283
+ <i class="fab fa-facebook-f"></i>
284
+ </a>
285
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
286
+ <i class="fab fa-twitter"></i>
287
+ </a>
288
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
289
+ <i class="fab fa-instagram"></i>
290
+ </a>
291
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-500 transition">
292
+ <i class="fab fa-youtube"></i>
293
+ </a>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
299
+ <p>© 2023 CinéFlix. All rights reserved.</p>
300
+ </div>
301
+ </div>
302
+ </footer>
303
+
304
+ <!-- Video Modal -->
305
+ <div id="videoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-90">
306
+ <div class="relative w-full max-w-6xl">
307
+ <button id="closeModal" class="absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition">
308
+ <i class="fas fa-times"></i>
309
+ </button>
310
+ <div class="video-container">
311
+ <div class="video-wrapper">
312
+ <video id="modalVideo" controls class="w-full rounded-lg shadow-2xl">
313
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
314
+ </video>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <script>
321
+ // Sample movie data
322
+ const movies = [
323
+ {
324
+ title: "Big Buck Bunny",
325
+ image: "https://peach.blender.org/wp-content/uploads/bbb-splash.png?x81236",
326
+ year: 2008,
327
+ rating: "PG",
328
+ duration: "9:56",
329
+ genres: ["Animation", "Comedy"],
330
+ description: "A large and lovable rabbit deals with three tiny bullies who are determined to squelch his happiness.",
331
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
332
+ },
333
+ {
334
+ title: "Sintel",
335
+ image: "https://www.sintel.org/wp-content/uploads/2010/05/sintel-poster1-1024x724.jpg",
336
+ year: 2010,
337
+ rating: "PG",
338
+ duration: "14:48",
339
+ genres: ["Animation", "Adventure"],
340
+ description: "A lonely young woman, Sintel, helps and befriends a dragon, whom she calls Scales.",
341
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
342
+ },
343
+ {
344
+ title: "Tears of Steel",
345
+ image: "https://mango.blender.org/wp-content/uploads/2013/05/01_thom_eyes.jpg",
346
+ year: 2012,
347
+ rating: "PG-13",
348
+ duration: "12:14",
349
+ genres: ["Sci-Fi", "Action"],
350
+ description: "A group of warriors and scientists attempt to save the world from destruction.",
351
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
352
+ },
353
+ {
354
+ title: "Elephant's Dream",
355
+ image: "https://orange.blender.org/wp-content/uploads/2018/03/orange01.jpg",
356
+ year: 2006,
357
+ rating: "PG",
358
+ duration: "10:53",
359
+ genres: ["Animation", "Drama"],
360
+ description: "Two men explore a bizarre industrial landscape in a surreal short film.",
361
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
362
+ },
363
+ {
364
+ title: "Cosmos Laundromat",
365
+ image: "https://www.blender.org/wp-content/uploads/2015/07/laundromat_01.jpg",
366
+ year: 2015,
367
+ rating: "PG",
368
+ duration: "12:34",
369
+ genres: ["Animation", "Comedy"],
370
+ description: "A depressed sheep gets a new lease on life from a mysterious salesman.",
371
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/CosmosLaundromat.mp4"
372
+ },
373
+ {
374
+ title: "Agent 327",
375
+ image: "https://www.blender.org/wp-content/uploads/2017/12/agent327_hero.jpg",
376
+ year: 2017,
377
+ rating: "PG-13",
378
+ duration: "3:33",
379
+ genres: ["Animation", "Action"],
380
+ description: "Dutch secret agent 327 fights criminals in this action-packed short.",
381
+ videoUrl: "https://download.blender.org/durian/trailer/agent327.mp4"
382
+ },
383
+ {
384
+ title: "Spring",
385
+ image: "https://www.blender.org/wp-content/uploads/2019/05/spring_thumbnail.jpg",
386
+ year: 2019,
387
+ rating: "PG",
388
+ duration: "7:45",
389
+ genres: ["Animation", "Fantasy"],
390
+ description: "A shepherd girl and her dog face an ancient spirit in this fantasy tale.",
391
+ videoUrl: "https://download.blender.org/durian/trailer/sintel_trailer-480p.mp4"
392
+ },
393
+ {
394
+ title: "Hero",
395
+ image: "https://m.media-amazon.com/images/M/MV5BMWQ2MjQ0OTctMWE1OC00NjZjLTk3ZDAtNTk3NTZiYWMxYTlmXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_.jpg",
396
+ year: 2002,
397
+ rating: "PG-13",
398
+ duration: "1:39",
399
+ genres: ["Action", "Drama"],
400
+ description: "A defense officer recounts his supposed victory over a deadly assassin.",
401
+ videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
402
+ }
403
+ ];
404
+
405
+ // Continue watching data
406
+ const continueWatching = [
407
+ {
408
+ title: "Big Buck Bunny",
409
+ image: "https://peach.blender.org/wp-content/uploads/bbb-splash.png?x81236",
410
+ progress: 65,
411
+ timeLeft: "3:22"
412
+ },
413
+ {
414
+ title: "Sintel",
415
+ image: "https://www.sintel.org/wp-content/uploads/2010/05/sintel-poster1-1024x724.jpg",
416
+ progress: 42,
417
+ timeLeft: "8:14"
418
+ },
419
+ {
420
+ title: "Tears of Steel",
421
+ image: "https://mango.blender.org/wp-content/uploads/2013/05/01_thom_eyes.jpg",
422
+ progress: 78,
423
+ timeLeft: "2:41"
424
+ }
425
+ ];
426
+
427
+ // DOM elements
428
+ const trendingContainer = document.querySelector('.scroll-container');
429
+ const popularContainer = document.querySelector('.grid-cols-2.md\\:grid-cols-4.lg\\:grid-cols-6');
430
+ const continueContainer = document.querySelector('.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3');
431
+ const heroVideo = document.getElementById('heroVideo');
432
+ const progressBar = document.getElementById('progressBar');
433
+ const videoModal = document.getElementById('videoModal');
434
+ const modalVideo = document.getElementById('modalVideo');
435
+ const closeModal = document.getElementById('closeModal');
436
+ const scrollLeft = document.getElementById('scrollLeft');
437
+ const scrollRight = document.getElementById('scrollRight');
438
+ const autoplayStatus = document.getElementById('autoplayStatus');
439
+
440
+ // Generate movie cards
441
+ function generateMovieCards() {
442
+ // Trending Now (horizontal scroll)
443
+ movies.forEach(movie => {
444
+ const card = document.createElement('div');
445
+ card.className = 'movie-card flex-shrink-0 w-64 rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
446
+ card.innerHTML = `
447
+ <div class="relative group">
448
+ <img src="${movie.image}" alt="${movie.title}" class="w-full h-36 md:h-48 object-cover rounded-lg">
449
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
450
+ <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
451
+ <i class="fas fa-play"></i>
452
+ </button>
453
+ </div>
454
+ <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
455
+ <h3 class="font-semibold truncate">${movie.title}</h3>
456
+ <div class="flex justify-between text-xs text-gray-300">
457
+ <span>${movie.year}</span>
458
+ <span>${movie.rating}</span>
459
+ <span>${movie.duration}</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ `;
464
+ card.querySelector('.play-btn').addEventListener('click', (e) => {
465
+ e.stopPropagation();
466
+ playMovie(movie);
467
+ });
468
+ trendingContainer.appendChild(card);
469
+ });
470
+
471
+ // Popular on CinéFlix (grid)
472
+ movies.slice(0, 6).forEach(movie => {
473
+ const card = document.createElement('div');
474
+ card.className = 'movie-card rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
475
+ card.innerHTML = `
476
+ <div class="relative group">
477
+ <img src="${movie.image}" alt="${movie.title}" class="w-full h-48 md:h-64 object-cover rounded-lg">
478
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
479
+ <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
480
+ <i class="fas fa-play"></i>
481
+ </button>
482
+ </div>
483
+ <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
484
+ <h3 class="font-semibold truncate">${movie.title}</h3>
485
+ <div class="flex justify-between text-xs text-gray-300">
486
+ <span>${movie.year}</span>
487
+ <span>${movie.rating}</span>
488
+ <span>${movie.duration}</span>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ `;
493
+ card.querySelector('.play-btn').addEventListener('click', (e) => {
494
+ e.stopPropagation();
495
+ playMovie(movie);
496
+ });
497
+ popularContainer.appendChild(card);
498
+ });
499
+
500
+ // Continue Watching
501
+ continueWatching.forEach(item => {
502
+ const card = document.createElement('div');
503
+ card.className = 'movie-card rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
504
+ card.innerHTML = `
505
+ <div class="relative group">
506
+ <img src="${item.image}" alt="${item.title}" class="w-full h-48 md:h-56 object-cover rounded-lg">
507
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition flex items-center justify-center">
508
+ <button class="play-btn opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center">
509
+ <i class="fas fa-play"></i>
510
+ </button>
511
+ </div>
512
+ <div class="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black to-transparent text-white">
513
+ <h3 class="font-semibold truncate">${item.title}</h3>
514
+ <div class="progress-bar mt-2 rounded-full">
515
+ <div class="progress-fill" style="width: ${item.progress}%"></div>
516
+ </div>
517
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
518
+ <span>${item.progress}% watched</span>
519
+ <span>${item.timeLeft} left</span>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ `;
524
+ card.querySelector('.play-btn').addEventListener('click', (e) => {
525
+ e.stopPropagation();
526
+ // Find the matching movie from movies array
527
+ const movie = movies.find(m => m.title === item.title);
528
+ if (movie) playMovie(movie);
529
+ });
530
+ continueContainer.appendChild(card);
531
+ });
532
+ }
533
+
534
+ // Play movie function
535
+ function playMovie(movie) {
536
+ modalVideo.src = movie.videoUrl;
537
+ videoModal.classList.remove('hidden');
538
+ document.body.style.overflow = 'hidden';
539
+ modalVideo.play();
540
+ }
541
+
542
+ // Close modal
543
+ closeModal.addEventListener('click', () => {
544
+ videoModal.classList.add('hidden');
545
+ document.body.style.overflow = 'auto';
546
+ modalVideo.pause();
547
+ });
548
+
549
+ // Update hero video progress bar
550
+ function updateProgressBar() {
551
+ if (heroVideo.duration) {
552
+ const percent = (heroVideo.currentTime / heroVideo.duration) * 100;
553
+ progressBar.style.width = `${percent}%`;
554
+ }
555
+ }
556
+
557
+ // Scroll functionality for trending section
558
+ scrollLeft.addEventListener('click', () => {
559
+ trendingContainer.scrollBy({ left: -300, behavior: 'smooth' });
560
+ });
561
+
562
+ scrollRight.addEventListener('click', () => {
563
+ trendingContainer.scrollBy({ left: 300, behavior: 'smooth' });
564
+ });
565
+
566
+ // Toggle autoplay
567
+ let autoplayEnabled = true;
568
+ autoplayStatus.addEventListener('click', () => {
569
+ autoplayEnabled = !autoplayEnabled;
570
+ autoplayStatus.textContent = autoplayEnabled ? 'ON' : 'OFF';
571
+ autoplayStatus.className = autoplayEnabled ? 'text-red-500' : 'text-gray-400';
572
+
573
+ if (autoplayEnabled) {
574
+ heroVideo.play();
575
+ } else {
576
+ heroVideo.pause();
577
+ }
578
+ });
579
+
580
+ // Initialize
581
+ document.addEventListener('DOMContentLoaded', () => {
582
+ generateMovieCards();
583
+
584
+ // Set up progress bar update
585
+ heroVideo.addEventListener('timeupdate', updateProgressBar);
586
+
587
+ // Autoplay hero video
588
+ heroVideo.play().catch(e => {
589
+ console.log("Autoplay prevented, showing play button");
590
+ autoplayEnabled = false;
591
+ autoplayStatus.textContent = 'OFF';
592
+ autoplayStatus.className = 'text-gray-400';
593
+ });
594
+
595
+ // Add floating animation to random elements
596
+ const elements = document.querySelectorAll('.movie-card, .genre-tag');
597
+ elements.forEach(el => {
598
+ if (Math.random() > 0.7) {
599
+ el.classList.add('floating');
600
+ el.style.animationDelay = `${Math.random() * 5}s`;
601
+ }
602
+ });
603
+ });
604
+ </script>
605
+ <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/cin-plus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
606
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ https://huggingface.co/spaces/docto41/cin-flix . Avec lecture en automatique et une tresbelle interface animé