Hugging Face's logo

Spaces:
Bridon
/
youtubeclone
Running

App Files Community
Bridon commited on
Commit
5ac5754
·
verified ·
1 Parent(s): c83b100

j'ai pas vu le botton retour et pourquoi il est direct plein écrn - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +503 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Youtubeclone
3
- emoji: 🏢
4
- colorFrom: blue
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: youtubeclone
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: gray
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,503 @@
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>YouTube Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ body {
12
+ font-family: 'Roboto', sans-serif;
13
+ background-color: #0f0f0f;
14
+ color: #fff;
15
+ }
16
+ .sidebar {
17
+ transform: translateX(-100%);
18
+ transition: transform 0.3s ease;
19
+ }
20
+ .sidebar.open {
21
+ transform: translateX(0);
22
+ }
23
+ .video-card:hover .video-thumbnail img {
24
+ transform: scale(1.05);
25
+ }
26
+ .video-card .video-thumbnail img {
27
+ transition: transform 0.3s ease;
28
+ }
29
+ .dark-scrollbar::-webkit-scrollbar {
30
+ width: 8px;
31
+ }
32
+ .dark-scrollbar::-webkit-scrollbar-track {
33
+ background: #181818;
34
+ }
35
+ .dark-scrollbar::-webkit-scrollbar-thumb {
36
+ background: #555;
37
+ border-radius: 4px;
38
+ }
39
+ .dark-scrollbar::-webkit-scrollbar-thumb:hover {
40
+ background: #777;
41
+ }
42
+ .search-container {
43
+ max-width: 600px;
44
+ }
45
+ @media (max-width: 768px) {
46
+ .sidebar {
47
+ width: 100%;
48
+ }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-[#0f0f0f] text-white">
53
+ <!-- Header -->
54
+ <header class="fixed top-0 left-0 right-0 bg-[#0f0f0f] border-b border-gray-800 z-50">
55
+ <div class="flex items-center justify-between px-4 py-2">
56
+ <!-- Left Section -->
57
+ <div class="flex items-center space-x-4">
58
+ <button id="menu-toggle" class="p-2 hover:bg-gray-800 rounded-full transition">
59
+ <i class="fas fa-bars text-xl"></i>
60
+ </button>
61
+ <div class="flex items-center space-x-1">
62
+ <i class="fab fa-youtube text-red-600 text-2xl"></i>
63
+ <span class="text-xl font-bold">YouTube</span>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Center Section -->
68
+ <div class="hidden md:flex items-center flex-1 max-w-2xl mx-4">
69
+ <div class="flex w-full">
70
+ <input type="text"
71
+ placeholder="Rechercher"
72
+ class="flex-1 bg-[#121212] border border-gray-600 rounded-l-full px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-blue-500">
73
+ <button class="bg-gray-700 px-6 py-2 rounded-r-full hover:bg-gray-600 transition">
74
+ <i class="fas fa-search"></i>
75
+ </button>
76
+ </div>
77
+ <button class="ml-4 p-2 bg-gray-700 rounded-full hover:bg-gray-600 transition">
78
+ <i class="fas fa-microphone"></i>
79
+ </button>
80
+ </div>
81
+
82
+ <!-- Right Section -->
83
+ <div class="flex items-center space-x-4">
84
+ <button class="p-2 hover:bg-gray-800 rounded-full transition">
85
+ <i class="fas fa-video-plus text-xl"></i>
86
+ </button>
87
+ <button class="p-2 hover:bg-gray-800 rounded-full transition">
88
+ <i class="fas fa-bell text-xl"></i>
89
+ </button>
90
+ <img src="https://via.placeholder.com/32" alt="Profile" class="w-8 h-8 rounded-full">
91
+ </div>
92
+ </div>
93
+ </header>
94
+
95
+ <!-- Sidebar -->
96
+ <aside id="sidebar" class="fixed left-0 top-[60px] bottom-0 w-64 bg-[#0f0f0f] overflow-y-auto dark-scrollbar z-40">
97
+ <nav class="px-2 py-4">
98
+ <div class="space-y-1">
99
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
100
+ <i class="fas fa-home w-6 text-center"></i>
101
+ <span>Accueil</span>
102
+ </a>
103
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
104
+ <i class="fas fa-fire w-6 text-center"></i>
105
+ <span>Tendances</span>
106
+ </a>
107
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
108
+ <i class="fas fa-compass w-6 text-center"></i>
109
+ <span>Explorer</span>
110
+ </a>
111
+ </div>
112
+
113
+ <div class="border-t border-gray-800 my-4"></div>
114
+
115
+ <div class="space-y-1">
116
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
117
+ <i class="fas fa-history w-6 text-center"></i>
118
+ <span>Historique</span>
119
+ </a>
120
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
121
+ <i class="fas fa-clock w-6 text-center"></i>
122
+ <span>À regarder plus tard</span>
123
+ </a>
124
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
125
+ <i class="fas fa-thumbs-up w-6 text-center"></i>
126
+ <span>Vidéos likées</span>
127
+ </a>
128
+ </div>
129
+
130
+ <div class="border-t border-gray-800 my-4"></div>
131
+
132
+ <div class="px-3 py-2">
133
+ <h3 class="text-sm font-semibold text-gray-400 uppercase mb-2">Abonnements</h3>
134
+ <div class="space-y-1">
135
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
136
+ <img src="https://via.placeholder.com/24" alt="Channel" class="w-6 h-6 rounded-full">
137
+ <span>Chaîne 1</span>
138
+ </a>
139
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
140
+ <img src="https://via.placeholder.com/24" alt="Channel" class="w-6 h-6 rounded-full">
141
+ <span>Chaîne 2</span>
142
+ </a>
143
+ <a href="#" class="flex items-center space-x-3 px-3 py-2 hover:bg-gray-800 rounded-lg transition">
144
+ <img src="https://via.placeholder.com/24" alt="Channel" class="w-6 h-6 rounded-full">
145
+ <span>Chaîne 3</span>
146
+ </a>
147
+ </div>
148
+ </div>
149
+ </nav>
150
+ </aside>
151
+
152
+ <!-- Main Content -->
153
+ <main class="pt-[60px] ml-0 md:ml-64">
154
+ <!-- Chips -->
155
+ <div class="flex space-x-2 px-4 py-4 overflow-x-auto dark-scrollbar">
156
+ <button class="px-4 py-2 bg-white text-black rounded-full font-medium">Tout</button>
157
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Musique</button>
158
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Jeux vidéo</button>
159
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Technologie</button>
160
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Actualités</button>
161
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Divertissement</button>
162
+ <button class="px-4 py-2 bg-gray-800 text-white rounded-full font-medium hover:bg-gray-700 transition">Sports</button>
163
+ </div>
164
+
165
+ <!-- Video Grid -->
166
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4">
167
+ <!-- Video Card 1 -->
168
+ <div class="video-card">
169
+ <div class="video-thumbnail relative">
170
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
171
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">10:30</span>
172
+ </div>
173
+ <div class="flex mt-3">
174
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
175
+ <div>
176
+ <h3 class="font-semibold text-sm line-clamp-2">Titre de la vidéo incroyable qui explique tout</h3>
177
+ <p class="text-sm text-gray-400 mt-1">Nom de la chaîne</p>
178
+ <p class="text-sm text-gray-400">1.2M vues • il y a 2 jours</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Video Card 2 -->
184
+ <div class="video-card">
185
+ <div class="video-thumbnail relative">
186
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
187
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">5:45</span>
188
+ </div>
189
+ <div class="flex mt-3">
190
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
191
+ <div>
192
+ <h3 class="font-semibold text-sm line-clamp-2">Tutoriel complet sur Tailwind CSS</h3>
193
+ <p class="text-sm text-gray-400 mt-1">Tech Channel</p>
194
+ <p class="text-sm text-gray-400">856K vues • il y a 1 semaine</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Video Card 3 -->
200
+ <div class="video-card">
201
+ <div class="video-thumbnail relative">
202
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
203
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">15:20</span>
204
+ </div>
205
+ <div class="flex mt-3">
206
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
207
+ <div>
208
+ <h3 class="font-semibold text-sm line-clamp-2">Les meilleurs moments du match</h3>
209
+ <p class="text-sm text-gray-400 mt-1">Sports TV</p>
210
+ <p class="text-sm text-gray-400">2.8M vues • il y a 3 heures</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Video Card 4 -->
216
+ <div class="video-card">
217
+ <div class="video-thumbnail relative">
218
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
219
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">8:12</span>
220
+ </div>
221
+ <div class="flex mt-3">
222
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
223
+ <div>
224
+ <h3 class="font-semibold text-sm line-clamp-2">Recette de cuisine facile du jour</h3>
225
+ <p class="text-sm text-gray-400 mt-1">Chef Gourmet</p>
226
+ <p class="text-sm text-gray-400">432K vues • il y a 5 jours</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Video Card 5 -->
232
+ <div class="video-card">
233
+ <div class="video-thumbnail relative">
234
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
235
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">12:30</span>
236
+ </div>
237
+ <div class="flex mt-3">
238
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
239
+ <div>
240
+ <h3 class="font-semibold text-sm line-clamp-2">Review du nouvel iPhone 15 Pro</h3>
241
+ <p class="text-sm text-gray-400 mt-1">Tech Reviews</p>
242
+ <p class="text-sm text-gray-400">1.5M vues • il y a 1 jour</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- Video Card 6 -->
248
+ <div class="video-card">
249
+ <div class="video-thumbnail relative">
250
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
251
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">20:15</span>
252
+ </div>
253
+ <div class="flex mt-3">
254
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
255
+ <div>
256
+ <h3 class="font-semibold text-sm line-clamp-2">Documentaire sur la nature incroyable</h3>
257
+ <p class="text-sm text-gray-400 mt-1">Nature Explorer</p>
258
+ <p class="text-sm text-gray-400">890K vues • il y a 2 semaines</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Video Card 7 -->
264
+ <div class="video-card">
265
+ <div class="video-thumbnail relative">
266
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
267
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">7:45</span>
268
+ </div>
269
+ <div class="flex mt-3">
270
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
271
+ <div>
272
+ <h3 class="font-semibold text-sm line-clamp-2">Top 10 des astuces de coding</h3>
273
+ <p class="text-sm text-gray-400 mt-1">Code Academy</p>
274
+ <p class="text-sm text-gray-400">234K vues • il y a 3 jours</p>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Video Card 8 -->
280
+ <div class="video-card">
281
+ <div class="video-thumbnail relative">
282
+ <img src="https://via.placeholder.com/400x225" alt="Thumbnail" class="w-full rounded-lg">
283
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">25:00</span>
284
+ </div>
285
+ <div class="flex mt-3">
286
+ <img src="https://via.placeholder.com/36" alt="Channel" class="w-9 h-9 rounded-full mr-3">
287
+ <div>
288
+ <h3 class="font-semibold text-sm line-clamp-2">Live de gaming avec les abonnés</h3>
289
+ <p class="text-sm text-gray-400 mt-1">Gamer Pro</p>
290
+ <p class="text-sm text-gray-400">5.6K en direct</p>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </main>
296
+
297
+ <!-- Overlay for mobile -->
298
+ <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden"></div>
299
+
300
+ <script>
301
+ const API_KEY = 'AIzaSyDSIPuVfX7Lj1SXVm8swNPO8HL1BxxdgcA';
302
+ const BASE_URL = 'https://www.googleapis.com/youtube/v3';
303
+
304
+ let videos = [];
305
+
306
+ const menuToggle = document.getElementById('menu-toggle');
307
+ const sidebar = document.getElementById('sidebar');
308
+ const overlay = document.getElementById('overlay');
309
+ const searchInput = document.querySelector('input[type="text"]');
310
+ const searchBtn = document.querySelector('.bg-gray-700');
311
+
312
+ // Initialize
313
+ fetchTrendingVideos();
314
+
315
+ // Event listeners
316
+ menuToggle.addEventListener('click', toggleSidebar);
317
+ overlay.addEventListener('click', closeSidebar);
318
+ searchBtn.addEventListener('click', searchVideos);
319
+ searchInput.addEventListener('keypress', (e) => {
320
+ if (e.key === 'Enter') searchVideos();
321
+ });
322
+
323
+ // API Functions
324
+ async function fetchTrendingVideos() {
325
+ try {
326
+ const response = await fetch(`${BASE_URL}/videos?part=snippet,statistics&chart=mostPopular&maxResults=50&key=${API_KEY}`);
327
+ const data = await response.json();
328
+ videos = data.items;
329
+ displayVideos(videos);
330
+ } catch (error) {
331
+ console.error('Error fetching trending videos:', error);
332
+ }
333
+ }
334
+
335
+ async function searchVideos() {
336
+ const query = searchInput.value.trim();
337
+ if (!query) return;
338
+
339
+ try {
340
+ const response = await fetch(`${BASE_URL}/search?part=snippet&q=${encodeURIComponent(query)}&type=video&maxResults=50&key=${API_KEY}`);
341
+ const data = await response.json();
342
+
343
+ // Fetch full video details
344
+ const videoIds = data.items.map(item => item.id.videoId).join(',');
345
+ const videoResponse = await fetch(`${BASE_URL}/videos?part=snippet,statistics&id=${videoIds}&key=${API_KEY}`);
346
+ const videoData = await videoResponse.json();
347
+
348
+ videos = videoData.items;
349
+ displayVideos(videos);
350
+ } catch (error) {
351
+ console.error('Error searching videos:', error);
352
+ }
353
+ }
354
+
355
+ function displayVideos(videos) {
356
+ const grid = document.querySelector('.grid');
357
+ grid.innerHTML = '';
358
+
359
+ videos.forEach(video => {
360
+ const videoEl = createVideoElement(video);
361
+ grid.appendChild(videoEl);
362
+ });
363
+ }
364
+
365
+ function createVideoElement(video) {
366
+ const div = document.createElement('div');
367
+ div.className = 'video-card cursor-pointer';
368
+ const videoId = video.id?.videoId || video.id;
369
+
370
+ const thumbnail = video.snippet.thumbnails?.high?.url || video.snippet.thumbnails?.medium?.url || 'https://via.placeholder.com/400x225';
371
+ const title = video.snippet?.title || 'Titre non disponible';
372
+ const channel = video.snippet?.channelTitle || 'Chaîne inconnue';
373
+ const views = formatViews(video.statistics?.viewCount || 0);
374
+ const date = video.snippet?.publishedAt ? formatDate(video.snippet.publishedAt) : 'Date inconnue';
375
+
376
+ div.innerHTML = `
377
+ <div class="video-thumbnail relative">
378
+ <img src="${thumbnail}" alt="${title}" class="w-full rounded-lg">
379
+ <span class="absolute bottom-2 right-2 bg-black bg-opacity-75 px-2 py-1 text-xs rounded">10:30</span>
380
+ </div>
381
+ <div class="flex mt-3">
382
+ <img src="https://via.placeholder.com/36" alt="${channel}" class="w-9 h-9 rounded-full mr-3">
383
+ <div>
384
+ <h3 class="font-semibold text-sm line-clamp-2">${title}</h3>
385
+ <p class="text-sm text-gray-400 mt-1">${channel}</p>
386
+ <p class="text-sm text-gray-400">${views} vues • ${date}</p>
387
+ </div>
388
+ </div>
389
+ `;
390
+ div.addEventListener('click', () => {
391
+ openVideoPlayer(videoId);
392
+ });
393
+ return div;
394
+ }
395
+
396
+ function openVideoPlayer(videoId) {
397
+ // Create modal overlay
398
+ const modal = document.createElement('div');
399
+ modal.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center p-4';
400
+ modal.innerHTML = `
401
+ <div class="w-full max-w-4xl">
402
+ <div class="flex justify-between items-center mb-4">
403
+ <button id="back-player" class="text-white text-lg bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg transition">
404
+ <i class="fas fa-arrow-left mr-2"></i>Retour
405
+ </button>
406
+ <h2 class="text-xl font-bold">Lecteur vidéo</h2>
407
+ <button id="close-player" class="text-white text-2xl">&times;</button>
408
+ </div>
409
+ <div class="aspect-w-16 aspect-h-9">
410
+ <iframe
411
+ src="https://www.youtube.com/embed/${videoId}?autoplay=1"
412
+ frameborder="0"
413
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
414
+ class="w-full h-96 md:h-[500px] rounded-lg">
415
+ </iframe>
416
+ </div>
417
+ </div>
418
+ `;
419
+
420
+ document.body.appendChild(modal);
421
+
422
+ // Close modal when close button is clicked
423
+ document.getElementById('close-player').addEventListener('click', () => {
424
+ document.body.removeChild(modal);
425
+ });
426
+
427
+ // Handle return button click
428
+ document.getElementById('back-player').addEventListener('click', () => {
429
+ document.body.removeChild(modal);
430
+ });
431
+
432
+ // Close modal when clicking outside the player
433
+ modal.addEventListener('click', (e) => {
434
+ if (e.target === modal) {
435
+ document.body.removeChild(modal);
436
+ }
437
+ });
438
+ }
439
+
440
+ function formatViews(views) {
441
+ if (views >= 1000000) {
442
+ return (views / 1000000).toFixed(1) + 'M';
443
+ } else if (views >= 1000) {
444
+ return (views / 1000).toFixed(1) + 'K';
445
+ }
446
+ return views.toString();
447
+ }
448
+
449
+ function formatDate(dateString) {
450
+ const date = new Date(dateString);
451
+ const now = new Date();
452
+ const diffTime = Math.abs(now - date);
453
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
454
+
455
+ if (diffDays === 1) return 'il y a 1 jour';
456
+ if (diffDays < 7) return `il y a ${diffDays} jours`;
457
+ if (diffDays < 30) return `il y a ${Math.floor(diffDays / 7)} semaines`;
458
+ return `il y a ${Math.floor(diffDays / 30)} mois`;
459
+ }
460
+
461
+ function formatDuration(duration) {
462
+ const match = duration.match(/PT(\d+H)?(\d+M)?(\d+S)?/);
463
+ const hours = parseInt(match[1]) || 0;
464
+ const minutes = parseInt(match[2]) || 0;
465
+ const seconds = parseInt(match[3]) || 0;
466
+
467
+ if (hours > 0) {
468
+ return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
469
+ }
470
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
471
+ }
472
+
473
+ function toggleSidebar() {
474
+ sidebar.classList.toggle('open');
475
+ overlay.classList.toggle('hidden');
476
+ }
477
+
478
+ function closeSidebar() {
479
+ sidebar.classList.remove('open');
480
+ overlay.classList.add('hidden');
481
+ }
482
+
483
+ window.addEventListener('resize', function() {
484
+ if (window.innerWidth >= 768) {
485
+ sidebar.classList.remove('open');
486
+ overlay.classList.add('hidden');
487
+ }
488
+ });
489
+
490
+ function handleResize() {
491
+ const main = document.querySelector('main');
492
+ if (window.innerWidth >= 768) {
493
+ main.style.marginLeft = '256px';
494
+ } else {
495
+ main.style.marginLeft = '0';
496
+ }
497
+ }
498
+
499
+ window.addEventListener('resize', handleResize);
500
+ handleResize();
501
+ </script>
502
+ <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=Bridon/youtubeclone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
503
+ </html>