Hugging Face's logo

Spaces:
Mousco
/
anycoder-8d8b56d9
Running

App Files Community
Mousco commited on
Commit
f2d0e58
·
verified ·
1 Parent(s): 7ed0b21

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +608 -19
index.html CHANGED
@@ -1,19 +1,608 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Retro Cinema - Night of the Living Dead</title>
7
+ <!-- Importing FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ /* --- CSS VARIABLES & RESET --- */
12
+ :root {
13
+ --bg-body: #0f0f0f;
14
+ --bg-surface: #1f1f1f;
15
+ --bg-surface-hover: #2a2a2a;
16
+ --bg-header: rgba(15, 15, 15, 0.95);
17
+ --text-primary: #ffffff;
18
+ --text-secondary: #aaaaaa;
19
+ --accent-color: #e50914; /* Netflix-like Red */
20
+ --accent-hover: #b20710;
21
+ --border-color: #333;
22
+ --spacing-unit: 1rem;
23
+ --max-width: 1400px;
24
+ --radius: 8px;
25
+ --shadow: 0 4px 20px rgba(0,0,0,0.5);
26
+ --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ box-sizing: border-box;
32
+ margin: 0;
33
+ padding: 0;
34
+ }
35
+
36
+ body {
37
+ font-family: var(--font-main);
38
+ background-color: var(--bg-body);
39
+ color: var(--text-primary);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ display: flex;
43
+ flex-direction: column;
44
+ min-height: 100vh;
45
+ }
46
+
47
+ a { text-decoration: none; color: inherit; transition: var(--transition); }
48
+ ul { list-style: none; }
49
+ button { cursor: pointer; border: none; font-family: inherit; }
50
+
51
+ /* --- HEADER --- */
52
+ header {
53
+ position: fixed;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 70px;
58
+ background-color: var(--bg-header);
59
+ backdrop-filter: blur(10px);
60
+ border-bottom: 1px solid var(--border-color);
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: space-between;
64
+ padding: 0 2rem;
65
+ z-index: 1000;
66
+ transition: transform 0.3s ease;
67
+ }
68
+
69
+ .brand {
70
+ display: flex;
71
+ align-items: center;
72
+ gap: 10px;
73
+ font-size: 1.5rem;
74
+ font-weight: 700;
75
+ color: var(--accent-color);
76
+ letter-spacing: -0.5px;
77
+ }
78
+
79
+ .brand i { font-size: 1.8rem; }
80
+
81
+ .nav-links {
82
+ display: flex;
83
+ gap: 20px;
84
+ }
85
+
86
+ .nav-links a {
87
+ color: var(--text-secondary);
88
+ font-weight: 500;
89
+ font-size: 0.95rem;
90
+ }
91
+
92
+ .nav-links a:hover, .nav-links a.active {
93
+ color: var(--text-primary);
94
+ }
95
+
96
+ .anycoder-credit {
97
+ font-size: 0.85rem;
98
+ color: var(--text-secondary);
99
+ background: rgba(255,255,255,0.05);
100
+ padding: 6px 12px;
101
+ border-radius: 20px;
102
+ border: 1px solid transparent;
103
+ }
104
+
105
+ .anycoder-credit:hover {
106
+ border-color: var(--accent-color);
107
+ color: var(--text-primary);
108
+ background: rgba(229, 9, 20, 0.1);
109
+ }
110
+
111
+ /* --- MAIN LAYOUT --- */
112
+ main {
113
+ margin-top: 70px;
114
+ flex: 1;
115
+ display: grid;
116
+ grid-template-columns: 1fr 350px; /* Video area + Sidebar */
117
+ gap: 2rem;
118
+ padding: 2rem;
119
+ max-width: var(--max-width);
120
+ width: 100%;
121
+ margin-left: auto;
122
+ margin-right: auto;
123
+ }
124
+
125
+ /* --- VIDEO PLAYER SECTION --- */
126
+ .video-container {
127
+ width: 100%;
128
+ background: #000;
129
+ border-radius: var(--radius);
130
+ overflow: hidden;
131
+ box-shadow: var(--shadow);
132
+ position: relative;
133
+ /* Aspect Ratio Hack for responsiveness if needed, but video tag handles it well */
134
+ }
135
+
136
+ /* The user requested specific video tag attributes */
137
+ video {
138
+ display: block;
139
+ width: 100%;
140
+ max-height: 80vh;
141
+ outline: none;
142
+ }
143
+
144
+ .video-controls-bar {
145
+ display: flex;
146
+ justify-content: space-between;
147
+ align-items: center;
148
+ padding: 1rem 0;
149
+ }
150
+
151
+ .btn-action {
152
+ background: var(--bg-surface);
153
+ color: var(--text-primary);
154
+ padding: 10px 20px;
155
+ border-radius: 4px;
156
+ font-weight: 600;
157
+ display: flex;
158
+ align-items: center;
159
+ gap: 8px;
160
+ transition: var(--transition);
161
+ }
162
+
163
+ .btn-action:hover {
164
+ background: var(--bg-surface-hover);
165
+ transform: translateY(-2px);
166
+ }
167
+
168
+ .btn-action.primary {
169
+ background: var(--accent-color);
170
+ }
171
+
172
+ .btn-action.primary:hover {
173
+ background: var(--accent-hover);
174
+ }
175
+
176
+ .btn-action i { font-size: 1.1rem; }
177
+
178
+ /* --- VIDEO INFO --- */
179
+ .video-meta {
180
+ margin-top: 1.5rem;
181
+ }
182
+
183
+ .video-title {
184
+ font-size: 2rem;
185
+ font-weight: 800;
186
+ margin-bottom: 0.5rem;
187
+ line-height: 1.2;
188
+ }
189
+
190
+ .video-stats {
191
+ display: flex;
192
+ gap: 15px;
193
+ color: var(--text-secondary);
194
+ font-size: 0.9rem;
195
+ margin-bottom: 1.5rem;
196
+ align-items: center;
197
+ }
198
+
199
+ .badge {
200
+ background: var(--bg-surface);
201
+ padding: 2px 8px;
202
+ border-radius: 4px;
203
+ font-size: 0.8rem;
204
+ font-weight: 600;
205
+ color: var(--text-primary);
206
+ border: 1px solid var(--border-color);
207
+ }
208
+
209
+ .video-description {
210
+ background: var(--bg-surface);
211
+ padding: 1.5rem;
212
+ border-radius: var(--radius);
213
+ font-size: 1rem;
214
+ color: #ddd;
215
+ line-height: 1.7;
216
+ border: 1px solid var(--border-color);
217
+ }
218
+
219
+ .video-description h3 {
220
+ margin-bottom: 10px;
221
+ color: var(--text-primary);
222
+ }
223
+
224
+ /* --- SIDEBAR (Up Next) --- */
225
+ .sidebar {
226
+ display: flex;
227
+ flex-direction: column;
228
+ gap: 1rem;
229
+ }
230
+
231
+ .sidebar-title {
232
+ font-size: 1.2rem;
233
+ font-weight: 700;
234
+ margin-bottom: 0.5rem;
235
+ display: flex;
236
+ align-items: center;
237
+ gap: 10px;
238
+ }
239
+
240
+ .recommended-card {
241
+ display: flex;
242
+ gap: 10px;
243
+ background: var(--bg-surface);
244
+ padding: 10px;
245
+ border-radius: var(--radius);
246
+ cursor: pointer;
247
+ transition: var(--transition);
248
+ }
249
+
250
+ .recommended-card:hover {
251
+ background: var(--bg-surface-hover);
252
+ transform: translateX(-5px);
253
+ }
254
+
255
+ .rec-thumb {
256
+ width: 120px;
257
+ height: 68px;
258
+ background-color: #333;
259
+ border-radius: 4px;
260
+ overflow: hidden;
261
+ flex-shrink: 0;
262
+ }
263
+
264
+ .rec-thumb img {
265
+ width: 100%;
266
+ height: 100%;
267
+ object-fit: cover;
268
+ }
269
+
270
+ .rec-info {
271
+ display: flex;
272
+ flex-direction: column;
273
+ justify-content: center;
274
+ }
275
+
276
+ .rec-title {
277
+ font-size: 0.95rem;
278
+ font-weight: 600;
279
+ margin-bottom: 5px;
280
+ line-height: 1.3;
281
+ color: var(--text-primary);
282
+ }
283
+
284
+ .rec-meta {
285
+ font-size: 0.8rem;
286
+ color: var(--text-secondary);
287
+ }
288
+
289
+ /* --- CINEMA MODE --- */
290
+ body.cinema-mode header,
291
+ body.cinema-mode .sidebar,
292
+ body.cinema-mode .footer {
293
+ opacity: 0;
294
+ pointer-events: none;
295
+ }
296
+
297
+ body.cinema-mode main {
298
+ grid-template-columns: 1fr;
299
+ max-width: 100%;
300
+ padding: 1rem;
301
+ margin-top: 60px; /* slight offset */
302
+ gap: 0;
303
+ display: block;
304
+ }
305
+
306
+ body.cinema-mode .video-container {
307
+ border-radius: 0;
308
+ max-width: 100%;
309
+ box-shadow: none;
310
+ position: sticky;
311
+ top: 0;
312
+ z-index: 999;
313
+ }
314
+
315
+ body.cinema-mode .video-meta,
316
+ body.cinema-mode .video-controls-bar,
317
+ body.cinema-mode .video-description {
318
+ display: none;
319
+ }
320
+
321
+ body.cinema-mode .cinema-toggle {
322
+ position: fixed;
323
+ bottom: 20px;
324
+ right: 20px;
325
+ z-index: 1001;
326
+ opacity: 1;
327
+ pointer-events: auto;
328
+ background: rgba(0,0,0,0.7);
329
+ }
330
+
331
+ /* --- FOOTER --- */
332
+ footer {
333
+ margin-top: auto;
334
+ padding: 2rem;
335
+ text-align: center;
336
+ color: var(--text-secondary);
337
+ font-size: 0.9rem;
338
+ border-top: 1px solid var(--border-color);
339
+ background: var(--bg-surface);
340
+ }
341
+
342
+ /* --- TOAST --- */
343
+ .toast {
344
+ position: fixed;
345
+ bottom: 30px;
346
+ left: 50%;
347
+ transform: translateX(-50%) translateY(100px);
348
+ background: var(--text-primary);
349
+ color: var(--bg-body);
350
+ padding: 12px 24px;
351
+ border-radius: 50px;
352
+ font-weight: 600;
353
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
354
+ opacity: 0;
355
+ transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
356
+ z-index: 2000;
357
+ display: flex;
358
+ align-items: center;
359
+ gap: 10px;
360
+ }
361
+
362
+ .toast.show {
363
+ transform: translateX(-50%) translateY(0);
364
+ opacity: 1;
365
+ }
366
+
367
+ /* --- RESPONSIVE --- */
368
+ @media (max-width: 900px) {
369
+ main {
370
+ grid-template-columns: 1fr;
371
+ }
372
+ .sidebar {
373
+ display: none; /* Hide sidebar on tablet/mobile for cleaner look */
374
+ }
375
+ }
376
+
377
+ @media (max-width: 600px) {
378
+ header {
379
+ padding: 0 1rem;
380
+ }
381
+ .brand span { display: none; } /* Hide text logo on small screens */
382
+ .video-title { font-size: 1.5rem; }
383
+ .nav-links { display: none; }
384
+ }
385
+
386
+ </style>
387
+ </head>
388
+ <body>
389
+
390
+ <!-- Header -->
391
+ <header id="main-header">
392
+ <div class="brand">
393
+ <i class="fas fa-film"></i>
394
+ <span>RetroStream</span>
395
+ </div>
396
+
397
+ <nav class="nav-links">
398
+ <a href="#" class="active">Home</a>
399
+ <a href="#">Movies</a>
400
+ <a href="#">Classics</a>
401
+ <a href="#">My List</a>
402
+ </nav>
403
+
404
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit">
405
+ Built with anycoder <i class="fas fa-external-link-alt" style="font-size:0.7em; margin-left:4px;"></i>
406
+ </a>
407
+ </header>
408
+
409
+ <!-- Main Content -->
410
+ <main>
411
+ <!-- Left Column: Video Player -->
412
+ <div class="content-column">
413
+ <div class="video-container">
414
+ <!-- USER REQUESTED VIDEO TAG -->
415
+ <video controls width="100%" poster="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Night-of-the-Living-Dead-1968-Theater-Poster.jpg/800px-Night-of-the-Living-Dead-1968-Theater-Poster.jpg">
416
+ <source src="https://archive.org/download/night_of_the_living_dead/night_of_the_living_dead_512kb.mp4" type="video/mp4">
417
+ Your browser does not support the video tag.
418
+ </video>
419
+ </div>
420
+
421
+ <!-- Controls -->
422
+ <div class="video-controls-bar">
423
+ <button class="btn-action" onclick="toggleCinemaMode()" title="Toggle Cinema Mode">
424
+ <i class="fas fa-expand"></i> <span style="display:none; @media(min-width:600px){display:inline;}">Cinema Mode</span>
425
+ </button>
426
+ <div style="display:flex; gap:10px;">
427
+ <button class="btn-action" onclick="copyLink()">
428
+ <i class="fas fa-share"></i> Share
429
+ </button>
430
+ <button class="btn-action primary" onclick="likeVideo(this)">
431
+ <i class="far fa-thumbs-up"></i> Like
432
+ </button>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Meta Data -->
437
+ <div class="video-meta">
438
+ <h1 class="video-title">Night of the Living Dead (1968)</h1>
439
+ <div class="video-stats">
440
+ <span class="badge">4K REMASTERED</span>
441
+ <span class="badge">HD</span>
442
+ <span><i class="fas fa-eye"></i> 1.2M Views</span>
443
+ <span><i class="fas fa-calendar"></i> 1968</span>
444
+ <span><i class="fas fa-clock"></i> 1h 36m</span>
445
+ </div>
446
+
447
+ <div class="video-description">
448
+ <h3>About the film</h3>
449
+ <p>
450
+ A ragtag group of Pennsylvanians barricade themselves in an old farmhouse to remain safe from a bloodthirsty, flesh-eating ghoul horde that is ravaging the East Coast of the United States. This film is a landmark in the zombie genre, establishing many tropes that would become standard in later works.
451
+ </p>
452
+ <br>
453
+ <p><strong>Director:</strong> George A. Romero</p>
454
+ <p><strong>Stars:</strong> Duane Jones, Judith O'Dea, Karl Hardman</p>
455
+ <p><strong>Genre:</strong> Horror / Thriller</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Right Column: Sidebar / Recommendations -->
461
+ <aside class="sidebar">
462
+ <div class="sidebar-title">
463
+ <i class="fas fa-history"></i> Up Next
464
+ </div>
465
+
466
+ <!-- Card 1 -->
467
+ <div class="recommended-card">
468
+ <div class="rec-thumb">
469
+ <img src="https://picsum.photos/seed/nosferatu/300/200" alt="Thumb">
470
+ </div>
471
+ <div class="rec-info">
472
+ <div class="rec-title">Nosferatu (1922)</div>
473
+ <div class="rec-meta">1h 33m • Horror</div>
474
+ </div>
475
+ </div>
476
+
477
+ <!-- Card 2 -->
478
+ <div class="recommended-card">
479
+ <div class="rec-thumb">
480
+ <img src="https://picsum.photos/seed/carnival/300/200" alt="Thumb">
481
+ </div>
482
+ <div class="rec-info">
483
+ <div class="rec-title">Carnival of Souls</div>
484
+ <div class="rec-meta">1h 18m • Mystery</div>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- Card 3 -->
489
+ <div class="recommended-card">
490
+ <div class="rec-thumb">
491
+ <img src="https://picsum.photos/seed/plan9/300/200" alt="Thumb">
492
+ </div>
493
+ <div class="rec-info">
494
+ <div class="rec-title">Plan 9 from Outer Space</div>
495
+ <div class="rec-meta">1h 19m • Sci-Fi</div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Card 4 -->
500
+ <div class="recommended-card">
501
+ <div class="rec-thumb">
502
+ <img src="https://picsum.photos/seed/house/300/200" alt="Thumb">
503
+ </div>
504
+ <div class="rec-info">
505
+ <div class="rec-title">House on Haunted Hill</div>
506
+ <div class="rec-meta">1h 15m • Horror</div>
507
+ </div>
508
+ </div>
509
+
510
+ <div style="margin-top: 20px; padding: 15px; background: #1a1a1a; border-radius: 8px;">
511
+ <h4 style="margin-bottom: 10px; color: var(--text-primary);">Subscribe to Channel</h4>
512
+ <p style="font-size: 0.85rem; color: #888; margin-bottom: 10px;">Get notified when we add new classic public domain films.</p>
513
+ <button class="btn-action primary" style="width: 100%; justify-content: center;">Subscribe</button>
514
+ </div>
515
+ </aside>
516
+ </main>
517
+
518
+ <!-- Footer -->
519
+ <footer class="footer">
520
+ <p>&copy; 2023 RetroStream Classics. All rights reserved.</p>
521
+ <p style="margin-top: 5px; font-size: 0.8rem; opacity: 0.6;">Content provided by Archive.org. Public Domain.</p>
522
+ </footer>
523
+
524
+ <!-- Toast Notification -->
525
+ <div id="toast" class="toast">
526
+ <i class="fas fa-check-circle"></i>
527
+ <span>Link copied to clipboard!</span>
528
+ </div>
529
+
530
+ <!-- Scripts -->
531
+ <script>
532
+ // Toggle Cinema Mode
533
+ function toggleCinemaMode() {
534
+ document.body.classList.toggle('cinema-mode');
535
+
536
+ const isCinema = document.body.classList.contains('cinema-mode');
537
+ const icon = document.querySelector('.btn-action i');
538
+
539
+ if (isCinema) {
540
+ icon.classList.remove('fa-expand');
541
+ icon.classList.add('fa-compress');
542
+ } else {
543
+ icon.classList.remove('fa-compress');
544
+ icon.classList.add('fa-expand');
545
+ }
546
+ }
547
+
548
+ // Copy Link Functionality
549
+ function copyLink() {
550
+ const url = window.location.href;
551
+ navigator.clipboard.writeText(url).then(() => {
552
+ showToast();
553
+ }).catch(err => {
554
+ console.error('Failed to copy: ', err);
555
+ });
556
+ }
557
+
558
+ // Show Toast Notification
559
+ function showToast() {
560
+ const toast = document.getElementById('toast');
561
+ toast.classList.add('show');
562
+ setTimeout(() => {
563
+ toast.classList.remove('show');
564
+ }, 3000);
565
+ }
566
+
567
+ // Like Button Interaction
568
+ function likeVideo(btn) {
569
+ const icon = btn.querySelector('i');
570
+ if (icon.classList.contains('far')) {
571
+ icon.classList.remove('far');
572
+ icon.classList.add('fas');
573
+ btn.style.color = 'var(--accent-color)';
574
+ showToastText("Added to Liked Videos");
575
+ } else {
576
+ icon.classList.remove('fas');
577
+ icon.classList.add('far');
578
+ btn.style.color = 'var(--text-primary)';
579
+ showToastText("Removed from Liked Videos");
580
+ }
581
+ }
582
+
583
+ // Helper to change toast text dynamically
584
+ function showToastText(message) {
585
+ const toast = document.getElementById('toast');
586
+ const span = toast.querySelector('span');
587
+ const originalText = span.innerText;
588
+
589
+ span.innerText = message;
590
+ toast.classList.add('show');
591
+
592
+ setTimeout(() => {
593
+ toast.classList.remove('show');
594
+ setTimeout(() => {
595
+ span.innerText = originalText; // Reset text
596
+ }, 300);
597
+ }, 3000);
598
+ }
599
+
600
+ // Keyboard shortcut for Cinema Mode (Esc to exit)
601
+ document.addEventListener('keydown', (e) => {
602
+ if (e.key === 'Escape' && document.body.classList.contains('cinema-mode')) {
603
+ toggleCinemaMode();
604
+ }
605
+ });
606
+ </script>
607
+ </body>
608
+ </html>