Hugging Face's logo

Spaces:
docto41
/
cin-stream-ai
Running

App Files Community
docto41 commited on
Commit
9d485bc
·
verified ·
1 Parent(s): b02d277

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +415 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cin Stream Ai
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: cin-stream-ai
3
+ emoji: 🐳
4
+ colorFrom: purple
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,415 @@
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><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"681375e3264f6a6cf6562c83"}};</script>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CineStream - Films avec 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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6d28d9',
15
+ secondary: '#8b5cf6',
16
+ dark: '#1e1b4b',
17
+ light: '#f5f3ff',
18
+ },
19
+ fontFamily: {
20
+ sans: ['Inter', 'sans-serif'],
21
+ },
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
28
+
29
+ body {
30
+ font-family: 'Inter', sans-serif;
31
+ background-color: #0f172a;
32
+ color: white;
33
+ }
34
+
35
+ .movie-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .movie-card:hover {
40
+ transform: translateY(-10px);
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
42
+ }
43
+
44
+ .movie-poster {
45
+ height: 450px;
46
+ object-fit: cover;
47
+ }
48
+
49
+ .loading-spinner {
50
+ animation: spin 1s linear infinite;
51
+ }
52
+
53
+ @keyframes spin {
54
+ 0% { transform: rotate(0deg); }
55
+ 100% { transform: rotate(360deg); }
56
+ }
57
+
58
+ .gradient-text {
59
+ background: linear-gradient(90deg, #8b5cf6, #ec4899);
60
+ -webkit-background-clip: text;
61
+ background-clip: text;
62
+ color: transparent;
63
+ }
64
+
65
+ .search-input:focus {
66
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
67
+ }
68
+
69
+ .error-message {
70
+ background-color: rgba(239, 68, 68, 0.2);
71
+ border-left: 4px solid #ef4444;
72
+ }
73
+
74
+ .placeholder-poster {
75
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ }
80
+
81
+ /* Style pour le lecteur vidéo */
82
+ .video-container {
83
+ position: relative;
84
+ padding-bottom: 56.25%; /* 16:9 */
85
+ height: 0;
86
+ overflow: hidden;
87
+ }
88
+
89
+ .video-container iframe {
90
+ position: absolute;
91
+ top: 0;
92
+ left: 0;
93
+ width: 100%;
94
+ height: 100%;
95
+ border: none;
96
+ }
97
+
98
+ /* Style pour les boutons de streaming */
99
+ .stream-btn {
100
+ transition: all 0.2s ease;
101
+ }
102
+
103
+ .stream-btn:hover {
104
+ transform: scale(1.05);
105
+ }
106
+
107
+ /* Style pour la fenêtre de streaming */
108
+ .streaming-window {
109
+ position: fixed;
110
+ top: 0;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 100%;
114
+ background-color: rgba(0, 0, 0, 0.9);
115
+ z-index: 1000;
116
+ display: flex;
117
+ flex-direction: column;
118
+ }
119
+
120
+ .streaming-header {
121
+ padding: 15px;
122
+ background-color: rgba(0, 0, 0, 0.7);
123
+ display: flex;
124
+ justify-content: space-between;
125
+ align-items: center;
126
+ }
127
+
128
+ .streaming-content {
129
+ flex: 1;
130
+ display: flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+ }
134
+
135
+ .streaming-controls {
136
+ padding: 15px;
137
+ background-color: rgba(0, 0, 0, 0.7);
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ }
142
+
143
+ /* Style pour la sélection de serveur */
144
+ .server-list {
145
+ display: flex;
146
+ gap: 10px;
147
+ flex-wrap: wrap;
148
+ margin-top: 10px;
149
+ }
150
+
151
+ .server-btn {
152
+ padding: 8px 12px;
153
+ border-radius: 20px;
154
+ font-size: 14px;
155
+ cursor: pointer;
156
+ transition: all 0.2s;
157
+ }
158
+
159
+ .server-btn.active {
160
+ background-color: #6d28d9;
161
+ color: white;
162
+ }
163
+
164
+ .server-btn.inactive {
165
+ background-color: #334155;
166
+ color: #94a3b8;
167
+ }
168
+
169
+ /* Animation de chargement du streaming */
170
+ .stream-loading {
171
+ display: flex;
172
+ flex-direction: column;
173
+ align-items: center;
174
+ justify-content: center;
175
+ gap: 20px;
176
+ }
177
+
178
+ .stream-loading-spinner {
179
+ width: 50px;
180
+ height: 50px;
181
+ border: 5px solid rgba(255, 255, 255, 0.1);
182
+ border-radius: 50%;
183
+ border-top-color: #6d28d9;
184
+ animation: spin 1s linear infinite;
185
+ }
186
+ </style>
187
+ </head>
188
+ <body class="min-h-screen">
189
+ <!-- Navigation -->
190
+ <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg">
191
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
192
+ <div class="flex items-center justify-between h-16">
193
+ <div class="flex items-center">
194
+ <div class="flex-shrink-0">
195
+ <span class="text-2xl font-bold gradient-text">CineStream</span>
196
+ </div>
197
+ <div class="hidden md:block ml-10">
198
+ <div class="flex space-x-4">
199
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a>
200
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>
201
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>
202
+ <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div class="hidden md:block">
207
+ <div class="ml-4 flex items-center md:ml-6">
208
+ <div class="relative mx-4">
209
+ <input type="text" id="search-input" placeholder="Rechercher un film..."
210
+ class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200">
211
+ <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white">
212
+ <i class="fas fa-search"></i>
213
+ </button>
214
+ </div>
215
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
216
+ <i class="fas fa-user-circle text-xl"></i>
217
+ </button>
218
+ </div>
219
+ </div>
220
+ <div class="-mr-2 flex md:hidden">
221
+ <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
222
+ <i class="fas fa-bars"></i>
223
+ </button>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </nav>
228
+
229
+ <!-- Main Content -->
230
+ <main class="pt-24 pb-12">
231
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
232
+ <!-- Featured Section -->
233
+ <section class="mb-12">
234
+ <div class="flex justify-between items-center mb-6">
235
+ <h2 class="text-2xl font-bold text-white">Films populaires</h2>
236
+ <div class="flex space-x-2">
237
+ <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button>
238
+ <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button>
239
+ <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button>
240
+ </div>
241
+ </div>
242
+
243
+ <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
244
+ <!-- Movies will be loaded here -->
245
+ <div class="flex justify-center items-center py-12 col-span-full">
246
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
247
+ </div>
248
+ </div>
249
+
250
+ <div id="load-more-container" class="mt-8 flex justify-center">
251
+ <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center">
252
+ <span>Voir plus</span>
253
+ <i class="fas fa-chevron-down ml-2"></i>
254
+ </button>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Genres Section -->
259
+ <section class="mb-12">
260
+ <h2 class="text-2xl font-bold text-white mb-6">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
+ <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button>
263
+ <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button>
264
+ <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button>
265
+ <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button>
266
+ <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button>
267
+ <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button>
268
+ </div>
269
+ </section>
270
+ </div>
271
+ </main>
272
+
273
+ <!-- Footer -->
274
+ <footer class="bg-gray-900 text-gray-400 py-8">
275
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
276
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
277
+ <div>
278
+ <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3>
279
+ <p class="text-sm">La meilleure plateforme pour regarder des films avec streaming automatique.</p>
280
+ </div>
281
+ <div>
282
+ <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>
283
+ <ul class="space-y-2 text-sm">
284
+ <li><a href="#" class="hover:text-white">Accueil</a></li>
285
+ <li><a href="#" class="hover:text-white">Films</a></li>
286
+ <li><a href="#" class="hover:text-white">Séries</a></li>
287
+ <li><a href="#" class="hover:text-white">Nouveautés</a></li>
288
+ </ul>
289
+ </div>
290
+ <div>
291
+ <h3 class="text-white text-lg font-semibold mb-4">Légal</h3>
292
+ <ul class="space-y-2 text-sm">
293
+ <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
294
+ <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>
295
+ <li><a href="#" class="hover:text-white">DMCA</a></li>
296
+ </ul>
297
+ </div>
298
+ <div>
299
+ <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>
300
+ <div class="flex space-x-4">
301
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
302
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
303
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
304
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
309
+ <p>© 2023 CineStream. Tous droits réservés.</p>
310
+ </div>
311
+ </div>
312
+ </footer>
313
+
314
+ <!-- Movie Details Modal -->
315
+ <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
316
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
317
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
318
+ <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
319
+ </div>
320
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
321
+ <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
322
+ <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
323
+ <div class="sm:flex sm:items-start">
324
+ <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">
325
+ <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">
326
+ </div>
327
+ <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">
328
+ <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3>
329
+ <div class="flex items-center mb-4">
330
+ <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>
331
+ <span id="modal-year" class="text-gray-300 text-sm"></span>
332
+ <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>
333
+ </div>
334
+ <p id="modal-overview" class="text-gray-300 mb-4"></p>
335
+ <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>
336
+
337
+ <!-- Serveurs de streaming -->
338
+ <div class="mb-4">
339
+ <h4 class="text-sm font-semibold text-gray-400 mb-2">CHOISIR UN SERVEUR :</h4>
340
+ <div class="server-list">
341
+ <button onclick="selectServer('vidsrc')" class="server-btn active" data-server="vidsrc">
342
+ <i class="fas fa-server mr-1"></i> VidSrc (Recommandé)
343
+ </button>
344
+ <button onclick="selectServer('vidsrc2')" class="server-btn inactive" data-server="vidsrc2">
345
+ <i class="fas fa-server mr-1"></i> VidSrc 2
346
+ </button>
347
+ <button onclick="selectServer('superembed')" class="server-btn inactive" data-server="superembed">
348
+ <i class="fas fa-play-circle mr-1"></i> SuperEmbed
349
+ </button>
350
+ <button onclick="selectServer('2embed')" class="server-btn inactive" data-server="2embed">
351
+ <i class="fas fa-film mr-1"></i> 2Embed
352
+ </button>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="mt-4">
357
+ <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
358
+ Fermer
359
+ </button>
360
+ <button id="watch-now-btn" onclick="startStreaming()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
361
+ <i class="fas fa-play mr-2"></i> Lecture auto
362
+ </button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Streaming Window (hidden by default) -->
372
+ <div id="streaming-window" class="streaming-window hidden">
373
+ <div class="streaming-header">
374
+ <h3 id="streaming-title" class="text-xl font-bold text-white"></h3>
375
+ <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-white">
376
+ <i class="fas fa-times text-xl"></i>
377
+ </button>
378
+ </div>
379
+ <div class="streaming-content">
380
+ <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;">
381
+ <!-- Contenu du lecteur sera chargé ici -->
382
+ <div id="stream-loading" class="stream-loading w-full h-full">
383
+ <div class="stream-loading-spinner"></div>
384
+ <p class="text-gray-300">Chargement du flux vidéo...</p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ <div class="streaming-controls">
389
+ <div class="flex space-x-2">
390
+ <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button>
391
+ <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button>
392
+ <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button>
393
+ </div>
394
+ <div>
395
+ <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">
396
+ <i class="fas fa-expand mr-1"></i> Plein écran
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <script>
403
+ // Configuration
404
+ const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
405
+ const BASE_URL = 'https://api.themoviedb.org/3';
406
+
407
+ // Serveurs de streaming avec URLs de base fonctionnelles
408
+ const STREAMING_SERVERS = {
409
+ vidsrc: {
410
+ name: 'VidSrc',
411
+ url: 'https://vidsrc.to/embed/movie/',
412
+ autoPlay: true,
413
+ requiresTMDB: true,
414
+
415
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ corriger les erreurs pour la lectures des film .probleme de serveur