Hugging Face's logo

Spaces:
Mousco
/
anycoder-0741e1f0
Running

App Files Community
Mousco commited on
Commit
3182906
·
verified ·
1 Parent(s): 23da593

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1083 -19
index.html CHANGED
@@ -1,19 +1,1083 @@
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>StreamTube - Visionnage de Vidéos</title>
7
+
8
+ <!-- Importation de FontAwesome pour les icônes -->
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <!-- Police Google Fonts: Roboto -->
11
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
12
+
13
+ <style>
14
+ /* --- VARIABLES CSS & RESET --- */
15
+ :root {
16
+ --primary-color: #ff0000;
17
+ --bg-color: #0f0f0f;
18
+ --bg-secondary: #1f1f1f;
19
+ --text-main: #ffffff;
20
+ --text-secondary: #aaaaaa;
21
+ --hover-color: #272727;
22
+ --border-color: #303030;
23
+ --sidebar-width: 240px;
24
+ --header-height: 60px;
25
+ --transition-speed: 0.3s;
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ font-family: 'Roboto', sans-serif;
33
+ }
34
+
35
+ body {
36
+ background-color: var(--bg-color);
37
+ color: var(--text-main);
38
+ overflow-x: hidden;
39
+ }
40
+
41
+ /* --- UI COMPONENTS (Toasts, Buttons) --- */
42
+ button {
43
+ cursor: pointer;
44
+ border: none;
45
+ outline: none;
46
+ background: transparent;
47
+ color: inherit;
48
+ transition: var(--transition-speed);
49
+ }
50
+
51
+ .btn-primary {
52
+ background-color: var(--primary-color);
53
+ color: white;
54
+ padding: 8px 16px;
55
+ border-radius: 18px;
56
+ font-weight: 500;
57
+ }
58
+
59
+ .btn-primary:hover {
60
+ background-color: #cc0000;
61
+ }
62
+
63
+ .btn-icon {
64
+ width: 40px;
65
+ height: 40px;
66
+ border-radius: 50%;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ }
71
+
72
+ .btn-icon:hover {
73
+ background-color: var(--hover-color);
74
+ }
75
+
76
+ /* Custom Scrollbar */
77
+ ::-webkit-scrollbar {
78
+ width: 8px;
79
+ }
80
+ ::-webkit-scrollbar-track {
81
+ background: var(--bg-color);
82
+ }
83
+ ::-webkit-scrollbar-thumb {
84
+ background: #717171;
85
+ border-radius: 4px;
86
+ }
87
+ ::-webkit-scrollbar-thumb:hover {
88
+ background: #a0a0a0;
89
+ }
90
+
91
+ /* Toast Notification */
92
+ #toast-container {
93
+ position: fixed;
94
+ bottom: 20px;
95
+ left: 50%;
96
+ transform: translateX(-50%);
97
+ z-index: 2000;
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 10px;
101
+ }
102
+
103
+ .toast {
104
+ background-color: #333;
105
+ color: white;
106
+ padding: 12px 24px;
107
+ border-radius: 4px;
108
+ font-size: 0.9rem;
109
+ box-shadow: 0 4px 6px rgba(0,0,0,0.3);
110
+ animation: slideUp 0.3s ease-out forwards;
111
+ }
112
+
113
+ @keyframes slideUp {
114
+ from { opacity: 0; transform: translateY(20px); }
115
+ to { opacity: 1; transform: translateY(0); }
116
+ }
117
+
118
+ /* --- HEADER --- */
119
+ header {
120
+ position: fixed;
121
+ top: 0;
122
+ left: 0;
123
+ width: 100%;
124
+ height: var(--header-height);
125
+ background-color: var(--bg-color);
126
+ display: flex;
127
+ align-items: center;
128
+ justify-content: space-between;
129
+ padding: 0 24px;
130
+ z-index: 1000;
131
+ border-bottom: 1px solid var(--border-color);
132
+ }
133
+
134
+ .header-left {
135
+ display: flex;
136
+ align-items: center;
137
+ gap: 16px;
138
+ }
139
+
140
+ .logo {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 4px;
144
+ font-size: 1.2rem;
145
+ font-weight: 700;
146
+ letter-spacing: -0.5px;
147
+ color: white;
148
+ text-decoration: none;
149
+ }
150
+
151
+ .logo i {
152
+ color: var(--primary-color);
153
+ font-size: 1.5rem;
154
+ }
155
+
156
+ .header-center {
157
+ flex: 1;
158
+ max-width: 600px;
159
+ margin: 0 20px;
160
+ display: flex;
161
+ }
162
+
163
+ .search-bar {
164
+ display: flex;
165
+ width: 100%;
166
+ }
167
+
168
+ .search-bar input {
169
+ width: 100%;
170
+ background-color: #121212;
171
+ border: 1px solid var(--border-color);
172
+ border-right: none;
173
+ padding: 8px 16px;
174
+ border-radius: 20px 0 0 20px;
175
+ color: white;
176
+ font-size: 1rem;
177
+ }
178
+
179
+ .search-bar input:focus {
180
+ border-color: #1c62b9;
181
+ outline: none;
182
+ }
183
+
184
+ .search-bar button {
185
+ background-color: #222;
186
+ border: 1px solid var(--border-color);
187
+ border-radius: 0 20px 20px 0;
188
+ padding: 0 20px;
189
+ color: var(--text-secondary);
190
+ }
191
+
192
+ .header-right {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: 12px;
196
+ }
197
+
198
+ .user-avatar {
199
+ width: 32px;
200
+ height: 32px;
201
+ border-radius: 50%;
202
+ background-color: #555;
203
+ overflow: hidden;
204
+ }
205
+
206
+ .user-avatar img {
207
+ width: 100%;
208
+ height: 100%;
209
+ object-fit: cover;
210
+ }
211
+
212
+ .built-with-link {
213
+ font-size: 0.8rem;
214
+ color: var(--text-secondary);
215
+ text-decoration: none;
216
+ margin-right: 10px;
217
+ display: none; /* Hidden on very small screens */
218
+ }
219
+
220
+ @media (min-width: 768px) {
221
+ .built-with-link { display: block; }
222
+ }
223
+
224
+ /* --- SIDEBAR --- */
225
+ .sidebar {
226
+ position: fixed;
227
+ top: var(--header-height);
228
+ left: 0;
229
+ width: var(--sidebar-width);
230
+ height: calc(100vh - var(--header-height));
231
+ background-color: var(--bg-color);
232
+ overflow-y: auto;
233
+ padding: 12px;
234
+ transition: transform 0.3s ease;
235
+ z-index: 900;
236
+ }
237
+
238
+ .nav-item {
239
+ display: flex;
240
+ align-items: center;
241
+ padding: 10px 12px;
242
+ border-radius: 10px;
243
+ color: var(--text-main);
244
+ text-decoration: none;
245
+ margin-bottom: 4px;
246
+ }
247
+
248
+ .nav-item:hover {
249
+ background-color: var(--hover-color);
250
+ }
251
+
252
+ .nav-item.active {
253
+ background-color: var(--hover-color);
254
+ font-weight: 500;
255
+ }
256
+
257
+ .nav-item i {
258
+ margin-right: 20px;
259
+ font-size: 1.1rem;
260
+ width: 24px;
261
+ text-align: center;
262
+ }
263
+
264
+ .nav-section-title {
265
+ padding: 16px 12px 8px;
266
+ font-size: 1rem;
267
+ font-weight: 500;
268
+ color: var(--text-main);
269
+ }
270
+
271
+ /* --- MAIN CONTENT AREA --- */
272
+ main {
273
+ margin-top: var(--header-height);
274
+ margin-left: var(--sidebar-width);
275
+ padding: 24px;
276
+ min-height: calc(100vh - var(--header-height));
277
+ transition: margin-left 0.3s ease;
278
+ }
279
+
280
+ /* --- HOME VIEW (GRID) --- */
281
+ .chips-container {
282
+ display: flex;
283
+ gap: 12px;
284
+ margin-bottom: 24px;
285
+ overflow-x: auto;
286
+ padding-bottom: 8px;
287
+ }
288
+
289
+ .chip {
290
+ background-color: var(--bg-secondary);
291
+ color: var(--text-main);
292
+ padding: 6px 12px;
293
+ border-radius: 8px;
294
+ font-size: 0.9rem;
295
+ white-space: nowrap;
296
+ cursor: pointer;
297
+ transition: background 0.2s;
298
+ border: 1px solid transparent;
299
+ }
300
+
301
+ .chip:hover {
302
+ background-color: #3f3f3f;
303
+ }
304
+
305
+ .chip.active {
306
+ background-color: var(--text-main);
307
+ color: var(--bg-color);
308
+ }
309
+
310
+ .video-grid {
311
+ display: grid;
312
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
313
+ gap: 20px 16px;
314
+ }
315
+
316
+ .video-card {
317
+ cursor: pointer;
318
+ transition: transform 0.2s;
319
+ }
320
+
321
+ .thumbnail-container {
322
+ position: relative;
323
+ width: 100%;
324
+ padding-top: 56.25%; /* 16:9 Aspect Ratio */
325
+ border-radius: 12px;
326
+ overflow: hidden;
327
+ background-color: #222;
328
+ }
329
+
330
+ .thumbnail-container img {
331
+ position: absolute;
332
+ top: 0;
333
+ left: 0;
334
+ width: 100%;
335
+ height: 100%;
336
+ object-fit: cover;
337
+ transition: transform 0.3s ease;
338
+ }
339
+
340
+ .video-card:hover .thumbnail-container img {
341
+ transform: scale(1.05);
342
+ }
343
+
344
+ .duration {
345
+ position: absolute;
346
+ bottom: 8px;
347
+ right: 8px;
348
+ background-color: rgba(0, 0, 0, 0.8);
349
+ color: white;
350
+ padding: 2px 4px;
351
+ border-radius: 4px;
352
+ font-size: 0.8rem;
353
+ font-weight: 500;
354
+ }
355
+
356
+ .video-info {
357
+ display: flex;
358
+ margin-top: 12px;
359
+ gap: 12px;
360
+ }
361
+
362
+ .channel-icon {
363
+ width: 36px;
364
+ height: 36px;
365
+ border-radius: 50%;
366
+ background-color: #333;
367
+ flex-shrink: 0;
368
+ }
369
+
370
+ .video-details {
371
+ display: flex;
372
+ flex-direction: column;
373
+ }
374
+
375
+ .video-title {
376
+ font-size: 1rem;
377
+ font-weight: 500;
378
+ line-height: 1.4;
379
+ margin-bottom: 4px;
380
+ display: -webkit-box;
381
+ -webkit-line-clamp: 2;
382
+ -webkit-box-orient: vertical;
383
+ overflow: hidden;
384
+ }
385
+
386
+ .channel-name, .video-meta {
387
+ font-size: 0.85rem;
388
+ color: var(--text-secondary);
389
+ }
390
+
391
+ .channel-name:hover {
392
+ color: var(--text-main);
393
+ }
394
+
395
+ /* --- WATCH VIEW --- */
396
+ #watch-view {
397
+ display: none; /* Hidden by default */
398
+ flex-direction: row;
399
+ gap: 24px;
400
+ }
401
+
402
+ .player-column {
403
+ flex: 1;
404
+ max-width: 900px;
405
+ }
406
+
407
+ .video-wrapper {
408
+ width: 100%;
409
+ aspect-ratio: 16/9;
410
+ background-color: black;
411
+ border-radius: 12px;
412
+ overflow: hidden;
413
+ margin-bottom: 12px;
414
+ }
415
+
416
+ video {
417
+ width: 100%;
418
+ height: 100%;
419
+ }
420
+
421
+ .watch-title {
422
+ font-size: 1.25rem;
423
+ font-weight: 600;
424
+ margin-bottom: 8px;
425
+ }
426
+
427
+ .watch-actions-bar {
428
+ display: flex;
429
+ justify-content: space-between;
430
+ align-items: center;
431
+ border-bottom: 1px solid var(--border-color);
432
+ padding-bottom: 12px;
433
+ margin-bottom: 16px;
434
+ }
435
+
436
+ .channel-info-row {
437
+ display: flex;
438
+ align-items: center;
439
+ gap: 12px;
440
+ }
441
+
442
+ .subscribe-btn {
443
+ background-color: var(--text-main);
444
+ color: var(--bg-color);
445
+ padding: 8px 16px;
446
+ border-radius: 18px;
447
+ font-weight: 500;
448
+ font-size: 1rem;
449
+ margin-left: 12px;
450
+ }
451
+
452
+ .subscribe-btn.subscribed {
453
+ background-color: var(--bg-secondary);
454
+ color: var(--text-main);
455
+ }
456
+
457
+ .actions-buttons {
458
+ display: flex;
459
+ gap: 8px;
460
+ }
461
+
462
+ .action-chip {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 6px;
466
+ background-color: var(--bg-secondary);
467
+ padding: 8px 16px;
468
+ border-radius: 18px;
469
+ font-size: 0.9rem;
470
+ font-weight: 500;
471
+ }
472
+
473
+ .action-chip:hover {
474
+ background-color: var(--hover-color);
475
+ }
476
+
477
+ .description-box {
478
+ background-color: var(--bg-secondary);
479
+ padding: 12px;
480
+ border-radius: 12px;
481
+ font-size: 0.9rem;
482
+ line-height: 1.5;
483
+ margin-bottom: 24px;
484
+ }
485
+
486
+ .comments-section {
487
+ margin-top: 24px;
488
+ }
489
+
490
+ .comment {
491
+ display: flex;
492
+ gap: 12px;
493
+ margin-bottom: 16px;
494
+ }
495
+
496
+ .comment-body h4 {
497
+ font-size: 0.85rem;
498
+ margin-bottom: 4px;
499
+ }
500
+
501
+ .comment-body p {
502
+ font-size: 0.9rem;
503
+ line-height: 1.4;
504
+ }
505
+
506
+ /* Recommendations Sidebar in Watch View */
507
+ .recommendations-column {
508
+ width: 350px;
509
+ display: flex;
510
+ flex-direction: column;
511
+ gap: 12px;
512
+ }
513
+
514
+ .rec-video-card {
515
+ display: flex;
516
+ gap: 8px;
517
+ cursor: pointer;
518
+ }
519
+
520
+ .rec-thumbnail {
521
+ width: 168px;
522
+ height: 94px;
523
+ border-radius: 8px;
524
+ overflow: hidden;
525
+ position: relative;
526
+ flex-shrink: 0;
527
+ background-color: #222;
528
+ }
529
+
530
+ .rec-thumbnail img {
531
+ width: 100%;
532
+ height: 100%;
533
+ object-fit: cover;
534
+ }
535
+
536
+ .rec-info h4 {
537
+ font-size: 0.9rem;
538
+ font-weight: 500;
539
+ display: -webkit-box;
540
+ -webkit-line-clamp: 2;
541
+ -webkit-box-orient: vertical;
542
+ overflow: hidden;
543
+ margin-bottom: 4px;
544
+ }
545
+
546
+ .rec-info p {
547
+ font-size: 0.8rem;
548
+ color: var(--text-secondary);
549
+ }
550
+
551
+ /* --- RESPONSIVE MEDIA QUERIES --- */
552
+ @media (max-width: 1024px) {
553
+ .video-grid {
554
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
555
+ }
556
+ .recommendations-column {
557
+ width: 280px;
558
+ }
559
+ .rec-thumbnail {
560
+ width: 140px;
561
+ height: 80px;
562
+ }
563
+ }
564
+
565
+ @media (max-width: 900px) {
566
+ #watch-view {
567
+ flex-direction: column;
568
+ }
569
+ .recommendations-column {
570
+ width: 100%;
571
+ }
572
+ .rec-video-card {
573
+ flex-direction: row;
574
+ }
575
+ }
576
+
577
+ @media (max-width: 768px) {
578
+ .sidebar {
579
+ transform: translateX(-100%);
580
+ }
581
+ .sidebar.active {
582
+ transform: translateX(0);
583
+ box-shadow: 2px 0 10px rgba(0,0,0,0.5);
584
+ }
585
+ main {
586
+ margin-left: 0;
587
+ }
588
+ .header-center {
589
+ display: none; /* Simplify header for mobile */
590
+ }
591
+ .search-bar-mobile {
592
+ display: flex; /* Would need to implement mobile search toggle */
593
+ }
594
+ .video-grid {
595
+ grid-template-columns: 1fr;
596
+ }
597
+ }
598
+ </style>
599
+ </head>
600
+ <body>
601
+
602
+ <!-- Header -->
603
+ <header>
604
+ <div class="header-left">
605
+ <button class="btn-icon" id="menu-btn" aria-label="Menu">
606
+ <i class="fa-solid fa-bars"></i>
607
+ </button>
608
+ <a href="#" class="logo" onclick="app.goHome()">
609
+ <i class="fa-brands fa-youtube"></i>
610
+ <span>StreamTube</span>
611
+ </a>
612
+ </div>
613
+
614
+ <div class="header-center">
615
+ <div class="search-bar">
616
+ <input type="text" placeholder="Rechercher" id="search-input">
617
+ <button id="search-btn">
618
+ <i class="fa-solid fa-magnifying-glass"></i>
619
+ </button>
620
+ </div>
621
+ <button class="btn-icon" style="margin-left: 8px;">
622
+ <i class="fa-solid fa-microphone"></i>
623
+ </button>
624
+ </div>
625
+
626
+ <div class="header-right">
627
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with-link">
628
+ Built with anycoder
629
+ </a>
630
+ <button class="btn-icon">
631
+ <i class="fa-solid fa-video"></i>
632
+ </button>
633
+ <button class="btn-icon">
634
+ <i class="fa-solid fa-bell"></i>
635
+ </button>
636
+ <div class="user-avatar">
637
+ <img src="https://picsum.photos/seed/user/100/100" alt="Avatar">
638
+ </div>
639
+ </div>
640
+ </header>
641
+
642
+ <!-- Sidebar -->
643
+ <aside class="sidebar" id="sidebar">
644
+ <a href="#" class="nav-item active" onclick="app.goHome()">
645
+ <i class="fa-solid fa-house"></i>
646
+ <span>Accueil</span>
647
+ </a>
648
+ <a href="#" class="nav-item">
649
+ <i class="fa-solid fa-fire"></i>
650
+ <span>Tendances</span>
651
+ </a>
652
+ <a href="#" class="nav-item">
653
+ <i class="fa-solid fa-music"></i>
654
+ <span>Musique</span>
655
+ </a>
656
+ <a href="#" class="nav-item">
657
+ <i class="fa-solid fa-gamepad"></i>
658
+ <span>Jeux vidéo</span>
659
+ </a>
660
+
661
+ <div class="nav-section-title">Mes Abonnements</div>
662
+ <a href="#" class="nav-item">
663
+ <i class="fa-solid fa-user-circle"></i>
664
+ <span>TechMaster</span>
665
+ </a>
666
+ <a href="#" class="nav-item">
667
+ <i class="fa-solid fa-user-circle"></i>
668
+ <span>NatureVibe</span>
669
+ </a>
670
+ <a href="#" class="nav-item">
671
+ <i class="fa-solid fa-user-circle"></i>
672
+ <span>CodingLife</span>
673
+ </a>
674
+ </aside>
675
+
676
+ <!-- Main Content -->
677
+ <main id="main-content">
678
+
679
+ <!-- HOME VIEW -->
680
+ <section id="home-view">
681
+ <div class="chips-container">
682
+ <div class="chip active">Tout</div>
683
+ <div class="chip">Jeux vidéo</div>
684
+ <div class="chip">Musique</div>
685
+ <div class="chip">Direct</div>
686
+ <div class="chip">Programmation</div>
687
+ <div class="chip">Nature</div>
688
+ <div class="chip">Cuisine</div>
689
+ <div class="chip">Actualités</div>
690
+ </div>
691
+
692
+ <div class="video-grid" id="video-grid">
693
+ <!-- Video cards injected by JS -->
694
+ </div>
695
+ </section>
696
+
697
+ <!-- WATCH VIEW -->
698
+ <section id="watch-view">
699
+ <div class="player-column">
700
+ <div class="video-wrapper">
701
+ <video id="main-player" controls>
702
+ <source src="" type="video/mp4">
703
+ Votre navigateur ne supporte pas la lecture vidéo.
704
+ </video>
705
+ </div>
706
+
707
+ <h1 class="watch-title" id="watch-title">Titre de la vidéo</h1>
708
+
709
+ <div class="watch-actions-bar">
710
+ <div class="channel-info-row">
711
+ <img src="" alt="" class="channel-icon" id="watch-channel-icon">
712
+ <div>
713
+ <h3 id="watch-channel-name">Nom de la chaîne</h3>
714
+ <span style="font-size: 0.8rem; color: #aaa;">120 k abonnés</span>
715
+ </div>
716
+ <button class="subscribe-btn" onclick="app.toggleSubscribe(this)">S'abonner</button>
717
+ </div>
718
+
719
+ <div class="actions-buttons">
720
+ <button class="action-chip" onclick="app.showToast('J\'aime cette vidéo')">
721
+ <i class="fa-regular fa-thumbs-up"></i> 12k
722
+ </button>
723
+ <button class="action-chip" onclick="app.showToast('Je n\'aime pas cette vidéo')">
724
+ <i class="fa-regular fa-thumbs-down"></i>
725
+ </button>
726
+ <button class="action-chip" onclick="app.showToast('Lien copié !')">
727
+ <i class="fa-solid fa-share"></i> Partager
728
+ </button>
729
+ </div>
730
+ </div>
731
+
732
+ <div class="description-box" id="watch-description">
733
+ <!-- Description injected here -->
734
+ </div>
735
+
736
+ <div class="comments-section">
737
+ <h3>142 Commentaires</h3>
738
+ <br>
739
+ <div class="comment">
740
+ <div class="user-avatar" style="width: 40px; height: 40px;">
741
+ <img src="https://picsum.photos/seed/c1/40/40" alt="User">
742
+ </div>
743
+ <div class="comment-body">
744
+ <h4>Jean Dupont <span style="color:#aaa; font-weight:400; font-size:0.75rem;">Il y a 2 heures</span></h4>
745
+ <p>Super vidéo, merci pour le contenu ! J'ai appris beaucoup de choses.</p>
746
+ </div>
747
+ </div>
748
+ <div class="comment">
749
+ <div class="user-avatar" style="width: 40px; height: 40px;">
750
+ <img src="https://picsum.photos/seed/c2/40/40" alt="User">
751
+ </div>
752
+ <div class="comment-body">
753
+ <h4>Sarah Connor <span style="color:#aaa; font-weight:400; font-size:0.75rem;">Il y a 5 heures</span></h4>
754
+ >La qualité est incroyable. Continue comme ça !</p>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="recommendations-column" id="recommendations-list">
761
+ <!-- Recommendations injected by JS -->
762
+ </div>
763
+ </section>
764
+
765
+ </main>
766
+
767
+ <!-- Toast Container -->
768
+ <div id="toast-container"></div>
769
+
770
+ <script>
771
+ /**
772
+ * Application Logic
773
+ * Handles data, routing between Home and Watch views, and interactions.
774
+ */
775
+ const app = {
776
+ // Mock Data: Videos
777
+ // Using Pexels Sample Videos for functionality
778
+ videos: [
779
+ {
780
+ id: 1,
781
+ title: "L'avenir de l'Intelligence Artificielle en 2024",
782
+ channel: "TechMaster",
783
+ views: "1.2 M de vues",
784
+ date: "il y a 2 jours",
785
+ duration: "12:34",
786
+ thumbnail: "https://picsum.photos/seed/tech1/400/225",
787
+ avatar: "https://picsum.photos/seed/avatar1/50/50",
788
+ description: "Découvrez comment l'IA va transformer notre quotidien dans cette analyse approfondie des dernières technologies.",
789
+ videoSrc: "https://videos.pexels.com/video-files/3129671/3129671-uhd_2560_1440_30fps.mp4"
790
+ },
791
+ {
792
+ id: 2,
793
+ title: "Relaxation : Sons de la forêt et pluie douce",
794
+ channel: "NatureVibe",
795
+ views: "850 k vues",
796
+ date: "il y a 1 semaine",
797
+ duration: "45:00",
798
+ thumbnail: "https://picsum.photos/seed/nature1/400/225",
799
+ avatar: "https://picsum.photos/seed/avatar2/50/50",
800
+ description: "Une vidéo pour se détendre et se concentrer. Enregistrement binaural haute qualité.",
801
+ videoSrc: "https://videos.pexels.com/video-files/855564/855564-hd_1920_1080_30fps.mp4"
802
+ },
803
+ {
804
+ id: 3,
805
+ title: "Apprendre le CSS Grid en 10 minutes",
806
+ channel: "CodeFast",
807
+ views: "45 k vues",
808
+ date: "il y a 4 heures",
809
+ duration: "10:05",
810
+ thumbnail: "https://picsum.photos/seed/code1/400/225",
811
+ avatar: "https://picsum.photos/seed/avatar3/50/50",
812
+ description: "Le guide ultime pour maîtriser les mises en page modernes avec CSS Grid.",
813
+ videoSrc: "https://videos.pexels.com/video-files/3129957/3129957-uhd_2560_1440_25fps.mp4"
814
+ },
815
+ {
816
+ id: 4,
817
+ title: "Voyage au Japon : Les rues de Tokyo",
818
+ channel: "TravelDiaries",
819
+ views: "2.5 M de vues",
820
+ date: "il y a 1 mois",
821
+ duration: "24:10",
822
+ thumbnail: "https://picsum.photos/seed/travel1/400/225",
823
+ avatar: "https://picsum.photos/seed/avatar4/50/50",
824
+ description: "Explorons la capitale japonaise, de Shinjuku à Akihabara. Une immersion culturelle totale.",
825
+ videoSrc: "https://videos.pexels.com/video-files/5752729/5752729-hd_1920_1080_25fps.mp4"
826
+ },
827
+ {
828
+ id: 5,
829
+ title: "Recette : Pâtes Carbonara Authentiques",
830
+ channel: "Chef Luigi",
831
+ views: "300 k vues",
832
+ date: "il y a 3 jours",
833
+ duration: "08:45",
834
+ thumbnail: "https://picsum.photos/seed/food1/400/225",
835
+ avatar: "https://picsum.photos/seed/avatar5/50/50",
836
+ description: "Oubliez la crème ! Voici la vraie recette romaine pour des pâtes parfaites.",
837
+ videoSrc: "https://videos.pexels.com/video-files/5497132/5497132-hd_1920_1080_25fps.mp4"
838
+ },
839
+ {
840
+ id: 6,
841
+ title: "Top 10 des Buts de l'Année",
842
+ channel: "SportCenter",
843
+ views: "5 M de vues",
844
+ date: "il y a 2 mois",
845
+ duration: "15:20",
846
+ thumbnail: "https://picsum.photos/seed/sport1/400/225",
847
+ avatar: "https://picsum.photos/seed/avatar6/50/50",
848
+ description: "Les moments les plus spectaculaires du monde sportif cette année.",
849
+ videoSrc: "https://videos.pexels.com/video-files/4763826/4763826-hd_1920_1080_24fps.mp4"
850
+ },
851
+ {
852
+ id: 7,
853
+ title: "Musique Lofi pour coder et travailler",
854
+ channel: "LofiGirl",
855
+ views: "10 vues en direct",
856
+ date: "En cours",
857
+ duration: "LIVE",
858
+ thumbnail: "https://picsum.photos/seed/music1/400/225",
859
+ avatar: "https://picsum.photos/seed/avatar7/50/50",
860
+ description: "Beats to relax/study to. Stream 24/7.",
861
+ videoSrc: "https://videos.pexels.com/video-files/6789143/6789143-hd_1920_1080_30fps.mp4"
862
+ },
863
+ {
864
+ id: 8,
865
+ title: "Review du nouveau Smartphone X",
866
+ channel: "GadgetsRev",
867
+ views: "600 k vues",
868
+ date: "il y a 5 jours",
869
+ duration: "18:30",
870
+ thumbnail: "https://picsum.photos/seed/gadget1/400/225",
871
+ avatar: "https://picsum.photos/seed/avatar8/50/50",
872
+ description: "Vaut-il vraiment son prix ? Tests de performance, autonomie et photo.",
873
+ videoSrc: "https://videos.pexels.com/video-files/853800/853800-hd_1920_1080_24fps.mp4"
874
+ }
875
+ ],
876
+
877
+ /**
878
+ * Initialize the application
879
+ */
880
+ init: function() {
881
+ this.renderHome();
882
+ this.setupEventListeners();
883
+ },
884
+
885
+ /**
886
+ * Render the Home Grid
887
+ */
888
+ renderHome: function() {
889
+ const grid = document.getElementById('video-grid');
890
+ grid.innerHTML = this.videos.map(video => `
891
+ <div class="video-card" onclick="app.watchVideo(${video.id})">
892
+ <div class="thumbnail-container">
893
+ <img src="${video.thumbnail}" alt="${video.title}">
894
+ <div class="duration">${video.duration}</div>
895
+ </div>
896
+ <div class="video-info">
897
+ <img class="channel-icon" src="${video.avatar}" alt="${video.channel}">
898
+ <div class="video-details">
899
+ <h3 class="video-title">${video.title}</h3>
900
+ <div class="channel-name">${video.channel}</div>
901
+ <div class="video-meta">${video.views} • ${video.date}</div>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ `).join('');
906
+ },
907
+
908
+ /**
909
+ * Switch to Watch View for a specific video
910
+ */
911
+ watchVideo: function(id) {
912
+ const video = this.videos.find(v => v.id === id);
913
+ if (!video) return;
914
+
915
+ // Hide Home, Show Watch
916
+ document.getElementById('home-view').style.display = 'none';
917
+ document.getElementById('watch-view').style.display = 'flex';
918
+ document.getElementById('sidebar').style.transform = 'translateX(-100%)'; // Hide sidebar on mobile/tablet when watching
919
+
920
+ // Set Player Source
921
+ const player = document.getElementById('main-player');
922
+ player.src = video.videoSrc;
923
+ player.load();
924
+ player.play().catch(e => console.log("Auto-play prevented by browser"));
925
+
926
+ // Set Metadata
927
+ document.getElementById('watch-title').innerText = video.title;
928
+ document.getElementById('watch-channel-name').innerText = video.channel;
929
+ document.getElementById('watch-channel-icon').src = video.avatar;
930
+ document.getElementById('watch-description').innerText = video.description;
931
+
932
+ // Reset Subscribe Button
933
+ const subBtn = document.querySelector('.subscribe-btn');
934
+ subBtn.classList.remove('subscribed');
935
+ subBtn.innerText = "S'abonner";
936
+
937
+ // Render Recommendations (exclude current)
938
+ this.renderRecommendations(id);
939
+
940
+ // Scroll to top
941
+ window.scrollTo(0, 0);
942
+ },
943
+
944
+ /**
945
+ * Render Recommendations Sidebar
946
+ */
947
+ renderRecommendations: function(currentId) {
948
+ const list = document.getElementById('recommendations-list');
949
+ const others = this.videos.filter(v => v.id !== currentId);
950
+
951
+ list.innerHTML = others.map(video => `
952
+ <div class="rec-video-card" onclick="app.watchVideo(${video.id})">
953
+ <div class="rec-thumbnail">
954
+ <img src="${video.thumbnail}" alt="${video.title}">
955
+ <div class="duration" style="font-size: 0.7rem; padding: 1px 3px;">${video.duration}</div>
956
+ </div>
957
+ <div class="rec-info">
958
+ <h4>${video.title}</h4>
959
+ <p>${video.channel}</p>
960
+ <p>${video.views} • ${video.date}</p>
961
+ </div>
962
+ </div>
963
+ `).join('');
964
+ },
965
+
966
+ /**
967
+ * Return to Home View
968
+ */
969
+ goHome: function() {
970
+ // Stop Video
971
+ const player = document.getElementById('main-player');
972
+ player.pause();
973
+ player.src = "";
974
+
975
+ // Show Home, Hide Watch
976
+ document.getElementById('home-view').style.display = 'block';
977
+ document.getElementById('watch-view').style.display = 'none';
978
+
979
+ // Reset Sidebar visibility for desktop
980
+ if (window.innerWidth > 768) {
981
+ document.getElementById('sidebar').style.transform = 'translateX(0)';
982
+ }
983
+ },
984
+
985
+ /**
986
+ * Toggle Subscribe Button State
987
+ */
988
+ toggleSubscribe: function(btn) {
989
+ if (btn.classList.contains('subscribed')) {
990
+ btn.classList.remove('subscribed');
991
+ btn.innerText = "S'abonner";
992
+ this.showToast("Abonnement annulé");
993
+ } else {
994
+ btn.classList.add('subscribed');
995
+ btn.innerText = "Abonné";
996
+ this.showToast("Abonnement réussi !");
997
+ }
998
+ },
999
+
1000
+ /**
1001
+ * Show a Toast Notification
1002
+ */
1003
+ showToast: function(message) {
1004
+ const container = document.getElementById('toast-container');
1005
+ const toast = document.createElement('div');
1006
+ toast.className = 'toast';
1007
+ toast.innerText = message;
1008
+ container.appendChild(toast);
1009
+
1010
+ // Remove after 3 seconds
1011
+ setTimeout(() => {
1012
+ toast.style.opacity = '0';
1013
+ setTimeout(() => toast.remove(), 300);
1014
+ }, 3000);
1015
+ },
1016
+
1017
+ /**
1018
+ * Setup Event Listeners
1019
+ */
1020
+ setupEventListeners: function() {
1021
+ // Mobile Menu Toggle
1022
+ document.getElementById('menu-btn').addEventListener('click', () => {
1023
+ const sidebar = document.getElementById('sidebar');
1024
+ if (sidebar.style.transform === 'translateX(0px)') {
1025
+ sidebar.style.transform = ''; // Revert to CSS default (media query dependent)
1026
+ if(window.innerWidth <= 768) sidebar.style.transform = 'translateX(-100%)';
1027
+ } else {
1028
+ sidebar.style.transform = 'translateX(0px)';
1029
+ }
1030
+ });
1031
+
1032
+ // Search Functionality
1033
+ document.getElementById('search-btn').addEventListener('click', () => {
1034
+ const query = document.getElementById('search-input').value.toLowerCase();
1035
+ if (!query) return;
1036
+
1037
+ const filtered = this.videos.filter(v =>
1038
+ v.title.toLowerCase().includes(query) ||
1039
+ v.channel.toLowerCase().includes(query)
1040
+ );
1041
+
1042
+ const grid = document.getElementById('video-grid');
1043
+ if (filtered.length > 0) {
1044
+ this.goHome(); // Ensure we are on home view
1045
+ grid.innerHTML = filtered.map(video => `
1046
+ <div class="video-card" onclick="app.watchVideo(${video.id})">
1047
+ <div class="thumbnail-container">
1048
+ <img src="${video.thumbnail}" alt="${video.title}">
1049
+ <div class="duration">${video.duration}</div>
1050
+ </div>
1051
+ <div class="video-info">
1052
+ <img class="channel-icon" src="${video.avatar}" alt="${video.channel}">
1053
+ <div class="video-details">
1054
+ <h3 class="video-title">${video.title}</h3>
1055
+ <div class="channel-name">${video.channel}</div>
1056
+ <div class="video-meta">${video.views} • ${video.date}</div>
1057
+ </div>
1058
+ </div>
1059
+ </div>
1060
+ `).join('');
1061
+ this.showToast(`${filtered.length} résultat(s) trouvé(s)`);
1062
+ } else {
1063
+ this.showToast("Aucune vidéo trouvée");
1064
+ }
1065
+ });
1066
+
1067
+ // Allow 'Enter' key for search
1068
+ document.getElementById('search-input').addEventListener('keypress', (e) => {
1069
+ if (e.key === 'Enter') {
1070
+ document.getElementById('search-btn').click();
1071
+ }
1072
+ });
1073
+ }
1074
+ };
1075
+
1076
+ // Start App
1077
+ document.addEventListener('DOMContentLoaded', () => {
1078
+ app.init();
1079
+ });
1080
+
1081
+ </script>
1082
+ </body>
1083
+ </html>