Hugging Face's logo

Spaces:
docto41
/
cin-flix
Running

App Files Community
docto41 commited on
Commit
6142215
·
verified ·
1 Parent(s): f78150e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +408 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cin Flix
3
- emoji: 📚
4
- colorFrom: blue
5
  colorTo: blue
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-flix
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,408 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CinéFlix - Films HD</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: #0f172a;
15
+ }
16
+
17
+ .movie-card {
18
+ transition: all 0.3s ease;
19
+ transform-origin: center;
20
+ }
21
+
22
+ .movie-card:hover {
23
+ transform: scale(1.05);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
25
+ }
26
+
27
+ .movie-card:hover .play-icon {
28
+ opacity: 1;
29
+ }
30
+
31
+ .play-icon {
32
+ opacity: 0;
33
+ transition: opacity 0.3s ease;
34
+ }
35
+
36
+ .gradient-bg {
37
+ background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
38
+ }
39
+
40
+ .search-input:focus {
41
+ outline: none;
42
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
43
+ }
44
+
45
+ .category-btn.active {
46
+ background-color: #3b82f6;
47
+ color: white;
48
+ }
49
+
50
+ /* Animation pour le chargement */
51
+ @keyframes pulse {
52
+ 0%, 100% {
53
+ opacity: 1;
54
+ }
55
+ 50% {
56
+ opacity: 0.5;
57
+ }
58
+ }
59
+
60
+ .animate-pulse {
61
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="text-gray-100">
66
+ <!-- Header -->
67
+ <header class="gradient-bg py-4 shadow-lg">
68
+ <div class="container mx-auto px-4 flex justify-between items-center">
69
+ <div class="flex items-center space-x-2">
70
+ <i class="fas fa-film text-2xl text-white"></i>
71
+ <h1 class="text-2xl font-bold">CinéFlix</h1>
72
+ </div>
73
+ <div class="relative w-1/3">
74
+ <input type="text" placeholder="Rechercher un film..."
75
+ class="search-input w-full py-2 px-4 rounded-full bg-gray-800 text-white focus:ring-2 focus:ring-blue-500">
76
+ <button class="absolute right-3 top-2 text-gray-400">
77
+ <i class="fas fa-search"></i>
78
+ </button>
79
+ </div>
80
+ <div class="flex items-center space-x-4">
81
+ <button class="px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 transition">
82
+ <i class="fas fa-user mr-2"></i>Connexion
83
+ </button>
84
+ <button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
85
+ <i class="fas fa-cog"></i>
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Main Content -->
92
+ <main class="container mx-auto px-4 py-8">
93
+ <!-- Categories -->
94
+ <div class="mb-8 overflow-x-auto">
95
+ <div class="flex space-x-2 pb-2">
96
+ <button class="category-btn active px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
97
+ Tous les films
98
+ </button>
99
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
100
+ Action
101
+ </button>
102
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
103
+ Comédie
104
+ </button>
105
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
106
+ Science-fiction
107
+ </button>
108
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
109
+ Horreur
110
+ </button>
111
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
112
+ Animation
113
+ </button>
114
+ <button class="category-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition whitespace-nowrap">
115
+ Thriller
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Featured Movie -->
121
+ <div class="relative rounded-xl overflow-hidden mb-10 h-96">
122
+ <div class="absolute inset-0 bg-gradient-to-r from-gray-900 to-transparent z-10"></div>
123
+ <img src="https://image.tmdb.org/t/p/original/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg"
124
+ alt="Film à l'affiche" class="w-full h-full object-cover">
125
+ <div class="absolute bottom-0 left-0 z-20 p-8 w-1/2">
126
+ <h2 class="text-4xl font-bold mb-2">Dune: Partie Deux</h2>
127
+ <div class="flex items-center mb-4 space-x-4">
128
+ <span class="bg-yellow-500 text-black px-2 py-1 rounded text-sm font-bold">HD</span>
129
+ <span class="text-gray-300">2024</span>
130
+ <span class="text-gray-300">2h46min</span>
131
+ <span class="text-gray-300">Science-fiction</span>
132
+ </div>
133
+ <p class="text-gray-300 mb-6">Paul Atreides s'unît à Chani et aux Fremen tout en préparant sa revanche contre ceux qui ont détruit sa famille. Alors qu'il doit choisir entre l'amour de sa vie et le destin de l'univers, il devra empêcher un terrible futur que lui seul peut prévoir.</p>
134
+ <div class="flex space-x-4">
135
+ <a href="https://example.com/watch/dune-part2" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium flex items-center">
136
+ <i class="fas fa-play mr-2"></i> Regarder
137
+ </a>
138
+ <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium flex items-center">
139
+ <i class="fas fa-info-circle mr-2"></i> Plus d'infos
140
+ </button>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Movies Grid -->
146
+ <section class="mb-12">
147
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
148
+ <i class="fas fa-fire mr-3 text-red-500"></i> Films populaires
149
+ </h2>
150
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6" id="movies-grid">
151
+ <!-- Les films seront chargés ici par JavaScript -->
152
+ </div>
153
+ </section>
154
+
155
+ <!-- Loading Skeleton -->
156
+ <div id="loading-skeleton" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6">
157
+ <div class="animate-pulse">
158
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
159
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
160
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
161
+ </div>
162
+ <div class="animate-pulse">
163
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
164
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
165
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
166
+ </div>
167
+ <div class="animate-pulse">
168
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
169
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
170
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
171
+ </div>
172
+ <div class="animate-pulse">
173
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
174
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
175
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
176
+ </div>
177
+ <div class="animate-pulse">
178
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
179
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
180
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
181
+ </div>
182
+ <div class="animate-pulse">
183
+ <div class="bg-gray-800 rounded-lg h-64 mb-2"></div>
184
+ <div class="h-4 bg-gray-800 rounded w-3/4 mb-2"></div>
185
+ <div class="h-3 bg-gray-800 rounded w-1/2"></div>
186
+ </div>
187
+ </div>
188
+ </main>
189
+
190
+ <!-- Footer -->
191
+ <footer class="bg-gray-900 py-8">
192
+ <div class="container mx-auto px-4">
193
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
194
+ <div>
195
+ <h3 class="text-xl font-bold mb-4">CinéFlix</h3>
196
+ <p class="text-gray-400">La meilleure plateforme pour regarder des films en haute qualité gratuitement.</p>
197
+ </div>
198
+ <div>
199
+ <h4 class="font-bold mb-4">Navigation</h4>
200
+ <ul class="space-y-2">
201
+ <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
202
+ <li><a href="#" class="text-gray-400 hover:text-white">Films</a></li>
203
+ <li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li>
204
+ <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
205
+ </ul>
206
+ </div>
207
+ <div>
208
+ <h4 class="font-bold mb-4">Légal</h4>
209
+ <ul class="space-y-2">
210
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
211
+ <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
212
+ <li><a href="#" class="text-gray-400 hover:text-white">DMCA</a></li>
213
+ </ul>
214
+ </div>
215
+ <div>
216
+ <h4 class="font-bold mb-4">Contact</h4>
217
+ <div class="flex space-x-4 mb-4">
218
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-facebook"></i></a>
219
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-twitter"></i></a>
220
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-instagram"></i></a>
221
+ <a href="#" class="text-gray-400 hover:text-white text-2xl"><i class="fab fa-telegram"></i></a>
222
+ </div>
223
+ <p class="text-gray-400">contact@cineflix.com</p>
224
+ </div>
225
+ </div>
226
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
227
+ <p>© 2023 CinéFlix. Tous droits réservés.</p>
228
+ </div>
229
+ </div>
230
+ </footer>
231
+
232
+ <script>
233
+ // Données des films (simulées)
234
+ const movies = [
235
+ {
236
+ title: "Dune: Partie Deux",
237
+ year: 2024,
238
+ duration: "2h46min",
239
+ genre: "Science-fiction",
240
+ quality: "HD",
241
+ image: "https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg",
242
+ url: "https://example.com/watch/dune-part2"
243
+ },
244
+ {
245
+ title: "Oppenheimer",
246
+ year: 2023,
247
+ duration: "3h",
248
+ genre: "Drame historique",
249
+ quality: "4K",
250
+ image: "https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
251
+ url: "https://example.com/watch/oppenheimer"
252
+ },
253
+ {
254
+ title: "The Batman",
255
+ year: 2022,
256
+ duration: "2h56min",
257
+ genre: "Action",
258
+ quality: "HD",
259
+ image: "https://image.tmdb.org/t/p/w500/seyWFgGInaLqW7nOZvu0ZC95rtx.jpg",
260
+ url: "https://example.com/watch/the-batman"
261
+ },
262
+ {
263
+ title: "Avatar: La Voie de l'eau",
264
+ year: 2022,
265
+ duration: "3h12min",
266
+ genre: "Science-fiction",
267
+ quality: "4K",
268
+ image: "https://image.tmdb.org/t/p/w500/jRXYjXNq0Cs2TcJjLkki24MLp7u.jpg",
269
+ url: "https://example.com/watch/avatar-2"
270
+ },
271
+ {
272
+ title: "John Wick 4",
273
+ year: 2023,
274
+ duration: "2h49min",
275
+ genre: "Action",
276
+ quality: "HD",
277
+ image: "https://image.tmdb.org/t/p/w500/vZloFAK7NmvMGKE7VkF5UHaz0I.jpg",
278
+ url: "https://example.com/watch/john-wick-4"
279
+ },
280
+ {
281
+ title: "Mission Impossible 7",
282
+ year: 2023,
283
+ duration: "2h43min",
284
+ genre: "Action",
285
+ quality: "4K",
286
+ image: "https://image.tmdb.org/t/p/w500/NNxYkU70HPurnNCSiCjYAmacwm.jpg",
287
+ url: "https://example.com/watch/mission-impossible-7"
288
+ },
289
+ {
290
+ title: "Spider-Man: Across the Spider-Verse",
291
+ year: 2023,
292
+ duration: "2h20min",
293
+ genre: "Animation",
294
+ quality: "HD",
295
+ image: "https://image.tmdb.org/t/p/w500/4HodYYKEIsGOdinkGi2Ucz6X9i0.jpg",
296
+ url: "https://example.com/watch/spiderverse-2"
297
+ },
298
+ {
299
+ title: "Barbie",
300
+ year: 2023,
301
+ duration: "1h54min",
302
+ genre: "Comédie",
303
+ quality: "HD",
304
+ image: "https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg",
305
+ url: "https://example.com/watch/barbie"
306
+ },
307
+ {
308
+ title: "Killers of the Flower Moon",
309
+ year: 2023,
310
+ duration: "3h26min",
311
+ genre: "Drame",
312
+ quality: "HD",
313
+ image: "https://image.tmdb.org/t/p/w500/dB6Krk806zeqd0YNp2ngQ9zXteH.jpg",
314
+ url: "https://example.com/watch/killers-flower-moon"
315
+ },
316
+ {
317
+ title: "Poor Things",
318
+ year: 2023,
319
+ duration: "2h21min",
320
+ genre: "Comédie noire",
321
+ quality: "HD",
322
+ image: "https://image.tmdb.org/t/p/w500/kCGlIMHnOm8JPXq3rXM6c5wMxcT.jpg",
323
+ url: "https://example.com/watch/poor-things"
324
+ },
325
+ {
326
+ title: "The Marvels",
327
+ year: 2023,
328
+ duration: "1h45min",
329
+ genre: "Super-héros",
330
+ quality: "4K",
331
+ image: "https://image.tmdb.org/t/p/w500/9GBhzXMFjgcZ3FdR9w3bUMMTps5.jpg",
332
+ url: "https://example.com/watch/the-marvels"
333
+ },
334
+ {
335
+ title: "Wonka",
336
+ year: 2023,
337
+ duration: "1h56min",
338
+ genre: "Musical",
339
+ quality: "HD",
340
+ image: "https://image.tmdb.org/t/p/w500/qhb1qOilapbapxWQn9jtRCMwXJF.jpg",
341
+ url: "https://example.com/watch/wonka"
342
+ }
343
+ ];
344
+
345
+ // Fonction pour afficher les films
346
+ function displayMovies() {
347
+ const moviesGrid = document.getElementById('movies-grid');
348
+ const loadingSkeleton = document.getElementById('loading-skeleton');
349
+
350
+ // Simuler un chargement
351
+ setTimeout(() => {
352
+ loadingSkeleton.style.display = 'none';
353
+
354
+ movies.forEach(movie => {
355
+ const movieCard = document.createElement('div');
356
+ movieCard.className = 'movie-card';
357
+ movieCard.innerHTML = `
358
+ <a href="${movie.url}" class="block relative group">
359
+ <img src="${movie.image}" alt="${movie.title}"
360
+ class="w-full h-64 object-cover rounded-lg mb-2">
361
+ <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
362
+ <div class="play-icon bg-blue-600 rounded-full p-4">
363
+ <i class="fas fa-play text-white text-xl"></i>
364
+ </div>
365
+ </div>
366
+ <div class="absolute top-2 left-2 bg-yellow-500 text-black px-2 py-1 rounded text-xs font-bold">
367
+ ${movie.quality}
368
+ </div>
369
+ </a>
370
+ <h3 class="font-semibold truncate">${movie.title}</h3>
371
+ <div class="flex justify-between text-sm text-gray-400">
372
+ <span>${movie.year}</span>
373
+ <span>${movie.duration}</span>
374
+ </div>
375
+ `;
376
+ moviesGrid.appendChild(movieCard);
377
+ });
378
+ }, 1500);
379
+ }
380
+
381
+ // Gestion des catégories
382
+ function setupCategoryButtons() {
383
+ const buttons = document.querySelectorAll('.category-btn');
384
+ buttons.forEach(button => {
385
+ button.addEventListener('click', () => {
386
+ buttons.forEach(btn => btn.classList.remove('active'));
387
+ button.classList.add('active');
388
+ // Ici vous pourriez filtrer les films par catégorie
389
+ });
390
+ });
391
+ }
392
+
393
+ // Initialisation
394
+ document.addEventListener('DOMContentLoaded', () => {
395
+ displayMovies();
396
+ setupCategoryButtons();
397
+
398
+ // Simulation de recherche
399
+ const searchInput = document.querySelector('.search-input');
400
+ searchInput.addEventListener('input', (e) => {
401
+ const searchTerm = e.target.value.toLowerCase();
402
+ // Ici vous pourriez filtrer les films en fonction du terme de recherche
403
+ console.log(`Recherche: ${searchTerm}`);
404
+ });
405
+ });
406
+ </script>
407
+ <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-flix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
408
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ https://huggingface.co/spaces/docto41/film-hd : avec liens url des film intégré automatique