Hugging Face's logo

Spaces:
fLausch
/
anycoder-59bf9ee9
Running

App Files Community
fLausch commited on
Commit
ef7e1c4
·
verified ·
1 Parent(s): 8f4ba58

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +695 -467
index.html CHANGED
@@ -1,485 +1,713 @@
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>VStream - Modern Video Platform</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
 
8
- <!-- Icons: FontAwesome for UI elements -->
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
-
11
- <style>
12
- :root {
13
- --bg-dark: #0f0f11;
14
- --bg-card: #1a1a1d;
15
- --primary: #ff4757;
16
- --primary-hover: #ff6b81;
17
- --text-main: #ffffff;
18
- --text-secondary: #a1a1a6;
19
- --border-color: #2f2f35;
20
- --transition: all 0.3s ease;
21
- }
22
-
23
- * {
24
- margin: 0;
25
- padding: 0;
26
- box-sizing: border-box;
27
- }
28
-
29
- body {
30
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
- background-color: var(--bg-dark);
32
- color: var(--text-main);
33
- line-height: 1.6;
34
- overflow-x: hidden;
35
- }
36
-
37
- a { text-decoration: none; color: inherit; }
38
- ul { list-style: none; }
39
-
40
- /* --- Header / Navbar --- */
41
- header {
42
- position: sticky;
43
- top: 0;
44
- z-index: 1000;
45
- background-color: rgba(15, 15, 17, 0.95);
46
- backdrop-filter: blur(10px);
47
- padding: 1rem 2rem;
48
- display: flex;
49
- justify-content: space-between;
50
- align-items: center;
51
- border-bottom: 1px solid var(--border-color);
52
- }
53
-
54
- .logo {
55
- font-size: 1.8rem;
56
- font-weight: 800;
57
- color: var(--text-main);
58
- display: flex;
59
- align-items: center;
60
- gap: 10px;
61
- }
62
-
63
- .logo span { color: var(--primary); }
64
-
65
- .search-bar {
66
- display: flex;
67
- background: var(--bg-card);
68
- border-radius: 50px;
69
- padding: 10px 20px;
70
- align-items: center;
71
- border: 1px solid var(--border-color);
72
- width: 40%;
73
- transition: var(--transition);
74
- }
75
-
76
- .search-bar:focus-within {
77
- border-color: var(--primary);
78
- box-shadow: 0 0 15px rgba(255, 71, 87, 0.2);
79
- }
80
-
81
- .search-bar input {
82
- background: transparent;
83
- border: none;
84
- color: var(--text-main);
85
- margin-left: 15px;
86
- width: 100%;
87
- outline: none;
88
- font-size: 1rem;
89
- }
90
-
91
- .nav-actions {
92
- display: flex;
93
- align-items: center;
94
- gap: 20px;
95
- }
96
-
97
- .icon-btn {
98
- background: none;
99
- border: none;
100
- color: var(--text-main);
101
- font-size: 1.2rem;
102
- cursor: pointer;
103
- transition: var(--transition);
104
- position: relative;
105
- }
106
-
107
- .icon-btn:hover { color: var(--primary); }
108
-
109
- .user-avatar {
110
- width: 40px;
111
- height: 40px;
112
- border-radius: 50%;
113
- background: linear-gradient(45deg, var(--primary), #2ed573);
114
- display: flex;
115
- justify-content: center;
116
- align-items: center;
117
- font-weight: bold;
118
- cursor: pointer;
119
- }
120
-
121
- /* --- Hero Section --- */
122
- .hero {
123
- height: 60vh;
124
- background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url('https://picsum.photos/id/1018/1920/1080') center/cover no-repeat;
125
- display: flex;
126
- flex-direction: column;
127
- justify-content: center;
128
- align-items: center;
129
- text-align: center;
130
- padding: 2rem;
131
- position: relative;
132
- }
133
-
134
- .hero-content {
135
- max-width: 700px;
136
- z-index: 2;
137
- }
138
-
139
- .hero h1 {
140
- font-size: 3.5rem;
141
- margin-bottom: 1rem;
142
- line-height: 1.1;
143
- font-weight: 800;
144
- }
145
-
146
- .hero p {
147
- font-size: 1.2rem;
148
- color: var(--text-secondary);
149
- margin-bottom: 2rem;
150
- }
151
-
152
- .btn-primary {
153
- background-color: var(--primary);
154
- color: white;
155
- padding: 15px 40px;
156
- border-radius: 50px;
157
- font-weight: 600;
158
- font-size: 1.1rem;
159
- transition: var(--transition);
160
- cursor: pointer;
161
- border: none;
162
- display: inline-flex;
163
- align-items: center;
164
- gap: 10px;
165
- }
166
-
167
- .btn-primary:hover {
168
- background-color: var(--primary-hover);
169
- transform: translateY(-2px);
170
- box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3);
171
- }
172
-
173
- /* --- Main Content --- */
174
- main {
175
- padding: 3rem 2rem;
176
- max-width: 1400px;
177
- margin: 0 auto;
178
- }
179
-
180
- .section-title {
181
- font-size: 1.8rem;
182
- margin-bottom: 2rem;
183
- border-left: 5px solid var(--primary);
184
- padding-left: 15px;
185
- display: inline-block;
186
- }
187
-
188
- /* Video Grid */
189
- .video-grid {
190
- display: grid;
191
- grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
192
- gap: 2rem;
193
- }
194
-
195
- .video-card {
196
- background-color: var(--bg-card);
197
- border-radius: 12px;
198
- overflow: hidden;
199
- transition: var(--transition);
200
- cursor: pointer;
201
- group: "card";
202
- }
203
-
204
- .video-card:hover {
205
- transform: translateY(-5px);
206
- box-shadow: 0 15px 30px rgba(0,0,0,0.5);
207
- }
208
-
209
- .thumb-container {
210
- position: relative;
211
- width: 100%;
212
- padding-top: 56.25%; /* 16:9 Aspect Ratio */
213
- background-color: #000;
214
- }
215
-
216
- .thumb-container img {
217
- position: absolute;
218
- top: 0;
219
- left: 0;
220
- width: 100%;
221
- height: 100%;
222
- object-fit: cover;
223
- transition: transform 0.3s ease;
224
- }
225
-
226
- .video-card:hover .thumb-container img {
227
- transform: scale(1.05);
228
- }
229
-
230
- .duration {
231
- position: absolute;
232
- bottom: 10px;
233
- right: 10px;
234
- background: rgba(0,0,0,0.8);
235
- padding: 4px 8px;
236
- border-radius: 4px;
237
- font-size: 0.85rem;
238
- font-weight: 600;
239
- color: white;
240
- }
241
-
242
- .video-info {
243
- padding: 15px;
244
- display: flex;
245
- gap: 15px;
246
- }
247
-
248
- .channel-icon {
249
- width: 45px;
250
- height: 45px;
251
- border-radius: 50%;
252
- object-fit: cover;
253
- }
254
-
255
- .video-details {
256
- display: flex;
257
- flex-direction: column;
258
- }
259
-
260
- .video-title {
261
- font-size: 1.1rem;
262
- font-weight: 600;
263
- margin-bottom: 5px;
264
- color: var(--text-main);
265
- display: -webkit-box;
266
- -webkit-line-clamp: 2;
267
- -webkit-box-orient: vertical;
268
- overflow: hidden;
269
- }
270
-
271
- .channel-name {
272
- font-size: 0.9rem;
273
- color: var(--text-secondary);
274
- margin-bottom: 3px;
275
- }
276
-
277
- .video-meta {
278
- font-size: 0.85rem;
279
- color: #777;
280
- }
281
-
282
- /* --- Footer --- */
283
- footer {
284
- background-color: #0a0a0c;
285
- padding: 4rem 2rem;
286
- margin-top: 4rem;
287
- border-top: 1px solid var(--border-color);
288
- text-align: center;
289
- }
290
-
291
- .footer-content {
292
- max-width: 1000px;
293
- margin: 0 auto;
294
- }
295
-
296
- .footer-logo {
297
- font-size: 2rem;
298
- font-weight: 800;
299
- margin-bottom: 1rem;
300
- display: inline-block;
301
- }
302
-
303
- .footer-links {
304
- display: flex;
305
- justify-content: center;
306
- gap: 30px;
307
- margin-bottom: 2rem;
308
- flex-wrap: wrap;
309
- }
310
-
311
- .footer-links a { color: var(--text-secondary); transition: color 0.3s; }
312
- .footer-links a:hover { color: var(--primary); }
313
-
314
- .copyright {
315
- color: #555;
316
- font-size: 0.9rem;
317
- }
318
-
319
- .anycoder-link {
320
- margin-top: 20px;
321
- display: inline-block;
322
- color: #555;
323
- font-size: 0.8rem;
324
- text-decoration: underline;
325
- }
326
- .anycoder-link:hover { color: var(--primary); }
327
-
328
- /* Responsive */
329
- @media (max-width: 768px) {
330
- .hero h1 { font-size: 2.5rem; }
331
- .search-bar { width: 100%; display: none; } /* Hidden on mobile for simplicity */
332
- .video-grid { grid-template-columns: 1fr; }
333
- .nav-actions .icon-btn:last-child { display: none; }
334
- }
335
- </style>
336
  </head>
 
