Hugging Face's logo

Spaces:
docto41
/
streamflix
Running

App Files Community
docto41 commited on
Commit
fa3d19a
·
verified ·
1 Parent(s): 03f6446

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +573 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Streamflix
3
- emoji: 🏃
4
- colorFrom: purple
5
- colorTo: yellow
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: streamflix
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,573 @@
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>StreamFlix - Films et séries illimités</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
+ .hero-gradient {
11
+ background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .film-card:hover .play-icon {
17
+ opacity: 1;
18
+ transform: translate(-50%, -50%) scale(1.1);
19
+ }
20
+
21
+ .autoplay-carousel {
22
+ animation: scroll 40s linear infinite;
23
+ }
24
+
25
+ @keyframes scroll {
26
+ 0% { transform: translateX(0); }
27
+ 100% { transform: translateX(-50%); }
28
+ }
29
+
30
+ .dropdown:hover .dropdown-menu {
31
+ display: block;
32
+ }
33
+
34
+ .autoplay-badge {
35
+ position: absolute;
36
+ top: 10px;
37
+ right: 10px;
38
+ background-color: rgba(0,0,0,0.7);
39
+ color: white;
40
+ padding: 2px 6px;
41
+ border-radius: 4px;
42
+ font-size: 12px;
43
+ display: flex;
44
+ align-items: center;
45
+ }
46
+
47
+ .video-container {
48
+ position: relative;
49
+ padding-bottom: 56.25%; /* 16:9 */
50
+ height: 0;
51
+ overflow: hidden;
52
+ }
53
+
54
+ .video-container iframe {
55
+ position: absolute;
56
+ top: 0;
57
+ left: 0;
58
+ width: 100%;
59
+ height: 100%;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-900 text-white">
64
+ <!-- Navigation -->
65
+ <nav class="bg-black bg-opacity-90 fixed w-full z-50">
66
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
67
+ <div class="flex items-center space-x-10">
68
+ <a href="#" class="text-red-600 font-bold text-3xl">STREAMFLIX</a>
69
+ <div class="hidden md:flex space-x-6">
70
+ <a href="#" class="hover:text-gray-300">Accueil</a>
71
+ <a href="#" class="hover:text-gray-300">Films</a>
72
+ <a href="#" class="hover:text-gray-300">Séries</a>
73
+ <a href="#" class="hover:text-gray-300">Nouveautés</a>
74
+ <a href="#" class="hover:text-gray-300">Ma liste</a>
75
+ </div>
76
+ </div>
77
+ <div class="flex items-center space-x-4">
78
+ <div class="relative dropdown">
79
+ <button class="flex items-center space-x-1">
80
+ <span>Français</span>
81
+ <i class="fas fa-chevron-down text-xs"></i>
82
+ </button>
83
+ <div class="dropdown-menu absolute hidden right-0 mt-2 w-40 bg-gray-800 rounded shadow-lg py-1">
84
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Français</a>
85
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">English</a>
86
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Español</a>
87
+ </div>
88
+ </div>
89
+ <button class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded">
90
+ S'identifier
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="hero-gradient min-h-screen flex items-center pt-16">
98
+ <div class="container mx-auto px-4">
99
+ <div class="max-w-2xl">
100
+ <h1 class="text-5xl font-bold mb-4">Films, séries et bien plus en illimité.</h1>
101
+ <p class="text-xl mb-6">Regardez vos films et séries préférés où que vous soyez. Sans publicité. Sans engagement.</p>
102
+ <div class="flex flex-col sm:flex-row gap-3">
103
+ <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg flex items-center justify-center">
104
+ <i class="fas fa-play mr-2"></i> Commencer
105
+ </button>
106
+ <button class="bg-gray-600 bg-opacity-70 hover:bg-opacity-90 px-6 py-3 rounded-lg flex items-center justify-center">
107
+ <i class="fas fa-info-circle mr-2"></i> Plus d'infos
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Features Section -->
115
+ <section class="py-16 bg-gray-900">
116
+ <div class="container mx-auto px-4">
117
+ <div class="flex flex-col md:flex-row items-center mb-16">
118
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-10">
119
+ <h2 class="text-3xl font-bold mb-4">Regardez sur votre TV</h2>
120
+ <p class="text-lg">StreamFlix est disponible sur smart TV, PlayStation, Xbox, Chromecast, Apple TV, lecteurs Blu-ray et bien plus.</p>
121
+ </div>
122
+ <div class="md:w-1/2 relative">
123
+ <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" alt="TV" class="w-full">
124
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
125
+ <video autoplay loop muted class="w-3/4">
126
+ <source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-0819.m4v" type="video/mp4">
127
+ </video>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="flex flex-col md:flex-row-reverse items-center mb-16">
133
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pl-10">
134
+ <h2 class="text-3xl font-bold mb-4">Téléchargez vos films pour les regarder hors ligne</h2>
135
+ <p class="text-lg">Enregistrez vos favoris facilement et ayez toujours quelque chose à regarder.</p>
136
+ </div>
137
+ <div class="md:w-1/2 relative">
138
+ <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg" alt="Mobile" class="w-full">
139
+ </div>
140
+ </div>
141
+
142
+ <div class="flex flex-col md:flex-row items-center">
143
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-10">
144
+ <h2 class="text-3xl font-bold mb-4">Où que vous soyez</h2>
145
+ <p class="text-lg">Regardez des films et séries en streaming sur votre téléphone, tablette, ordinateur et TV sans payer plus.</p>
146
+ </div>
147
+ <div class="md:w-1/2 relative">
148
+ <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile.png" alt="Devices" class="w-full">
149
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
150
+ <video autoplay loop muted class="w-3/4">
151
+ <source src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices.m4v" type="video/mp4">
152
+ </video>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </section>
158
+
159
+ <!-- Movies Section -->
160
+ <section class="py-12 bg-gray-900">
161
+ <div class="container mx-auto px-4">
162
+ <h2 class="text-2xl font-bold mb-6">Nouveautés 2024-2025 (Lecture automatique activée)</h2>
163
+ <div class="relative overflow-hidden">
164
+ <div class="autoplay-carousel whitespace-nowrap flex space-x-4">
165
+ <!-- These would be dynamically generated from your database -->
166
+ <div class="film-card inline-block w-64 relative group cursor-pointer">
167
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Film 1" class="w-full h-96 object-cover rounded-lg">
168
+ <div class="autoplay-badge">
169
+ <i class="fas fa-play-circle mr-1"></i> Auto
170
+ </div>
171
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
172
+ <i class="fas fa-play-circle text-5xl text-red-600"></i>
173
+ </div>
174
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
175
+ <h3 class="font-bold">Dune: Part Two</h3>
176
+ <div class="flex items-center text-sm text-gray-300">
177
+ <span>2024</span>
178
+ <span class="mx-2">•</span>
179
+ <span>2h 46m</span>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <div class="film-card inline-block w-64 relative group cursor-pointer">
184
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQHlyCZ8O7C4.jpg" alt="Film 2" class="w-full h-96 object-cover rounded-lg">
185
+ <div class="autoplay-badge">
186
+ <i class="fas fa-play-circle mr-1"></i> Auto
187
+ </div>
188
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
189
+ <i class="fas fa-play-circle text-5xl text-red-600"></i>
190
+ </div>
191
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
192
+ <h3 class="font-bold">Furiosa</h3>
193
+ <div class="flex items-center text-sm text-gray-300">
194
+ <span>2024</span>
195
+ <span class="mx-2">•</span>
196
+ <span>2h 30m</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="film-card inline-block w-64 relative group cursor-pointer">
201
+ <img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg" alt="Film 3" class="w-full h-96 object-cover rounded-lg">
202
+ <div class="autoplay-badge">
203
+ <i class="fas fa-play-circle mr-1"></i> Auto
204
+ </div>
205
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
206
+ <i class="fas fa-play-circle text-5xl text-red-600"></i>
207
+ </div>
208
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
209
+ <h3 class="font-bold">The Batman Part II</h3>
210
+ <div class="flex items-center text-sm text-gray-300">
211
+ <span>2025</span>
212
+ <span class="mx-2">•</span>
213
+ <span>2h 55m</span>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="film-card inline-block w-64 relative group cursor-pointer">
218
+ <img src="https://image.tmdb.org/t/p/w500/1X7Y7g7GqZ6KjZgQbbZ4JkZkZmZ.jpg" alt="Film 4" class="w-full h-96 object-cover rounded-lg">
219
+ <div class="autoplay-badge">
220
+ <i class="fas fa-play-circle mr-1"></i> Auto
221
+ </div>
222
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
223
+ <i class="fas fa-play-circle text-5xl text-red-600"></i>
224
+ </div>
225
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
226
+ <h3 class="font-bold">Deadpool & Wolverine</h3>
227
+ <div class="flex items-center text-sm text-gray-300">
228
+ <span>2024</span>
229
+ <span class="mx-2">•</span>
230
+ <span>2h 10m</span>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ <div class="film-card inline-block w-64 relative group cursor-pointer">
235
+ <img src="https://image.tmdb.org/t/p/w500/4uH7T0vOGQmVfZQZgYnxoMXzQmU.jpg" alt="Film 5" class="w-full h-96 object-cover rounded-lg">
236
+ <div class="autoplay-badge">
237
+ <i class="fas fa-play-circle mr-1"></i> Auto
238
+ </div>
239
+ <div class="play-icon absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition-all duration-300">
240
+ <i class="fas fa-play-circle text-5xl text-red-600"></i>
241
+ </div>
242
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
243
+ <h3 class="font-bold">Joker: Folie à Deux</h3>
244
+ <div class="flex items-center text-sm text-gray-300">
245
+ <span>2024</span>
246
+ <span class="mx-2">•</span>
247
+ <span>2h 30m</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ <!-- Repeat for more films -->
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Categories Section -->
258
+ <section class="py-12 bg-gray-900">
259
+ <div class="container mx-auto px-4">
260
+ <h2 class="text-2xl font-bold mb-6">Parcourir par genres</h2>
261
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
262
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
263
+ <i class="fas fa-heart text-3xl mb-2 text-red-500"></i>
264
+ <h3 class="font-medium">Romance</h3>
265
+ </div>
266
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
267
+ <i class="fas fa-laugh-beam text-3xl mb-2 text-yellow-500"></i>
268
+ <h3 class="font-medium">Comédie</h3>
269
+ </div>
270
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
271
+ <i class="fas fa-ghost text-3xl mb-2 text-purple-500"></i>
272
+ <h3 class="font-medium">Horreur</h3>
273
+ </div>
274
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
275
+ <i class="fas fa-space-shuttle text-3xl mb-2 text-blue-500"></i>
276
+ <h3 class="font-medium">Science-fiction</h3>
277
+ </div>
278
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
279
+ <i class="fas fa-mask text-3xl mb-2 text-green-500"></i>
280
+ <h3 class="font-medium">Action</h3>
281
+ </div>
282
+ <div class="bg-gray-800 rounded-lg p-6 text-center hover:bg-gray-700 transition cursor-pointer">
283
+ <i class="fas fa-question text-3xl mb-2 text-indigo-500"></i>
284
+ <h3 class="font-medium">Mystère</h3>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Autoplay Settings Section -->
291
+ <section class="py-12 bg-gray-800">
292
+ <div class="container mx-auto px-4 max-w-4xl">
293
+ <h2 class="text-2xl font-bold mb-6">Paramètres de lecture automatique</h2>
294
+ <div class="bg-gray-900 rounded-lg p-6">
295
+ <div class="flex items-center justify-between mb-4">
296
+ <div>
297
+ <h3 class="font-medium">Activer la lecture automatique</h3>
298
+ <p class="text-sm text-gray-400">Les épisodes suivants et les films démarrent automatiquement</p>
299
+ </div>
300
+ <label class="relative inline-flex items-center cursor-pointer">
301
+ <input type="checkbox" checked class="sr-only peer" id="autoplay-toggle">
302
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
303
+ </label>
304
+ </div>
305
+
306
+ <div class="flex items-center justify-between mb-4">
307
+ <div>
308
+ <h3 class="font-medium">Lecture automatique des prévisualisations</h3>
309
+ <p class="text-sm text-gray-400">Les prévisualisations se jouent automatiquement sur la page d'accueil</p>
310
+ </div>
311
+ <label class="relative inline-flex items-center cursor-pointer">
312
+ <input type="checkbox" checked class="sr-only peer" id="preview-autoplay-toggle">
313
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
314
+ </label>
315
+ </div>
316
+
317
+ <div class="flex items-center justify-between">
318
+ <div>
319
+ <h3 class="font-medium">Lecture automatique des épisodes suivants</h3>
320
+ <p class="text-sm text-gray-400">L'épisode suivant démarre automatiquement après le précédent</p>
321
+ </div>
322
+ <label class="relative inline-flex items-center cursor-pointer">
323
+ <input type="checkbox" checked class="sr-only peer" id="next-episode-toggle">
324
+ <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
325
+ </label>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- FAQ Section -->
332
+ <section class="py-16 bg-gray-900">
333
+ <div class="container mx-auto px-4 max-w-4xl">
334
+ <h2 class="text-3xl font-bold mb-8 text-center">Foire aux questions</h2>
335
+ <div class="space-y-4">
336
+ <div class="border border-gray-700 rounded-lg overflow-hidden">
337
+ <button class="w-full p-4 text-left bg-gray-800 hover:bg-gray-700 flex justify-between items-center">
338
+ <span>Comment fonctionne la lecture automatique ?</span>
339
+ <i class="fas fa-plus"></i>
340
+ </button>
341
+ <div class="hidden p-4 bg-gray-800">
342
+ <p>La lecture automatique permet de regarder vos films et séries sans interruption. Après un film ou un épisode, le suivant démarre automatiquement. Vous pouvez ajuster ces paramètres dans la section "Paramètres de lecture".</p>
343
+ </div>
344
+ </div>
345
+ <div class="border border-gray-700 rounded-lg overflow-hidden">
346
+ <button class="w-full p-4 text-left bg-gray-800 hover:bg-gray-700 flex justify-between items-center">
347
+ <span>Puis-je désactiver la lecture automatique ?</span>
348
+ <i class="fas fa-plus"></i>
349
+ </button>
350
+ <div class="hidden p-4 bg-gray-800">
351
+ <p>Oui, vous pouvez désactiver la lecture automatique à tout moment dans les paramètres de votre compte. Vous pouvez également la désactiver temporairement pendant la lecture d'un film ou d'un épisode.</p>
352
+ </div>
353
+ </div>
354
+ <div class="border border-gray-700 rounded-lg overflow-hidden">
355
+ <button class="w-full p-4 text-left bg-gray-800 hover:bg-gray-700 flex justify-between items-center">
356
+ <span>La lecture automatique consomme-t-elle plus de données ?</span>
357
+ <i class="fas fa-plus"></i>
358
+ </button>
359
+ <div class="hidden p-4 bg-gray-800">
360
+ <p>La lecture automatique utilise la même quantité de données que la lecture manuelle. Cependant, comme elle passe automatiquement au contenu suivant, elle peut entraîner une consommation continue de données si vous ne l'interrompez pas.</p>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ <div class="mt-8 text-center">
365
+ <p class="mb-4">Prêt à regarder ? Saisissez votre email pour créer ou réactiver votre compte.</p>
366
+ <div class="flex flex-col sm:flex-row max-w-md mx-auto gap-2">
367
+ <input type="email" placeholder="Adresse email" class="flex-grow px-4 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-red-500">
368
+ <button class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded whitespace-nowrap">
369
+ Commencer <i class="fas fa-chevron-right ml-1"></i>
370
+ </button>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Footer -->
377
+ <footer class="bg-black bg-opacity-90 py-12">
378
+ <div class="container mx-auto px-4">
379
+ <div class="mb-8">
380
+ <p class="text-gray-400">Des questions ? Appelez le (+33) 0805-543-063</p>
381
+ </div>
382
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
383
+ <div>
384
+ <ul class="space-y-3 text-gray-400">
385
+ <li><a href="#" class="hover:underline">FAQ</a></li>
386
+ <li><a href="#" class="hover:underline">Relations Investisseurs</a></li>
387
+ <li><a href="#" class="hover:underline">Modes de lecture</a></li>
388
+ <li><a href="#" class="hover:underline">Mentions légales</a></li>
389
+ </ul>
390
+ </div>
391
+ <div>
392
+ <ul class="space-y-3 text-gray-400">
393
+ <li><a href="#" class="hover:underline">Centre d'aide</a></li>
394
+ <li><a href="#" class="hover:underline">Recrutement</a></li>
395
+ <li><a href="#" class="hover:underline">Conditions d'utilisation</a></li>
396
+ <li><a href="#" class="hover:underline">Nous contacter</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <ul class="space-y-3 text-gray-400">
401
+ <li><a href="#" class="hover:underline">Compte</a></li>
402
+ <li><a href="#" class="hover:underline">Utiliser des cartes cadeaux</a></li>
403
+ <li><a href="#" class="hover:underline">Confidentialité</a></li>
404
+ <li><a href="#" class="hover:underline">Test de vitesse</a></li>
405
+ </ul>
406
+ </div>
407
+ <div>
408
+ <ul class="space-y-3 text-gray-400">
409
+ <li><a href="#" class="hover:underline">Presse</a></li>
410
+ <li><a href="#" class="hover:underline">Acheter des cartes cadeaux</a></li>
411
+ <li><a href="#" class="hover:underline">Préférences de cookies</a></li>
412
+ <li><a href="#" class="hover:underline">Informations légales</a></li>
413
+ </ul>
414
+ </div>
415
+ </div>
416
+ <div class="mb-8">
417
+ <div class="relative dropdown inline-block">
418
+ <button class="flex items-center space-x-1 border border-gray-600 px-4 py-2 rounded">
419
+ <i class="fas fa-globe"></i>
420
+ <span>Français</span>
421
+ <i class="fas fa-chevron-down text-xs"></i>
422
+ </button>
423
+ <div class="dropdown-menu absolute hidden left-0 mt-2 w-40 bg-gray-800 rounded shadow-lg py-1">
424
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Français</a>
425
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">English</a>
426
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Español</a>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="text-gray-400">
431
+ <p>StreamFlix France</p>
432
+ </div>
433
+ </div>
434
+ </footer>
435
+
436
+ <script>
437
+ // Toggle FAQ answers
438
+ document.querySelectorAll('button').forEach(button => {
439
+ if (button.parentElement.classList.contains('border')) {
440
+ button.addEventListener('click', function() {
441
+ const answer = this.nextElementSibling;
442
+ const icon = this.querySelector('i');
443
+
444
+ if (answer.classList.contains('hidden')) {
445
+ answer.classList.remove('hidden');
446
+ icon.classList.replace('fa-plus', 'fa-minus');
447
+ } else {
448
+ answer.classList.add('hidden');
449
+ icon.classList.replace('fa-minus', 'fa-plus');
450
+ }
451
+ });
452
+ }
453
+ });
454
+
455
+ // Simulate autoplay carousel
456
+ const carousel = document.querySelector('.autoplay-carousel');
457
+ const carouselContent = carousel.innerHTML;
458
+ carousel.innerHTML += carouselContent; // Duplicate content for seamless loop
459
+
460
+ // Film database simulation (54000 films)
461
+ const filmDatabase = [];
462
+ for (let i = 0; i < 54000; i++) {
463
+ filmDatabase.push({
464
+ id: i,
465
+ title: `Film ${i}`,
466
+ year: Math.floor(Math.random() * (2025 - 2020 + 1)) + 2020,
467
+ duration: `${Math.floor(Math.random() * 3) + 1}h ${Math.floor(Math.random() * 60)}m`,
468
+ image: `https://picsum.photos/500/750?random=${i}`
469
+ });
470
+ }
471
+
472
+ // Auto-play film on hover (simulated)
473
+ let autoplayTimeout;
474
+ document.querySelectorAll('.film-card').forEach(card => {
475
+ card.addEventListener('mouseenter', function() {
476
+ // Only autoplay if the setting is enabled
477
+ if (document.getElementById('preview-autoplay-toggle').checked) {
478
+ autoplayTimeout = setTimeout(() => {
479
+ const videoContainer = document.createElement('div');
480
+ videoContainer.className = 'video-container';
481
+ videoContainer.innerHTML = `
482
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
483
+ `;
484
+
485
+ const modal = document.createElement('div');
486
+ modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4';
487
+ modal.innerHTML = `
488
+ <div class="relative w-full max-w-4xl">
489
+ <button class="absolute -top-10 right-0 text-white text-2xl z-50">
490
+ <i class="fas fa-times"></i>
491
+ </button>
492
+ ${videoContainer.outerHTML}
493
+ </div>
494
+ `;
495
+ document.body.appendChild(modal);
496
+
497
+ modal.querySelector('button').addEventListener('click', function() {
498
+ modal.remove();
499
+ });
500
+ }, 1000); // Start after 1 second of hover
501
+ }
502
+ });
503
+
504
+ card.addEventListener('mouseleave', function() {
505
+ clearTimeout(autoplayTimeout);
506
+ });
507
+
508
+ // Click to play full content with autoplay next
509
+ card.addEventListener('click', function() {
510
+ const modal = document.createElement('div');
511
+ modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4';
512
+ modal.innerHTML = `
513
+ <div class="relative w-full max-w-6xl">
514
+ <button class="absolute -top-10 right-0 text-white text-2xl z-50">
515
+ <i class="fas fa-times"></i>
516
+ </button>
517
+ <div class="video-container">
518
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
519
+ </div>
520
+ ${document.getElementById('autoplay-toggle').checked ? `
521
+ <div class="mt-4 bg-gray-800 p-4 rounded-lg flex items-center justify-between">
522
+ <div>
523
+ <h3 class="font-medium">Prochain épisode dans 15 secondes</h3>
524
+ <p class="text-sm text-gray-400">La lecture automatique est activée</p>
525
+ </div>
526
+ <button id="cancel-autoplay" class="bg-gray-700 hover:bg-gray-600 px-4 py-1 rounded">
527
+ Annuler
528
+ </button>
529
+ </div>
530
+ ` : ''}
531
+ </div>
532
+ `;
533
+ document.body.appendChild(modal);
534
+
535
+ modal.querySelector('button').addEventListener('click', function() {
536
+ modal.remove();
537
+ });
538
+
539
+ if (document.getElementById('autoplay-toggle').checked) {
540
+ modal.querySelector('#cancel-autoplay').addEventListener('click', function() {
541
+ document.getElementById('autoplay-toggle').checked = false;
542
+ modal.querySelector('.bg-gray-800').innerHTML = '<p class="text-center">Lecture automatique désactivée</p>';
543
+ });
544
+ }
545
+ });
546
+ });
547
+
548
+ // Toggle switches functionality
549
+ document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
550
+ checkbox.addEventListener('change', function() {
551
+ if (this.id === 'autoplay-toggle') {
552
+ const badges = document.querySelectorAll('.autoplay-badge');
553
+ badges.forEach(badge => {
554
+ badge.style.display = this.checked ? 'flex' : 'none';
555
+ });
556
+
557
+ if (!this.checked) {
558
+ // Show toast notification
559
+ const toast = document.createElement('div');
560
+ toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
561
+ toast.innerHTML = `
562
+ <i class="fas fa-info-circle mr-2"></i>
563
+ <span>Lecture automatique désactivée</span>
564
+ `;
565
+ document.body.appendChild(toast);
566
+ setTimeout(() => toast.remove(), 3000);
567
+ }
568
+ }
569
+ });
570
+ });
571
+ </script>
572
+ <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/streamflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
573
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Films et séries illimités en streaming Regardez vos films et séries préférés où que vous soyez. Sans publicité. Sans engagement. ajouter 2000 film 2024 et 2025 a regarder en entier film complet,avec base de donner de 54000 film nouveauté en automatique et lecture des film en automatique
2
+ activer les mode lecture en automatique