Hugging Face's logo

Spaces:
docto41
/
serveur
Running

App Files Community
docto41 commited on
Commit
c2be4be
·
verified ·
1 Parent(s): c44fc48

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +504 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Serveur
3
- emoji: 📈
4
- colorFrom: red
5
- colorTo: gray
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: serveur
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,504 @@
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éBase - Base de données de films</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
+ .movie-card:hover .movie-poster {
11
+ transform: scale(1.05);
12
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
13
+ }
14
+
15
+ .movie-poster {
16
+ transition: all 0.3s ease;
17
+ }
18
+
19
+ .streaming-option:hover {
20
+ transform: translateY(-5px);
21
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
22
+ }
23
+
24
+ .streaming-option {
25
+ transition: all 0.2s ease;
26
+ }
27
+
28
+ .loading-spinner {
29
+ animation: spin 1s linear infinite;
30
+ }
31
+
32
+ @keyframes spin {
33
+ 0% { transform: rotate(0deg); }
34
+ 100% { transform: rotate(360deg); }
35
+ }
36
+
37
+ .search-bar:focus {
38
+ outline: none;
39
+ box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-900 text-gray-100 min-h-screen">
44
+ <!-- Header -->
45
+ <header class="bg-gray-800 shadow-lg">
46
+ <div class="container mx-auto px-4 py-6">
47
+ <div class="flex justify-between items-center">
48
+ <div class="flex items-center space-x-2">
49
+ <i class="fas fa-film text-3xl text-red-500"></i>
50
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-red-500 to-purple-600 bg-clip-text text-transparent">CinéBase</h1>
51
+ </div>
52
+ <div class="relative w-1/3">
53
+ <input type="text" placeholder="Rechercher un film..." class="search-bar w-full px-4 py-2 rounded-full bg-gray-700 text-white focus:bg-gray-600 transition">
54
+ <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
55
+ <i class="fas fa-search"></i>
56
+ </button>
57
+ </div>
58
+ <nav>
59
+ <ul class="flex space-x-6">
60
+ <li><a href="#" class="hover:text-red-400 transition">Accueil</a></li>
61
+ <li><a href="#" class="hover:text-red-400 transition">Nouveautés</a></li>
62
+ <li><a href="#" class="hover:text-red-400 transition">Catégories</a></li>
63
+ </ul>
64
+ </nav>
65
+ </div>
66
+ </div>
67
+ </header>
68
+
69
+ <!-- Main Content -->
70
+ <main class="container mx-auto px-4 py-8">
71
+ <!-- Featured Movie -->
72
+ <section class="mb-12 relative rounded-xl overflow-hidden">
73
+ <div class="absolute inset-0 bg-gradient-to-r from-gray-900 to-transparent z-10"></div>
74
+ <img src="https://image.tmdb.org/t/p/original/9dKCd55IuTT5QRs989m9Qlb7d2B.jpg" alt="Film à l'affiche" class="w-full h-96 object-cover">
75
+ <div class="absolute bottom-0 left-0 z-20 p-8 w-1/2">
76
+ <h2 class="text-4xl font-bold mb-2">Dune: Partie Deux</h2>
77
+ <div class="flex items-center mb-4">
78
+ <span class="bg-yellow-400 text-yellow-900 px-2 py-1 rounded text-sm font-bold mr-3">4.8/5</span>
79
+ <span class="text-gray-300">2024 • 2h46m • Science-Fiction</span>
80
+ </div>
81
+ <p class="text-gray-300 mb-6">Paul Atreides s'unit avec Chani et les Fremen pour se venger de ceux qui ont détruit sa famille. Alors qu'il affronte un choix entre l'amour de sa vie et le destin de l'univers, il doit empêcher un terrible futur que lui seul peut prévoir.</p>
82
+ <div class="flex space-x-4">
83
+ <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
84
+ <i class="fas fa-play mr-2"></i> Regarder
85
+ </button>
86
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
87
+ + Ma liste
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </section>
92
+
93
+ <!-- Movie Categories -->
94
+ <section class="mb-12">
95
+ <div class="flex justify-between items-center mb-6">
96
+ <h2 class="text-2xl font-bold">Tendances du moment</h2>
97
+ <a href="#" class="text-red-400 hover:text-red-300 flex items-center">
98
+ Voir plus <i class="fas fa-chevron-right ml-1"></i>
99
+ </a>
100
+ </div>
101
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
102
+ <!-- Movie Card 1 -->
103
+ <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer">
104
+ <div class="relative overflow-hidden">
105
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ7N5vi.jpg" alt="Oppenheimer" class="movie-poster w-full h-64 object-cover">
106
+ <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-70 text-white px-2 py-1 rounded text-xs font-bold">
107
+ 4.7/5
108
+ </div>
109
+ </div>
110
+ <div class="p-4">
111
+ <h3 class="font-semibold mb-1">Oppenheimer</h3>
112
+ <div class="flex justify-between text-sm text-gray-400">
113
+ <span>2023</span>
114
+ <span>3h</span>
115
+ </div>
116
+ <div class="mt-3 flex justify-between">
117
+ <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
118
+ <i class="fas fa-play mr-1"></i> Regarder
119
+ </button>
120
+ <button class="text-gray-400 hover:text-white">
121
+ <i class="far fa-bookmark"></i>
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Movie Card 2 -->
128
+ <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer">
129
+ <div class="relative overflow-hidden">
130
+ <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" alt="The Batman" class="movie-poster w-full h-64 object-cover">
131
+ <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-70 text-white px-2 py-1 rounded text-xs font-bold">
132
+ 4.3/5
133
+ </div>
134
+ </div>
135
+ <div class="p-4">
136
+ <h3 class="font-semibold mb-1">The Batman</h3>
137
+ <div class="flex justify-between text-sm text-gray-400">
138
+ <span>2022</span>
139
+ <span>2h56m</span>
140
+ </div>
141
+ <div class="mt-3 flex justify-between">
142
+ <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
143
+ <i class="fas fa-play mr-1"></i> Regarder
144
+ </button>
145
+ <button class="text-gray-400 hover:text-white">
146
+ <i class="far fa-bookmark"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Movie Card 3 -->
153
+ <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer">
154
+ <div class="relative overflow-hidden">
155
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWRCeplujSFGkbtiKAVZ3rz.jpg" alt="Poor Things" class="movie-poster w-full h-64 object-cover">
156
+ <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-70 text-white px-2 py-1 rounded text-xs font-bold">
157
+ 4.2/5
158
+ </div>
159
+ </div>
160
+ <div class="p-4">
161
+ <h3 class="font-semibold mb-1">Poor Things</h3>
162
+ <div class="flex justify-between text-sm text-gray-400">
163
+ <span>2023</span>
164
+ <span>2h21m</span>
165
+ </div>
166
+ <div class="mt-3 flex justify-between">
167
+ <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
168
+ <i class="fas fa-play mr-1"></i> Regarder
169
+ </button>
170
+ <button class="text-gray-400 hover:text-white">
171
+ <i class="far fa-bookmark"></i>
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Movie Card 4 -->
178
+ <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer">
179
+ <div class="relative overflow-hidden">
180
+ <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="Killers of the Flower Moon" class="movie-poster w-full h-64 object-cover">
181
+ <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-70 text-white px-2 py-1 rounded text-xs font-bold">
182
+ 4.0/5
183
+ </div>
184
+ </div>
185
+ <div class="p-4">
186
+ <h3 class="font-semibold mb-1">Killers of the Flower Moon</h3>
187
+ <div class="flex justify-between text-sm text-gray-400">
188
+ <span>2023</span>
189
+ <span>3h26m</span>
190
+ </div>
191
+ <div class="mt-3 flex justify-between">
192
+ <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
193
+ <i class="fas fa-play mr-1"></i> Regarder
194
+ </button>
195
+ <button class="text-gray-400 hover:text-white">
196
+ <i class="far fa-bookmark"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Movie Card 5 -->
203
+ <div class="movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer">
204
+ <div class="relative overflow-hidden">
205
+ <img src="https://image.tmdb.org/t/p/w500/1XDDXPXGiI8id7MrUxK36ke7gkX.jpg" alt="Barbie" class="movie-poster w-full h-64 object-cover">
206
+ <div class="absolute top-2 right-2 bg-gray-900 bg-opacity-70 text-white px-2 py-1 rounded text-xs font-bold">
207
+ 4.1/5
208
+ </div>
209
+ </div>
210
+ <div class="p-4">
211
+ <h3 class="font-semibold mb-1">Barbie</h3>
212
+ <div class="flex justify-between text-sm text-gray-400">
213
+ <span>2023</span>
214
+ <span>1h54m</span>
215
+ </div>
216
+ <div class="mt-3 flex justify-between">
217
+ <button class="text-red-400 hover:text-red-300 text-sm font-semibold">
218
+ <i class="fas fa-play mr-1"></i> Regarder
219
+ </button>
220
+ <button class="text-gray-400 hover:text-white">
221
+ <i class="far fa-bookmark"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Streaming Servers Section -->
230
+ <section class="mb-12 bg-gray-800 rounded-xl p-6">
231
+ <h2 class="text-2xl font-bold mb-6">Serveurs de streaming disponibles</h2>
232
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
233
+ <!-- Streaming Option 1 -->
234
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
235
+ <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center mb-3">
236
+ <i class="fas fa-play text-white text-2xl"></i>
237
+ </div>
238
+ <h3 class="font-semibold mb-1">Serveur Premium</h3>
239
+ <p class="text-xs text-gray-400 text-center">Qualité 4K • Français • Sous-titres</p>
240
+ <div class="mt-2 flex items-center text-green-400 text-sm">
241
+ <i class="fas fa-check-circle mr-1"></i> Disponible
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Streaming Option 2 -->
246
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
247
+ <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-3">
248
+ <i class="fas fa-server text-white text-2xl"></i>
249
+ </div>
250
+ <h3 class="font-semibold mb-1">Serveur Rapide</h3>
251
+ <p class="text-xs text-gray-400 text-center">Full HD • Multi-langues</p>
252
+ <div class="mt-2 flex items-center text-green-400 text-sm">
253
+ <i class="fas fa-check-circle mr-1"></i> Disponible
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Streaming Option 3 -->
258
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
259
+ <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mb-3">
260
+ <i class="fas fa-globe text-white text-2xl"></i>
261
+ </div>
262
+ <h3 class="font-semibold mb-1">Serveur International</h3>
263
+ <p class="text-xs text-gray-400 text-center">HD • 15 langues disponibles</p>
264
+ <div class="mt-2 flex items-center text-green-400 text-sm">
265
+ <i class="fas fa-check-circle mr-1"></i> Disponible
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Streaming Option 4 -->
270
+ <div class="streaming-option bg-gray-700 rounded-lg p-4 flex flex-col items-center cursor-pointer hover:bg-gray-600">
271
+ <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mb-3">
272
+ <i class="fas fa-mobile-alt text-white text-2xl"></i>
273
+ </div>
274
+ <h3 class="font-semibold mb-1">Mobile Optimisé</h3>
275
+ <p class="text-xs text-gray-400 text-center">Adapté pour smartphones</p>
276
+ <div class="mt-2 flex items-center text-green-400 text-sm">
277
+ <i class="fas fa-check-circle mr-1"></i> Disponible
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </section>
282
+
283
+ <!-- Movie Details Modal (Hidden by default) -->
284
+ <div id="movieModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden flex items-center justify-center p-4">
285
+ <div class="bg-gray-800 rounded-xl max-w-4xl w-full max-h-screen overflow-y-auto">
286
+ <div class="relative">
287
+ <button id="closeModal" class="absolute top-4 right-4 bg-gray-900 bg-opacity-50 text-white rounded-full w-10 h-10 flex items-center justify-center hover:bg-red-600">
288
+ <i class="fas fa-times"></i>
289
+ </button>
290
+ <img id="modalPoster" src="" alt="Movie Poster" class="w-full h-64 md:h-80 object-cover rounded-t-xl">
291
+ </div>
292
+ <div class="p-6">
293
+ <div class="flex flex-col md:flex-row gap-6">
294
+ <div class="md:w-1/3">
295
+ <img id="modalThumbnail" src="" alt="Movie Thumbnail" class="w-full rounded-lg shadow-lg">
296
+ </div>
297
+ <div class="md:w-2/3">
298
+ <h2 id="modalTitle" class="text-3xl font-bold mb-2"></h2>
299
+ <div class="flex items-center mb-4">
300
+ <span id="modalRating" class="bg-yellow-400 text-yellow-900 px-2 py-1 rounded text-sm font-bold mr-3"></span>
301
+ <span id="modalYear" class="text-gray-300 mr-3"></span>
302
+ <span id="modalDuration" class="text-gray-300 mr-3"></span>
303
+ <span id="modalGenre" class="text-gray-300"></span>
304
+ </div>
305
+ <p id="modalDescription" class="text-gray-300 mb-6"></p>
306
+
307
+ <div class="mb-6">
308
+ <h3 class="text-xl font-semibold mb-3">Serveurs disponibles</h3>
309
+ <div class="flex flex-wrap gap-3">
310
+ <button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
311
+ <i class="fas fa-play mr-2"></i> Serveur 1 (HD)
312
+ </button>
313
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
314
+ <i class="fas fa-play mr-2"></i> Serveur 2 (4K)
315
+ </button>
316
+ <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center">
317
+ <i class="fas fa-play mr-2"></i> Serveur 3 (FR)
318
+ </button>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="flex space-x-4">
323
+ <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-full font-semibold flex items-center">
324
+ <i class="fas fa-play mr-2"></i> Regarder maintenant
325
+ </button>
326
+ <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full font-semibold">
327
+ + Ma liste
328
+ </button>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </main>
336
+
337
+ <!-- Footer -->
338
+ <footer class="bg-gray-800 py-8">
339
+ <div class="container mx-auto px-4">
340
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
341
+ <div>
342
+ <h3 class="text-xl font-bold mb-4 flex items-center">
343
+ <i class="fas fa-film text-red-500 mr-2"></i> CinéBase
344
+ </h3>
345
+ <p class="text-gray-400">La meilleure base de données de films avec des serveurs de streaming automatiques.</p>
346
+ </div>
347
+ <div>
348
+ <h4 class="font-semibold mb-4">Navigation</h4>
349
+ <ul class="space-y-2">
350
+ <li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li>
351
+ <li><a href="#" class="text-gray-400 hover:text-white">Films</a></li>
352
+ <li><a href="#" class="text-gray-400 hover:text-white">Séries</a></li>
353
+ <li><a href="#" class="text-gray-400 hover:text-white">Nouveautés</a></li>
354
+ </ul>
355
+ </div>
356
+ <div>
357
+ <h4 class="font-semibold mb-4">Légal</h4>
358
+ <ul class="space-y-2">
359
+ <li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li>
360
+ <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li>
361
+ <li><a href="#" class="text-gray-400 hover:text-white">DMCA</a></li>
362
+ </ul>
363
+ </div>
364
+ <div>
365
+ <h4 class="font-semibold mb-4">Contact</h4>
366
+ <ul class="space-y-2">
367
+ <li class="text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li>
368
+ <li class="text-gray-400"><i class="fas fa-globe mr-2"></i> www.cinebase.com</li>
369
+ </ul>
370
+ <div class="mt-4 flex space-x-4">
371
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
372
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
373
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
374
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">
379
+ <p>© 2023 CinéBase. Tous droits réservés.</p>
380
+ </div>
381
+ </div>
382
+ </footer>
383
+
384
+ <script>
385
+ // Sample movie data
386
+ const movies = [
387
+ {
388
+ id: 1,
389
+ title: "Oppenheimer",
390
+ year: "2023",
391
+ duration: "3h",
392
+ genre: "Drame, Histoire",
393
+ rating: "4.7/5",
394
+ description: "L'histoire du physicien J. Robert Oppenheimer et de son rôle dans le développement de la bombe atomique pendant la Seconde Guerre mondiale.",
395
+ poster: "https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ7N5vi.jpg",
396
+ thumbnail: "https://image.tmdb.org/t/p/w300/1pdfLvkbY9ohJlCjQHlyCZ7N5vi.jpg"
397
+ },
398
+ {
399
+ id: 2,
400
+ title: "The Batman",
401
+ year: "2022",
402
+ duration: "2h56m",
403
+ genre: "Action, Crime",
404
+ rating: "4.3/5",
405
+ description: "Batman enquête sur la piste d'un tueur en série qui s'en prend à l'élite corrompue de Gotham. Il découvre la corruption en remontant la piste et se demande quelle est la part d'implication de sa propre famille.",
406
+ poster: "https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg",
407
+ thumbnail: "https://image.tmdb.org/t/p/w300/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg"
408
+ },
409
+ {
410
+ id: 3,
411
+ title: "Poor Things",
412
+ year: "2023",
413
+ duration: "2h21m",
414
+ genre: "Science-Fiction, Comédie",
415
+ rating: "4.2/5",
416
+ description: "L'histoire de la résurrection fantastique de Bella Baxter, une jeune femme ramenée à la vie par le brillant et peu orthodoxe Dr. Godwin Baxter.",
417
+ poster: "https://image.tmdb.org/t/p/w500/8Vt6mWRCeplujSFGkbtiKAVZ3rz.jpg",
418
+ thumbnail: "https://image.tmdb.org/t/p/w300/8Vt6mWRCeplujSFGkbtiKAVZ3rz.jpg"
419
+ },
420
+ {
421
+ id: 4,
422
+ title: "Killers of the Flower Moon",
423
+ year: "2023",
424
+ duration: "3h26m",
425
+ genre: "Drame, Crime",
426
+ rating: "4.0/5",
427
+ description: "Dans les années 1920, des membres de la tribu Osage sont assassinés après la découverte de pétrole sous leurs terres, ce qui attire l'attention du FBI nouvellement créé.",
428
+ poster: "https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg",
429
+ thumbnail: "https://image.tmdb.org/t/p/w300/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg"
430
+ },
431
+ {
432
+ id: 5,
433
+ title: "Barbie",
434
+ year: "2023",
435
+ duration: "1h54m",
436
+ genre: "Comédie, Aventure",
437
+ rating: "4.1/5",
438
+ description: "Barbie vit dans un monde parfait jusqu'à ce qu'elle ait une crise existentielle qui la pousse à partir à la recherche du vrai bonheur dans le monde réel.",
439
+ poster: "https://image.tmdb.org/t/p/w500/1XDDXPXGiI8id7MrUxK36ke7gkX.jpg",
440
+ thumbnail: "https://image.tmdb.org/t/p/w300/1XDDXPXGiI8id7MrUxK36ke7gkX.jpg"
441
+ }
442
+ ];
443
+
444
+ // Function to open movie modal
445
+ function openMovieModal(movieId) {
446
+ const movie = movies.find(m => m.id === movieId);
447
+ if (movie) {
448
+ document.getElementById('modalTitle').textContent = movie.title;
449
+ document.getElementById('modalRating').textContent = movie.rating;
450
+ document.getElementById('modalYear').textContent = movie.year;
451
+ document.getElementById('modalDuration').textContent = movie.duration;
452
+ document.getElementById('modalGenre').textContent = movie.genre;
453
+ document.getElementById('modalDescription').textContent = movie.description;
454
+ document.getElementById('modalPoster').src = movie.poster;
455
+ document.getElementById('modalThumbnail').src = movie.thumbnail;
456
+
457
+ document.getElementById('movieModal').classList.remove('hidden');
458
+ document.body.style.overflow = 'hidden';
459
+ }
460
+ }
461
+
462
+ // Function to close modal
463
+ function closeModal() {
464
+ document.getElementById('movieModal').classList.add('hidden');
465
+ document.body.style.overflow = 'auto';
466
+ }
467
+
468
+ // Event listeners
469
+ document.addEventListener('DOMContentLoaded', () => {
470
+ // Add click event to movie cards (simplified for demo)
471
+ document.querySelectorAll('.movie-card').forEach((card, index) => {
472
+ card.addEventListener('click', () => {
473
+ openMovieModal(index + 1);
474
+ });
475
+ });
476
+
477
+ // Close modal button
478
+ document.getElementById('closeModal').addEventListener('click', closeModal);
479
+
480
+ // Close modal when clicking outside
481
+ document.getElementById('movieModal').addEventListener('click', (e) => {
482
+ if (e.target === document.getElementById('movieModal')) {
483
+ closeModal();
484
+ }
485
+ });
486
+
487
+ // Simulate server selection
488
+ document.querySelectorAll('.streaming-option').forEach(option => {
489
+ option.addEventListener('click', () => {
490
+ // In a real app, this would connect to the selected server
491
+ alert('Connexion au serveur en cours...');
492
+ });
493
+ });
494
+ });
495
+
496
+ // Simulate search functionality
497
+ document.querySelector('.search-bar').addEventListener('input', (e) => {
498
+ const searchTerm = e.target.value.toLowerCase();
499
+ // In a real app, this would filter movies
500
+ console.log(`Recherche de: ${searchTerm}`);
501
+ });
502
+ </script>
503
+ <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/serveur" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
504
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ je veux un base de donné de film avec des serveur des film en automatique a