337
  <body>
338
 
339
- <!-- Header -->
340
- <header>
341
- <div class="logo">
342
- <i class="fa-solid fa-video" style="color: var(--primary);"></i>
343
- V<span>Stream</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  </div>
345
-
346
- <div class="search-bar">
347
- <i class="fa-solid fa-search" style="color: var(--text-secondary);"></i>
348
- <input type="text" placeholder="Search for movies, series, or creators...">
 
 
 
 
 
349
  </div>
350
-
351
- <div class="nav-actions">
352
- <button class="icon-btn" title="Create Video"><i class="fa-solid fa-circle-plus"></i></button>
353
- <button class="icon-btn" title="Notifications"><i class="fa-solid fa-bell"></i></button>
354
- <button class="icon-btn" title="Library"><i class="fa-solid fa-book"></i></button>
355
- <div class="user-avatar">JS</div>
 
 
 
356
  </div>
357
- </header>
358
-
359
- <!-- Hero Section -->
360
- <section class="hero">
361
- <div class="hero-content">
362
- <h1>Unlimited Entertainment<br>At Your Fingertips</h1>
363
- <p>Watch the latest blockbusters, exclusive series, and trending content anytime, anywhere. Join millions of viewers today.</p>
364
- <button class="btn-primary" onclick="playHeroVideo()">
365
- <i class="fa-solid fa-play"></i> Start Watching Free
366
- </button>
367
  </div>
368
- </section>
369
-
370
- <!-- Main Content -->
371
- <main>
372
- <div class="section-title">Trending Now</div>
373
-
374
- <div class="video-grid" id="videoGrid">
375
- <!-- Videos will be injected here via JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
376
  </div>
377
-
378
- <div style="margin-top: 4rem;" class="section-title">New Releases</div>
379
- <div class="video-grid" id="newReleasesGrid">
380
- <!-- More videos injected here -->
 
 
 
381
  </div>
