Hugging Face's logo

Spaces:
docto41
/
cin-base
Running

App Files Community
docto41 commited on
Commit
42adafb
·
verified ·
1 Parent(s): 241f40e

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +279 -436
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,15 +3,15 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>CinéBase - Plateformes de 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
- .streaming-card:hover {
11
  transform: translateY(-5px);
12
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
13
  }
14
- .streaming-card {
15
  transition: all 0.3s ease;
16
  }
17
  .loading-spinner {
@@ -22,6 +22,20 @@
22
  0% { transform: rotate(0deg); }
23
  100% { transform: rotate(360deg); }
24
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </style>
26
  </head>
27
  <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -29,15 +43,14 @@
29
  <header class="bg-gray-800 shadow-lg sticky top-0 z-50">
30
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
31
  <div class="flex items-center">
32
- <i class="fas fa-film text-yellow-400 text-3xl mr-3"></i>
33
- <h1 class="text-2xl font-bold bg-gradient-to-r from-yellow-400 to-red-500 bg-clip-text text-transparent">CinéBase</h1>
34
  </div>
35
 
36
  <div class="hidden md:flex space-x-4">
37
- <a href="#netflix" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Netflix</a>
38
- <a href="#hbo" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">HBO Max</a>
39
- <a href="#disney" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Disney+</a>
40
- <a href="#apple" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Apple TV</a>
41
  </div>
42
  </div>
43
  </header>
@@ -46,10 +59,9 @@
46
  <main class="container mx-auto px-4 py-8">
47
  <!-- Hero Section -->
48
  <section class="mb-12 text-center">
49
- <h2 class="text-3xl md:text-4xl font-bold mb-4">Trouvez où regarder vos films et séries préférés</h2>
50
  <p class="text-gray-400 max-w-2xl mx-auto mb-8">
51
- Accédez à des milliers de titres disponibles sur toutes les plateformes de streaming.
52
- Comparez les services et trouvez les meilleures offres.
53
  </p>
54
 
55
  <div class="max-w-xl mx-auto relative">
@@ -57,270 +69,253 @@
57
  <i class="fas fa-search text-gray-400"></i>
58
  </div>
59
  <input type="text" id="searchInput" placeholder="Rechercher un film, une série..."
60
- class="w-full pl-10 pr-4 py-3 rounded-full bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-500">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  </div>
62
  </section>
63
 
64
- <!-- Streaming Services Section -->
65
- <section class="mb-12">
66
- <h2 class="text-2xl font-bold mb-6">Plateformes de Streaming</h2>
67
 
68
- <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
69
- <!-- Netflix -->
70
- <div id="netflix" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('netflix')">
71
- <div class="relative pt-[100%] bg-red-600 flex items-center justify-center">
72
- <i class="fab fa-netflix text-5xl absolute"></i>
 
73
  </div>
74
- <div class="p-4">
75
- <h3 class="font-bold text-center">Netflix</h3>
76
- <div class="flex justify-center mt-2">
77
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 8,99€/mois</span>
 
78
  </div>
79
  </div>
80
  </div>
81
 
82
- <!-- HBO Max -->
83
- <div id="hbo" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('hbo')">
84
- <div class="relative pt-[100%] bg-purple-600 flex items-center justify-center">
85
- <i class="fab fa-hbo text-5xl absolute"></i>
 
86
  </div>
87
- <div class="p-4">
88
- <h3 class="font-bold text-center">HBO Max</h3>
89
- <div class="flex justify-center mt-2">
90
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 9,99€/mois</span>
 
91
  </div>
92
  </div>
93
  </div>
94
 
95
- <!-- Disney+ -->
96
- <div id="disney" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('disney')">
97
- <div class="relative pt-[100%] bg-blue-600 flex items-center justify-center">
98
- <i class="fab fa-disney text-5xl absolute"></i>
 
99
  </div>
100
- <div class="p-4">
101
- <h3 class="font-bold text-center">Disney+</h3>
102
- <div class="flex justify-center mt-2">
103
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 8,99€/mois</span>
 
104
  </div>
105
  </div>
106
  </div>
107
 
108
- <!-- Apple TV+ -->
109
- <div id="apple" class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('apple')">
110
- <div class="relative pt-[100%] bg-gray-100 flex items-center justify-center">
111
- <i class="fab fa-apple text-5xl absolute text-gray-900"></i>
 
112
  </div>
113
- <div class="p-4">
114
- <h3 class="font-bold text-center">Apple TV+</h3>
115
- <div class="flex justify-center mt-2">
116
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 6,99€/mois</span>
 
117
  </div>
118
  </div>
119
  </div>
120
 
121
- <!-- Amazon Prime Video -->
122
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('amazon')">
123
- <div class="relative pt-[100%] bg-blue-400 flex items-center justify-center">
124
- <i class="fab fa-amazon text-5xl absolute"></i>
 
125
  </div>
126
- <div class="p-4">
127
- <h3 class="font-bold text-center">Prime Video</h3>
128
- <div class="flex justify-center mt-2">
129
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 5,99€/mois</span>
 
130
  </div>
131
  </div>
132
  </div>
133
 
134
- <!-- Paramount+ -->
135
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('paramount')">
136
- <div class="relative pt-[100%] bg-blue-700 flex items-center justify-center">
137
- <i class="fas fa-peacock text-5xl absolute"></i>
 
138
  </div>
139
- <div class="p-4">
140
- <h3 class="font-bold text-center">Paramount+</h3>
141
- <div class="flex justify-center mt-2">
142
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 7,99€/mois</span>
 
143
  </div>
144
  </div>
145
  </div>
146
 
147
- <!-- Canal+ -->
148
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('canal')">
149
- <div class="relative pt-[100%] bg-red-700 flex items-center justify-center">
150
- <i class="fas fa-tv text-5xl absolute"></i>
 
151
  </div>
152
- <div class="p-4">
153
- <h3 class="font-bold text-center">Canal+</h3>
154
- <div class="flex justify-center mt-2">
155
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 19,99€/mois</span>
 
156
  </div>
157
  </div>
158
  </div>
159
 
160
- <!-- OCS -->
161
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('ocs')">
162
- <div class="relative pt-[100%] bg-green-600 flex items-center justify-center">
163
- <i class="fas fa-play text-5xl absolute"></i>
 
164
  </div>
165
- <div class="p-4">
166
- <h3 class="font-bold text-center">OCS</h3>
167
- <div class="flex justify-center mt-2">
168
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 9,99€/mois</span>
 
169
  </div>
170
  </div>
171
  </div>
172
 
173
- <!-- Salto -->
174
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('salto')">
175
- <div class="relative pt-[100%] bg-purple-800 flex items-center justify-center">
176
- <i class="fas fa-play-circle text-5xl absolute"></i>
 
177
  </div>
178
- <div class="p-4">
179
- <h3 class="font-bold text-center">Salto</h3>
180
- <div class="flex justify-center mt-2">
181
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 6,99€/mois</span>
 
182
  </div>
183
  </div>
184
  </div>
185
 
186
- <!-- Crunchyroll -->
187
- <div class="streaming-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer" onclick="showStreamingContent('crunchyroll')">
188
- <div class="relative pt-[100%] bg-orange-500 flex items-center justify-center">
189
- <i class="fas fa-play text-5xl absolute"></i>
 
190
  </div>
191
- <div class="p-4">
192
- <h3 class="font-bold text-center">Crunchyroll</h3>
193
- <div class="flex justify-center mt-2">
194
- <span class="text-sm bg-gray-700 px-2 py-1 rounded">À partir de 4,99€/mois</span>
 
195
  </div>
196
  </div>
197
  </div>
198
  </div>
199
  </section>
200
 
201
- <!-- Content Section (Hidden by default) -->
202
- <section id="contentSection" class="hidden mb-12">
203
- <div class="flex justify-between items-center mb-6">
204
- <h2 id="streamingTitle" class="text-2xl font-bold"></h2>
205
- <button onclick="hideStreamingContent()" class="text-gray-400 hover:text-white">
206
- <i class="fas fa-times text-2xl"></i>
207
- </button>
208
- </div>
209
-
210
- <div id="streamingInfo" class="bg-gray-800 rounded-lg p-6 mb-6">
211
- <!-- Info will be loaded here -->
212
- </div>
213
 
214
- <div>
215
- <h3 class="text-xl font-bold mb-4">Contenu populaire</h3>
216
- <div id="streamingContent" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
217
- <!-- Content will be loaded here -->
218
- </div>
219
- </div>
220
- </section>
221
-
222
- <!-- Free Options Section -->
223
- <section class="mb-12">
224
- <h2 class="text-2xl font-bold mb-6">Options gratuites</h2>
225
-
226
- <div class="bg-gray-800 rounded-lg p-6">
227
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
228
- <!-- Pluto TV -->
229
- <div class="flex items-start">
230
- <div class="bg-purple-600 p-3 rounded-lg mr-4">
231
  <i class="fas fa-tv text-2xl"></i>
232
  </div>
233
- <div>
234
- <h3 class="font-bold text-lg mb-2">Pluto TV</h3>
235
- <p class="text-gray-400 mb-3">Service de streaming gratuit avec chaînes thématiques et catalogue VOD.</p>
236
- <a href="https://pluto.tv" target="_blank" class="inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded font-medium">
237
- Accéder gratuitement
238
- </a>
239
- </div>
240
  </div>
241
-
242
- <!-- YouTube (Films gratuits) -->
243
- <div class="flex items-start">
244
- <div class="bg-red-600 p-3 rounded-lg mr-4">
245
- <i class="fab fa-youtube text-2xl"></i>
246
- </div>
247
- <div>
248
- <h3 class="font-bold text-lg mb-2">YouTube Films Gratuits</h3>
249
- <p class="text-gray-400 mb-3">Collection de films et séries disponibles gratuitement avec publicités.</p>
250
- <a href="https://www.youtube.com/channel/UCySPO6E0tdJ3Lw8KZle7WJQ" target="_blank" class="inline-block px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium">
251
- Accéder gratuitement
252
- </a>
253
- </div>
254
  </div>
255
-
256
- <!-- Tubi -->
257
- <div class="flex items-start">
258
- <div class="bg-blue-600 p-3 rounded-lg mr-4">
 
 
259
  <i class="fas fa-film text-2xl"></i>
260
  </div>
261
- <div>
262
- <h3 class="font-bold text-lg mb-2">Tubi</h3>
263
- <p class="text-gray-400 mb-3">Grand catalogue de films et séries en streaming gratuit avec publicités.</p>
264
- <a href="https://www.tubi.tv/" target="_blank" class="inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium">
265
- Accéder gratuitement
266
- </a>
267
- </div>
268
  </div>
269
-
270
- <!-- ARTE -->
271
- <div class="flex items-start">
272
- <div class="bg-green-600 p-3 rounded-lg mr-4">
273
- <i class="fas fa-play-circle text-2xl"></i>
274
- </div>
275
- <div>
276
- <h3 class="font-bold text-lg mb-2">ARTE</h3>
277
- <p class="text-gray-400 mb-3">Documentaires, films d'auteur et séries européennes en streaming gratuit.</p>
278
- <a href="https://www.arte.tv/fr/" target="_blank" class="inline-block px-4 py-2 bg-green-600 hover:bg-green-700 rounded font-medium">
279
- Accéder gratuitement
280
- </a>
281
- </div>
282
  </div>
283
  </div>
284
- </div>
285
- </section>
286
-
287
- <!-- How to Watch Section -->
288
- <section class="mb-12">
289
- <h2 class="text-2xl font-bold mb-6">Comment regarder gratuitement ?</h2>
290
-
291
- <div class="bg-gray-800 rounded-lg p-6">
292
- <div class="grid md:grid-cols-3 gap-6">
293
- <div class="bg-gray-700 p-4 rounded-lg">
294
- <div class="text-yellow-400 text-2xl mb-3">
295
- <i class="fas fa-gift"></i>
296
- </div>
297
- <h3 class="font-bold mb-2">Essais gratuits</h3>
298
- <p class="text-gray-400 text-sm">
299
- La plupart des plateformes offrent des périodes d'essai gratuites (7 à 30 jours).
300
- Annulez avant la fin pour ne pas payer.
301
- </p>
302
- </div>
303
-
304
- <div class="bg-gray-700 p-4 rounded-lg">
305
- <div class="text-yellow-400 text-2xl mb-3">
306
- <i class="fas fa-mobile-alt"></i>
307
  </div>
308
- <h3 class="font-bold mb-2">Offres opérateurs</h3>
309
- <p class="text-gray-400 text-sm">
310
- Votre opérateur mobile ou internet peut inclure des abonnements gratuits
311
- (ex: Disney+ avec Orange, Netflix avec SFR).
312
- </p>
313
  </div>
314
-
315
- <div class="bg-gray-700 p-4 rounded-lg">
316
- <div class="text-yellow-400 text-2xl mb-3">
317
- <i class="fas fa-ticket-alt"></i>
318
- </div>
319
- <h3 class="font-bold mb-2">Promotions</h3>
320
- <p class="text-gray-400 text-sm">
321
- Surveillez les offres promotionnelles (3 mois gratuits, réductions étudiantes, etc.)
322
- sur les sites des plateformes.
323
- </p>
324
  </div>
325
  </div>
326
  </div>
@@ -332,260 +327,106 @@
332
  <div class="container mx-auto px-4">
333
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
334
  <div>
335
- <h3 class="text-lg font-bold mb-4">CinéBase</h3>
336
  <p class="text-gray-400 text-sm">
337
- Votre guide pour trouver le meilleur contenu streaming.
338
- Nous comparons les plateformes pour vous aider à choisir.
339
  </p>
340
  </div>
341
 
342
  <div>
343
- <h3 class="text-lg font-bold mb-4">Liens utiles</h3>
344
  <ul class="space-y-2">
345
- <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Comparatif des prix</a></li>
346
- <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Nouveautés streaming</a></li>
347
- <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Essais gratuits</a></li>
348
- <li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">FAQ</a></li>
349
  </ul>
350
  </div>
351
 
352
  <div>
353
- <h3 class="text-lg font-bold mb-4">Contact</h3>
354
  <ul class="space-y-2">
355
- <li class="text-gray-400 text-sm">[email protected]</li>
356
- <li class="flex space-x-4 mt-4">
357
- <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-facebook-f"></i></a>
358
- <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-twitter"></i></a>
359
- <a href="#" class="text-gray-400 hover:text-yellow-400"><i class="fab fa-instagram"></i></a>
360
- </li>
361
  </ul>
362
  </div>
363
  </div>
364
 
365
  <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
366
- <p>© 2023 CinéBase. Ce site ne propose pas de contenu piraté, seulement des informations sur le streaming légal.</p>
367
  </div>
368
  </div>
369
  </footer>
370
 
371
  <script>
372
- // Sample data for streaming platforms
373
- const streamingData = {
374
- netflix: {
375
- name: "Netflix",
376
- color: "bg-red-600",
377
- icon: "fab fa-netflix",
378
- price: "8,99€ - 17,99€/mois",
379
- description: "Le leader du streaming avec un vaste catalogue de films, séries et documentaires originaux.",
380
- freeTrial: "30 jours gratuits",
381
- content: [
382
- {title: "Stranger Things", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/49WJfeN0moxb9IPfGn8AIqMGskD.jpg"},
383
- {title: "The Witcher", year: 2021, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/7vjaCdMw15FEbXyLQTVa04URsPm.jpg"},
384
- {title: "Squid Game", year: 2021, rating: 8.3, image: "https://image.tmdb.org/t/p/w500/dDlEmu3EZ0Pgg93K2SVNLCjCSvE.jpg"},
385
- {title: "The Crown", year: 2020, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/jJ7WhOPkdVbQq0EtZJtCK1Lp3VU.jpg"},
386
- {title: "Ozark", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/oyR3F6d0X0uvs0BoQjQO3LJsNlE.jpg"}
387
- ]
388
- },
389
- hbo: {
390
- name: "HBO Max",
391
- color: "bg-purple-600",
392
- icon: "fab fa-hbo",
393
- price: "9,99€/mois",
394
- description: "Accès à tout le catalogue HBO incluant séries primées, films blockbusters et exclusivités.",
395
- freeTrial: "7 jours gratuits",
396
- content: [
397
- {title: "Game of Thrones", year: 2019, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/u3bZgnGQ9T01sWNhyveQz0wH0Hl.jpg"},
398
- {title: "House of the Dragon", year: 2022, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg"},
399
- {title: "The Last of Us", year: 2023, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg"},
400
- {title: "Succession", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/dfWZ3qF5o2PebssgUqLv69JBRYX.jpg"},
401
- {title: "Euphoria", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/jtnfNzqZwN4E32FGGxx1YZaBwwf.jpg"}
402
- ]
403
- },
404
- disney: {
405
- name: "Disney+",
406
- color: "bg-blue-600",
407
- icon: "fab fa-disney",
408
- price: "8,99€/mois ou 89,90€/an",
409
- description: "Le meilleur de Disney, Pixar, Marvel, Star Wars, National Geographic et Star (séries adultes).",
410
- freeTrial: "7 jours gratuits",
411
- content: [
412
- {title: "The Mandalorian", year: 2023, rating: 8.5, image: "https://image.tmdb.org/t/p/w500/eU1i6eHXlzMOlEq0ku1Rzq7Y4wA.jpg"},
413
- {title: "Loki", year: 2023, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/voHUmluYmKyleFkTu3lOXQG702u.jpg"},
414
- {title: "Andor", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/59SVNwLfoBFBO11HkxiXj6i4GLn.jpg"},
415
- {title: "The Bear", year: 2023, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/9f4nyON6ujcdLgL7oSW0KVKVxiO.jpg"},
416
- {title: "Only Murders in the Building", year: 2023, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/29r1z0EFWrJEYNmRhXQFdAIWtJq.jpg"}
417
- ]
418
- },
419
- apple: {
420
- name: "Apple TV+",
421
- color: "bg-gray-100",
422
- icon: "fab fa-apple",
423
- price: "6,99€/mois",
424
- description: "Plateforme d'Apple avec des productions originales de haute qualité et un catalogue en croissance.",
425
- freeTrial: "7 jours gratuits (1 an avec achat d'un appareil Apple)",
426
- content: [
427
- {title: "Ted Lasso", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/1gWu1jqQbtq1kU5VZVjX9hzs5QY.jpg"},
428
- {title: "Severance", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/4nNZ5CHZkUyAG4hQHnClNvH1K4D.jpg"},
429
- {title: "The Morning Show", year: 2021, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/5qyNW03dYI4jQkUWJltQToAfyv.jpg"},
430
- {title: "Foundation", year: 2023, rating: 7.6, image: "https://image.tmdb.org/t/p/w500/5M1zPXdIY1z0FohxQHXq1QYSzXK.jpg"},
431
- {title: "Slow Horses", year: 2022, rating: 7.7, image: "https://image.tmdb.org/t/p/w500/iiD1pf7qTGZqIqC5ShDPi67O95Z.jpg"}
432
- ]
433
- },
434
- amazon: {
435
- name: "Amazon Prime Video",
436
- color: "bg-blue-400",
437
- icon: "fab fa-amazon",
438
- price: "5,99€/mois (inclus avec Prime à 6,99€/mois)",
439
- description: "Service d'Amazon avec films, séries et productions originales, inclus avec l'abonnement Prime.",
440
- freeTrial: "30 jours gratuits",
441
- content: [
442
- {title: "The Lord of the Rings: The Rings of Power", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/mYLOqiStMskPKm256ErUNOxjNEw.jpg"},
443
- {title: "The Boys", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/stTEycfG9928HYGEISBFaG1ngjM.jpg"},
444
- {title: "Jack Ryan", year: 2023, rating: 7.9, image: "https://image.tmdb.org/t/p/w500/1raUrQr8Y2tSYjMFkX138j2K2Gq.jpg"},
445
- {title: "The Marvelous Mrs. Maisel", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/2Q6yURdKJvBVqXGaLPsdoQZ2YzA.jpg"},
446
- {title: "Reacher", year: 2022, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/6aKdVdAe0vbQ3LtC4TzRjJk9qK5.jpg"}
447
- ]
448
- },
449
- paramount: {
450
- name: "Paramount+",
451
- color: "bg-blue-700",
452
- icon: "fas fa-peacock",
453
- price: "7,99€/mois ou 69,99€/an",
454
- description: "Catalogue de Paramount avec films, séries et contenus exclusifs comme Star Trek et Nickelodeon.",
455
- freeTrial: "7 jours gratuits",
456
- content: [
457
- {title: "Star Trek: Strange New Worlds", year: 2023, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/6Hf2NSEd5vPLWb1vqGkVoOq6oYL.jpg"},
458
- {title: "Yellowstone", year: 2022, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/peNC0eyc3TQJa6x4TdKcBPNP4t0.jpg"},
459
- {title: "Halo", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/eO0QV5q5EngP1Ax9w3QE6PxkHjd.jpg"},
460
- {title: "1923", year: 2022, rating: 7.8, image: "https://image.tmdb.org/t/p/w500/uDgy6hyPd82kOHh6I95DtmUhnP5.jpg"},
461
- {title: "Tulsa King", year: 2022, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/fnN5CfakLJbifvR6HsmmTtZQ1vx.jpg"}
462
- ]
463
- },
464
- canal: {
465
- name: "Canal+",
466
- color: "bg-red-700",
467
- icon: "fas fa-tv",
468
- price: "19,99€/mois (avec engagement 12 mois)",
469
- description: "Service premium français avec films récents, séries, sport et chaînes en direct.",
470
- freeTrial: "Non disponible",
471
- content: [
472
- {title: "Baron Noir", year: 2020, rating: 8.1, image: "https://image.tmdb.org/t/p/w500/4VQ5yqM9YtB3UQq4HdQ3wS6d3k9.jpg"},
473
- {title: "OSS 117", year: 2021, rating: 7.8, image: "https://image.tmdb.org/t/p/w500/2Q4iXyHXuM1Q0w1Y3T7Z3c6J3w9.jpg"},
474
- {title: "Le Bureau des Légendes", year: 2020, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/3VQ5qXQ9d3Y3LQ9q3q3q3q3q3q3.jpg"},
475
- {title: "Versailles", year: 2018, rating: 7.6, image: "https://image.tmdb.org/t/p/w500/5Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
476
- {title: "Engrenages", year: 2021, rating: 8.2, image: "https://image.tmdb.org/t/p/w500/6Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"}
477
- ]
478
- },
479
- ocs: {
480
- name: "OCS",
481
- color: "bg-green-600",
482
- icon: "fas fa-play",
483
- price: "9,99€/mois ou 99€/an",
484
- description: "Service français avec exclusivités HBO, séries originales et films récents.",
485
- freeTrial: "7 jours gratuits",
486
- content: [
487
- {title: "Game of Thrones", year: 2019, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/u3bZgnGQ9T01sWNhyveQz0wH0Hl.jpg"},
488
- {title: "House of the Dragon", year: 2022, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/z2yahl2uefxDCl0nogcRBstwruJ.jpg"},
489
- {title: "The Last of Us", year: 2023, rating: 8.9, image: "https://image.tmdb.org/t/p/w500/uKvVjHNqB5VmOrdxqAt2F7J78ED.jpg"},
490
- {title: "Succession", year: 2023, rating: 8.8, image: "https://image.tmdb.org/t/p/w500/dfWZ3qF5o2PebssgUqLv69JBRYX.jpg"},
491
- {title: "Euphoria", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/jtnfNzqZwN4E32FGGxx1YZaBwwf.jpg"}
492
- ]
493
- },
494
- salto: {
495
- name: "Salto",
496
- color: "bg-purple-800",
497
- icon: "fas fa-play-circle",
498
- price: "6,99€/mois ou 69€/an",
499
- description: "Plateforme française regroupant contenus de France Télévisions, TF1 et M6.",
500
- freeTrial: "7 jours gratuits",
501
- content: [
502
- {title: "Candice Renoir", year: 2022, rating: 7.5, image: "https://image.tmdb.org/t/p/w500/5Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
503
- {title: "Profilage", year: 2021, rating: 7.2, image: "https://image.tmdb.org/t/p/w500/6Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
504
- {title: "Demain nous appartient", year: 2023, rating: 6.8, image: "https://image.tmdb.org/t/p/w500/7Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
505
- {title: "Ici tout commence", year: 2022, rating: 6.5, image: "https://image.tmdb.org/t/p/w500/8Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"},
506
- {title: "Scènes de ménages", year: 2023, rating: 6.2, image: "https://image.tmdb.org/t/p/w500/9Q5q3q3q3q3q3q3q3q3q3q3q3q3.jpg"}
507
- ]
508
- },
509
- crunchyroll: {
510
- name: "Crunchyroll",
511
- color: "bg-orange-500",
512
- icon: "fas fa-play",
513
- price: "4,99€/mois ou 39,99€/an",
514
- description: "Plateforme spécialisée dans les anime et dramas asiatiques avec simulcast.",
515
- freeTrial: "14 jours gratuits (version premium)",
516
- content: [
517
- {title: "Attack on Titan", year: 2023, rating: 9.1, image: "https://image.tmdb.org/t/p/w500/hTP1DtLGFamjfu8BWm7zQC9iyU.jpg"},
518
- {title: "Demon Slayer", year: 2022, rating: 8.7, image: "https://image.tmdb.org/t/p/w500/qjGrUmKW78MCFG8PTLDBp67S27p.jpg"},
519
- {title: "Jujutsu Kaisen", year: 2023, rating: 8.6, image: "https://image.tmdb.org/t/p/w500/g1rK2nRXSidcMwNliWDIroWWGTn.jpg"},
520
- {title: "My Hero Academia", year: 2022, rating: 8.4, image: "https://image.tmdb.org/t/p/w500/4QLqhz0ZtH1wG5N1PDEBZnsv6Ih.jpg"},
521
- {title: "Chainsaw Man", year: 2022, rating: 8.5, image: "https://image.tmdb.org/t/p/w500/npdB6eFzizki0WaZ1OvKcJrWe97.jpg"}
522
- ]
523
- }
524
- };
525
-
526
- // Show streaming platform content
527
- function showStreamingContent(platform) {
528
- const data = streamingData[platform];
529
- if (!data) return;
530
 
531
- // Set title
532
- document.getElementById('streamingTitle').textContent = data.name;
533
 
534
- // Set info
535
- const infoHtml = `
536
- <div class="flex flex-col md:flex-row gap-6">
537
- <div class="${data.color} w-24 h-24 rounded-lg flex items-center justify-center mx-auto md:mx-0">
538
- <i class="${data.icon} text-5xl ${platform === 'apple' ? 'text-gray-900' : ''}"></i>
539
- </div>
540
- <div class="flex-1">
541
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
542
- <div>
543
- <h4 class="font-bold mb-1">Prix</h4>
544
- <p class="text-gray-400">${data.price}</p>
545
- </div>
546
- <div>
547
- <h4 class="font-bold mb-1">Essai gratuit</h4>
548
- <p class="text-gray-400">${data.freeTrial || 'Non disponible'}</p>
549
- </div>
550
- </div>
551
- <p class="text-gray-300">${data.description}</p>
552
- <div class="mt-4">
553
- <a href="#" class="inline-block px-4 py-2 ${data.color.replace('bg-', 'bg-').replace('600', '500').replace('700', '600')} hover:${data.color.replace('bg-', 'bg-').replace('500', '600').replace('600', '700')} rounded font-medium">
554
- Essayer gratuitement
555
- </a>
556
- </div>
557
- </div>
558
- </div>
559
- `;
560
- document.getElementById('streamingInfo').innerHTML = infoHtml;
561
 
562
- // Set content
563
- const contentHtml = data.content.map(item => `
564
- <div class="bg-gray-700 rounded-lg overflow-hidden">
565
- <div class="relative pt-[150%]">
566
- <img src="${item.image}" alt="${item.title}" class="absolute top-0 left-0 w-full h-full object-cover">
567
- </div>
568
- <div class="p-3">
569
- <h4 class="font-bold truncate">${item.title}</h4>
570
- <div class="flex justify-between items-center mt-1">
571
- <span class="text-yellow-400 text-xs">★ ${item.rating}</span>
572
- <span class="text-gray-400 text-xs">${item.year}</span>
573
- </div>
574
- </div>
575
- </div>
576
- `).join('');
577
- document.getElementById('streamingContent').innerHTML = contentHtml;
578
 
579
- // Show section
580
- document.getElementById('contentSection').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
581
 
582
- // Scroll to section
583
- document.getElementById('contentSection').scrollIntoView({ behavior: 'smooth' });
 
 
 
 
 
 
 
 
 
 
584
  }
585
 
586
- // Hide streaming content
587
- function hideStreamingContent() {
588
- document.getElementById('contentSection').classList.add('hidden');
 
589
  }
590
 
591
  // Search functionality
@@ -596,8 +437,10 @@
596
  });
597
 
598
  // Make functions available globally
599
- window.showStreamingContent = showStreamingContent;
600
- window.hideStreamingContent = hideStreamingContent;
 
 
601
  </script>
602
  <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-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
603
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Films Français Gratuits - Streaming 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
+ .channel-card:hover {
11
  transform: translateY(-5px);
12
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
13
  }
14
+ .channel-card {
15
  transition: all 0.3s ease;
16
  }
17
  .loading-spinner {
 
22
  0% { transform: rotate(0deg); }
23
  100% { transform: rotate(360deg); }
24
  }
25
+ .player-container {
26
+ aspect-ratio: 16/9;
27
+ }
28
+ .french-flag {
29
+ position: absolute;
30
+ top: 8px;
31
+ right: 8px;
32
+ background-color: rgba(0, 0, 0, 0.7);
33
+ color: white;
34
+ padding: 2px 6px;
35
+ border-radius: 4px;
36
+ font-size: 10px;
37
+ font-weight: bold;
38
+ }
39
  </style>
40
  </head>
41
  <body class="bg-gray-900 text-gray-100 min-h-screen">
 
43
  <header class="bg-gray-800 shadow-lg sticky top-0 z-50">
44
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
45
  <div class="flex items-center">
46
+ <i class="fas fa-film text-blue-400 text-3xl mr-3"></i>
47
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">Films Français Gratuits</h1>
48
  </div>
49
 
50
  <div class="hidden md:flex space-x-4">
51
+ <a href="#films" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Films VF</a>
52
+ <a href="#series" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Séries VF</a>
53
+ <a href="#plateformes" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-full">Plateformes</a>
 
54
  </div>
55
  </div>
56
  </header>
 
59
  <main class="container mx-auto px-4 py-8">
60
  <!-- Hero Section -->
61
  <section class="mb-12 text-center">
62
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Films Français en Streaming Automatique</h2>
63
  <p class="text-gray-400 max-w-2xl mx-auto mb-8">
64
+ Regardez les meilleurs films français en version originale ou doublée, directement en streaming sans interruption.
 
65
  </p>
66
 
67
  <div class="max-w-xl mx-auto relative">
 
69
  <i class="fas fa-search text-gray-400"></i>
70
  </div>
71
  <input type="text" id="searchInput" placeholder="Rechercher un film, une série..."
72
+ class="w-full pl-10 pr-4 py-3 rounded-full bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Player Section (Hidden by default) -->
77
+ <section id="playerSection" class="hidden mb-12">
78
+ <div class="flex justify-between items-center mb-6">
79
+ <h2 id="playerTitle" class="text-2xl font-bold"></h2>
80
+ <button onclick="hidePlayer()" class="text-gray-400 hover:text-white">
81
+ <i class="fas fa-times text-2xl"></i>
82
+ </button>
83
+ </div>
84
+
85
+ <div class="player-container bg-black rounded-lg overflow-hidden shadow-xl mb-4">
86
+ <iframe id="streamPlayer" class="w-full h-full" frameborder="0" allowfullscreen allow="autoplay; fullscreen"></iframe>
87
+ </div>
88
+
89
+ <div class="bg-gray-800 rounded-lg p-4">
90
+ <h3 class="font-bold mb-2">Informations</h3>
91
+ <p id="playerDescription" class="text-gray-300"></p>
92
+ <div class="mt-4 flex space-x-4">
93
+ <button onclick="toggleFullscreen()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded">
94
+ <i class="fas fa-expand mr-2"></i> Plein écran
95
+ </button>
96
+ <button onclick="shareStream()" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded">
97
+ <i class="fas fa-share-alt mr-2"></i> Partager
98
+ </button>
99
+ </div>
100
  </div>
101
  </section>
102
 
103
+ <!-- Free Movies Section -->
104
+ <section id="films" class="mb-12">
105
+ <h2 class="text-2xl font-bold mb-6">Films Français Gratuits</h2>
106
 
107
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
108
+ <!-- Film 1 - Intouchables (VF) -->
109
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Intouchables (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie dramatique française avec Omar Sy et François Cluzet.')">
110
+ <div class="relative pt-[150%] bg-gray-700">
111
+ <img src="https://image.tmdb.org/t/p/w500/4mFsNQwbD0F237Tx7gAPotd0nbJ.jpg" alt="Intouchables" class="absolute top-0 left-0 w-full h-full object-cover">
112
+ <div class="french-flag">VF</div>
113
  </div>
114
+ <div class="p-3">
115
+ <h3 class="font-bold text-sm truncate">Intouchables</h3>
116
+ <div class="flex justify-between items-center mt-1">
117
+ <span class="text-yellow-400 text-xs">★ 8.5</span>
118
+ <span class="text-gray-400 text-xs">2011</span>
119
  </div>
120
  </div>
121
  </div>
122
 
123
+ <!-- Film 2 - Le Fabuleux Destin d'Amélie Poulain (VF) -->
124
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Fabuleux Destin d\'Amélie Poulain (VF)', 'https://ok.ru/videoembed/3258894280886?autoplay=1', 'Film poétique de Jean-Pierre Jeunet avec Audrey Tautou.')">
125
+ <div class="relative pt-[150%] bg-gray-700">
126
+ <img src="https://image.tmdb.org/t/p/w500/7WgTzvWQtuYQz3nBZkFogNlWUBV.jpg" alt="Amélie Poulain" class="absolute top-0 left-0 w-full h-full object-cover">
127
+ <div class="french-flag">VF</div>
128
  </div>
129
+ <div class="p-3">
130
+ <h3 class="font-bold text-sm truncate">Amélie Poulain</h3>
131
+ <div class="flex justify-between items-center mt-1">
132
+ <span class="text-yellow-400 text-xs">★ 8.3</span>
133
+ <span class="text-gray-400 text-xs">2001</span>
134
  </div>
135
  </div>
136
  </div>
137
 
138
+ <!-- Film 3 - La Haine (VO) -->
139
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('La Haine (VO)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film culte de Mathieu Kassovitz avec Vincent Cassel.')">
140
+ <div class="relative pt-[150%] bg-gray-700">
141
+ <img src="https://image.tmdb.org/t/p/w500/3Z2OL8VMFm8Qbv6oQfqXr6QHlLz.jpg" alt="La Haine" class="absolute top-0 left-0 w-full h-full object-cover">
142
+ <div class="french-flag">VO</div>
143
  </div>
144
+ <div class="p-3">
145
+ <h3 class="font-bold text-sm truncate">La Haine</h3>
146
+ <div class="flex justify-between items-center mt-1">
147
+ <span class="text-yellow-400 text-xs">★ 8.1</span>
148
+ <span class="text-gray-400 text-xs">1995</span>
149
  </div>
150
  </div>
151
  </div>
152
 
153
+ <!-- Film 4 - Léon (VF) -->
154
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Léon (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film d\'action avec Jean Reno et Natalie Portman.')">
155
+ <div class="relative pt-[150%] bg-gray-700">
156
+ <img src="https://image.tmdb.org/t/p/w500/2yXVoq0dL4aStvHhvU0CNQkQZhu.jpg" alt="Léon" class="absolute top-0 left-0 w-full h-full object-cover">
157
+ <div class="french-flag">VF</div>
158
  </div>
159
+ <div class="p-3">
160
+ <h3 class="font-bold text-sm truncate">Léon</h3>
161
+ <div class="flex justify-between items-center mt-1">
162
+ <span class="text-yellow-400 text-xs">★ 8.5</span>
163
+ <span class="text-gray-400 text-xs">1994</span>
164
  </div>
165
  </div>
166
  </div>
167
 
168
+ <!-- Film 5 - Bienvenue chez les Ch'tis (VF) -->
169
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Bienvenue chez les Ch\'tis (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Kad Merad et Dany Boon.')">
170
+ <div class="relative pt-[150%] bg-gray-700">
171
+ <img src="https://image.tmdb.org/t/p/w500/3wQeJZkFegDhXxlQqQyP0qQ4T5d.jpg" alt="Bienvenue chez les Ch'tis" class="absolute top-0 left-0 w-full h-full object-cover">
172
+ <div class="french-flag">VF</div>
173
  </div>
174
+ <div class="p-3">
175
+ <h3 class="font-bold text-sm truncate">Bienvenue chez les Ch'tis</h3>
176
+ <div class="flex justify-between items-center mt-1">
177
+ <span class="text-yellow-400 text-xs">★ 7.1</span>
178
+ <span class="text-gray-400 text-xs">2008</span>
179
  </div>
180
  </div>
181
  </div>
182
 
183
+ <!-- Film 6 - Le Dîner de Cons (VF) -->
184
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Dîner de Cons (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Thierry Lhermitte et Jacques Villeret.')">
185
+ <div class="relative pt-[150%] bg-gray-700">
186
+ <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Dîner de Cons" class="absolute top-0 left-0 w-full h-full object-cover">
187
+ <div class="french-flag">VF</div>
188
  </div>
189
+ <div class="p-3">
190
+ <h3 class="font-bold text-sm truncate">Le Dîner de Cons</h3>
191
+ <div class="flex justify-between items-center mt-1">
192
+ <span class="text-yellow-400 text-xs">★ 7.7</span>
193
+ <span class="text-gray-400 text-xs">1998</span>
194
  </div>
195
  </div>
196
  </div>
197
 
198
+ <!-- Film 7 - Astérix et Obélix: Mission Cléopâtre (VF) -->
199
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Astérix et Obélix: Mission Cléopâtre (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Gérard Depardieu et Christian Clavier.')">
200
+ <div class="relative pt-[150%] bg-gray-700">
201
+ <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Astérix et Obélix" class="absolute top-0 left-0 w-full h-full object-cover">
202
+ <div class="french-flag">VF</div>
203
  </div>
204
+ <div class="p-3">
205
+ <h3 class="font-bold text-sm truncate">Astérix et Obélix</h3>
206
+ <div class="flex justify-between items-center mt-1">
207
+ <span class="text-yellow-400 text-xs">★ 7.2</span>
208
+ <span class="text-gray-400 text-xs">2002</span>
209
  </div>
210
  </div>
211
  </div>
212
 
213
+ <!-- Film 8 - Les Visiteurs (VF) -->
214
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Les Visiteurs (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française avec Jean Reno et Christian Clavier.')">
215
+ <div class="relative pt-[150%] bg-gray-700">
216
+ <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Les Visiteurs" class="absolute top-0 left-0 w-full h-full object-cover">
217
+ <div class="french-flag">VF</div>
218
  </div>
219
+ <div class="p-3">
220
+ <h3 class="font-bold text-sm truncate">Les Visiteurs</h3>
221
+ <div class="flex justify-between items-center mt-1">
222
+ <span class="text-yellow-400 text-xs">★ 7.1</span>
223
+ <span class="text-gray-400 text-xs">1993</span>
224
  </div>
225
  </div>
226
  </div>
227
 
228
+ <!-- Film 9 - Le Pacte des Loups (VF) -->
229
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Pacte des Loups (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Film fantastique français avec Samuel Le Bihan et Vincent Cassel.')">
230
+ <div class="relative pt-[150%] bg-gray-700">
231
+ <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Pacte des Loups" class="absolute top-0 left-0 w-full h-full object-cover">
232
+ <div class="french-flag">VF</div>
233
  </div>
234
+ <div class="p-3">
235
+ <h3 class="font-bold text-sm truncate">Le Pacte des Loups</h3>
236
+ <div class="flex justify-between items-center mt-1">
237
+ <span class="text-yellow-400 text-xs">★ 7.0</span>
238
+ <span class="text-gray-400 text-xs">2001</span>
239
  </div>
240
  </div>
241
  </div>
242
 
243
+ <!-- Film 10 - Le Prénom (VF) -->
244
+ <div class="channel-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer relative" onclick="playStream('Le Prénom (VF)', 'https://ok.ru/videoembed/3599280620339?autoplay=1', 'Comédie française adaptée de la pièce de théâtre.')">
245
+ <div class="relative pt-[150%] bg-gray-700">
246
+ <img src="https://image.tmdb.org/t/p/w500/5JGV9q4lK6Qj5q7cZQvXjZJZJZJ.jpg" alt="Le Prénom" class="absolute top-0 left-0 w-full h-full object-cover">
247
+ <div class="french-flag">VF</div>
248
  </div>
249
+ <div class="p-3">
250
+ <h3 class="font-bold text-sm truncate">Le Prénom</h3>
251
+ <div class="flex justify-between items-center mt-1">
252
+ <span class="text-yellow-400 text-xs">★ 7.3</span>
253
+ <span class="text-gray-400 text-xs">2012</span>
254
  </div>
255
  </div>
256
  </div>
257
  </div>
258
  </section>
259
 
260
+ <!-- Free Platforms Section -->
261
+ <section id="plateformes" class="mb-12">
262
+ <h2 class="text-2xl font-bold mb-6">Plateformes de Films Français Gratuits</h2>
 
 
 
 
 
 
 
 
 
263
 
264
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
265
+ <!-- France TV -->
266
+ <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
267
+ <div class="flex items-center mb-4">
268
+ <div class="bg-blue-600 p-3 rounded-lg mr-4">
 
 
 
 
 
 
 
 
 
 
 
 
269
  <i class="fas fa-tv text-2xl"></i>
270
  </div>
271
+ <h3 class="font-bold text-lg">France TV</h3>
 
 
 
 
 
 
272
  </div>
273
+ <p class="text-gray-400 mb-4 flex-1">Plateforme officielle de France Télévisions avec des films français gratuits en streaming.</p>
274
+ <div class="flex space-x-3">
275
+ <a href="https://www.france.tv/" target="_blank" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium text-center">
276
+ <i class="fas fa-external-link-alt mr-2"></i> Accéder
277
+ </a>
278
+ <button onclick="playStream('France TV', 'https://www.france.tv/', 'Plateforme officielle de France Télévisions')" class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded font-medium">
279
+ <i class="fas fa-play mr-2"></i> Regarder
280
+ </button>
 
 
 
 
 
281
  </div>
282
+ </div>
283
+
284
+ <!-- ARTE -->
285
+ <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
286
+ <div class="flex items-center mb-4">
287
+ <div class="bg-red-600 p-3 rounded-lg mr-4">
288
  <i class="fas fa-film text-2xl"></i>
289
  </div>
290
+ <h3 class="font-bold text-lg">ARTE Cinéma</h3>
 
 
 
 
 
 
291
  </div>
292
+ <p class="text-gray-400 mb-4 flex-1">Sélection de films d'auteur et classiques du cinéma français et européen.</p>
293
+ <div class="flex space-x-3">
294
+ <a href="https://www.arte.tv/fr/videos/cinema/" target="_blank" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium text-center">
295
+ <i class="fas fa-external-link-alt mr-2"></i> Accéder
296
+ </a>
297
+ <button onclick="playStream('ARTE Cinéma', 'https://www.arte.tv/fr/videos/cinema/', 'Films d\'auteur et classiques du cinéma')" class="flex-1 px-4 py-2 bg-red-600 hover:bg-red-700 rounded font-medium">
298
+ <i class="fas fa-play mr-2"></i> Regarder
299
+ </button>
 
 
 
 
 
300
  </div>
301
  </div>
302
+
303
+ <!-- Okoo -->
304
+ <div class="bg-gray-800 rounded-lg p-6 flex flex-col">
305
+ <div class="flex items-center mb-4">
306
+ <div class="bg-purple-500 p-3 rounded-lg mr-4">
307
+ <i class="fas fa-child text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
308
  </div>
309
+ <h3 class="font-bold text-lg">Okoo (France TV)</h3>
 
 
 
 
310
  </div>
311
+ <p class="text-gray-400 mb-4 flex-1">Plateforme jeunesse de France Télévisions avec des films et dessins animés français.</p>
312
+ <div class="flex space-x-3">
313
+ <a href="https://www.okoofrance.tv/" target="_blank" class="flex-1 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded font-medium text-center">
314
+ <i class="fas fa-external-link-alt mr-2"></i> Accéder
315
+ </a>
316
+ <button onclick="playStream('Okoo', 'https://www.okoofrance.tv/', 'Plateforme jeunesse de France Télévisions')" class="flex-1 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded font-medium">
317
+ <i class="fas fa-play mr-2"></i> Regarder
318
+ </button>
 
 
319
  </div>
320
  </div>
321
  </div>
 
327
  <div class="container mx-auto px-4">
328
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
329
  <div>
330
+ <h3 class="text-lg font-bold mb-4">Films Français Gratuits</h3>
331
  <p class="text-gray-400 text-sm">
332
+ Votre plateforme pour découvrir les meilleurs films français en streaming gratuit.
333
+ Tous les liens pointent vers des plateformes légales et officielles.
334
  </p>
335
  </div>
336
 
337
  <div>
338
+ <h3 class="text-lg font-bold mb-4">Aide & Support</h3>
339
  <ul class="space-y-2">
340
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">FAQ</a></li>
341
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Problèmes de lecture</a></li>
342
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Nous contacter</a></li>
 
343
  </ul>
344
  </div>
345
 
346
  <div>
347
+ <h3 class="text-lg font-bold mb-4">Légal</h3>
348
  <ul class="space-y-2">
349
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Mentions légales</a></li>
350
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Conditions d'utilisation</a></li>
351
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 text-sm">Politique de confidentialité</a></li>
 
 
 
352
  </ul>
353
  </div>
354
  </div>
355
 
356
  <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
357
+ <p>© 2023 Films Français Gratuits. Ce site ne propose pas de contenu piraté, seulement des liens vers des plateformes de streaming légales et gratuites.</p>
358
  </div>
359
  </div>
360
  </footer>
361
 
362
  <script>
363
+ // Play a stream
364
+ function playStream(title, url, description) {
365
+ document.getElementById('playerTitle').textContent = title;
366
+ document.getElementById('playerDescription').textContent = description;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
367
 
368
+ // For OK.ru and other platforms
369
+ document.getElementById('streamPlayer').src = url;
370
 
371
+ // Show player section
372
+ document.getElementById('playerSection').classList.remove('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
 
374
+ // Scroll to player
375
+ document.getElementById('playerSection').scrollIntoView({ behavior: 'smooth' });
376
+ }
377
+
378
+ // Hide player
379
+ function hidePlayer() {
380
+ document.getElementById('playerSection').classList.add('hidden');
381
+ document.getElementById('streamPlayer').src = '';
382
+ }
383
+
384
+ // Toggle fullscreen
385
+ function toggleFullscreen() {
386
+ const player = document.getElementById('streamPlayer');
 
 
 
387
 
388
+ if (!document.fullscreenElement) {
389
+ if (player.requestFullscreen) {
390
+ player.requestFullscreen();
391
+ } else if (player.webkitRequestFullscreen) {
392
+ player.webkitRequestFullscreen();
393
+ } else if (player.msRequestFullscreen) {
394
+ player.msRequestFullscreen();
395
+ }
396
+ } else {
397
+ if (document.exitFullscreen) {
398
+ document.exitFullscreen();
399
+ } else if (document.webkitExitFullscreen) {
400
+ document.webkitExitFullscreen();
401
+ } else if (document.msExitFullscreen) {
402
+ document.msExitFullscreen();
403
+ }
404
+ }
405
+ }
406
+
407
+ // Share stream
408
+ function shareStream() {
409
+ const title = document.getElementById('playerTitle').textContent;
410
+ const url = document.getElementById('streamPlayer').src;
411
 
412
+ if (navigator.share) {
413
+ navigator.share({
414
+ title: title,
415
+ text: 'Regarde ce film français gratuit: ' + title,
416
+ url: url
417
+ }).catch(err => {
418
+ console.log('Error sharing:', err);
419
+ fallbackShare(title, url);
420
+ });
421
+ } else {
422
+ fallbackShare(title, url);
423
+ }
424
  }
425
 
426
+ // Fallback for browsers that don't support Web Share API
427
+ function fallbackShare(title, url) {
428
+ const shareUrl = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent('Regarde ce film français gratuit: ' + url)}`;
429
+ window.location.href = shareUrl;
430
  }
431
 
432
  // Search functionality
 
437
  });
438
 
439
  // Make functions available globally
440
+ window.playStream = playStream;
441
+ window.hidePlayer = hidePlayer;
442
+ window.toggleFullscreen = toggleFullscreen;
443
+ window.shareStream = shareStream;
444
  </script>
445
  <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-base" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
446
  </html>
prompts.txt CHANGED
@@ -1,3 +1,6 @@
1
  creer moi une base de données des film complet avec leur liens url en automatique a regarder de suite avec leurs different serveur de film
2
  je veux acces gratuite à Regarder sur HBO Max Disponible en HD Regarder Regarder sur Apple TV
3
- je veux dautre serveur
 
 
 
 
1
  creer moi une base de données des film complet avec leur liens url en automatique a regarder de suite avec leurs different serveur de film
2
  je veux acces gratuite à Regarder sur HBO Max Disponible en HD Regarder Regarder sur Apple TV
3
+ je veux dautre serveur
4
+ je veux acces a toutes les chaine et serveur gratuite en automatique
5
+ ajouter les url des film en autoplay
6
+ je veux regarder les film en vrai en en francais en autoplay