Hugging Face's logo

Spaces:
docto41
/
cin-pilote
Running

App Files Community
docto41 commited on
Commit
2385dc1
·
verified ·
1 Parent(s): f429cc7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +548 -19
  3. prompts.txt +12 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cin Pilote
3
- emoji: 🚀
4
  colorFrom: purple
5
- colorTo: indigo
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-pilote
3
+ emoji: 🐳
4
  colorFrom: purple
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,548 @@
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éPilot - Plateforme Cinéma Automatique</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=Montserrat:wght@300;400;600;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background-color: #0f172a;
15
+ }
16
+
17
+ .film-card {
18
+ transition: all 0.3s ease;
19
+ transform-origin: center;
20
+ }
21
+
22
+ .film-card:hover {
23
+ transform: scale(1.05) translateY(-5px);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
25
+ z-index: 10;
26
+ }
27
+
28
+ .hero-gradient {
29
+ background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
30
+ }
31
+
32
+ .blur-load {
33
+ background-size: cover;
34
+ background-position: center;
35
+ }
36
+
37
+ .blur-load.loaded > img {
38
+ opacity: 1;
39
+ }
40
+
41
+ .blur-load > img {
42
+ opacity: 0;
43
+ transition: opacity 200ms ease-in-out;
44
+ }
45
+
46
+ .loading-spinner {
47
+ animation: spin 1s linear infinite;
48
+ }
49
+
50
+ @keyframes spin {
51
+ from { transform: rotate(0deg); }
52
+ to { transform: rotate(360deg); }
53
+ }
54
+
55
+ .marquee {
56
+ animation: marquee 20s linear infinite;
57
+ }
58
+
59
+ @keyframes marquee {
60
+ 0% { transform: translateX(0); }
61
+ 100% { transform: translateX(-50%); }
62
+ }
63
+
64
+ .fade-in {
65
+ animation: fadeIn 0.5s ease-in;
66
+ }
67
+
68
+ @keyframes fadeIn {
69
+ from { opacity: 0; }
70
+ to { opacity: 1; }
71
+ }
72
+
73
+ .glow {
74
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="text-gray-100">
79
+ <!-- Header -->
80
+ <header class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
81
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
82
+ <div class="flex items-center space-x-2">
83
+ <i class="fas fa-film text-3xl text-blue-500"></i>
84
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">CinéPilot</h1>
85
+ </div>
86
+
87
+ <div class="hidden md:flex space-x-6">
88
+ <a href="#" class="hover:text-blue-400 transition">Accueil</a>
89
+ <a href="#" class="hover:text-blue-400 transition">Films</a>
90
+ <a href="#" class="hover:text-blue-400 transition">Séries</a>
91
+ <a href="#" class="hover:text-blue-400 transition">Nouveautés</a>
92
+ <a href="#" class="hover:text-blue-400 transition">Catégories</a>
93
+ </div>
94
+
95
+ <div class="flex items-center space-x-4">
96
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full font-medium transition">
97
+ <i class="fas fa-user mr-2"></i>Connexion
98
+ </button>
99
+ <button class="text-xl">
100
+ <i class="fas fa-search"></i>
101
+ </button>
102
+ </div>
103
+ </div>
104
+ </header>
105
+
106
+ <!-- Hero Section -->
107
+ <section class="hero-gradient py-16">
108
+ <div class="container mx-auto px-4">
109
+ <div class="flex flex-col md:flex-row items-center">
110
+ <div class="md:w-1/2 mb-8 md:mb-0">
111
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">78,954 films en streaming automatique</h2>
112
+ <p class="text-xl text-gray-300 mb-6">Découvrez notre immense catalogue de films mis à jour automatiquement chaque jour.</p>
113
+ <div class="flex space-x-4">
114
+ <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-bold text-lg transition glow">
115
+ <i class="fas fa-play mr-2"></i>Commencer
116
+ </button>
117
+ <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-bold text-lg transition">
118
+ <i class="fas fa-info-circle mr-2"></i>En savoir plus
119
+ </button>
120
+ </div>
121
+ </div>
122
+ <div class="md:w-1/2 relative">
123
+ <div class="relative aspect-video rounded-xl overflow-hidden border-4 border-white shadow-2xl">
124
+ <div class="absolute inset-0 bg-gradient-to-tr from-blue-900 to-blue-600 flex items-center justify-center">
125
+ <i class="fas fa-film text-6xl text-white opacity-30"></i>
126
+ </div>
127
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
128
+ <h3 class="text-xl font-bold">Film aléatoire en cours</h3>
129
+ <div class="flex items-center space-x-2 text-sm">
130
+ <span class="bg-blue-600 px-2 py-1 rounded">HD</span>
131
+ <span>2023</span>
132
+ <span>•</span>
133
+ <span>2h 15min</span>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+
142
+ <!-- Marquee -->
143
+ <div class="bg-gray-800 py-3 overflow-hidden">
144
+ <div class="marquee whitespace-nowrap">
145
+ <span class="text-lg font-bold text-blue-400 mr-12">NOUVEAUTÉS AJOUTÉES AUTOMATIQUEMENT •</span>
146
+ <span class="text-lg font-bold text-blue-400 mr-12">78,954 FILMS DISPONIBLES •</span>
147
+ <span class="text-lg font-bold text-blue-400 mr-12">SYSTÈME DE RECOMMANDATION INTELLIGENT •</span>
148
+ <span class="text-lg font-bold text-blue-400 mr-12">MISE À JOUR QUOTIDIENNE •</span>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Main Content -->
153
+ <main class="container mx-auto px-4 py-8">
154
+ <!-- Featured Section -->
155
+ <section class="mb-12">
156
+ <div class="flex justify-between items-center mb-6">
157
+ <h2 class="text-2xl font-bold">Nouveautés du jour</h2>
158
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
159
+ Voir plus <i class="fas fa-chevron-right ml-1"></i>
160
+ </a>
161
+ </div>
162
+
163
+ <div id="newReleases" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
164
+ <!-- Films will be loaded here -->
165
+ <div class="flex items-center justify-center py-12">
166
+ <div class="loading-spinner text-blue-500 text-4xl">
167
+ <i class="fas fa-spinner"></i>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Categories -->
174
+ <section class="mb-12">
175
+ <div class="flex justify-between items-center mb-6">
176
+ <h2 class="text-2xl font-bold">Catégories populaires</h2>
177
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
178
+ Toutes les catégories <i class="fas fa-chevron-right ml-1"></i>
179
+ </a>
180
+ </div>
181
+
182
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
183
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
184
+ <i class="fas fa-bolt text-yellow-400 text-2xl mb-2"></i>
185
+ <h3 class="font-medium">Action</h3>
186
+ </a>
187
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
188
+ <i class="fas fa-heart text-red-400 text-2xl mb-2"></i>
189
+ <h3 class="font-medium">Romance</h3>
190
+ </a>
191
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
192
+ <i class="fas fa-ghost text-purple-400 text-2xl mb-2"></i>
193
+ <h3 class="font-medium">Horreur</h3>
194
+ </a>
195
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
196
+ <i class="fas fa-laugh-squint text-green-400 text-2xl mb-2"></i>
197
+ <h3 class="font-medium">Comédie</h3>
198
+ </a>
199
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
200
+ <i class="fas fa-rocket text-blue-400 text-2xl mb-2"></i>
201
+ <h3 class="font-medium">Science-fiction</h3>
202
+ </a>
203
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 rounded-lg p-4 text-center transition transform hover:scale-105">
204
+ <i class="fas fa-user-secret text-gray-400 text-2xl mb-2"></i>
205
+ <h3 class="font-medium">Thriller</h3>
206
+ </a>
207
+ </div>
208
+ </section>
209
+
210
+ <!-- Trending Section -->
211
+ <section class="mb-12">
212
+ <div class="flex justify-between items-center mb-6">
213
+ <h2 class="text-2xl font-bold">Tendances cette semaine</h2>
214
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
215
+ Voir plus <i class="fas fa-chevron-right ml-1"></i>
216
+ </a>
217
+ </div>
218
+
219
+ <div id="trending" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
220
+ <!-- Films will be loaded here -->
221
+ <div class="flex items-center justify-center py-12">
222
+ <div class="loading-spinner text-blue-500 text-4xl">
223
+ <i class="fas fa-spinner"></i>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Recommended Section -->
230
+ <section class="mb-12">
231
+ <div class="flex justify-between items-center mb-6">
232
+ <h2 class="text-2xl font-bold">Recommandé pour vous</h2>
233
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center">
234
+ Rafraîchir <i class="fas fa-sync-alt ml-1"></i>
235
+ </a>
236
+ </div>
237
+
238
+ <div id="recommended" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
239
+ <!-- Films will be loaded here -->
240
+ <div class="flex items-center justify-center py-12">
241
+ <div class="loading-spinner text-blue-500 text-4xl">
242
+ <i class="fas fa-spinner"></i>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+ </main>
248
+
249
+ <!-- Footer -->
250
+ <footer class="bg-gray-900 border-t border-gray-800 py-12">
251
+ <div class="container mx-auto px-4">
252
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
253
+ <div>
254
+ <div class="flex items-center space-x-2 mb-4">
255
+ <i class="fas fa-film text-3xl text-blue-500"></i>
256
+ <h3 class="text-2xl font-bold">CinéPilot</h3>
257
+ </div>
258
+ <p class="text-gray-400">La plateforme de streaming automatique avec la plus grande collection de films.</p>
259
+ </div>
260
+
261
+ <div>
262
+ <h4 class="text-lg font-bold mb-4">Navigation</h4>
263
+ <ul class="space-y-2">
264
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Accueil</a></li>
265
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Films</a></li>
266
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Séries</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Nouveautés</a></li>
268
+ </ul>
269
+ </div>
270
+
271
+ <div>
272
+ <h4 class="text-lg font-bold mb-4">Légal</h4>
273
+ <ul class="space-y-2">
274
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Conditions d'utilisation</a></li>
275
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Politique de confidentialité</a></li>
276
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">DMCA</a></li>
277
+ </ul>
278
+ </div>
279
+
280
+ <div>
281
+ <h4 class="text-lg font-bold mb-4">Contact</h4>
282
+ <ul class="space-y-2">
283
+ <li class="flex items-center space-x-2">
284
+ <i class="fas fa-envelope text-blue-400"></i>
285
+ <span class="text-gray-400">contact@cinepilot.com</span>
286
+ </li>
287
+ <li class="flex items-center space-x-2">
288
+ <i class="fas fa-phone text-blue-400"></i>
289
+ <span class="text-gray-400">+33 1 23 45 67 89</span>
290
+ </li>
291
+ </ul>
292
+
293
+ <div class="flex space-x-4 mt-4">
294
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition">
295
+ <i class="fab fa-facebook-f"></i>
296
+ </a>
297
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition">
298
+ <i class="fab fa-twitter"></i>
299
+ </a>
300
+ <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition">
301
+ <i class="fab fa-instagram"></i>
302
+ </a>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
308
+ <p>© 2023 CinéPilot. Tous droits réservés. Système de pilotage automatique.</p>
309
+ </div>
310
+ </div>
311
+ </footer>
312
+
313
+ <!-- Film Modal -->
314
+ <div id="filmModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden overflow-y-auto">
315
+ <div class="container mx-auto px-4 py-12">
316
+ <div class="flex justify-end mb-4">
317
+ <button id="closeModal" class="text-3xl text-gray-400 hover:text-white">
318
+ <i class="fas fa-times"></i>
319
+ </button>
320
+ </div>
321
+
322
+ <div id="modalContent" class="bg-gray-900 rounded-xl overflow-hidden">
323
+ <!-- Content will be loaded here -->
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <script>
329
+ // Film database (simulated)
330
+ const filmDatabase = {
331
+ totalFilms: 78954,
332
+ categories: [
333
+ "Action", "Aventure", "Animation", "Comédie", "Crime",
334
+ "Documentaire", "Drame", "Familial", "Fantastique", "Histoire",
335
+ "Horreur", "Musique", "Mystère", "Romance", "Science-fiction",
336
+ "Thriller", "Guerre", "Western"
337
+ ],
338
+ languages: ["Français", "Anglais", "Espagnol", "Allemand", "Italien", "Japonais"],
339
+ getRandomFilms: function(count) {
340
+ const films = [];
341
+ const currentYear = new Date().getFullYear();
342
+
343
+ for (let i = 0; i < count; i++) {
344
+ const id = Math.floor(Math.random() * this.totalFilms) + 1;
345
+ const title = this.generateRandomTitle();
346
+ const year = currentYear - Math.floor(Math.random() * 10);
347
+ const rating = (Math.random() * 3 + 7).toFixed(1);
348
+ const duration = `${Math.floor(Math.random() * 60 + 90)} min`;
349
+ const category = this.categories[Math.floor(Math.random() * this.categories.length)];
350
+ const language = this.languages[Math.floor(Math.random() * this.languages.length)];
351
+ const poster = `https://source.unsplash.com/random/300x450/?movie,film,${category.toLowerCase()},${i}`;
352
+ const backdrop = `https://source.unsplash.com/random/1280x720/?movie,film,${category.toLowerCase()},${i}`;
353
+
354
+ films.push({
355
+ id,
356
+ title,
357
+ year,
358
+ rating,
359
+ duration,
360
+ category,
361
+ language,
362
+ poster,
363
+ backdrop,
364
+ description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. ${title} est un film ${category.toLowerCase()} sorti en ${year}. Le film dure ${duration} et est en ${language}.`
365
+ });
366
+ }
367
+
368
+ return films;
369
+ },
370
+ generateRandomTitle: function() {
371
+ const prefixes = ["Le", "La", "Les", "Un", "Une", "L'"];
372
+ const nouns = ["Secret", "Aventure", "Destin", "Rêve", "Passion", "Mystère", "Guerre", "Amour"];
373
+ const suffixes = ["Oublié", "Caché", "Perdu", "Interdit", "Final", "Éternel", "Noir"];
374
+
375
+ const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
376
+ const noun = nouns[Math.floor(Math.random() * nouns.length)];
377
+ const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
378
+
379
+ return `${prefix} ${noun} ${suffix}`;
380
+ },
381
+ getTrendingFilms: function(count) {
382
+ // Trending films have higher ratings
383
+ const films = this.getRandomFilms(count);
384
+ return films.map(film => {
385
+ return {
386
+ ...film,
387
+ rating: (Math.random() * 2 + 8).toFixed(1),
388
+ trending: true
389
+ };
390
+ });
391
+ },
392
+ getRecommendedFilms: function(count) {
393
+ // Recommended films are from the current year
394
+ const currentYear = new Date().getFullYear();
395
+ const films = this.getRandomFilms(count);
396
+ return films.map(film => {
397
+ return {
398
+ ...film,
399
+ year: currentYear,
400
+ rating: (Math.random() * 2 + 8).toFixed(1)
401
+ };
402
+ });
403
+ }
404
+ };
405
+
406
+ // DOM Elements
407
+ const newReleasesSection = document.getElementById('newReleases');
408
+ const trendingSection = document.getElementById('trending');
409
+ const recommendedSection = document.getElementById('recommended');
410
+ const filmModal = document.getElementById('filmModal');
411
+ const modalContent = document.getElementById('modalContent');
412
+ const closeModal = document.getElementById('closeModal');
413
+
414
+ // Load films
415
+ function loadFilms() {
416
+ // New releases
417
+ const newReleases = filmDatabase.getRandomFilms(12);
418
+ renderFilms(newReleases, newReleasesSection);
419
+
420
+ // Trending
421
+ const trending = filmDatabase.getTrendingFilms(12);
422
+ renderFilms(trending, trendingSection);
423
+
424
+ // Recommended
425
+ const recommended = filmDatabase.getRecommendedFilms(12);
426
+ renderFilms(recommended, recommendedSection);
427
+ }
428
+
429
+ // Render films
430
+ function renderFilms(films, container) {
431
+ container.innerHTML = '';
432
+
433
+ films.forEach(film => {
434
+ const filmElement = document.createElement('div');
435
+ filmElement.className = 'film-card';
436
+ filmElement.innerHTML = `
437
+ <div class="cursor-pointer" onclick="openFilmModal(${film.id})">
438
+ <div class="relative aspect-[2/3] rounded-lg overflow-hidden mb-2">
439
+ <div class="blur-load absolute inset-0 bg-gray-800 flex items-center justify-center">
440
+ <img src="${film.poster}" alt="${film.title}" class="absolute inset-0 w-full h-full object-cover" loading="lazy">
441
+ </div>
442
+ <div class="absolute top-2 left-2 bg-blue-600 text-white text-xs px-2 py-1 rounded">HD</div>
443
+ <div class="absolute bottom-2 right-2 bg-yellow-500 text-black text-xs px-2 py-1 rounded font-bold">
444
+ ${film.rating} <i class="fas fa-star"></i>
445
+ </div>
446
+ </div>
447
+ <h3 class="font-medium truncate">${film.title}</h3>
448
+ <div class="text-sm text-gray-400">
449
+ <span>${film.year}</span>
450
+ <span>•</span>
451
+ <span>${film.category}</span>
452
+ </div>
453
+ </div>
454
+ `;
455
+
456
+ container.appendChild(filmElement);
457
+
458
+ // Lazy load images
459
+ const img = filmElement.querySelector('img');
460
+ img.onload = function() {
461
+ filmElement.querySelector('.blur-load').classList.add('loaded');
462
+ };
463
+ });
464
+ }
465
+
466
+ // Open film modal
467
+ window.openFilmModal = function(filmId) {
468
+ // Find film in database (simulated)
469
+ const film = filmDatabase.getRandomFilms(1)[0];
470
+ film.id = filmId;
471
+
472
+ modalContent.innerHTML = `
473
+ <div class="flex flex-col md:flex-row">
474
+ <div class="md:w-1/3">
475
+ <div class="relative aspect-[2/3]">
476
+ <img src="${film.poster}" alt="${film.title}" class="w-full h-full object-cover">
477
+ </div>
478
+ </div>
479
+ <div class="md:w-2/3 p-6">
480
+ <h2 class="text-3xl font-bold mb-2">${film.title} <span class="text-gray-400">(${film.year})</span></h2>
481
+ <div class="flex flex-wrap items-center gap-2 mb-4">
482
+ <span class="bg-blue-600 text-white px-2 py-1 rounded text-sm">HD</span>
483
+ <span class="text-yellow-500 font-bold">${film.rating} <i class="fas fa-star"></i></span>
484
+ <span>${film.duration}</span>
485
+ <span>•</span>
486
+ <span>${film.category}</span>
487
+ <span>•</span>
488
+ <span>${film.language}</span>
489
+ </div>
490
+ <p class="text-gray-300 mb-6">${film.description}</p>
491
+ <div class="flex space-x-4">
492
+ <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-full font-bold flex items-center">
493
+ <i class="fas fa-play mr-2"></i> Regarder
494
+ </button>
495
+ <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-full font-bold flex items-center">
496
+ <i class="fas fa-plus mr-2"></i> Ma liste
497
+ </button>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ `;
502
+
503
+ filmModal.classList.remove('hidden');
504
+ document.body.style.overflow = 'hidden';
505
+ };
506
+
507
+ // Close modal
508
+ closeModal.addEventListener('click', function() {
509
+ filmModal.classList.add('hidden');
510
+ document.body.style.overflow = 'auto';
511
+ });
512
+
513
+ // Close modal when clicking outside
514
+ filmModal.addEventListener('click', function(e) {
515
+ if (e.target === filmModal) {
516
+ filmModal.classList.add('hidden');
517
+ document.body.style.overflow = 'auto';
518
+ }
519
+ });
520
+
521
+ // Initialize
522
+ document.addEventListener('DOMContentLoaded', function() {
523
+ loadFilms();
524
+
525
+ // Simulate automatic updates every 30 seconds
526
+ setInterval(() => {
527
+ // Rotate some films
528
+ const sections = [newReleasesSection, trendingSection, recommendedSection];
529
+ sections.forEach(section => {
530
+ const films = Array.from(section.children);
531
+ if (films.length > 6) {
532
+ // Remove first 2 and add 2 new ones
533
+ films[0].remove();
534
+ films[1].remove();
535
+
536
+ const newFilms = filmDatabase.getRandomFilms(2);
537
+ renderFilms(newFilms, section);
538
+ }
539
+ });
540
+ }, 30000);
541
+ });
542
+
543
+ // Display total films count in console
544
+ console.log(`%cCinéPilot - Base de données de ${filmDatabase.totalFilms.toLocaleString()} films`,
545
+ 'color: #3b82f6; font-size: 16px; font-weight: bold;');
546
+ </script>
547
+ <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-pilote" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
548
+ </html>
prompts.txt ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ creer moi un générateur de tranformation de film en dessins animé uniquement part description en automatique
2
+ creer moi UN TRANSFORMATEUR de film en dessins animé uniquement part description en automatique
3
+ GN2RER EN AUTOMATIQUE
4
+ creer un gnérateur de film streamin en dessins animé en autopilote
5
+ je veux creer un générateur qui creer des site de cours en ligne complet
6
+ aucun bouton fonctionne je veux creer des vrai site pas de site vitrine ni de site d'exemple
7
+ automatisé tout en auto
8
+ automatisé tout en auto
9
+ je veun un Une puissante application d'IA 8 en 1 qui crée des produits rentables pour vous en quelques secondes grâce à la maîtrise d'un mot-clé.
10
+ je veux un generateur de site a partir d image et de titre du site uniquement
11
+ https://plateformecinema.com/ : creer moi ce site en pilotage automatique
12
+ https://plateformecinema.com ? ACTIVER LES FILMS EN PILOTE AUTOMATIQUE AVEC UNE GROSSE BASE DE FILMS DE 78954 FILM NOUVEAUTE