Hugging Face's logo

Spaces:
docto41
/
stream-4u
Running

App Files Community
docto41 commited on
Commit
e2f53b0
·
verified ·
1 Parent(s): 370cfef

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +500 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Stream 4u
3
- emoji: 🏃
4
- colorFrom: gray
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: stream-4u
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,500 @@
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>Stream4U - Films et Séries en HD</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #db2777 100%);
12
+ }
13
+ .film-card:hover .film-overlay {
14
+ opacity: 1;
15
+ transform: translateY(0);
16
+ }
17
+ .film-overlay {
18
+ transition: all 0.3s ease;
19
+ opacity: 0;
20
+ transform: translateY(20px);
21
+ }
22
+ .player-controls {
23
+ background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
24
+ }
25
+ .scrollbar-hide::-webkit-scrollbar {
26
+ display: none;
27
+ }
28
+ .scrollbar-hide {
29
+ -ms-overflow-style: none;
30
+ scrollbar-width: none;
31
+ }
32
+ .dropdown:hover .dropdown-menu {
33
+ display: block;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-900 text-gray-100">
38
+ <!-- Header -->
39
+ <header class="sticky top-0 z-50 bg-gray-900 bg-opacity-90 backdrop-blur-sm border-b border-gray-800">
40
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
41
+ <div class="flex items-center space-x-8">
42
+ <a href="#" class="flex items-center">
43
+ <span class="text-2xl font-bold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">Stream4U</span>
44
+ </a>
45
+ <nav class="hidden md:flex space-x-6">
46
+ <a href="#" class="hover:text-purple-400 transition">Accueil</a>
47
+ <a href="#" class="hover:text-purple-400 transition">Films</a>
48
+ <a href="#" class="hover:text-purple-400 transition">Séries</a>
49
+ <a href="#" class="hover:text-purple-400 transition">Genres</a>
50
+ <a href="#" class="hover:text-purple-400 transition">Tendances</a>
51
+ </nav>
52
+ </div>
53
+
54
+ <div class="flex items-center space-x-4">
55
+ <div class="relative">
56
+ <button class="p-2 rounded-full hover:bg-gray-800">
57
+ <i class="fas fa-search"></i>
58
+ </button>
59
+ </div>
60
+ <div class="relative dropdown">
61
+ <button class="flex items-center space-x-2 hover:bg-gray-800 px-3 py-2 rounded-lg">
62
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-8 h-8 rounded-full">
63
+ <span class="hidden md:inline">Mon compte</span>
64
+ </button>
65
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg hidden">
66
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-t-md">Mon profil</a>
67
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Historique</a>
68
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Paramètres</a>
69
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-b-md text-red-400">Déconnexion</a>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Hero Section -->
77
+ <section class="hero-gradient py-16">
78
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
79
+ <div class="md:w-1/2 mb-10 md:mb-0">
80
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Regardez vos films préférés en HD</h1>
81
+ <p class="text-xl mb-6 text-gray-200">Des milliers de films et séries en streaming gratuit, avec sous-titres multilingues et téléchargement HD.</p>
82
+ <div class="flex flex-wrap gap-3">
83
+ <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-lg font-medium flex items-center">
84
+ <i class="fas fa-play mr-2"></i> Commencer à regarder
85
+ </button>
86
+ <button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-lg font-medium flex items-center">
87
+ <i class="fas fa-info-circle mr-2"></i> En savoir plus
88
+ </button>
89
+ </div>
90
+ </div>
91
+ <div class="md:w-1/2 relative">
92
+ <div class="relative rounded-xl overflow-hidden shadow-2xl">
93
+ <img src="https://image.tmdb.org/t/p/original/8Y43POKjjKIYTNUOSMO4iUpzBxu.jpg" alt="Film Hero" class="w-full">
94
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
95
+ <div class="absolute bottom-0 left-0 right-0 p-4">
96
+ <h3 class="text-xl font-bold">Dune: Partie Deux</h3>
97
+ <div class="flex items-center mt-2 text-sm text-gray-300">
98
+ <span class="bg-yellow-500 text-yellow-900 px-2 rounded mr-2">HD</span>
99
+ <span>2024 • Science-fiction • 2h46m</span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </section>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-10">
109
+ <!-- Featured Movies -->
110
+ <section class="mb-12">
111
+ <div class="flex justify-between items-center mb-6">
112
+ <h2 class="text-2xl font-bold">Films populaires</h2>
113
+ <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center">
114
+ Voir plus <i class="fas fa-chevron-right ml-1"></i>
115
+ </a>
116
+ </div>
117
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
118
+ <!-- Movie Card 1 -->
119
+ <div class="film-card relative rounded-lg overflow-hidden group">
120
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Oppenheimer" class="w-full h-64 object-cover">
121
+ <div class="film-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-4">
122
+ <h3 class="font-bold text-lg">Oppenheimer</h3>
123
+ <div class="flex items-center text-sm text-gray-300 mt-1">
124
+ <span>2023 • 3h</span>
125
+ </div>
126
+ <div class="flex mt-3 space-x-2">
127
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center">
128
+ <i class="fas fa-play mr-1 text-xs"></i> Regarder
129
+ </button>
130
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center">
131
+ <i class="fas fa-download mr-1 text-xs"></i> Télécharger
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Movie Card 2 -->
138
+ <div class="film-card relative rounded-lg overflow-hidden group">
139
+ <img src="https://image.tmdb.org/t/p/w500/kDp1vUBnMpe8ak4rjgl3cLELqjU.jpg" alt="Barbie" class="w-full h-64 object-cover">
140
+ <div class="film-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-4">
141
+ <h3 class="font-bold text-lg">Barbie</h3>
142
+ <div class="flex items-center text-sm text-gray-300 mt-1">
143
+ <span>2023 • 1h54m</span>
144
+ </div>
145
+ <div class="flex mt-3 space-x-2">
146
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center">
147
+ <i class="fas fa-play mr-1 text-xs"></i> Regarder
148
+ </button>
149
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center">
150
+ <i class="fas fa-download mr-1 text-xs"></i> Télécharger
151
+ </button>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Movie Card 3 -->
157
+ <div class="film-card relative rounded-lg overflow-hidden group">
158
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Spider-Man" class="w-full h-64 object-cover">
159
+ <div class="film-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-4">
160
+ <h3 class="font-bold text-lg">Spider-Man: Across the Spider-Verse</h3>
161
+ <div class="flex items-center text-sm text-gray-300 mt-1">
162
+ <span>2023 • 2h20m</span>
163
+ </div>
164
+ <div class="flex mt-3 space-x-2">
165
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center">
166
+ <i class="fas fa-play mr-1 text-xs"></i> Regarder
167
+ </button>
168
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center">
169
+ <i class="fas fa-download mr-1 text-xs"></i> Télécharger
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Movie Card 4 -->
176
+ <div class="film-card relative rounded-lg overflow-hidden group">
177
+ <img src="https://image.tmdb.org/t/p/w500/1X7lR1AnYgWzbKqC45D5YpJKsmz.jpg" alt="John Wick 4" class="w-full h-64 object-cover">
178
+ <div class="film-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-4">
179
+ <h3 class="font-bold text-lg">John Wick 4</h3>
180
+ <div class="flex items-center text-sm text-gray-300 mt-1">
181
+ <span>2023 • 2h49m</span>
182
+ </div>
183
+ <div class="flex mt-3 space-x-2">
184
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center">
185
+ <i class="fas fa-play mr-1 text-xs"></i> Regarder
186
+ </button>
187
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center">
188
+ <i class="fas fa-download mr-1 text-xs"></i> Télécharger
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Movie Card 5 -->
195
+ <div class="film-card relative rounded-lg overflow-hidden group">
196
+ <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="The Batman" class="w-full h-64 object-cover">
197
+ <div class="film-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-4">
198
+ <h3 class="font-bold text-lg">The Batman</h3>
199
+ <div class="flex items-center text-sm text-gray-300 mt-1">
200
+ <span>2022 • 2h56m</span>
201
+ </div>
202
+ <div class="flex mt-3 space-x-2">
203
+ <button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm flex items-center">
204
+ <i class="fas fa-play mr-1 text-xs"></i> Regarder
205
+ </button>
206
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm flex items-center">
207
+ <i class="fas fa-download mr-1 text-xs"></i> Télécharger
208
+ </button>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Categories -->
216
+ <section class="mb-12">
217
+ <h2 class="text-2xl font-bold mb-6">Parcourir par genre</h2>
218
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
219
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
220
+ <i class="fas fa-explosion text-3xl mb-2 text-purple-400"></i>
221
+ <span>Action</span>
222
+ </a>
223
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
224
+ <i class="fas fa-heart text-3xl mb-2 text-pink-400"></i>
225
+ <span>Romance</span>
226
+ </a>
227
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
228
+ <i class="fas fa-ghost text-3xl mb-2 text-green-400"></i>
229
+ <span>Horreur</span>
230
+ </a>
231
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
232
+ <i class="fas fa-robot text-3xl mb-2 text-blue-400"></i>
233
+ <span>Science-fiction</span>
234
+ </a>
235
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
236
+ <i class="fas fa-gun text-3xl mb-2 text-yellow-400"></i>
237
+ <span>Guerre</span>
238
+ </a>
239
+ <a href="#" class="bg-gray-800 hover:bg-purple-600 rounded-lg p-4 flex flex-col items-center transition">
240
+ <i class="fas fa-hat-wizard text-3xl mb-2 text-indigo-400"></i>
241
+ <span>Fantaisie</span>
242
+ </a>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Recently Added -->
247
+ <section class="mb-12">
248
+ <div class="flex justify-between items-center mb-6">
249
+ <h2 class="text-2xl font-bold">Récemment ajoutés</h2>
250
+ <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center">
251
+ Voir plus <i class="fas fa-chevron-right ml-1"></i>
252
+ </a>
253
+ </div>
254
+ <div class="relative">
255
+ <div class="flex overflow-x-auto scrollbar-hide space-x-4 pb-4">
256
+ <!-- Recently Added Item 1 -->
257
+ <div class="flex-shrink-0 w-48">
258
+ <div class="relative rounded-lg overflow-hidden group">
259
+ <img src="https://image.tmdb.org/t/p/w500/5mzr6JZbrqnqD8rCEvPhuCE5Fw2.jpg" alt="The Marvels" class="w-full h-64 object-cover">
260
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
261
+ <div class="absolute bottom-0 left-0 right-0 p-3">
262
+ <h3 class="font-bold text-sm">The Marvels</h3>
263
+ <div class="flex items-center mt-1 text-xs text-gray-300">
264
+ <span>2023 • 1h45m</span>
265
+ </div>
266
+ </div>
267
+ <span class="absolute top-2 right-2 bg-green-500 text-green-900 text-xs px-2 py-1 rounded">Nouveau</span>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Recently Added Item 2 -->
272
+ <div class="flex-shrink-0 w-48">
273
+ <div class="relative rounded-lg overflow-hidden group">
274
+ <img src="https://image.tmdb.org/t/p/w500/8GnWDLn2Aklni11K0dFas7K2zQV.jpg" alt="Napoleon" class="w-full h-64 object-cover">
275
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
276
+ <div class="absolute bottom-0 left-0 right-0 p-3">
277
+ <h3 class="font-bold text-sm">Napoleon</h3>
278
+ <div class="flex items-center mt-1 text-xs text-gray-300">
279
+ <span>2023 • 2h38m</span>
280
+ </div>
281
+ </div>
282
+ <span class="absolute top-2 right-2 bg-green-500 text-green-900 text-xs px-2 py-1 rounded">Nouveau</span>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Recently Added Item 3 -->
287
+ <div class="flex-shrink-0 w-48">
288
+ <div class="relative rounded-lg overflow-hidden group">
289
+ <img src="https://image.tmdb.org/t/p/w500/1X4h40fcB4WWUmIBK0auT4zRBAV.jpg" alt="Wonka" class="w-full h-64 object-cover">
290
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
291
+ <div class="absolute bottom-0 left-0 right-0 p-3">
292
+ <h3 class="font-bold text-sm">Wonka</h3>
293
+ <div class="flex items-center mt-1 text-xs text-gray-300">
294
+ <span>2023 • 1h56m</span>
295
+ </div>
296
+ </div>
297
+ <span class="absolute top-2 right-2 bg-green-500 text-green-900 text-xs px-2 py-1 rounded">Nouveau</span>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Recently Added Item 4 -->
302
+ <div class="flex-shrink-0 w-48">
303
+ <div class="relative rounded-lg overflow-hidden group">
304
+ <img src="https://image.tmdb.org/t/p/w500/1j58dHXvWqP5wQ5dC4rEULg6nF8.jpg" alt="Aquaman 2" class="w-full h-64 object-cover">
305
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
306
+ <div class="absolute bottom-0 left-0 right-0 p-3">
307
+ <h3 class="font-bold text-sm">Aquaman 2</h3>
308
+ <div class="flex items-center mt-1 text-xs text-gray-300">
309
+ <span>2023 • 2h04m</span>
310
+ </div>
311
+ </div>
312
+ <span class="absolute top-2 right-2 bg-green-500 text-green-900 text-xs px-2 py-1 rounded">Nouveau</span>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Recently Added Item 5 -->
317
+ <div class="flex-shrink-0 w-48">
318
+ <div class="relative rounded-lg overflow-hidden group">
319
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Spider-Man" class="w-full h-64 object-cover">
320
+ <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
321
+ <div class="absolute bottom-0 left-0 right-0 p-3">
322
+ <h3 class="font-bold text-sm">Spider-Man: Across the Spider-Verse</h3>
323
+ <div class="flex items-center mt-1 text-xs text-gray-300">
324
+ <span>2023 • 2h20m</span>
325
+ </div>
326
+ </div>
327
+ <span class="absolute top-2 right-2 bg-green-500 text-green-900 text-xs px-2 py-1 rounded">Nouveau</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Video Player Demo (Hidden by default, shown when a movie is selected) -->
335
+ <div id="video-player" class="hidden fixed inset-0 z-50 bg-black bg-opacity-90 flex items-center justify-center">
336
+ <div class="relative w-full max-w-4xl">
337
+ <button id="close-player" class="absolute -top-10 right-0 text-white hover:text-purple-400 text-2xl">
338
+ <i class="fas fa-times"></i>
339
+ </button>
340
+ <div class="relative pt-[56.25%]">
341
+ <video id="player" class="absolute inset-0 w-full h-full" controls>
342
+ <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
343
+ Votre navigateur ne supporte pas la lecture de vidéos.
344
+ </video>
345
+ <div class="player-controls absolute bottom-0 left-0 right-0 p-4 flex items-center justify-between">
346
+ <div class="flex items-center space-x-4">
347
+ <button class="text-white hover:text-purple-400">
348
+ <i class="fas fa-play"></i>
349
+ </button>
350
+ <div class="text-white text-sm">00:00 / 02:30:45</div>
351
+ </div>
352
+ <div class="flex items-center space-x-4">
353
+ <div class="relative">
354
+ <button id="subtitle-btn" class="text-white hover:text-purple-400 flex items-center">
355
+ <i class="fas fa-closed-captioning mr-1"></i> Sous-titres
356
+ </button>
357
+ <div id="subtitle-menu" class="hidden absolute bottom-full right-0 mb-2 w-48 bg-gray-800 rounded-md shadow-lg">
358
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-t-md">Français</a>
359
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">English</a>
360
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700">Español</a>
361
+ <a href="#" class="block px-4 py-2 hover:bg-gray-700 rounded-b-md">Deutsch</a>
362
+ </div>
363
+ </div>
364
+ <button class="text-white hover:text-purple-400">
365
+ <i class="fas fa-volume-up"></i>
366
+ </button>
367
+ <button class="text-white hover:text-purple-400">
368
+ <i class="fas fa-expand"></i>
369
+ </button>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ <div class="bg-gray-800 p-4">
374
+ <h3 class="text-xl font-bold mb-2">Dune: Partie Deux (2024)</h3>
375
+ <div class="flex flex-wrap gap-2 mb-4">
376
+ <span class="bg-gray-700 px-2 py-1 rounded text-xs">Science-fiction</span>
377
+ <span class="bg-gray-700 px-2 py-1 rounded text-xs">Aventure</span>
378
+ <span class="bg-gray-700 px-2 py-1 rounded text-xs">2h46m</span>
379
+ <span class="bg-yellow-500 text-yellow-900 px-2 py-1 rounded text-xs">HD</span>
380
+ </div>
381
+ <p class="text-gray-300 mb-4">Paul Atreides s'unie à Chani et aux Fremen pour mener la révolte contre ceux qui ont détruit sa famille. Alors qu'il tente d'éviter un terrible futur que lui seul peut prévoir, il doit choisir entre l'amour de sa vie et le destin de l'univers.</p>
382
+ <div class="flex space-x-3">
383
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg font-medium flex items-center">
384
+ <i class="fas fa-download mr-2"></i> Télécharger
385
+ </button>
386
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg font-medium flex items-center">
387
+ <i class="fas fa-plus mr-2"></i> Ma liste
388
+ </button>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </main>
394
+
395
+ <!-- Features Section -->
396
+ <section class="bg-gray-800 py-12">
397
+ <div class="container mx-auto px-4">
398
+ <h2 class="text-3xl font-bold text-center mb-12">Pourquoi choisir Stream4U?</h2>
399
+ <div class="grid md:grid-cols-3 gap-8">
400
+ <div class="text-center">
401
+ <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
402
+ <i class="fas fa-film text-2xl"></i>
403
+ </div>
404
+ <h3 class="text-xl font-bold mb-2">Bibliothèque complète</h3>
405
+ <p class="text-gray-300">Des milliers de films et séries dans tous les genres imaginables, des classiques aux dernières sorties.</p>
406
+ </div>
407
+ <div class="text-center">
408
+ <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
409
+ <i class="fas fa-closed-captioning text-2xl"></i>
410
+ </div>
411
+ <h3 class="text-xl font-bold mb-2">Sous-titres multilingues</h3>
412
+ <p class="text-gray-300">Sous-titres en français, anglais, allemand, espagnol, arabe et bien d'autres langues.</p>
413
+ </div>
414
+ <div class="text-center">
415
+ <div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
416
+ <i class="fas fa-download text-2xl"></i>
417
+ </div>
418
+ <h3 class="text-xl font-bold mb-2">Téléchargement HD</h3>
419
+ <p class="text-gray-300">Téléchargez vos films préférés en qualité HD pour les regarder hors ligne quand vous voulez.</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </section>
424
+
425
+ <!-- Footer -->
426
+ <footer class="bg-gray-900 border-t border-gray-800 pt-12 pb-6">
427
+ <div class="container mx-auto px-4">
428
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
429
+ <div>
430
+ <h3 class="text-xl font-bold mb-4">Stream4U</h3>
431
+ <p class="text-gray-400">La meilleure plateforme de streaming gratuite pour les cinéphiles. Films, séries et bien plus en qualité HD.</p>
432
+ </div>
433
+ <div>
434
+ <h4 class="font-bold mb-4">Navigation</h4>
435
+ <ul class="space-y-2">
436
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Accueil</a></li>
437
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Films</a></li>
438
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Séries</a></li>
439
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Genres</a></li>
440
+ </ul>
441
+ </div>
442
+ <div>
443
+ <h4 class="font-bold mb-4">Légal</h4>
444
+ <ul class="space-y-2">
445
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Conditions d'utilisation</a></li>
446
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">Politique de confidentialité</a></li>
447
+ <li><a href="#" class="text-gray-400 hover:text-purple-400">DMCA</a></li>
448
+ </ul>
449
+ </div>
450
+ <div>
451
+ <h4 class="font-bold mb-4">Contact</h4>
452
+ <ul class="space-y-2">
453
+ <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@stream4u.com</li>
454
+ <li class="flex items-center text-gray-400"><i class="fas fa-globe mr-2"></i> www.stream4u.com</li>
455
+ </ul>
456
+ <div class="flex space-x-4 mt-4">
457
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-facebook-f"></i></a>
458
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter"></i></a>
459
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-instagram"></i></a>
460
+ <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-reddit-alien"></i></a>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
465
+ <p>© 2023 Stream4U. Tous droits réservés. Ce site est financé par la publicité.</p>
466
+ </div>
467
+ </div>
468
+ </footer>
469
+
470
+ <script>
471
+ // Toggle video player
472
+ const watchButtons = document.querySelectorAll('[class*="fa-play"]').forEach(button => {
473
+ button.addEventListener('click', () => {
474
+ document.getElementById('video-player').classList.remove('hidden');
475
+ document.getElementById('player').play();
476
+ });
477
+ });
478
+
479
+ // Close video player
480
+ document.getElementById('close-player').addEventListener('click', () => {
481
+ document.getElementById('video-player').classList.add('hidden');
482
+ document.getElementById('player').pause();
483
+ });
484
+
485
+ // Toggle subtitle menu
486
+ document.getElementById('subtitle-btn').addEventListener('click', (e) => {
487
+ e.stopPropagation();
488
+ document.getElementById('subtitle-menu').classList.toggle('hidden');
489
+ });
490
+
491
+ // Close subtitle menu when clicking elsewhere
492
+ document.addEventListener('click', () => {
493
+ document.getElementById('subtitle-menu').classList.add('hidden');
494
+ });
495
+
496
+ // Mobile menu toggle (would need implementation)
497
+ // This is just a placeholder for actual mobile menu functionality
498
+ </script>
499
+ <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/stream-4u" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
500
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ plateforme en ligne où les cinéphiles peuvent dénicher presque tous les titres de films. Vous pouvez trouver des films d'action, de guerre, d'horreur, de romance, de fantaisie et d'autres genres de films sur ce site Web financé par la publicité. Tout en regardant vos films et émissions de télévision en qualité HD, vous pouvez activer ou désactiver la lecture des sous-titres. Stream4U prend en charge les sous-titres en français, anglais, allemand, espagnol, arabe et d'autres langues courantes. Les internautes peuvent également télécharger gratuitement des films en qualité HD