382
- </main>
383
-
384
- <!-- Footer -->
385
- <footer>
386
- <div class="footer-content">
387
- <div class="footer-logo">V<span>Stream</span></div>
388
- <div class="footer-links">
389
- <a href="#">Home</a>
390
- <a href="#">Movies</a>
391
- <a href="#">TV Shows</a>
392
- <a href="#">My List</a>
393
- <a href="#">Premium</a>
394
- <a href="#">Help</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  </div>
396
- <p class="copyright">&copy; 2023 VStream Inc. All rights reserved.</p>
397
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
398
- </div>
399
- </footer>
400
-
401
- <script>
402
- // Mock Data for Videos
403
- const videos = [
404
- { title: "Amazing Nature: 4K Landscape Collection", channel: "Earth Scapes", views: "1.2M views", time: "2 days ago", duration: "10:05", img: "https://picsum.photos/id/1015/400/225" },
405
- { title: "Top 10 Tech Gadgets You Need in 2024", channel: "Tech Insider", views: "850K views", time: "1 week ago", duration: "14:20", img: "https://picsum.photos/id/1048/400/225" },
406
- { title: "Learn JavaScript in 30 Minutes - Crash Course", channel: "Code Master", views: "2.4M views", time: "3 months ago", duration: "30:00", img: "https://picsum.photos/id/1039/400/225" },
407
- { title: "Ultimate Home Workout - No Equipment", channel: "Fitness Pro", views: "500K views", time: "5 days ago", duration: "22:15", img: "https://picsum.photos/id/1069/400/225" },
408
- { title: "Travel Guide: Hidden Gems of Japan", channel: "Wanderlust", views: "3.1M views", time: "1 year ago", duration: "18:45", img: "https://picsum.photos/id/1064/400/225" },
409
- { title: "Cinematic Lo-Fi Beats to Study/Relax", channel: "Chill Hop", views: "10M views", time: "Live", duration: "LIVE", img: "https://picsum.photos/id/103/400/225" },
410
- { title: "Advanced CSS Grid Layouts Tutorial", channel: "Web Dev Simplified", views: "150K views", time: "2 weeks ago", duration: "45:30", img: "https://picsum.photos/id/1011/400/225" },
411
- { title: "Best Street Food in Thailand", channel: "Foodie Adventures", views: "900K views", time: "3 weeks ago", duration: "12:10", img: "https://picsum.photos/id/1059/400/225" },
412
- { title: "Sci-Fi Movie Review: The New Frontier", channel: "Cinema Review", views: "450K views", time: "1 day ago", duration: "15:00", img: "https://picsum.photos/id/1033/400/225" }
413
- ];
414
-
415
- // Function to generate HTML for video cards
416
- function generateVideoCards(videoData, containerId) {
417
- const container = document.getElementById(containerId);
418
- let htmlContent = '';
419
-
420
- videoData.forEach(video => {
421
- htmlContent += `
422
- <div class="video-card" onclick="playVideo('${video.title}')">
423
- <div class="thumb-container">
424
- <img src="${video.img}" alt="${video.title}">
425
- <div class="duration">${video.duration}</div>
426
- </div>
427
- <div class="video-info">
428
- <i class="fa-solid fa-circle-user" style="font-size: 1.5rem; color: #777;"></i>
429
- <div class="video-details">
430
- <h3 class="video-title">${video.title}</h3>
431
- <div class="channel-name">${video.channel}</div>
432
- <div class="video-meta">${video.views} • ${video.time}</div>
433
- </div>
434
- <button class="icon-btn" style="margin-left: auto;" onclick="event.stopPropagation(); toggleLike(this)">
435
- <i class="fa-regular fa-heart"></i>
436
- </button>
437
- </div>
438
- </div>`;
439
- });
440
-
441
- container.innerHTML = htmlContent;
442
- }
443
-
444
- // Initialize the app
445
- document.addEventListener('DOMContentLoaded', () => {
446
- generateVideoCards(videos, 'videoGrid');
447
- generateVideoCards(videos.slice(0, 5), 'newReleasesGrid');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
448
  });
449
-
450
- // Interactive Functions
451
- function playHeroVideo() {
452
- alert("Playing featured content... (Simulation)");
453
- }
454
-
455
- function playVideo(title) {
456
- // In a real app, this would redirect to a player page
457
- console.log(`Playing: ${title}`);
458
- alert(`Playing: ${title} (Simulation)`);
459
- }
460
-
461
- function toggleLike(btn) {
462
- const icon = btn.querySelector('i');
463
- if (icon.classList.contains('fa-heart')) {
464
- icon.classList.remove('fa-regular', 'fa-heart');
465
- icon.classList.add('fa-solid', 'fa-heart');
466
- icon.style.color = '#ff4757';
467
- } else {
468
- icon.classList.remove('fa-solid', 'fa-heart');
469
- icon.classList.add('fa-regular', 'fa-heart');
470
- icon.style.color = 'inherit';
471
- }
472
- }
473
-
474
- // Add simple hover effect for buttons
475
- document.querySelectorAll('.icon-btn').forEach(btn => {
476
- btn.addEventListener('click', function() {
477
- this.style.transform = 'scale(0.95)';
478
- setTimeout(() => {
479
- this.style.transform = 'scale(1)';
480
- }, 100);
481
- });
482
  });
483
- </script>
 
484
  </body>
 
