Hugging Face's logo

Spaces:
vedaco
/
Neuraform_
Running

App Files Community
vedaco commited on
Commit
4385d3c
·
verified ·
1 Parent(s): b443b78

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -1801
index.html DELETED
@@ -1,1801 +0,0 @@
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>NEURAFORM - Video Sharing Platform</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- font-family: 'Poppins', sans-serif;
15
- }
16
-
17
- :root {
18
- --bg-color: #e0e5ec;
19
- --shadow-light: #ffffff;
20
- --shadow-dark: #a3b1c6;
21
- --text-primary: #4a5568;
22
- --text-secondary: #718096;
23
- --accent: #6366f1;
24
- --accent-light: #818cf8;
25
- }
26
-
27
- body {
28
- background: var(--bg-color);
29
- min-height: 100vh;
30
- color: var(--text-primary);
31
- }
32
-
33
- /* Neumorphic Utilities */
34
- .neu-flat {
35
- background: var(--bg-color);
36
- box-shadow: 6px 6px 12px var(--shadow-dark),
37
- -6px -6px 12px var(--shadow-light);
38
- border-radius: 15px;
39
- }
40
-
41
- .neu-pressed {
42
- background: var(--bg-color);
43
- box-shadow: inset 4px 4px 8px var(--shadow-dark),
44
- inset -4px -4px 8px var(--shadow-light);
45
- border-radius: 15px;
46
- }
47
-
48
- .neu-convex {
49
- background: linear-gradient(145deg, #f0f5fc, #cacfd6);
50
- box-shadow: 6px 6px 12px var(--shadow-dark),
51
- -6px -6px 12px var(--shadow-light);
52
- border-radius: 15px;
53
- }
54
-
55
- .neu-btn {
56
- background: var(--bg-color);
57
- box-shadow: 4px 4px 8px var(--shadow-dark),
58
- -4px -4px 8px var(--shadow-light);
59
- border: none;
60
- border-radius: 12px;
61
- cursor: pointer;
62
- transition: all 0.3s ease;
63
- color: var(--text-primary);
64
- }
65
-
66
- .neu-btn:hover {
67
- box-shadow: 2px 2px 4px var(--shadow-dark),
68
- -2px -2px 4px var(--shadow-light);
69
- }
70
-
71
- .neu-btn:active, .neu-btn.active {
72
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
73
- inset -3px -3px 6px var(--shadow-light);
74
- }
75
-
76
- .neu-input {
77
- background: var(--bg-color);
78
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
79
- inset -3px -3px 6px var(--shadow-light);
80
- border: none;
81
- border-radius: 12px;
82
- padding: 12px 16px;
83
- color: var(--text-primary);
84
- outline: none;
85
- width: 100%;
86
- font-size: 14px;
87
- }
88
-
89
- .neu-input::placeholder {
90
- color: var(--text-secondary);
91
- }
92
-
93
- /* Header - Mobile First */
94
- .header {
95
- padding: 15px;
96
- display: flex;
97
- align-items: center;
98
- justify-content: space-between;
99
- position: sticky;
100
- top: 0;
101
- z-index: 100;
102
- background: var(--bg-color);
103
- }
104
-
105
- .logo {
106
- display: flex;
107
- align-items: center;
108
- gap: 10px;
109
- }
110
-
111
- .logo-icon {
112
- width: 40px;
113
- height: 40px;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- font-size: 18px;
118
- color: var(--accent);
119
- border-radius: 12px;
120
- }
121
-
122
- .logo-text {
123
- font-size: 16px;
124
- font-weight: 700;
125
- color: var(--text-primary);
126
- letter-spacing: 1px;
127
- }
128
-
129
- .header-actions {
130
- display: flex;
131
- align-items: center;
132
- gap: 10px;
133
- }
134
-
135
- .header-btn {
136
- width: 40px;
137
- height: 40px;
138
- display: flex;
139
- align-items: center;
140
- justify-content: center;
141
- font-size: 16px;
142
- border-radius: 12px;
143
- }
144
-
145
- .search-bar {
146
- display: none;
147
- flex: 1;
148
- max-width: 400px;
149
- margin: 0 20px;
150
- position: relative;
151
- }
152
-
153
- .search-bar input {
154
- padding-right: 45px;
155
- }
156
-
157
- .search-bar button {
158
- position: absolute;
159
- right: 5px;
160
- top: 50%;
161
- transform: translateY(-50%);
162
- width: 35px;
163
- height: 35px;
164
- border-radius: 10px;
165
- }
166
-
167
- /* Mobile Search */
168
- .mobile-search {
169
- padding: 0 15px 15px;
170
- display: block;
171
- }
172
-
173
- .mobile-search-container {
174
- position: relative;
175
- }
176
-
177
- .mobile-search input {
178
- padding-right: 45px;
179
- }
180
-
181
- .mobile-search button {
182
- position: absolute;
183
- right: 5px;
184
- top: 50%;
185
- transform: translateY(-50%);
186
- width: 35px;
187
- height: 35px;
188
- border-radius: 10px;
189
- }
190
-
191
- /* Bottom Navigation - Mobile */
192
- .bottom-nav {
193
- position: fixed;
194
- bottom: 0;
195
- left: 0;
196
- right: 0;
197
- padding: 10px 15px;
198
- display: flex;
199
- justify-content: space-around;
200
- align-items: center;
201
- background: var(--bg-color);
202
- z-index: 100;
203
- box-shadow: 0 -4px 15px var(--shadow-dark);
204
- }
205
-
206
- .nav-btn {
207
- display: flex;
208
- flex-direction: column;
209
- align-items: center;
210
- gap: 4px;
211
- padding: 8px 12px;
212
- border-radius: 12px;
213
- background: transparent;
214
- border: none;
215
- color: var(--text-secondary);
216
- font-size: 10px;
217
- cursor: pointer;
218
- transition: all 0.3s ease;
219
- }
220
-
221
- .nav-btn i {
222
- font-size: 18px;
223
- }
224
-
225
- .nav-btn.active {
226
- color: var(--accent);
227
- background: var(--bg-color);
228
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
229
- inset -3px -3px 6px var(--shadow-light);
230
- }
231
-
232
- .upload-nav-btn {
233
- width: 50px;
234
- height: 50px;
235
- border-radius: 50%;
236
- background: linear-gradient(145deg, var(--accent), var(--accent-light));
237
- color: white;
238
- display: flex;
239
- align-items: center;
240
- justify-content: center;
241
- font-size: 20px;
242
- border: none;
243
- cursor: pointer;
244
- box-shadow: 4px 4px 8px var(--shadow-dark),
245
- -4px -4px 8px var(--shadow-light);
246
- margin-top: -25px;
247
- }
248
-
249
- /* Main Content */
250
- .main-container {
251
- padding: 15px;
252
- padding-bottom: 90px;
253
- }
254
-
255
- /* Categories */
256
- .categories {
257
- display: flex;
258
- gap: 10px;
259
- margin-bottom: 20px;
260
- overflow-x: auto;
261
- padding: 5px;
262
- -webkit-overflow-scrolling: touch;
263
- }
264
-
265
- .categories::-webkit-scrollbar {
266
- display: none;
267
- }
268
-
269
- .category-btn {
270
- padding: 10px 18px;
271
- font-size: 12px;
272
- font-weight: 500;
273
- white-space: nowrap;
274
- }
275
-
276
- .category-btn.active {
277
- color: var(--accent);
278
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
279
- inset -3px -3px 6px var(--shadow-light);
280
- }
281
-
282
- /* Empty State */
283
- .empty-state {
284
- display: flex;
285
- flex-direction: column;
286
- align-items: center;
287
- justify-content: center;
288
- padding: 60px 20px;
289
- text-align: center;
290
- }
291
-
292
- .empty-icon {
293
- width: 120px;
294
- height: 120px;
295
- display: flex;
296
- align-items: center;
297
- justify-content: center;
298
- font-size: 50px;
299
- color: var(--text-secondary);
300
- margin-bottom: 25px;
301
- border-radius: 50%;
302
- }
303
-
304
- .empty-state h2 {
305
- font-size: 20px;
306
- font-weight: 600;
307
- margin-bottom: 10px;
308
- color: var(--text-primary);
309
- }
310
-
311
- .empty-state p {
312
- font-size: 14px;
313
- color: var(--text-secondary);
314
- margin-bottom: 25px;
315
- max-width: 280px;
316
- }
317
-
318
- .empty-upload-btn {
319
- padding: 15px 30px;
320
- font-size: 14px;
321
- font-weight: 600;
322
- color: var(--accent);
323
- display: flex;
324
- align-items: center;
325
- gap: 10px;
326
- }
327
-
328
- /* Video Grid */
329
- .video-grid {
330
- display: grid;
331
- grid-template-columns: 1fr;
332
- gap: 20px;
333
- }
334
-
335
- .video-card {
336
- padding: 12px;
337
- cursor: pointer;
338
- transition: all 0.3s ease;
339
- }
340
-
341
- .video-card:active {
342
- transform: scale(0.98);
343
- }
344
-
345
- .video-thumbnail {
346
- width: 100%;
347
- aspect-ratio: 16/9;
348
- border-radius: 12px;
349
- overflow: hidden;
350
- position: relative;
351
- margin-bottom: 12px;
352
- background: var(--bg-color);
353
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
354
- inset -3px -3px 6px var(--shadow-light);
355
- }
356
-
357
- .video-thumbnail img,
358
- .video-thumbnail video {
359
- width: 100%;
360
- height: 100%;
361
- object-fit: cover;
362
- }
363
-
364
- .video-duration {
365
- position: absolute;
366
- bottom: 8px;
367
- right: 8px;
368
- padding: 4px 8px;
369
- font-size: 11px;
370
- font-weight: 600;
371
- background: rgba(0,0,0,0.75);
372
- color: white;
373
- border-radius: 6px;
374
- }
375
-
376
- .video-info {
377
- display: flex;
378
- gap: 12px;
379
- }
380
-
381
- .video-channel-avatar {
382
- width: 36px;
383
- height: 36px;
384
- border-radius: 50%;
385
- display: flex;
386
- align-items: center;
387
- justify-content: center;
388
- font-weight: 600;
389
- font-size: 12px;
390
- flex-shrink: 0;
391
- }
392
-
393
- .video-details h3 {
394
- font-size: 14px;
395
- font-weight: 600;
396
- line-height: 1.4;
397
- margin-bottom: 6px;
398
- display: -webkit-box;
399
- -webkit-line-clamp: 2;
400
- -webkit-box-orient: vertical;
401
- overflow: hidden;
402
- }
403
-
404
- .video-meta {
405
- font-size: 12px;
406
- color: var(--text-secondary);
407
- }
408
-
409
- .video-meta span:not(:last-child)::after {
410
- content: '•';
411
- margin: 0 4px;
412
- }
413
-
414
- .video-actions {
415
- position: absolute;
416
- top: 8px;
417
- right: 8px;
418
- display: flex;
419
- gap: 8px;
420
- }
421
-
422
- .video-action-btn {
423
- width: 32px;
424
- height: 32px;
425
- border-radius: 8px;
426
- display: flex;
427
- align-items: center;
428
- justify-content: center;
429
- font-size: 12px;
430
- background: var(--bg-color);
431
- border: none;
432
- cursor: pointer;
433
- box-shadow: 2px 2px 4px var(--shadow-dark),
434
- -2px -2px 4px var(--shadow-light);
435
- }
436
-
437
- .video-action-btn.delete {
438
- color: #e74c3c;
439
- }
440
-
441
- /* Video Player Modal */
442
- .video-modal {
443
- display: none;
444
- position: fixed;
445
- top: 0;
446
- left: 0;
447
- width: 100%;
448
- height: 100%;
449
- background: rgba(0, 0, 0, 0.6);
450
- z-index: 1000;
451
- overflow-y: auto;
452
- }
453
-
454
- .video-modal.active {
455
- display: block;
456
- }
457
-
458
- .modal-content {
459
- background: var(--bg-color);
460
- min-height: 100vh;
461
- padding: 15px;
462
- padding-bottom: 30px;
463
- }
464
-
465
- .modal-header {
466
- display: flex;
467
- align-items: center;
468
- justify-content: space-between;
469
- margin-bottom: 15px;
470
- }
471
-
472
- .modal-close {
473
- width: 40px;
474
- height: 40px;
475
- display: flex;
476
- align-items: center;
477
- justify-content: center;
478
- font-size: 16px;
479
- }
480
-
481
- .modal-title {
482
- font-size: 16px;
483
- font-weight: 600;
484
- }
485
-
486
- .player-container {
487
- width: 100%;
488
- aspect-ratio: 16/9;
489
- border-radius: 15px;
490
- overflow: hidden;
491
- margin-bottom: 15px;
492
- background: #000;
493
- position: relative;
494
- }
495
-
496
- .player-container video {
497
- width: 100%;
498
- height: 100%;
499
- object-fit: contain;
500
- }
501
-
502
- .player-container img {
503
- width: 100%;
504
- height: 100%;
505
- object-fit: cover;
506
- }
507
-
508
- .player-overlay {
509
- position: absolute;
510
- top: 0;
511
- left: 0;
512
- width: 100%;
513
- height: 100%;
514
- display: flex;
515
- align-items: center;
516
- justify-content: center;
517
- background: rgba(0,0,0,0.3);
518
- cursor: pointer;
519
- }
520
-
521
- .player-overlay.hidden {
522
- display: none;
523
- }
524
-
525
- .play-btn-large {
526
- width: 60px;
527
- height: 60px;
528
- background: var(--bg-color);
529
- border-radius: 50%;
530
- display: flex;
531
- align-items: center;
532
- justify-content: center;
533
- font-size: 24px;
534
- color: var(--accent);
535
- box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
536
- }
537
-
538
- .player-controls {
539
- padding: 15px;
540
- margin-bottom: 15px;
541
- }
542
-
543
- .progress-bar {
544
- height: 6px;
545
- margin-bottom: 15px;
546
- cursor: pointer;
547
- position: relative;
548
- }
549
-
550
- .progress-fill {
551
- position: absolute;
552
- top: 0;
553
- left: 0;
554
- height: 100%;
555
- width: 0%;
556
- background: linear-gradient(90deg, var(--accent), var(--accent-light));
557
- border-radius: 6px;
558
- transition: width 0.1s ease;
559
- }
560
-
561
- .controls-row {
562
- display: flex;
563
- align-items: center;
564
- justify-content: space-between;
565
- }
566
-
567
- .controls-left, .controls-right {
568
- display: flex;
569
- align-items: center;
570
- gap: 10px;
571
- }
572
-
573
- .control-btn {
574
- width: 38px;
575
- height: 38px;
576
- display: flex;
577
- align-items: center;
578
- justify-content: center;
579
- font-size: 14px;
580
- }
581
-
582
- .time-display {
583
- font-size: 12px;
584
- color: var(--text-secondary);
585
- padding: 8px 12px;
586
- border-radius: 8px;
587
- background: var(--bg-color);
588
- box-shadow: inset 2px 2px 4px var(--shadow-dark),
589
- inset -2px -2px 4px var(--shadow-light);
590
- }
591
-
592
- .video-title-section {
593
- padding: 15px;
594
- margin-bottom: 15px;
595
- }
596
-
597
- .video-title-section h2 {
598
- font-size: 16px;
599
- margin-bottom: 12px;
600
- line-height: 1.4;
601
- }
602
-
603
- .video-stats {
604
- display: flex;
605
- flex-direction: column;
606
- gap: 15px;
607
- }
608
-
609
- .views-date {
610
- font-size: 13px;
611
- color: var(--text-secondary);
612
- }
613
-
614
- .action-buttons {
615
- display: flex;
616
- gap: 10px;
617
- flex-wrap: wrap;
618
- }
619
-
620
- .action-btn {
621
- display: flex;
622
- align-items: center;
623
- gap: 6px;
624
- padding: 10px 15px;
625
- font-size: 12px;
626
- font-weight: 500;
627
- }
628
-
629
- .action-btn.liked {
630
- color: var(--accent);
631
- }
632
-
633
- .channel-section {
634
- display: flex;
635
- align-items: center;
636
- justify-content: space-between;
637
- padding: 15px;
638
- margin-bottom: 15px;
639
- }
640
-
641
- .channel-info {
642
- display: flex;
643
- align-items: center;
644
- gap: 12px;
645
- }
646
-
647
- .channel-info .avatar {
648
- width: 45px;
649
- height: 45px;
650
- border-radius: 50%;
651
- display: flex;
652
- align-items: center;
653
- justify-content: center;
654
- font-size: 18px;
655
- font-weight: 600;
656
- }
657
-
658
- .channel-info h4 {
659
- font-size: 14px;
660
- margin-bottom: 3px;
661
- }
662
-
663
- .channel-info p {
664
- font-size: 11px;
665
- color: var(--text-secondary);
666
- }
667
-
668
- .subscribe-btn {
669
- padding: 10px 20px;
670
- font-size: 12px;
671
- font-weight: 600;
672
- color: var(--accent);
673
- }
674
-
675
- .subscribe-btn.subscribed {
676
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
677
- inset -3px -3px 6px var(--shadow-light);
678
- }
679
-
680
- .description-section {
681
- padding: 15px;
682
- }
683
-
684
- .description-section p {
685
- font-size: 13px;
686
- line-height: 1.7;
687
- color: var(--text-secondary);
688
- }
689
-
690
- /* Upload Modal */
691
- .upload-modal {
692
- display: none;
693
- position: fixed;
694
- top: 0;
695
- left: 0;
696
- width: 100%;
697
- height: 100%;
698
- background: rgba(0, 0, 0, 0.6);
699
- z-index: 1000;
700
- overflow-y: auto;
701
- }
702
-
703
- .upload-modal.active {
704
- display: block;
705
- }
706
-
707
- .upload-content {
708
- background: var(--bg-color);
709
- min-height: 100vh;
710
- padding: 15px;
711
- padding-bottom: 30px;
712
- }
713
-
714
- .upload-header {
715
- display: flex;
716
- align-items: center;
717
- justify-content: space-between;
718
- margin-bottom: 25px;
719
- }
720
-
721
- .upload-header h3 {
722
- font-size: 18px;
723
- }
724
-
725
- .upload-zone {
726
- padding: 40px 20px;
727
- text-align: center;
728
- margin-bottom: 20px;
729
- cursor: pointer;
730
- }
731
-
732
- .upload-zone i {
733
- font-size: 40px;
734
- color: var(--accent);
735
- margin-bottom: 15px;
736
- }
737
-
738
- .upload-zone h4 {
739
- font-size: 16px;
740
- margin-bottom: 8px;
741
- }
742
-
743
- .upload-zone p {
744
- font-size: 12px;
745
- color: var(--text-secondary);
746
- }
747
-
748
- .upload-zone.has-file {
749
- border: 2px dashed var(--accent);
750
- }
751
-
752
- .upload-zone.has-file i {
753
- color: #27ae60;
754
- }
755
-
756
- .file-name {
757
- font-size: 12px;
758
- color: var(--accent);
759
- margin-top: 10px;
760
- word-break: break-all;
761
- }
762
-
763
- .thumbnail-preview {
764
- width: 100%;
765
- aspect-ratio: 16/9;
766
- border-radius: 12px;
767
- overflow: hidden;
768
- margin-bottom: 20px;
769
- display: none;
770
- }
771
-
772
- .thumbnail-preview.show {
773
- display: block;
774
- }
775
-
776
- .thumbnail-preview video {
777
- width: 100%;
778
- height: 100%;
779
- object-fit: cover;
780
- }
781
-
782
- .thumbnail-preview {
783
- background: var(--bg-color);
784
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
785
- inset -3px -3px 6px var(--shadow-light);
786
- }
787
-
788
- .upload-btn .fa-spinner {
789
- animation: spin 1s linear infinite;
790
- }
791
-
792
- @keyframes spin {
793
- 0% { transform: rotate(0deg); }
794
- 100% { transform: rotate(360deg); }
795
- }
796
-
797
- .upload-form {
798
- display: flex;
799
- flex-direction: column;
800
- gap: 15px;
801
- }
802
-
803
- .form-group label {
804
- display: block;
805
- font-size: 13px;
806
- font-weight: 500;
807
- margin-bottom: 8px;
808
- }
809
-
810
- .form-group textarea {
811
- min-height: 80px;
812
- resize: vertical;
813
- }
814
-
815
- .upload-btn {
816
- padding: 15px;
817
- font-size: 14px;
818
- font-weight: 600;
819
- color: var(--accent);
820
- margin-top: 10px;
821
- display: flex;
822
- align-items: center;
823
- justify-content: center;
824
- gap: 10px;
825
- }
826
-
827
- .upload-btn:disabled {
828
- opacity: 0.5;
829
- cursor: not-allowed;
830
- }
831
-
832
- /* Sidebar - Desktop */
833
- .sidebar {
834
- display: none;
835
- }
836
-
837
- /* Desktop Styles */
838
- @media (min-width: 768px) {
839
- .header {
840
- padding: 20px 30px;
841
- }
842
-
843
- .logo-icon {
844
- width: 50px;
845
- height: 50px;
846
- font-size: 22px;
847
- }
848
-
849
- .logo-text {
850
- font-size: 20px;
851
- letter-spacing: 2px;
852
- }
853
-
854
- .search-bar {
855
- display: block;
856
- }
857
-
858
- .mobile-search {
859
- display: none;
860
- }
861
-
862
- .bottom-nav {
863
- display: none;
864
- }
865
-
866
- .main-container {
867
- display: flex;
868
- padding: 20px 30px;
869
- padding-bottom: 30px;
870
- gap: 30px;
871
- }
872
-
873
- .sidebar {
874
- display: block;
875
- width: 240px;
876
- padding: 20px;
877
- height: calc(100vh - 110px);
878
- position: sticky;
879
- top: 100px;
880
- flex-shrink: 0;
881
- }
882
-
883
- .nav-menu {
884
- list-style: none;
885
- }
886
-
887
- .nav-item {
888
- margin-bottom: 10px;
889
- }
890
-
891
- .nav-link {
892
- display: flex;
893
- align-items: center;
894
- gap: 12px;
895
- padding: 12px 15px;
896
- text-decoration: none;
897
- color: var(--text-primary);
898
- border-radius: 12px;
899
- transition: all 0.3s ease;
900
- font-size: 14px;
901
- }
902
-
903
- .nav-link:hover, .nav-link.active {
904
- background: var(--bg-color);
905
- box-shadow: inset 3px 3px 6px var(--shadow-dark),
906
- inset -3px -3px 6px var(--shadow-light);
907
- }
908
-
909
- .nav-link i {
910
- width: 20px;
911
- text-align: center;
912
- font-size: 16px;
913
- }
914
-
915
- .nav-divider {
916
- height: 2px;
917
- margin: 15px 0;
918
- border-radius: 2px;
919
- background: var(--bg-color);
920
- box-shadow: inset 2px 2px 4px var(--shadow-dark),
921
- inset -2px -2px 4px var(--shadow-light);
922
- }
923
-
924
- .content {
925
- flex: 1;
926
- }
927
-
928
- .video-grid {
929
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
930
- gap: 25px;
931
- }
932
-
933
- .video-card:hover {
934
- transform: translateY(-3px);
935
- box-shadow: 8px 8px 16px var(--shadow-dark),
936
- -8px -8px 16px var(--shadow-light);
937
- }
938
-
939
- .empty-icon {
940
- width: 150px;
941
- height: 150px;
942
- font-size: 60px;
943
- }
944
-
945
- .empty-state h2 {
946
- font-size: 24px;
947
- }
948
-
949
- .empty-state p {
950
- font-size: 16px;
951
- max-width: 350px;
952
- }
953
-
954
- .modal-content {
955
- min-height: auto;
956
- max-width: 900px;
957
- margin: 40px auto;
958
- border-radius: 25px;
959
- padding: 25px;
960
- }
961
-
962
- .upload-content {
963
- min-height: auto;
964
- max-width: 550px;
965
- margin: 40px auto;
966
- border-radius: 25px;
967
- padding: 30px;
968
- }
969
-
970
- .video-stats {
971
- flex-direction: row;
972
- align-items: center;
973
- justify-content: space-between;
974
- }
975
- }
976
-
977
- @media (min-width: 1200px) {
978
- .video-grid {
979
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
980
- }
981
-
982
- .sidebar {
983
- width: 260px;
984
- }
985
- }
986
-
987
- /* Scrollbar */
988
- ::-webkit-scrollbar {
989
- width: 6px;
990
- height: 6px;
991
- }
992
-
993
- ::-webkit-scrollbar-track {
994
- background: var(--bg-color);
995
- border-radius: 6px;
996
- }
997
-
998
- ::-webkit-scrollbar-thumb {
999
- background: var(--shadow-dark);
1000
- border-radius: 6px;
1001
- }
1002
-
1003
- /* Toast Notification */
1004
- .toast {
1005
- position: fixed;
1006
- bottom: 100px;
1007
- left: 50%;
1008
- transform: translateX(-50%);
1009
- padding: 12px 25px;
1010
- border-radius: 12px;
1011
- font-size: 14px;
1012
- font-weight: 500;
1013
- z-index: 2000;
1014
- opacity: 0;
1015
- transition: opacity 0.3s ease;
1016
- background: var(--bg-color);
1017
- box-shadow: 6px 6px 12px var(--shadow-dark),
1018
- -6px -6px 12px var(--shadow-light);
1019
- }
1020
-
1021
- .toast.show {
1022
- opacity: 1;
1023
- }
1024
-
1025
- .toast.success {
1026
- color: #27ae60;
1027
- }
1028
-
1029
- .toast.error {
1030
- color: #e74c3c;
1031
- }
1032
-
1033
- @media (min-width: 768px) {
1034
- .toast {
1035
- bottom: 40px;
1036
- }
1037
- }
1038
- </style>
1039
- </head>
1040
- <body>
1041
- <!-- Header -->
1042
- <header class="header">
1043
- <div class="logo">
1044
- <div class="logo-icon neu-flat">
1045
- <i class="fas fa-play"></i>
1046
- </div>
1047
- <span class="logo-text">NEURAFORM</span>
1048
- </div>
1049
-
1050
- <div class="search-bar">
1051
- <input type="text" class="neu-input" placeholder="Search videos..." id="searchInputDesktop">
1052
- <button class="neu-btn" onclick="searchVideos()">
1053
- <i class="fas fa-search"></i>
1054
- </button>
1055
- </div>
1056
-
1057
- <div class="header-actions">
1058
- <button class="header-btn neu-btn" onclick="openUploadModal()">
1059
- <i class="fas fa-plus"></i>
1060
- </button>
1061
- <button class="header-btn neu-btn">
1062
- <i class="fas fa-bell"></i>
1063
- </button>
1064
- </div>
1065
- </header>
1066
-
1067
- <!-- Mobile Search -->
1068
- <div class="mobile-search">
1069
- <div class="mobile-search-container">
1070
- <input type="text" class="neu-input" placeholder="Search videos..." id="searchInputMobile">
1071
- <button class="neu-btn" onclick="searchVideos()">
1072
- <i class="fas fa-search"></i>
1073
- </button>
1074
- </div>
1075
- </div>
1076
-
1077
- <!-- Main Container -->
1078
- <div class="main-container">
1079
- <!-- Sidebar - Desktop Only -->
1080
- <aside class="sidebar neu-flat">
1081
- <ul class="nav-menu">
1082
- <li class="nav-item">
1083
- <a href="#" class="nav-link active" data-page="home">
1084
- <i class="fas fa-home"></i>
1085
- <span>Home</span>
1086
- </a>
1087
- </li>
1088
- <li class="nav-item">
1089
- <a href="#" class="nav-link" data-page="trending">
1090
- <i class="fas fa-fire"></i>
1091
- <span>Trending</span>
1092
- </a>
1093
- </li>
1094
- <li class="nav-item">
1095
- <a href="#" class="nav-link" data-page="explore">
1096
- <i class="fas fa-compass"></i>
1097
- <span>Explore</span>
1098
- </a>
1099
- </li>
1100
- </ul>
1101
-
1102
- <div class="nav-divider"></div>
1103
-
1104
- <ul class="nav-menu">
1105
- <li class="nav-item">
1106
- <a href="#" class="nav-link" data-page="library">
1107
- <i class="fas fa-folder"></i>
1108
- <span>Library</span>
1109
- </a>
1110
- </li>
1111
- <li class="nav-item">
1112
- <a href="#" class="nav-link" data-page="liked">
1113
- <i class="fas fa-thumbs-up"></i>
1114
- <span>Liked Videos</span>
1115
- </a>
1116
- </li>
1117
- </ul>
1118
-
1119
- <div class="nav-divider"></div>
1120
-
1121
- <button class="neu-btn" style="width: 100%; padding: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--accent); font-weight: 600;" onclick="openUploadModal()">
1122
- <i class="fas fa-upload"></i>
1123
- Upload Video
1124
- </button>
1125
- </aside>
1126
-
1127
- <!-- Content -->
1128
- <main class="content">
1129
- <!-- Categories -->
1130
- <div class="categories">
1131
- <button class="category-btn neu-btn active">All</button>
1132
- <button class="category-btn neu-btn">Music</button>
1133
- <button class="category-btn neu-btn">Gaming</button>
1134
- <button class="category-btn neu-btn">Tech</button>
1135
- <button class="category-btn neu-btn">Sports</button>
1136
- <button class="category-btn neu-btn">News</button>
1137
- <button class="category-btn neu-btn">Education</button>
1138
- </div>
1139
-
1140
- <!-- Empty State -->
1141
- <div class="empty-state" id="emptyState">
1142
- <div class="empty-icon neu-pressed">
1143
- <i class="fas fa-video-slash"></i>
1144
- </div>
1145
- <h2>No Videos Yet</h2>
1146
- <p>Be the first to upload a video and share your content with the world!</p>
1147
- <button class="empty-upload-btn neu-btn" onclick="openUploadModal()">
1148
- <i class="fas fa-cloud-upload-alt"></i>
1149
- Upload Your First Video
1150
- </button>
1151
- </div>
1152
-
1153
- <!-- Video Grid -->
1154
- <div class="video-grid" id="videoGrid" style="display: none;"></div>
1155
- </main>
1156
- </div>
1157
-
1158
- <!-- Bottom Navigation - Mobile -->
1159
- <nav class="bottom-nav">
1160
- <button class="nav-btn active" data-page="home">
1161
- <i class="fas fa-home"></i>
1162
- <span>Home</span>
1163
- </button>
1164
- <button class="nav-btn" data-page="explore">
1165
- <i class="fas fa-compass"></i>
1166
- <span>Explore</span>
1167
- </button>
1168
- <button class="upload-nav-btn" onclick="openUploadModal()">
1169
- <i class="fas fa-plus"></i>
1170
- </button>
1171
- <button class="nav-btn" data-page="library">
1172
- <i class="fas fa-folder"></i>
1173
- <span>Library</span>
1174
- </button>
1175
- <button class="nav-btn" data-page="profile">
1176
- <i class="fas fa-user"></i>
1177
- <span>Profile</span>
1178
- </button>
1179
- </nav>
1180
-
1181
- <!-- Video Player Modal -->
1182
- <div class="video-modal" id="videoModal">
1183
- <div class="modal-content">
1184
- <div class="modal-header">
1185
- <button class="modal-close neu-btn" onclick="closeVideoModal()">
1186
- <i class="fas fa-arrow-left"></i>
1187
- </button>
1188
- <span class="modal-title">Now Playing</span>
1189
- <div style="width: 40px;"></div>
1190
- </div>
1191
-
1192
- <div class="player-container" id="playerContainer">
1193
- <video id="videoPlayer" playsinline></video>
1194
- <div class="player-overlay" id="playerOverlay" onclick="togglePlay()">
1195
- <div class="play-btn-large">
1196
- <i class="fas fa-play" id="playIcon"></i>
1197
- </div>
1198
- </div>
1199
- </div>
1200
-
1201
- <div class="player-controls neu-flat">
1202
- <div class="progress-bar neu-pressed" id="progressBar">
1203
- <div class="progress-fill" id="progressFill"></div>
1204
- </div>
1205
-
1206
- <div class="controls-row">
1207
- <div class="controls-left">
1208
- <button class="control-btn neu-btn" onclick="togglePlay()">
1209
- <i class="fas fa-play" id="playBtnIcon"></i>
1210
- </button>
1211
- <button class="control-btn neu-btn" onclick="toggleMute()">
1212
- <i class="fas fa-volume-up" id="volumeIcon"></i>
1213
- </button>
1214
- <span class="time-display" id="timeDisplay">0:00 / 0:00</span>
1215
- </div>
1216
- <div class="controls-right">
1217
- <button class="control-btn neu-btn" onclick="toggleFullscreen()">
1218
- <i class="fas fa-expand"></i>
1219
- </button>
1220
- </div>
1221
- </div>
1222
- </div>
1223
-
1224
- <div class="video-title-section neu-flat">
1225
- <h2 id="modalVideoTitle">Video Title</h2>
1226
- <div class="video-stats">
1227
- <span class="views-date" id="modalVideoMeta">0 views • Just now</span>
1228
- <div class="action-buttons">
1229
- <button class="action-btn neu-btn" onclick="toggleLike(this)">
1230
- <i class="fas fa-thumbs-up"></i>
1231
- <span>Like</span>
1232
- </button>
1233
- <button class="action-btn neu-btn">
1234
- <i class="fas fa-share"></i>
1235
- <span>Share</span>
1236
- </button>
1237
- <button class="action-btn neu-btn">
1238
- <i class="fas fa-folder-plus"></i>
1239
- <span>Save</span>
1240
- </button>
1241
- </div>
1242
- </div>
1243
- </div>
1244
-
1245
- <div class="channel-section neu-flat">
1246
- <div class="channel-info">
1247
- <div class="avatar neu-convex" style="color: var(--accent);" id="modalChannelAvatar">U</div>
1248
- <div>
1249
- <h4 id="modalChannelName">User</h4>
1250
- <p>Subscriber</p>
1251
- </div>
1252
- </div>
1253
- <button class="subscribe-btn neu-btn" onclick="toggleSubscribe(this)">Subscribe</button>
1254
- </div>
1255
-
1256
- <div class="description-section neu-pressed">
1257
- <p id="modalVideoDescription">No description available.</p>
1258
- </div>
1259
- </div>
1260
- </div>
1261
-
1262
- <!-- Upload Modal -->
1263
- <div class="upload-modal" id="uploadModal">
1264
- <div class="upload-content">
1265
- <div class="upload-header">
1266
- <h3>Upload Video</h3>
1267
- <button class="modal-close neu-btn" onclick="closeUploadModal()">
1268
- <i class="fas fa-times"></i>
1269
- </button>
1270
- </div>
1271
-
1272
- <div class="upload-zone neu-pressed" id="uploadZone" onclick="document.getElementById('fileInput').click()">
1273
- <i class="fas fa-cloud-upload-alt" id="uploadIcon"></i>
1274
- <h4 id="uploadZoneTitle">Select Video File</h4>
1275
- <p id="uploadZoneSubtitle">MP4, WebM, MOV supported</p>
1276
- <div class="file-name" id="fileName"></div>
1277
- <input type="file" id="fileInput" hidden accept="video/*">
1278
- </div>
1279
-
1280
- <div class="thumbnail-preview" id="thumbnailPreview">
1281
- <video id="previewVideo" muted preload="metadata"></video>
1282
- </div>
1283
-
1284
- <form class="upload-form" id="uploadForm">
1285
- <div class="form-group">
1286
- <label>Title *</label>
1287
- <input type="text" class="neu-input" id="videoTitle" placeholder="Enter video title" required>
1288
- </div>
1289
- <div class="form-group">
1290
- <label>Description</label>
1291
- <textarea class="neu-input" id="videoDescription" placeholder="Describe your video"></textarea>
1292
- </div>
1293
- <div class="form-group">
1294
- <label>Channel Name</label>
1295
- <input type="text" class="neu-input" id="channelName" placeholder="Your channel name" value="My Channel">
1296
- </div>
1297
- <button type="button" class="upload-btn neu-btn" id="uploadBtn" onclick="uploadVideo()" disabled>
1298
- <i class="fas fa-upload"></i>
1299
- Upload Video
1300
- </button>
1301
- </form>
1302
- </div>
1303
- </div>
1304
-
1305
- <!-- Toast -->
1306
- <div class="toast" id="toast"></div>
1307
-
1308
- <script>
1309
- // Video Storage
1310
- let videos = JSON.parse(localStorage.getItem('neuraform_videos')) || [];
1311
- let currentVideoIndex = null;
1312
-
1313
- // Initialize
1314
- document.addEventListener('DOMContentLoaded', function() {
1315
- renderVideos();
1316
- setupEventListeners();
1317
- });
1318
-
1319
- // Setup Event Listeners
1320
- function setupEventListeners() {
1321
- // File Input
1322
- document.getElementById('fileInput').addEventListener('change', handleFileSelect);
1323
-
1324
- // Category Buttons
1325
- document.querySelectorAll('.category-btn').forEach(btn => {
1326
- btn.addEventListener('click', function() {
1327
- document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
1328
- this.classList.add('active');
1329
- });
1330
- });
1331
-
1332
- // Navigation - Mobile
1333
- document.querySelectorAll('.nav-btn[data-page]').forEach(btn => {
1334
- btn.addEventListener('click', function() {
1335
- document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
1336
- this.classList.add('active');
1337
- });
1338
- });
1339
-
1340
- // Navigation - Desktop
1341
- document.querySelectorAll('.nav-link[data-page]').forEach(link => {
1342
- link.addEventListener('click', function(e) {
1343
- e.preventDefault();
1344
- document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
1345
- this.classList.add('active');
1346
- });
1347
- });
1348
-
1349
- // Progress Bar
1350
- document.getElementById('progressBar').addEventListener('click', seekVideo);
1351
-
1352
- // Video Player Events
1353
- const video = document.getElementById('videoPlayer');
1354
- video.addEventListener('timeupdate', updateProgress);
1355
- video.addEventListener('ended', handleVideoEnd);
1356
- video.addEventListener('loadedmetadata', updateTimeDisplay);
1357
-
1358
- // Close modals on outside click
1359
- document.getElementById('videoModal').addEventListener('click', function(e) {
1360
- if (e.target === this) closeVideoModal();
1361
- });
1362
-
1363
- document.getElementById('uploadModal').addEventListener('click', function(e) {
1364
- if (e.target === this) closeUploadModal();
1365
- });
1366
-
1367
- // Keyboard shortcuts
1368
- document.addEventListener('keydown', function(e) {
1369
- if (e.key === 'Escape') {
1370
- closeVideoModal();
1371
- closeUploadModal();
1372
- }
1373
- if (e.key === ' ' && document.getElementById('videoModal').classList.contains('active')) {
1374
- e.preventDefault();
1375
- togglePlay();
1376
- }
1377
- });
1378
-
1379
- // Drag and Drop
1380
- const uploadZone = document.getElementById('uploadZone');
1381
- uploadZone.addEventListener('dragover', (e) => {
1382
- e.preventDefault();
1383
- uploadZone.style.borderColor = 'var(--accent)';
1384
- });
1385
- uploadZone.addEventListener('dragleave', () => {
1386
- uploadZone.style.borderColor = '';
1387
- });
1388
- uploadZone.addEventListener('drop', (e) => {
1389
- e.preventDefault();
1390
- uploadZone.style.borderColor = '';
1391
- const file = e.dataTransfer.files[0];
1392
- if (file && file.type.startsWith('video/')) {
1393
- document.getElementById('fileInput').files = e.dataTransfer.files;
1394
- handleFileSelect({ target: { files: [file] } });
1395
- }
1396
- });
1397
- }
1398
-
1399
- // Handle File Selection
1400
- let selectedFile = null;
1401
- let selectedFileDataUrl = null;
1402
-
1403
- function handleFileSelect(e) {
1404
- const file = e.target.files[0];
1405
- if (!file) return;
1406
-
1407
- // Check file size (limit to 50MB for localStorage)
1408
- const maxSize = 50 * 1024 * 1024; // 50MB
1409
- if (file.size > maxSize) {
1410
- showToast('File too large. Max 50MB allowed.', 'error');
1411
- return;
1412
- }
1413
-
1414
- selectedFile = file;
1415
-
1416
- // Update UI
1417
- document.getElementById('uploadZone').classList.add('has-file');
1418
- document.getElementById('uploadIcon').className = 'fas fa-check-circle';
1419
- document.getElementById('uploadZoneTitle').textContent = 'Video Selected!';
1420
- document.getElementById('fileName').textContent = file.name;
1421
- document.getElementById('uploadBtn').disabled = false;
1422
-
1423
- // Show preview
1424
- const previewVideo = document.getElementById('previewVideo');
1425
- const thumbnailPreview = document.getElementById('thumbnailPreview');
1426
- const tempUrl = URL.createObjectURL(file);
1427
- previewVideo.src = tempUrl;
1428
- thumbnailPreview.classList.add('show');
1429
-
1430
- // Convert to base64 for persistent storage
1431
- const reader = new FileReader();
1432
- reader.onload = function(event) {
1433
- selectedFileDataUrl = event.target.result;
1434
- };
1435
- reader.readAsDataURL(file);
1436
-
1437
- // Auto-fill title
1438
- if (!document.getElementById('videoTitle').value) {
1439
- const fileName = file.name.replace(/\.[^/.]+$/, '');
1440
- document.getElementById('videoTitle').value = fileName;
1441
- }
1442
- }
1443
-
1444
- // Upload Video
1445
- function uploadVideo() {
1446
- if (!selectedFile || !selectedFileDataUrl) {
1447
- showToast('Please select a video file and wait for it to load', 'error');
1448
- return;
1449
- }
1450
-
1451
- const title = document.getElementById('videoTitle').value.trim();
1452
- if (!title) {
1453
- showToast('Please enter a title', 'error');
1454
- return;
1455
- }
1456
-
1457
- // Show loading state
1458
- const uploadBtn = document.getElementById('uploadBtn');
1459
- uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
1460
- uploadBtn.disabled = true;
1461
-
1462
- const description = document.getElementById('videoDescription').value.trim();
1463
- const channelName = document.getElementById('channelName').value.trim() || 'My Channel';
1464
-
1465
- // Get video duration from preview
1466
- const previewVideo = document.getElementById('previewVideo');
1467
-
1468
- // Create video object with base64 data URL
1469
- const videoData = {
1470
- id: Date.now(),
1471
- title: title,
1472
- description: description || 'No description provided.',
1473
- channel: channelName,
1474
- views: 0,
1475
- likes: 0,
1476
- uploadDate: new Date().toISOString(),
1477
- duration: formatDuration(previewVideo.duration || 0),
1478
- color: getRandomColor(),
1479
- videoUrl: selectedFileDataUrl,
1480
- fileName: selectedFile.name
1481
- };
1482
-
1483
- // Try to save to localStorage
1484
- try {
1485
- videos.unshift(videoData);
1486
- localStorage.setItem('neuraform_videos', JSON.stringify(videos));
1487
-
1488
- // Render and close
1489
- renderVideos();
1490
- closeUploadModal();
1491
- resetUploadForm();
1492
- showToast('Video uploaded successfully!', 'success');
1493
- } catch (e) {
1494
- // localStorage quota exceeded
1495
- videos.shift(); // Remove the video we just added
1496
- showToast('Storage full! Try a smaller video or delete some videos.', 'error');
1497
- uploadBtn.innerHTML = '<i class="fas fa-upload"></i> Upload Video';
1498
- uploadBtn.disabled = false;
1499
- }
1500
- }
1501
-
1502
- // Reset Upload Form
1503
- function resetUploadForm() {
1504
- selectedFile = null;
1505
- selectedFileDataUrl = null;
1506
- document.getElementById('fileInput').value = '';
1507
- document.getElementById('videoTitle').value = '';
1508
- document.getElementById('videoDescription').value = '';
1509
- document.getElementById('channelName').value = 'My Channel';
1510
- document.getElementById('uploadZone').classList.remove('has-file');
1511
- document.getElementById('uploadIcon').className = 'fas fa-cloud-upload-alt';
1512
- document.getElementById('uploadZoneTitle').textContent = 'Select Video File';
1513
- document.getElementById('fileName').textContent = '';
1514
- document.getElementById('uploadBtn').disabled = true;
1515
- document.getElementById('uploadBtn').innerHTML = '<i class="fas fa-upload"></i> Upload Video';
1516
- document.getElementById('thumbnailPreview').classList.remove('show');
1517
- document.getElementById('previewVideo').src = '';
1518
- }
1519
-
1520
- // Render Videos
1521
- function renderVideos() {
1522
- const grid = document.getElementById('videoGrid');
1523
- const emptyState = document.getElementById('emptyState');
1524
-
1525
- if (videos.length === 0) {
1526
- emptyState.style.display = 'flex';
1527
- grid.style.display = 'none';
1528
- return;
1529
- }
1530
-
1531
- emptyState.style.display = 'none';
1532
- grid.style.display = 'grid';
1533
-
1534
- grid.innerHTML = videos.map((video, index) => `
1535
- <div class="video-card neu-flat">
1536
- <div class="video-thumbnail" onclick="openVideoModal(${index})">
1537
- <video src="${video.videoUrl}" preload="metadata"></video>
1538
- <span class="video-duration">${video.duration}</span>
1539
- <div class="video-actions" onclick="event.stopPropagation()">
1540
- <button class="video-action-btn delete" onclick="deleteVideo(${index})">
1541
- <i class="fas fa-trash"></i>
1542
- </button>
1543
- </div>
1544
- </div>
1545
- <div class="video-info" onclick="openVideoModal(${index})">
1546
- <div class="video-channel-avatar neu-convex" style="color: ${video.color}">
1547
- ${video.channel[0].toUpperCase()}
1548
- </div>
1549
- <div class="video-details">
1550
- <h3>${video.title}</h3>
1551
- <div class="video-meta">
1552
- <span>${video.channel}</span>
1553
- <span>${video.views} views</span>
1554
- <span>${getTimeAgo(video.uploadDate)}</span>
1555
- </div>
1556
- </div>
1557
- </div>
1558
- </div>
1559
- `).join('');
1560
- }
1561
-
1562
- // Delete Video
1563
- function deleteVideo(index) {
1564
- if (confirm('Are you sure you want to delete this video?')) {
1565
- videos.splice(index, 1);
1566
- localStorage.setItem('neuraform_videos', JSON.stringify(videos));
1567
- renderVideos();
1568
- showToast('Video deleted', 'success');
1569
- }
1570
- }
1571
-
1572
- // Open Video Modal
1573
- function openVideoModal(index) {
1574
- currentVideoIndex = index;
1575
- const video = videos[index];
1576
-
1577
- // Increment views
1578
- video.views++;
1579
- localStorage.setItem('neuraform_videos', JSON.stringify(videos));
1580
- renderVideos();
1581
-
1582
- // Update modal
1583
- document.getElementById('modalVideoTitle').textContent = video.title;
1584
- document.getElementById('modalVideoMeta').textContent = `${video.views} views • ${getTimeAgo(video.uploadDate)}`;
1585
- document.getElementById('modalVideoDescription').textContent = video.description;
1586
- document.getElementById('modalChannelName').textContent = video.channel;
1587
- document.getElementById('modalChannelAvatar').textContent = video.channel[0].toUpperCase();
1588
- document.getElementById('modalChannelAvatar').style.color = video.color;
1589
-
1590
- // Set video source
1591
- const videoPlayer = document.getElementById('videoPlayer');
1592
- videoPlayer.src = video.videoUrl;
1593
-
1594
- // Show modal
1595
- document.getElementById('videoModal').classList.add('active');
1596
- document.body.style.overflow = 'hidden';
1597
- }
1598
-
1599
- // Close Video Modal
1600
- function closeVideoModal() {
1601
- const videoPlayer = document.getElementById('videoPlayer');
1602
- videoPlayer.pause();
1603
- videoPlayer.src = '';
1604
- document.getElementById('videoModal').classList.remove('active');
1605
- document.body.style.overflow = 'auto';
1606
- document.getElementById('playerOverlay').classList.remove('hidden');
1607
- updatePlayButton(false);
1608
- }
1609
-
1610
- // Upload Modal Functions
1611
- function openUploadModal() {
1612
- document.getElementById('uploadModal').classList.add('active');
1613
- document.body.style.overflow = 'hidden';
1614
- }
1615
-
1616
- function closeUploadModal() {
1617
- document.getElementById('uploadModal').classList.remove('active');
1618
- document.body.style.overflow = 'auto';
1619
- resetUploadForm();
1620
- }
1621
-
1622
- // Video Controls
1623
- let isPlaying = false;
1624
-
1625
- function togglePlay() {
1626
- const video = document.getElementById('videoPlayer');
1627
- const overlay = document.getElementById('playerOverlay');
1628
-
1629
- if (video.paused) {
1630
- video.play();
1631
- isPlaying = true;
1632
- overlay.classList.add('hidden');
1633
- } else {
1634
- video.pause();
1635
- isPlaying = false;
1636
- overlay.classList.remove('hidden');
1637
- }
1638
- updatePlayButton(isPlaying);
1639
- }
1640
-
1641
- function updatePlayButton(playing) {
1642
- const icon = playing ? 'fa-pause' : 'fa-play';
1643
- document.getElementById('playIcon').className = `fas ${icon}`;
1644
- document.getElementById('playBtnIcon').className = `fas ${icon}`;
1645
- }
1646
-
1647
- function updateProgress() {
1648
- const video = document.getElementById('videoPlayer');
1649
- const progress = (video.currentTime / video.duration) * 100;
1650
- document.getElementById('progressFill').style.width = progress + '%';
1651
- updateTimeDisplay();
1652
- }
1653
-
1654
- function updateTimeDisplay() {
1655
- const video = document.getElementById('videoPlayer');
1656
- const current = formatDuration(video.currentTime);
1657
- const total = formatDuration(video.duration || 0);
1658
- document.getElementById('timeDisplay').textContent = `${current} / ${total}`;
1659
- }
1660
-
1661
- function seekVideo(e) {
1662
- const video = document.getElementById('videoPlayer');
1663
- const progressBar = document.getElementById('progressBar');
1664
- const rect = progressBar.getBoundingClientRect();
1665
- const percent = (e.clientX - rect.left) / rect.width;
1666
- video.currentTime = percent * video.duration;
1667
- }
1668
-
1669
- function handleVideoEnd() {
1670
- isPlaying = false;
1671
- document.getElementById('playerOverlay').classList.remove('hidden');
1672
- updatePlayButton(false);
1673
- }
1674
-
1675
- function toggleMute() {
1676
- const video = document.getElementById('videoPlayer');
1677
- video.muted = !video.muted;
1678
- document.getElementById('volumeIcon').className = `fas ${video.muted ? 'fa-volume-mute' : 'fa-volume-up'}`;
1679
- }
1680
-
1681
- function toggleFullscreen() {
1682
- const container = document.getElementById('playerContainer');
1683
- if (document.fullscreenElement) {
1684
- document.exitFullscreen();
1685
- } else {
1686
- container.requestFullscreen();
1687
- }
1688
- }
1689
-
1690
- // Like Toggle
1691
- function toggleLike(btn) {
1692
- btn.classList.toggle('liked');
1693
- if (currentVideoIndex !== null) {
1694
- videos[currentVideoIndex].likes += btn.classList.contains('liked') ? 1 : -1;
1695
- localStorage.setItem('neuraform_videos', JSON.stringify(videos));
1696
- }
1697
- }
1698
-
1699
- // Subscribe Toggle
1700
- function toggleSubscribe(btn) {
1701
- btn.classList.toggle('subscribed');
1702
- btn.textContent = btn.classList.contains('subscribed') ? 'Subscribed' : 'Subscribe';
1703
- }
1704
-
1705
- // Search
1706
- function searchVideos() {
1707
- const queryDesktop = document.getElementById('searchInputDesktop').value.toLowerCase();
1708
- const queryMobile = document.getElementById('searchInputMobile').value.toLowerCase();
1709
- const query = queryDesktop || queryMobile;
1710
-
1711
- if (!query) {
1712
- renderVideos();
1713
- return;
1714
- }
1715
-
1716
- const filtered = videos.filter(v =>
1717
- v.title.toLowerCase().includes(query) ||
1718
- v.channel.toLowerCase().includes(query) ||
1719
- v.description.toLowerCase().includes(query)
1720
- );
1721
-
1722
- renderFilteredVideos(filtered);
1723
- }
1724
-
1725
- function renderFilteredVideos(filteredVideos) {
1726
- const grid = document.getElementById('videoGrid');
1727
- const emptyState = document.getElementById('emptyState');
1728
-
1729
- if (filteredVideos.length === 0) {
1730
- emptyState.style.display = 'flex';
1731
- emptyState.querySelector('h2').textContent = 'No Results Found';
1732
- emptyState.querySelector('p').textContent = 'Try searching for something else';
1733
- grid.style.display = 'none';
1734
- return;
1735
- }
1736
-
1737
- emptyState.style.display = 'none';
1738
- grid.style.display = 'grid';
1739
-
1740
- grid.innerHTML = filteredVideos.map((video) => {
1741
- const index = videos.findIndex(v => v.id === video.id);
1742
- return `
1743
- <div class="video-card neu-flat">
1744
- <div class="video-thumbnail" onclick="openVideoModal(${index})">
1745
- <video src="${video.videoUrl}" preload="metadata"></video>
1746
- <span class="video-duration">${video.duration}</span>
1747
- </div>
1748
- <div class="video-info" onclick="openVideoModal(${index})">
1749
- <div class="video-channel-avatar neu-convex" style="color: ${video.color}">
1750
- ${video.channel[0].toUpperCase()}
1751
- </div>
1752
- <div class="video-details">
1753
- <h3>${video.title}</h3>
1754
- <div class="video-meta">
1755
- <span>${video.channel}</span>
1756
- <span>${video.views} views</span>
1757
- <span>${getTimeAgo(video.uploadDate)}</span>
1758
- </div>
1759
- </div>
1760
- </div>
1761
- </div>
1762
- `;
1763
- }).join('');
1764
- }
1765
-
1766
- // Utility Functions
1767
- function formatDuration(seconds) {
1768
- if (isNaN(seconds)) return '0:00';
1769
- const mins = Math.floor(seconds / 60);
1770
- const secs = Math.floor(seconds % 60);
1771
- return `${mins}:${secs.toString().padStart(2, '0')}`;
1772
- }
1773
-
1774
- function getTimeAgo(dateString) {
1775
- const date = new Date(dateString);
1776
- const now = new Date();
1777
- const seconds = Math.floor((now - date) / 1000);
1778
-
1779
- if (seconds < 60) return 'Just now';
1780
- if (seconds < 3600) return `${Math.floor(seconds / 60)} min ago`;
1781
- if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours ago`;
1782
- if (seconds < 604800) return `${Math.floor(seconds / 86400)} days ago`;
1783
- return `${Math.floor(seconds / 604800)} weeks ago`;
1784
- }
1785
-
1786
- function getRandomColor() {
1787
- const colors = ['#e74c3c', '#3498db', '#9b59b6', '#27ae60', '#f39c12', '#1abc9c', '#e91e63'];
1788
- return colors[Math.floor(Math.random() * colors.length)];
1789
- }
1790
-
1791
- function showToast(message, type) {
1792
- const toast = document.getElementById('toast');
1793
- toast.textContent = message;
1794
- toast.className = `toast ${type} show`;
1795
- setTimeout(() => {
1796
- toast.classList.remove('show');
1797
- }, 3000);
1798
- }
1799
- </script>
1800
- </body>
1801
- </html>