485
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>VStream - Premium Content Platform</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+
10
+ <style>
11
+ :root {
12
+ --bg-dark: #0a0a0f;
13
+ --bg-card: #16161e;
14
+ --bg-hover: #20202b;
15
+ --primary: #6366f1; /* Modern Indigo */
16
+ --primary-glow: rgba(99, 102, 241, 0.4);
17
+ --accent: #ec4899; /* Pink accent for highlights */
18
+ --text-main: #f3f4f6;
19
+ --text-secondary: #9ca3af;
20
+ --border-color: #27272a;
21
+ --gradient-text: linear-gradient(90deg, var(--primary), var(--accent));
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ }
29
+
30
+ body {
31
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
32
+ background-color: var(--bg-dark);
33
+ color: var(--text-main);
34
+ line-height: 1.6;
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ a { text-decoration: none; color: inherit; }
39
+ ul { list-style: none; }
40
+
41
+ /* --- Navigation --- */
42
+ header {
43
+ position: sticky;
44
+ top: 0;
45
+ z-index: 1000;
46
+ background: rgba(10, 10, 15, 0.85);
47
+ backdrop-filter: blur(12px);
48
+ border-bottom: 1px solid var(--border-color);
49
+ padding: 1rem 4%;
50
+ display: flex;
51
+ justify-content: space-between;
52
+ align-items: center;
53
+ }
54
+
55
+ .logo {
56
+ font-size: 1.75rem;
57
+ font-weight: 800;
58
+ letter-spacing: -0.5px;
59
+ background: var(--gradient-text);
60
+ -webkit-background-clip: text;
61
+ -webkit-text-fill-color: transparent;
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 10px;
65
+ }
66
+
67
+ .nav-left, .nav-right { display: flex; align-items: center; gap: 20px; }
68
+
69
+ .search-container {
70
+ position: relative;
71
+ width: 300px;
72
+ transition: width 0.3s ease;
73
+ }
74
+
75
+ .search-container.active { width: 400px; }
76
+
77
+ .search-input {
78
+ width: 100%;
79
+ background: var(--bg-card);
80
+ border: 1px solid var(--border-color);
81
+ padding: 10px 40px 10px 15px;
82
+ border-radius: 8px;
83
+ color: white;
84
+ font-size: 0.95rem;
85
+ transition: all 0.3s;
86
+ }
87
+
88
+ .search-input:focus {
89
+ border-color: var(--primary);
90
+ box-shadow: 0 0 0 2px var(--primary-glow);
91
+ outline: none;
92
+ }
93
+
94
+ .search-icon {
95
+ position: absolute;
96
+ right: 15px;
97
+ top: 50%;
98
+ transform: translateY(-50%);
99
+ color: var(--text-secondary);
100
+ cursor: pointer;
101
+ }
102
+
103
+ .nav-btn {
104
+ background: var(--bg-card);
105
+ border: 1px solid var(--border-color);
106
+ color: var(--text-main);
107
+ padding: 8px 16px;
108
+ border-radius: 8px;
109
+ font-size: 0.9rem;
110
+ cursor: pointer;
111
+ transition: all 0.2s;
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 8px;
115
+ }
116
+
117
+ .nav-btn:hover { background: var(--bg-hover); border-color: var(--primary); }
118
+ .btn-primary { background: var(--primary); border-color: var(--primary); color: white; }
119
+ .btn-primary:hover { background: #4f46e5; box-shadow: 0 0 15px var(--primary-glow); }
120
+
121
+ /* --- Hero Section --- */
122
+ .hero {
123
+ position: relative;
124
+ height: 70vh;
125
+ display: flex;
126
+ align-items: center;
127
+ overflow: hidden;
128
+ }
129
+
130
+ .hero-bg {
131
+ position: absolute;
132
+ top: 0; left: 0; width: 100%; height: 100%;
133
+ object-fit: cover;
134
+ filter: brightness(0.4);
135
+ z-index: 1;
136
+ }
137
+
138
+ .hero-overlay {
139
+ position: absolute;
140
+ top: 0; left: 0; width: 100%; height: 100%;
141
+ background: linear-gradient(to top, var(--bg-dark) 10%, transparent 40%),
142
+ linear-gradient(to right, rgba(99, 102, 241, 0.2), transparent);
143
+ z-index: 2;
144
+ }
145
+
146
+ .hero-content {
147
+ position: relative;
148
+ z-index: 3;
149
+ max-width: 600px;
150
+ padding: 0 4%;
151
+ animation: fadeInUp 1s ease;
152
+ }
153
+
154
+ .badge {
155
+ display: inline-block;
156
+ background: rgba(255,255,255,0.15);
157
+ padding: 4px 12px;
158
+ border-radius: 20px;
159
+ font-size: 0.75rem;
160
+ font-weight: 600;
161
+ text-transform: uppercase;
162
+ letter-spacing: 1px;
163
+ margin-bottom: 15px;
164
+ border: 1px solid rgba(255,255,255,0.2);
165
+ }
166
+
167
+ .hero h1 {
168
+ font-size: 4rem;
169
+ line-height: 1.1;
170
+ font-weight: 800;
171
+ margin-bottom: 20px;
172
+ letter-spacing: -1px;
173
+ }
174
+
175
+ .hero p {
176
+ font-size: 1.25rem;
177
+ color: var(--text-secondary);
178
+ margin-bottom: 30px;
179
+ max-width: 90%;
180
+ }
181
+
182
+ .hero-actions { display: flex; gap: 15px; }
183
+ .btn-play {
184
+ background: white; color: black; padding: 15px 35px;
185
+ border-radius: 50px; font-weight: 700; display: flex; align-items: center; gap: 10px;
186
+ transition: transform 0.2s;
187
+ }
188
+ .btn-play:hover { transform: scale(1.05); }
189
+ .btn-info {
190
+ background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3);
191
+ padding: 15px 35px; border-radius: 50px; font-weight: 600; backdrop-filter: blur(5px);
192
+ }
193
+
194
+ /* --- Main Layout --- */
195
+ main { padding: 2rem 4%; max-width: 1600px; margin: 0 auto; }
196
+
197
+ .section-header {
198
+ display: flex;
199
+ justify-content: space-between;
200
+ align-items: center;
201
+ margin-bottom: 1.5rem;
202
+ }
203
+
204
+ .section-title {
205
+ font-size: 1.5rem;
206
+ font-weight: 700;
207
+ display: flex;
208
+ align-items: center;
209
+ gap: 10px;
210
+ }
211
+ .section-title span { color: var(--primary); }
212
+
213
+ /* --- Categories --- */
214
+ .category-scroll {
215
+ display: flex;
216
+ gap: 10px;
217
+ margin-bottom: 2rem;
218
+ overflow-x: auto;
219
+ padding-bottom: 10px;
220
+ scrollbar-width: none;
221
+ }
222
+ .category-scroll::-webkit-scrollbar { display: none; }
223
 
224
+ .category-chip {
225
+ background: var(--bg-card);
226
+ padding: 8px 20px;
227
+ border-radius: 20px;
228
+ font-size: 0.9rem;
229
+ white-space: nowrap;
230
+ cursor: pointer;
231
+ transition: all 0.2s;
232
+ border: 1px solid var(--border-color);
233
+ color: var(--text-secondary);
234
+ }
235
+ .category-chip.active, .category-chip:hover {
236
+ background: var(--primary); color: white; border-color: var(--primary);
237
+ }
238
+
239
+ /* --- Video Grid (Modern) --- */
240
+ .video-grid {
241
+ display: grid;
242
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
243
+ gap: 2rem;
244
+ }
245
+
246
+ .video-card {
247
+ background: var(--bg-card);
248
+ border-radius: 16px;
249
+ overflow: hidden;
250
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
251
+ cursor: pointer;
252
+ position: relative;
253
+ group: "card";
254
+ }
255
+
256
+ .video-card:hover {
257
+ transform: translateY(-8px);
258
+ box-shadow: 0 20px 40px rgba(0,0,0,0.5);
259
+ border: 1px solid var(--primary-glow);
260
+ }
261
+
262
+ .thumb-container {
263
+ position: relative;
264
+ width: 100%;
265
+ aspect-ratio: 16/9;
266
+ overflow: hidden;
267
+ }
268
+
269
+ .thumb-container img {
270
+ width: 100%;
271
+ height: 100%;
272
+ object-fit: cover;
273
+ transition: transform 0.5s ease;
274
+ }
275
+
276
+ .video-card:hover .thumb-container img { transform: scale(1.1); }
277
+
278
+ .play-overlay {
279
+ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
280
+ background: rgba(0,0,0,0.4); display: flex; justify-content: center; align-items: center;
281
+ opacity: 0; transition: opacity 0.3s;
282
+ }
283
+ .video-card:hover .play-overlay { opacity: 1; }
284
+
285
+ .play-icon-large {
286
+ width: 60px; height: 60px; border-radius: 50%; background: var(--primary); color: white;
287
+ display: flex; justify-content: center; align-items: center; font-size: 1.5rem;
288
+ box-shadow: 0 0 20px var(--primary-glow); transform: scale(0.8); transition: transform 0.3s;
289
+ }
290
+ .video-card:hover .play-icon-large { transform: scale(1); }
291
+
292
+ .duration {
293
+ position: absolute; bottom: 10px; right: 10px;
294
+ background: rgba(0,0,0,0.8); padding: 4px 8px; border-radius: 4px;
295
+ font-size: 0.8rem; font-weight: 700; backdrop-filter: blur(2px);
296
+ }
297
+
298
+ .video-info {
299
+ padding: 16px;
300
+ display: flex; gap: 12px;
301
+ }
302
+
303
+ .channel-avatar {
304
+ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
305
+ }
306
+
307
+ .info-text { display: flex; flex-direction: column; gap: 4px; }
308
+ .video-title { font-size: 1.1rem; font-weight: 600; color: var(--text-main); line-height: 1.4; }
309
+ .video-meta { font-size: 0.85rem; color: var(--text-secondary); }
310
+ .channel-name { color: var(--text-secondary); font-weight: 500; }
311
+
312
+ .action-btn {
313
+ margin-left: auto; color: var(--text-secondary); cursor: pointer; transition: color 0.2s;
314
+ }
315
+ .action-btn:hover { color: var(--accent); }
316
+
317
+ /* --- Continue Watching (Horizontal) --- */
318
+ .continue-watching {
319
+ margin-bottom: 3rem;
320
+ }
321
+ .cw-list {
322
+ display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px;
323
+ scrollbar-width: thin;
324
+ }
325
+ .cw-card {
326
+ min-width: 300px; background: var(--bg-card); border-radius: 12px; overflow: hidden;
327
+ transition: transform 0.3s; flex-shrink: 0; cursor: pointer;
328
+ }
329
+ .cw-card:hover { transform: scale(1.02); }
330
+ .cw-thumb { width: 100%; height: 170px; object-fit: cover; }
331
+ .cw-content { padding: 12px; }
332
+ .cw-title { font-size: 1rem; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
333
+ .cw-subtitle { font-size: 0.8rem; color: var(--text-secondary); display: flex; gap: 8px; }
334
+ .progress-bar { height: 4px; background: #333; margin-top: 10px; border-radius: 2px; overflow: hidden; }
335
+ .progress-fill { height: 100%; background: var(--primary); width: 65%; }
336
+
337
+ /* --- Footer --- */
338
+ footer {
339
+ background: #050508; padding: 3rem 4%; border-top: 1px solid var(--border-color); margin-top: 4rem;
340
+ }
341
+ .footer-grid {
342
+ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; max-width: 1400px; margin: 0 auto;
343
+ }
344
+ .footer-col h4 { color: white; margin-bottom: 1.5rem; font-size: 1rem; }
345
+ .footer-col ul li { margin-bottom: 10px; color: var(--text-secondary); font-size: 0.9rem; }
346
+ .footer-col ul li:hover { color: var(--primary); cursor: pointer; }
347
+ .footer-bottom { text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1a1a1a; color: #666; font-size: 0.9rem; }
348
+
349
+ /* --- Modal (Player) --- */
350
+ .modal {
351
+ display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
352
+ background: rgba(0,0,0,0.9); align-items: center; justify-content: center; backdrop-filter: blur(5px);
353
+ }
354
+ .modal-content {
355
+ background: var(--bg-dark); width: 80%; max-width: 1000px; border-radius: 20px; overflow: hidden;
356
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); animation: popIn 0.3s ease;
357
+ display: flex; flex-direction: column;
358
+ }
359
+ .close-modal {
360
+ position: absolute; top: 20px; right: 30px; color: white; font-size: 2rem; cursor: pointer; z-index: 10;
361
+ background: rgba(0,0,0,0.5); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
362
+ }
363
+ .player-container { width: 100%; position: relative; padding-bottom: 56.25%; background: black; }
364
+ .player-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
365
+ .video-details-modal { padding: 2rem; }
366
+ .video-details-modal h2 { font-size: 2rem; margin-bottom: 1rem; }
367
+ .vd-meta { display: flex; gap: 20px; color: var(--text-secondary); margin-bottom: 20px; font-size: 0.9rem; }
368
+ .vd-actions { display: flex; gap: 15px; margin-top: 20px; }
369
+ .vd-btn { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: white; cursor: pointer; display: flex; align-items: center; gap: 8px; }
370
+ .vd-btn:hover { background: var(--primary); border-color: var(--primary); }
371
+
372
+ /* --- Responsive --- */
373
+ @media (max-width: 1024px) {
374
+ .footer-grid { grid-template-columns: 1fr 1fr; }
375
+ .hero h1 { font-size: 3rem; }
376
+ }
377
+ @media (max-width: 768px) {
378
+ .nav-right { gap: 10px; }
379
+ .nav-btn span { display: none; }
380
+ .search-container { width: 40px; }
381
+ .search-container.active { width: 200px; }
382
+ .hero h1 { font-size: 2.5rem; }
383
+ .hero-actions { flex-direction: column; width: 100%; }
384
+ .hero-actions button { width: 100%; justify-content: center; }
385
+ .footer-grid { grid-template-columns: 1fr; }
386
+ .video-grid { grid-template-columns: 1fr; }
387
+ }
388
+
389
+ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
390
+ @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
391
+
392
+ .anycoder-link {
393
+ margin-top: 10px;
394
+ display: inline-block;
395
+ font-size: 0.8rem;
396
+ color: var(--text-secondary);
397
+ text-decoration: none;
398
+ }
399
+ .anycoder-link:hover { color: var(--primary); }
400
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  </head>
402
+
403
  <body>
404
 
405
+ <!-- Navigation -->
406
+ <header>
407
+ <div class="nav-left">
408
+ <div class="logo">
409
+ <i class="fa-solid fa-play"></i> VStream
410
+ </div>
411
+ <nav style="display: flex; gap: 20px; margin-left: 20px; display: none; /* Hidden on small screens */">
412
+ <a href="#" style="color: white; font-weight: 500;">Home</a>
413
+ <a href="#" style="color: var(--text-secondary);">Movies</a>
414
+ <a href="#" style="color: var(--text-secondary);">TV Shows</a>
415
+ <a href="#" style="color: var(--text-secondary);">Live Sports</a>
416
+ </nav>
417
+ </div>
418
+
419
+ <div class="search-container" id="searchContainer">
420
+ <input type="text" class="search-input" id="searchInput" placeholder="Search movies, series, creators...">
421
+ <i class="fa-solid fa-search search-icon" onclick="toggleSearch()"></i>
422
+ </div>
423
+
424
+ <div class="nav-right">
425
+ <button class="nav-btn" onclick="toggleSearch()"><i class="fa-solid fa-magnifying-glass"></i> <span>Search</span></button>
426
+ <button class="nav-btn"><i class="fa-solid fa-bell"></i> <span>Alerts</span></button>
427
+ <button class="nav-btn"><i class="fa-solid fa-circle-user"></i> <span>Profile</span></button>
428
+ <button class="btn-primary"><i class="fa-solid fa-plus"></i> <span>Upload</span></button>
429
+ </div>
430
+ </header>
431
+
432
+ <!-- Hero Section -->
433
+ <section class="hero">
434
+ <img src="https://picsum.photos/id/1048/1920/1080" alt="Hero Background" class="hero-bg">
435
+ <div class="hero-overlay"></div>
436
+ <div class="hero-content">
437
+ <span class="badge" style="background: var(--primary); border-color: var(--primary);">Featured Premiere</span>
438
+ <h1>Cyber Horizons: The Next Epoch</h1>
439
+ <p>Experience the cutting edge of digital storytelling in this breathtaking sci-fi epic. Navigate a dystopian future where technology and humanity collide.</p>
440
+ <div class="hero-actions">
441
+ <button class="btn-play" onclick="openModal('https://www.w3schools.com/html/mov_bbb.mp4')">
442
+ <i class="fa-solid fa-play"></i> Watch Trailer
443
+ </button>
444
+ <button class="btn-info" onclick="openModal('https://www.w3schools.com/html/movie.mp4')">
445
+ <i class="fa-solid fa-circle-info"></i> More Info
446
+ </button>
447
+ </div>
448
+ </div>
449
+ </section>
450
+
451
+ <main>
452
+ <!-- Categories -->
453
+ <div class="category-scroll">
454
+ <div class="category-chip active" onclick="filterCategory(this)">All Content</div>
455
+ <div class="category-chip" onclick="filterCategory(this)">Action & Adventure</div>
456
+ <div class="category-chip" onclick="filterCategory(this)">Sci-Fi</div>
457
+ <div class="category-chip" onclick="filterCategory(this)">Documentary</div>
458
+ <div class="category-chip" onclick="filterCategory(this)">Comedy</div>
459
+ <div class="category-chip" onclick="filterCategory(this)">Thriller</div>
460
+ <div class="category-chip" onclick="filterCategory(this)">Indie Films</div>
461
+ </div>
462
+
463
+ <!-- Continue Watching -->
464
+ <div class="continue-watching">
465
+ <div class="section-header">
466
+ <h2 class="section-title"><i class="fa-solid fa-circle-play"></i> Continue Watching</h2>
467
+ <a href="#" style="color: var(--primary); font-size: 0.9rem;">See all</a>
468
+ </div>
469
+ <div class="cw-list">
470
+ <div class="cw-card" onclick="openModal('https://www.w3schools.com/html/mov_bbb.mp4')">
471
+ <img src="https://picsum.photos/id/1015/400/225" class="cw-thumb" alt="Continued">
472
+ <div class="cw-content">
473
+ <div class="cw-title">Amazing Nature: 4K Landscape</div>
474
+ <div class="cw-subtitle">
475
+ <span>Earth Scapes</span> &bull; <span>20 min left</span>
476
+ </div>
477
+ <div class="progress-bar"><div class="progress-fill"></div></div>
478
+ </div>
479
  </div>
480
+ <div class="cw-card" onclick="openModal('https://www.w3schools.com/html/movie.mp4')">
481
+ <img src="https://picsum.photos/id/1039/400/225" class="cw-thumb" alt="Continued">
482
+ <div class="cw-content">
483
+ <div class="cw-title">JavaScript Crash Course 2024</div>
484
+ <div class="cw-subtitle">
485
+ <span>Code Master</span> &bull; <span>5 min left</span>
486
+ </div>
487
+ <div class="progress-bar"><div class="progress-fill" style="width: 85%"></div></div>
488
+ </div>
489
  </div>
490
+ <div class="cw-card" onclick="openModal('https://www.w3schools.com/html/mov_bbb.mp4')">
491
+ <img src="https://picsum.photos/id/1069/400/225" class="cw-thumb" alt="Continued">
492
+ <div class="cw-content">
493
+ <div class="cw-title">Ultimate Home Workout</div>
494
+ <div class="cw-subtitle">
495
+ <span>Fitness Pro</span> &bull; <span>45 min left</span>
496
+ </div>
497
+ <div class="progress-bar"><div class="progress-fill" style="width: 30%"></div></div>
498
+ </div>
499
  </div>
500
+ <div class="cw-card" onclick="openModal('https://www.w3schools.com/html/movie.mp4')">
501
+ <img src="https://picsum.photos/id/1064/400/225" class="cw-thumb" alt="Continued">
502
+ <div class="cw-content">
503
+ <div class="cw-title">Hidden Gems of Japan</div>
504
+ <div class="cw-subtitle">
505
+ <span>Wanderlust</span> &bull; <span>12 min left</span>
506
+ </div>
507
+ <div class="progress-bar"><div class="progress-fill" style="width: 60%"></div></div>
508
+ </div>
 
509
  </div>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Trending Grid -->
514
+ <div class="section-header">
515
+ <h2 class="section-title"><i class="fa-solid fa-fire"></i> <span>Trending Now</span></h2>
516
+ </div>
517
+
518
+ <div class="video-grid" id="videoGrid">
519
+ <!-- Grid generated by JS -->
520
+ </div>
521
+
522
+ <div style="margin-top: 3rem;" class="section-header">
523
+ <h2 class="section-title"><i class="fa-solid fa-newspaper"></i> <span>Latest Releases</span></h2>
524
+ </div>
525
+ <div class="video-grid" id="newReleasesGrid">
526
+ <!-- Grid generated by JS -->
527
+ </div>
528
+ </main>
529
+
530
+ <footer>
531
+ <div class="footer-grid">
532
+ <div class="footer-col">
533
+ <div class="logo" style="margin-bottom: 20px; color: white;">VStream</div>
534
+ <p style="color: var(--text-secondary); max-width: 300px;">The premier destination for high-definition streaming. Watch your favorite movies, TV shows, and exclusive content anytime, anywhere.</p>
535
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
536
+ </div>
537
+ <div class="footer-col">
538
+ <h4>Navigation</h4>
539
+ <ul>
540
+ <li>Home</li>
541
+ <li>Movies</li>
542
+ <li>TV Shows</li>
543
+ <li>Live Sports</li>
544
+ </ul>
545
+ </div>
546
+ <div class="footer-col">
547
+ <h4>Support</h4>
548
+ <ul>
549
+ <li>Help Center</li>
550
+ <li>Terms of Service</li>
551
+ <li>Privacy Policy</li>
552
+ <li>Contact Us</li>
553
+ </ul>
554
+ </div>
555
+ <div class="footer-col">
556
+ <h4>Connect</h4>
557
+ <ul>
558
+ <li>Twitter</li>
559
+ <li>Facebook</li>
560
+ <li>Instagram</li>
561
+ <li>YouTube</li>
562
+ </ul>
563
+ </div>
564
+ </div>
565
+ <div class="footer-bottom">
566
+ &copy; 2024 VStream Inc. All rights reserved.
567
+ </div>
568
+ </footer>
569
+
570
+ <!-- Video Player Modal -->
571
+ <div id="videoModal" class="modal" onclick="closeModal(event)">
572
+ <span class="close-modal" onclick="closeModal(event)">&times;</span>
573
+ <div class="modal-content">
574
+ <div class="player-container">
575
+ <iframe id="playerFrame" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
576
+ </div>
577
+ <div class="video-details-modal">
578
+ <h2 id="modalTitle">Video Title</h2>
579
+ <div class="vd-meta">
580
+ <span id="modalViews">1.2M views</span>
581
+ <span id="modalDate">2 days ago</span>
582
+ <span id="modalDuration">10:05</span>
583
  </div>
584
+ <p style="color: var(--text-secondary); margin-bottom: 20px;">
585
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
586
+ </p>
587
+ <div class="vd-actions">
588
+ <button class="vd-btn" onclick="toggleLike(this)"><i class="fa-regular fa-thumbs-up"></i> Like</button>
589
+ <button class="vd-btn"><i class="fa-regular fa-share-from-square"></i> Share</button>
590
+ <button class="vd-btn"><i class="fa-solid fa-list-plus"></i> Add to List</button>
591
  </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <script>
597
+ // Mock Data
598
+ const videos = [
599
+ { title: "Amazing Nature: 4K Landscape Collection", channel: "Earth Scapes", views: "1.2M views", time: "2 days ago", duration: "10:05", img: "https://picsum.photos/id/1015/400/225" },
600
+ { title: "Top 10 Tech Gadgets You Need in 2024", channel: "Tech Insider", views: "850K views", time: "1 week ago", duration: "14:20", img: "https://picsum.photos/id/1048/400/225" },
601
+ { title: "Learn JavaScript in 30 Minutes - Crash Course", channel: "Code Master", views: "2.4M views", time: "3 months ago", duration: "30:00", img: "https://picsum.photos/id/1039/400/225" },
602
+ { title: "Ultimate Home Workout - No Equipment", channel: "Fitness Pro", views: "500K views", time: "5 days ago", duration: "22:15", img: "https://picsum.photos/id/1069/400/225" },
603
+ { title: "Travel Guide: Hidden Gems of Japan", channel: "Wanderlust", views: "3.1M views", time: "1 year ago", duration: "18:45", img: "https://picsum.photos/id/1064/400/225" },
604
+ { title: "Cinematic Lo-Fi Beats to Study/Relax", channel: "Chill Hop", views: "10M views", time: "Live", duration: "LIVE", img: "https://picsum.photos/id/103/400/225" },
605
+ { title: "Advanced CSS Grid Layouts Tutorial", channel: "Web Dev Simplified", views: "150K views", time: "2 weeks ago", duration: "45:30", img: "https://picsum.photos/id/1011/400/225" },
606
+ { title: "Best Street Food in Thailand", channel: "Foodie Adventures", views: "900K views", time: "3 weeks ago", duration: "12:10", img: "https://picsum.photos/id/1059/400/225" },
607
+ { title: "Sci-Fi Movie Review: The New Frontier", channel: "Cinema Review", views: "450K views", time: "1 day ago", duration: "15:00", img: "https://picsum.photos/id/1033/400/225" },
608
+ { title: "Deep Sea Exploration: The Unknown", channel: "Ocean Blue", views: "2.1M views", time: "4 months ago", duration: "42:10", img: "https://picsum.photos/id/1028/400/225" },
609
+ { title: "Minimalist Desk Setup 2024", channel: "Tech Setup", views: "600K views", time: "2 weeks ago", duration: "08:30", img: "https://picsum.photos/id/1035/400/225" },
610
+ { title: "Mastering the Art of Photography", channel: "Visual Arts", views: "1.8M views", time: "6 months ago", duration: "25:00", img: "https://picsum.photos/id/1040/400/225" }
611
+ ];
612
+
613
+ // Generate HTML for video cards
614
+ function generateVideoCards(videoData, containerId) {
615
+ const container = document.getElementById(containerId);
616
+ let htmlContent = '';
617
+
618
+ videoData.forEach(video => {
619
+ htmlContent += `
620
+ <div class="video-card" onclick="openModal('https://www.w3schools.com/html/mov_bbb.mp4')">
621
+ <div class="thumb-container">
622
+ <img src="${video.img}" alt="${video.title}">
623
+ <div class="play-overlay">
624
+ <div class="play-icon-large"><i class="fa-solid fa-play"></i></div>
625
+ </div>
626
+ <div class="duration">${video.duration}</div>
627
  </div>
628
+ <div class="video-info">
629
+ <img src="https://picsum.photos/id/237/50/50" class="channel-avatar" alt="Avatar">
630
+ <div class="info-text">
631
+ <h3 class="video-title">${video.title}</h3>
632
+ <div class="channel-name">${video.channel}</div>
633
+ <div class="video-meta">${video.views} • ${video.time}</div>
634
+ </div>
635
+ <div class="action-btn" onclick="event.stopPropagation(); toggleLike(this)">
636
+ <i class="fa-regular fa-heart"></i>
637
+ </div>
638
+ </div>
639
+ </div>`;
640
+ });
641
+
642
+ container.innerHTML = htmlContent;
643
+ }
644
+
645
+ // Initialize the app
646
+ document.addEventListener('DOMContentLoaded', () => {
647
+ generateVideoCards(videos, 'videoGrid');
648
+ generateVideoCards(videos.slice(0, 6), 'newReleasesGrid');
649
+ });
650
+
651
+ // Interactive Functions
652
+ function toggleSearch() {
653
+ const container = document.getElementById('searchContainer');
654
+ container.classList.toggle('active');
655
+ if(container.classList.contains('active')) {
656
+ document.getElementById('searchInput').focus();
657
+ }
658
+ }
659
+
660
+ function filterCategory(element) {
661
+ document.querySelectorAll('.category-chip').forEach(chip => chip.classList.remove('active'));
662
+ element.classList.add('active');
663
+ // In a real app, this would filter the API results
664
+ console.log(`Filtering by: ${element.innerText}`);
665
+ }
666
+
667
+ function toggleLike(btn) {
668
+ const icon = btn.querySelector('i');
669
+ if (icon.classList.contains('fa-heart')) {
670
+ icon.classList.remove('fa-regular', 'fa-heart');
671
+ icon.classList.add('fa-solid', 'fa-heart');
672
+ icon.style.color = '#ec4899';
673
+ } else {
674
+ icon.classList.remove('fa-solid', 'fa-heart');
675
+ icon.classList.add('fa-regular', 'fa-heart');
676
+ icon.style.color = 'inherit';
677
+ }
678
+ }
679
+
680
+ // Modal Logic
681
+ const modal = document.getElementById('videoModal');
682
+ const playerFrame = document.getElementById('playerFrame');
683
+ const modalTitle = document.getElementById('modalTitle');
684
+
685
+ function openModal(videoUrl) {
686
+ modal.style.display = 'flex';
687
+ // Using a generic video source for demonstration since external iframe sources might block embedding
688
+ playerFrame.src = videoUrl;
689
+
690
+ // Simulate dynamic title based on context (simplified)
691
+ modalTitle.innerText = "Now Playing: " + (document.title.includes("VStream") ? "Premium Content" : "Featured Video");
692
+ }
693
+
694
+ function closeModal(event) {
695
+ if (event.target === modal || event.target.classList.contains('close-modal')) {
696
+ modal.style.display = 'none';
697
+ playerFrame.src = ""; // Stop video playback
698
+ }
699
+ }
700
+
701
+ // Add simple hover effect for buttons
702
+ document.querySelectorAll('.nav-btn').forEach(btn => {
703
+ btn.addEventListener('mouseenter', function() {
704
+ this.style.transform = 'translateY(-2px)';
705
  });
706
+ btn.addEventListener('mouseleave', function() {
707
+ this.style.transform = 'translateY(0)';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
708
  });
709
+ });
710
+ </script>
711
  </body>
712
+
713
  </html>