SushantGautam commited on
Commit
ce50131
1 Parent(s): 04d8858

Upload folder using huggingface_hub

Browse files
.gitignore CHANGED
@@ -4,5 +4,4 @@ static/saved_video/**
4
  static/poster/**
5
  static/videos/**
6
  *DS_Store**
7
- *.json
8
- static/**
 
4
  static/poster/**
5
  static/videos/**
6
  *DS_Store**
7
+ *.json
 
static/css/style.css ADDED
@@ -0,0 +1,661 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ font-family: Arial, sans-serif;
3
+ background-color: #dddddd;
4
+ margin: 0;
5
+ padding: 0;
6
+ margin-bottom: 50px;
7
+ }
8
+
9
+ #versionBadge {
10
+ position: fixed;
11
+ width: 100px;
12
+ text-align: center;
13
+ bottom: 20px;
14
+ left: 20px;
15
+ background-color: #174387;
16
+ color: white;
17
+ padding: 10px;
18
+ border-radius: 5px;
19
+ font-size: 18px;
20
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
21
+ }
22
+
23
+
24
+
25
+ #JersyContainer {
26
+ position: relative;
27
+ width: 100%; /* Adjust as needed */
28
+ }
29
+
30
+ #leftImagesContainer {
31
+ position: fixed;
32
+ top: 20px;
33
+ left: 40px;
34
+ width: 210px; /* Adjust as needed */
35
+ padding: 10px; /* Spacing around the images */
36
+ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
37
+ border-radius: 10px;
38
+ }
39
+
40
+ .image-box {
41
+ position: relative;
42
+ width: 210px; /* Or your preferred width */
43
+ margin-bottom: 20px; /* Space between image boxes */
44
+ }
45
+
46
+ #boxLeftTeam, #boxLeftTeam2 {
47
+ box-shadow: none; /* Remove individual shadows */
48
+ }
49
+
50
+ #boxRightTeam {
51
+ position: fixed;
52
+ top: 20px;
53
+ right: 40px;
54
+ width: 210px;
55
+ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
56
+ border-radius: 10px;
57
+ padding: 10px;
58
+ }
59
+
60
+ #leftTeamImage, #leftTeamImage2, #rightTeamImage {
61
+ width: 100%;
62
+ height: auto;
63
+ border-radius: 10px;
64
+ }
65
+
66
+ .image-title {
67
+ font-weight: bold;
68
+ text-align: center;
69
+ margin-bottom: 10px;
70
+ }
71
+
72
+
73
+ .title-section {
74
+ width: 60%; /* Adjust width as needed */
75
+ margin: 40px auto; /* Increased margin for better visibility */
76
+ background: linear-gradient(to right, #003366, #001f4d);
77
+ background-size: cover;
78
+ padding: 20px;
79
+ border-radius: 15px; /* Rounded corners like old TVs */
80
+ color: white;
81
+ text-shadow: 2px 2px 4px #000;
82
+ clip-path: polygon(
83
+ 10% 0%, 90% 0%,
84
+ 100% 10%, 100% 90%,
85
+ 90% 100%, 10% 100%,
86
+ 0% 90%, 0% 10%
87
+ ); /* New clip path to mimic TV screen shape */
88
+ }
89
+
90
+ /* Dark mode specific style for .title-section */
91
+ .dark-mode .title-section {
92
+ background: linear-gradient(to right, #1a8cff, #004cbf);
93
+ text-shadow: 2px 2px 4px #444;
94
+ }
95
+ .dark-mode #versionBadge {
96
+ background: linear-gradient(to right, #1a8cff, #004cbf);
97
+ text-shadow: 2px 2px 4px #444;
98
+ }
99
+
100
+
101
+
102
+ @keyframes GradientFlow {
103
+ 0%, 100% { background-position: 0% 50%; }
104
+ 50% { background-position: 100% 50%; }
105
+ }
106
+
107
+ .title-section {
108
+ /* All previous styles remain */
109
+ animation: GradientFlow 30s ease infinite;
110
+ }
111
+
112
+
113
+
114
+
115
+ .container {
116
+ width: 70%;
117
+ margin: auto;
118
+ background-color: #fff;
119
+ margin-top: 20px;
120
+ padding: 20px;
121
+ border-radius: 10px;
122
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
123
+ }
124
+
125
+ .row {
126
+ display: flex;
127
+ justify-content: space-between;
128
+ margin-bottom: 20px;
129
+ }
130
+
131
+ .column {
132
+ flex: 50%;
133
+ padding: 10px;
134
+ }
135
+
136
+ .column .left, .column .right {
137
+ background-color: #eee;
138
+ padding: 15px;
139
+ border-radius: 8px;
140
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
141
+ }
142
+
143
+ .column.right {
144
+ position: relative;
145
+
146
+ }
147
+
148
+ #overlay {
149
+ display: flex;
150
+ flex-direction: column !important;
151
+ }
152
+
153
+ /* video player */
154
+ video {
155
+ width: 100%;
156
+ height: auto;
157
+ border-radius: 8px;
158
+ }
159
+
160
+ /*form and inputs */
161
+ form#videoForm {
162
+ display: flex;
163
+ flex-direction: column;
164
+ }
165
+
166
+ form#videoForm label,
167
+ form#videoForm input,
168
+ form#videoForm button {
169
+ margin-bottom: 10px;
170
+ padding: 8px;
171
+ border: 1px solid #ddd;
172
+ border-radius: 4px;
173
+ }
174
+
175
+ form#videoForm button {
176
+ background-color: #007bff;
177
+ color: white;
178
+ cursor: pointer;
179
+ }
180
+
181
+ form#videoForm button:hover {
182
+ background-color: #0056b3;
183
+ }
184
+
185
+
186
+ .filtering {
187
+ margin-top: 4%;
188
+ padding: 2%;
189
+ background-color: rgb(203, 203, 203);
190
+ border-radius: 5px;
191
+ }
192
+
193
+ #accordionToggleVideo, #accordionToggleAdditional {
194
+ background-color: transparent;
195
+ border: none;
196
+ cursor: pointer;
197
+ font-size: 32px;
198
+ color: #000000;
199
+ display: inline-flex; /* Aligns icon and text horizontally */
200
+ align-items: center; /* Vertically aligns the icon and text */
201
+ gap: 10px; /* Adds space between the icon and the text */
202
+ }
203
+
204
+ #accordionToggleVideo:focus, #accordionToggleAdditional:focus {
205
+ outline: none;
206
+ }
207
+
208
+ /* Optional: Style for the text beside the icon */
209
+ #accordionToggleVideo, #accordionToggleVideo2, #accordionToggleVideo3 span {
210
+ font-weight: 700;
211
+ font-size: 26px; /* Adjust the font size as needed */
212
+ vertical-align: middle; /* Aligns text vertically in the middle */
213
+ }
214
+
215
+
216
+ .arrowSection {
217
+ background-color: #DDDDDD;
218
+ padding: 2%;
219
+ border-radius: 5px;
220
+ }
221
+
222
+ .arrowSection button {
223
+ background-color: transparent;
224
+ border: none;
225
+ cursor: pointer;
226
+ display: inline-flex; /* Aligns icon and text horizontally */
227
+ align-items: center; /* Vertically aligns the icon and text */
228
+ gap: 10px; /* Adds space between the icon and the text */
229
+ }
230
+
231
+ .arrowSection button i {
232
+ font-size: 32px; /* Larger size for the icon */
233
+ }
234
+
235
+
236
+ #videoSection {
237
+ overflow: hidden;
238
+ transition: max-height 0.3s ease-out;
239
+ max-height: 800px;
240
+ }
241
+
242
+ .hidden {
243
+ max-height: 0 !important;
244
+ display: none !important;
245
+ }
246
+
247
+ .videoPlayerInput1 {
248
+ border-style: solid;
249
+ }
250
+
251
+
252
+
253
+ .filtering-container, #videoForm {
254
+ font-family: Arial, sans-serif;
255
+ padding: 20px;
256
+
257
+ border-radius: 5px;
258
+ margin-bottom: 20px;
259
+
260
+ }
261
+
262
+ .dropdown-box {
263
+ border: 2px solid #ccc;
264
+ border-radius: 8px;
265
+ padding: 15px;
266
+ margin-bottom: 10px;
267
+ }
268
+
269
+ .label-dropdown {
270
+ display: block;
271
+ margin-bottom: 5px;
272
+ font-weight: bold;
273
+ }
274
+
275
+ .dropdown {
276
+ width: 100%;
277
+ padding: 8px;
278
+ border-radius: 5px;
279
+ border: 1px solid #ccc;
280
+ }
281
+
282
+ .filter-button {
283
+ width: 100%;
284
+ text-align: center;
285
+ text-decoration: none;
286
+ display: block; /* Aligns button to center */
287
+ font-size: 16px;
288
+ margin: 10px auto; /* Centers the button */
289
+ margin-bottom: 10px;
290
+ padding: 8px;
291
+ border: 1px solid #ddd;
292
+ border-radius: 4px;
293
+ background-color: #007bff;
294
+ color: white;
295
+ cursor: pointer;
296
+ }
297
+
298
+ .filtered-results {
299
+ display: flex;
300
+ flex-direction: column; /* Stack children vertically */
301
+ align-items: center; /* Center children horizontally */
302
+ text-align: left; /* Align text to the left */
303
+ height: 100%; /* Adjust as needed */
304
+ }
305
+
306
+ .filtered-results h1 {
307
+ align-self: flex-start; /* Align the h1 tag to the start (left) */
308
+ width: 100%; /* Ensure it takes the full width for alignment */
309
+ margin-bottom: 20px; /* Add space between the h1 and the video player */
310
+ }
311
+
312
+ #videoPlayer_result {
313
+ /* Optionally, specify the size of the video player */
314
+ max-width: 70%; /* Maximum width */
315
+ width: 100%; /* Make it responsive */
316
+ height: auto; /* Maintain aspect ratio */
317
+ }
318
+
319
+
320
+ /* Configuration section */
321
+ .configuration-section {
322
+ display: block;
323
+ padding: 20px;
324
+ background-color: #f8f9fa; /* Light background for the section */
325
+ border-radius: 10px;
326
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
327
+ }
328
+
329
+ .config-row {
330
+ display: flex;
331
+ justify-content: space-around;
332
+ gap: 20px; /* Space between boxes */
333
+ }
334
+
335
+ .config-box {
336
+ flex-basis: calc(33% - 20px); /* Adjust based on requirement, accounting for gap */
337
+ background-color: #fff; /* White background for boxes */
338
+ border: 1px solid #ddd;
339
+ padding: 15px;
340
+ border-radius: 8px;
341
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
342
+ display: flex;
343
+ flex-direction: column;
344
+ align-items: center;
345
+ }
346
+
347
+ .config-box h3 {
348
+ color: #007bff; /* Blue color for titles */
349
+ margin-bottom: 15px;
350
+ }
351
+
352
+ .config-box select, .config-box input[type="radio"] {
353
+ margin: 5px 0;
354
+ }
355
+
356
+ .config-box label {
357
+ display: block;
358
+ margin-bottom: 5px;
359
+ }
360
+
361
+ /* Custom styling for dropdowns */
362
+ .config-box select {
363
+ padding: 5px;
364
+ border-radius: 4px;
365
+ border: 1px solid #ccc;
366
+ }
367
+
368
+ /* Custom styling for radio buttons */
369
+ .config-box input[type="radio"] {
370
+ margin-right: 5px;
371
+ }
372
+
373
+ /* Style adjustments for mobile responsiveness */
374
+ @media (max-width: 768px) {
375
+ .config-row {
376
+ flex-direction: column;
377
+ }
378
+ .config-box {
379
+ flex-basis: 100%;
380
+ margin-bottom: 20px;
381
+ }
382
+ }
383
+
384
+
385
+
386
+ /* Pop up styling */
387
+ .config-modal {
388
+ display: none;
389
+ position: fixed;
390
+ z-index: 1;
391
+ left: 0;
392
+ top: 0;
393
+ width: 100%;
394
+ height: 100%; /* Full-screen modal */
395
+ background-color: rgba(0,0,0,0.4);
396
+ }
397
+
398
+ .config-modal-content {
399
+ background-color: #fefefe;
400
+ margin: 2% auto; /* Adjust margin to center the modal */
401
+ padding: 20px;
402
+ border: 1px solid #888;
403
+ width: 65%; /* Adjust width as needed */
404
+ height: 900px; /* Fixed height */
405
+ overflow-y: auto; /* Scroll inside modal if content overflows */
406
+ }
407
+
408
+
409
+ .config-modal-close {
410
+ color: #aaa;
411
+ float: right;
412
+ font-size: 28px;
413
+ font-weight: bold;
414
+ }
415
+
416
+ .config-modal-close:hover,
417
+ .config-modal-close:focus {
418
+ color: black;
419
+ text-decoration: none;
420
+ cursor: pointer;
421
+ }
422
+
423
+ /* Custom checkbox style */
424
+ .config-adv-checkbox {
425
+ position: relative;
426
+ display: flex;
427
+ align-items: center; /* Aligns items vertically in the center */
428
+ gap: 10px; /* Space between checkbox and label */
429
+ margin-bottom: 10px;
430
+ user-select: none;
431
+ padding-left: 35px;
432
+ cursor: pointer;
433
+ background-color: lightgray;
434
+ border-radius: 5px;
435
+ }
436
+
437
+ /* Hide the default checkbox */
438
+ .config-adv-checkbox input {
439
+ position: absolute;
440
+ opacity: 0;
441
+ cursor: pointer;
442
+ height: 0;
443
+ width: 0;
444
+ }
445
+
446
+ /* Create a custom checkbox */
447
+ .checkmark {
448
+ /* Custom checkbox styles (keep your existing styles) */
449
+ display: inline-block;
450
+ width: 25px;
451
+ height: 25px;
452
+ top: 0;
453
+ left: 0;
454
+ height: 25px;
455
+ width: 25px;
456
+ background-color: #eee;
457
+ border-radius: 5px;
458
+ cursor: pointer;
459
+
460
+ }
461
+
462
+ /* On mouse-over, add a grey background color */
463
+ .config-adv-checkbox:hover input ~ .checkmark {
464
+ background-color: grey;
465
+ }
466
+
467
+ /* When the checkbox is checked, add a blue background */
468
+ .config-adv-checkbox input:checked ~ .checkmark {
469
+ background-color: green;
470
+ }
471
+
472
+ /* Create the checkmark/indicator (hidden when not checked) */
473
+ .checkmark:after {
474
+ content: "";
475
+ position: absolute;
476
+ display: none;
477
+ }
478
+
479
+ /* Show the checkmark when checked */
480
+ .config-adv-checkbox input:checked ~ .checkmark:after {
481
+ display: block;
482
+ }
483
+
484
+ /* Style the checkmark/indicator */
485
+ .config-adv-checkbox .checkmark:after {
486
+ left: 9px;
487
+ top: 5px;
488
+ width: 5px;
489
+ height: 10px;
490
+ border: solid white;
491
+ border-width: 0 3px 3px 0;
492
+ transform: rotate(45deg);
493
+ }
494
+
495
+
496
+ /* pop up parameter styiling */
497
+
498
+ /* Add this to your existing CSS */
499
+
500
+ .card-grid {
501
+ display: grid;
502
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
503
+ gap: 20px;
504
+ }
505
+
506
+ .config-card {
507
+ background-color: #f4f4f4;
508
+ padding: 20px;
509
+ border-radius: 8px;
510
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
511
+ }
512
+
513
+ .config-card h3 {
514
+ margin-top: 0;
515
+ }
516
+
517
+
518
+ .config-item {
519
+ margin-bottom: 15px;
520
+ }
521
+
522
+ .config-item label {
523
+ display: block;
524
+ margin-bottom: 5px;
525
+ }
526
+
527
+ .config-item input[type="text"],
528
+ .config-item select,
529
+ .config-item input[type="number"] {
530
+ width: 100%;
531
+ padding: 8px;
532
+ margin-bottom: 10px;
533
+ border: 1px solid #ccc;
534
+ border-radius: 4px;
535
+ }
536
+
537
+ .config-item input[type="checkbox"] {
538
+ margin-right: 10px;
539
+ }
540
+
541
+
542
+
543
+ /* Divider */
544
+ .divider {
545
+ height: 2px; /* Adjust the thickness of the line here */
546
+ background: repeating-linear-gradient(
547
+ to right,
548
+ #000,
549
+ #000 10px,
550
+ transparent 10px,
551
+ transparent 20px
552
+ );
553
+ position: relative;
554
+ width: 100%; /* Make the line span the full width */
555
+ margin: 50px 0; /* Add some vertical space around the divider */
556
+ }
557
+
558
+ .divider-text {
559
+ position: absolute;
560
+ top: -50%; /* Adjust this value to align the text with the line */
561
+ left: 50%;
562
+ transform: translate(-50%, -50%);
563
+ background: white;
564
+ padding: 5px;
565
+ border-radius: 10px; /* Optional, for rounded corners */
566
+ }
567
+
568
+
569
+ /* Dark Mode */
570
+
571
+ .dark-mode-toggle-container {
572
+ position: fixed;
573
+ bottom: 20px;
574
+ right: 20px;
575
+ display: flex;
576
+ align-items: center;
577
+ z-index: 1000;
578
+ }
579
+
580
+ .dark-mode-toggle-label {
581
+ margin-right: 10px;
582
+ color: #333;
583
+ font-size: 16px;
584
+ }
585
+
586
+ /* Ensure the label text switches color with the theme */
587
+ body.dark-mode .dark-mode-toggle-label {
588
+ color: #FFF;
589
+ }
590
+ .switch {
591
+ position: relative;
592
+ display: inline-block;
593
+ width: 60px;
594
+ height: 34px;
595
+ }
596
+
597
+ .switch input {
598
+ opacity: 0;
599
+ width: 0;
600
+ height: 0;
601
+ }
602
+
603
+ .slider {
604
+ position: absolute;
605
+ cursor: pointer;
606
+ top: 0;
607
+ left: 0;
608
+ right: 0;
609
+ bottom: 0;
610
+ background-color: #ccc;
611
+ transition: .4s;
612
+ border-radius: 34px;
613
+ }
614
+
615
+ .slider:before {
616
+ position: absolute;
617
+ content: "";
618
+ height: 26px;
619
+ width: 26px;
620
+ left: 4px;
621
+ bottom: 4px;
622
+ background-color: white;
623
+ transition: .4s;
624
+ border-radius: 50%;
625
+ }
626
+
627
+ input:checked + .slider {
628
+ background-color: #666;
629
+ }
630
+
631
+ input:checked + .slider:before {
632
+ transform: translateX(26px);
633
+ }
634
+
635
+ body.dark-mode {
636
+ background-color: #0A192F;
637
+
638
+ }
639
+
640
+ body {
641
+ padding: 20px;
642
+ transition: background-color 0.4s, color 0.4s;
643
+ }
644
+
645
+ .dark-mode-toggle-container {
646
+ position: fixed;
647
+ bottom: 20px;
648
+ right: 20px;
649
+ display: flex;
650
+ align-items: center;
651
+ z-index: 1000;
652
+ }
653
+
654
+ .dark-mode-toggle-label {
655
+ margin-right: 10px;
656
+ color: #333;
657
+ font-size: 16px;
658
+ }
659
+
660
+ body.dark-mode .dark-mode-toggle-label {
661
+ color: #FFF;}
static/js/script.js ADDED
@@ -0,0 +1,366 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+
3
+ document.getElementById('videoForm').addEventListener('submit', function(e) {
4
+ e.preventDefault();
5
+
6
+ var m3u8Url = document.getElementById('m3u8Input').value;
7
+
8
+ // Send a POST request to the server to process the video
9
+ fetch('/process_video', {
10
+ method: 'POST',
11
+ body: JSON.stringify({ m3u8Url: m3u8Url }),
12
+ headers: {
13
+ 'Content-Type': 'application/json'
14
+ }
15
+ })
16
+ .then(response => response.json())
17
+ .then(data => {
18
+ if (data.mp4Path) {
19
+ var videoPlayer = document.getElementById('videoPlayer');
20
+ videoPlayer.src = data.mp4Path;
21
+ // Set the video to muted before playing
22
+ videoPlayer.muted = true;
23
+ videoPlayer.load();
24
+ videoPlayer.play();
25
+ } else {
26
+ console.error('Failed to process video');
27
+ }
28
+ })
29
+ .catch(error => console.error('Error:', error));
30
+ });
31
+
32
+ // Pop up functionality
33
+ var configModal = document.getElementById("configAdvModal");
34
+ var configBtn = document.getElementById("configAdvMode");
35
+ var configSpan = document.getElementsByClassName("config-modal-close")[0];
36
+
37
+ // Toggle modal display based on checkbox state
38
+ configBtn.addEventListener('change', function() {
39
+ if (this.checked) {
40
+ configModal.style.display = "block";
41
+ } else {
42
+ configModal.style.display = "none";
43
+ }
44
+ });
45
+
46
+ // When clicking on the modal close button, uncheck the checkbox and hide the modal
47
+ configSpan.onclick = function() {
48
+ configModal.style.display = "none";
49
+ configBtn.checked = false;
50
+ };
51
+
52
+ // When clicking outside the modal, uncheck the checkbox and hide the modal
53
+ window.onclick = function(event) {
54
+ if (event.target == configModal) {
55
+ configModal.style.display = "none";
56
+ configBtn.checked = false;
57
+ }
58
+ };
59
+
60
+
61
+
62
+
63
+
64
+ // Toggle functionality for Input Section
65
+ var accordionToggleVideo = document.getElementById('accordionToggleVideo');
66
+ var videoSection = document.getElementById('videoSection');
67
+
68
+ if (accordionToggleVideo && videoSection) {
69
+ accordionToggleVideo.addEventListener('click', function() {
70
+ videoSection.classList.toggle('hidden');
71
+ var icon = this.querySelector('i');
72
+
73
+ // Toggle between fa-angle-down and fa-angle-up
74
+ if (icon.classList.contains('fa-angle-down')) {
75
+ icon.classList.remove('fa-angle-down');
76
+ icon.classList.add('fa-angle-up');
77
+ } else {
78
+ icon.classList.remove('fa-angle-up');
79
+ icon.classList.add('fa-angle-down');
80
+ }
81
+ });
82
+ } else {
83
+ console.error('Accordion elements for video not found');
84
+ }
85
+
86
+ // Toggle functionality for Output Section 3
87
+ var accordionToggleVideo2 = document.getElementById('accordionToggleVideo2');
88
+ var filteredResults = document.getElementById('filteredResults');
89
+
90
+ if (accordionToggleVideo2 && filteredResults) {
91
+ accordionToggleVideo2.addEventListener('click', function() {
92
+ filteredResults.classList.toggle('hidden');
93
+ var icon = this.querySelector('i');
94
+
95
+ // Toggle between fa-angle-down and fa-angle-up
96
+ if (icon.classList.contains('fa-angle-down')) {
97
+ icon.classList.remove('fa-angle-down');
98
+ icon.classList.add('fa-angle-up');
99
+ } else {
100
+ icon.classList.remove('fa-angle-up');
101
+ icon.classList.add('fa-angle-down');
102
+ }
103
+ });
104
+ } else {
105
+ console.error('Accordion elements for filtered results not found');
106
+ }
107
+
108
+ // Toggle functionality for Configuration Section 2
109
+ var accordionToggleVideo3 = document.getElementById('accordionToggleVideo3');
110
+ var configurationSection = document.getElementById('configurationSection');
111
+
112
+ if (accordionToggleVideo3 && configurationSection) {
113
+ accordionToggleVideo3.addEventListener('click', function() {
114
+ configurationSection.classList.toggle('hidden');
115
+ var icon = this.querySelector('i');
116
+
117
+ // Toggle between fa-angle-down and fa-angle-up
118
+ if (icon.classList.contains('fa-angle-down')) {
119
+ icon.classList.remove('fa-angle-down');
120
+ icon.classList.add('fa-angle-up');
121
+ } else {
122
+ icon.classList.remove('fa-angle-up');
123
+ icon.classList.add('fa-angle-down');
124
+ }
125
+ });
126
+ } else {
127
+ console.error('Accordion elements for filtered results not found');
128
+ }
129
+
130
+
131
+
132
+
133
+
134
+ });
135
+
136
+
137
+
138
+ // Assuming the base path for team images
139
+ const basePathForTeamImages = '/static/teams_jersy/';
140
+
141
+
142
+ // Function to update team images based on the selected team
143
+ function updateTeamImages(selectedTeam) {
144
+ const imageUrl = basePathForTeamImages + selectedTeam + '.jpg'; // Assuming the images are in JPG format
145
+ const imageUrl2 = basePathForTeamImages + selectedTeam + '1.jpg';
146
+
147
+ console.log(imageUrl);
148
+ // Set the image URLs
149
+ document.getElementById('leftTeamImage').src = imageUrl;
150
+ document.getElementById('leftTeamImage2').src = imageUrl2;
151
+ }
152
+
153
+
154
+ // Assuming the base path for team images
155
+ const basePathForPlayerImages = '/static/players_image/';
156
+
157
+ // Function to update player images based on the selected player
158
+ function updatePlayerImages(selectedPlayer) {
159
+ const plyaerImageUrl = basePathForPlayerImages + selectedPlayer + '.png';
160
+
161
+ console.log(plyaerImageUrl);
162
+ // Set the image URLs
163
+
164
+ document.getElementById('rightTeamImage').src = plyaerImageUrl;
165
+ }
166
+
167
+
168
+ document.addEventListener('DOMContentLoaded', function() {
169
+ const teamDropdown = document.getElementById('teamDropdown');
170
+ const playerDropdown = document.getElementById('playerDropdown');
171
+ let jsonData = null;
172
+
173
+ // Event listener for file input change
174
+ document.getElementById('fileInput').addEventListener('change', function(e) {
175
+
176
+ document.getElementById('JersyContainer').style.display = 'block';
177
+ const file = e.target.files[0];
178
+ if (!file) return;
179
+
180
+ const reader = new FileReader();
181
+ reader.onload = function(fileEvent) {
182
+ try {
183
+ jsonData = JSON.parse(fileEvent.target.result);
184
+ populateTeamDropdown(jsonData); // Populate team dropdown
185
+ // Initially populate player dropdown with first team's players or empty
186
+ if (teamDropdown.options.length > 0) {
187
+ populatePlayerDropdown(jsonData, teamDropdown.options[0].value);
188
+ }
189
+ // check if jsonData.metadata.video_url exists
190
+ if (jsonData.metadata.video_url) {
191
+ document.getElementById('m3u8Input').value = jsonData.metadata.video_url;
192
+ document.getElementById('videoForm').querySelector('button').click();
193
+ }
194
+
195
+ } catch (error) {
196
+ console.error('Error parsing JSON:', error);
197
+ alert('Invalid JSON file.');
198
+ }
199
+ };
200
+ reader.readAsText(file);
201
+
202
+ // Update team images when the team dropdown is populated
203
+ if (teamDropdown.options.length > 0) {
204
+ updateTeamImages(teamDropdown.options[0].value);
205
+ }
206
+ });
207
+
208
+ // Event listener for team dropdown change
209
+ teamDropdown.addEventListener('change', function(e) {
210
+ const selectedTeam = e.target.value;
211
+ populatePlayerDropdown(jsonData, selectedTeam);
212
+
213
+ // Update team images when the team selection changes
214
+ updateTeamImages(selectedTeam);
215
+
216
+ });
217
+
218
+ // Event listener for player dropdown change
219
+ playerDropdown.addEventListener('change', function(e) {
220
+ const selectedPlayer = e.target.value;
221
+
222
+ // Update team images when the team selection changes
223
+ updatePlayerImages(selectedPlayer);
224
+ });
225
+
226
+
227
+
228
+ // Event listener for filter button click
229
+ document.getElementById('filterButton').addEventListener('click', function() {
230
+ const fileInput = document.getElementById('fileInput');
231
+ const file = fileInput.files[0];
232
+ if (!file) {
233
+ alert('Please select a file.');
234
+ return;
235
+ }
236
+
237
+ const team = teamDropdown.value;
238
+ const playerId = playerDropdown.value;
239
+
240
+ const formData = new FormData();
241
+ formData.append('file', file);
242
+ formData.append('team', team);
243
+ formData.append('playerId', playerId);
244
+
245
+ // Show the overlay as soon as the processing starts
246
+ var element = document.getElementById('filteredResults');
247
+ element.classList.remove('hidden');
248
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
249
+
250
+ document.getElementById('overlay_result').style.display = 'flex';
251
+
252
+
253
+ fetch('/upload_and_filter', {
254
+ method: 'POST',
255
+ body: formData
256
+ })
257
+ .then(response => response.json())
258
+ .then(data => {
259
+ if (data.videoPath) {
260
+ var videoSource = document.getElementById('videoSource');
261
+
262
+ // Append timestamp to the video URL to prevent caching
263
+ var timestamp = new Date().getTime();
264
+ videoSource.src = data.videoPath + "?t=" + timestamp;
265
+
266
+ var videoPlayerResult = document.getElementById('videoPlayer_result');
267
+
268
+ videoPlayerResult.load(); // Load the new video source
269
+
270
+ videoPlayerResult.onloadeddata = function() {
271
+ document.getElementById('overlay_result').style.display = 'none';
272
+ videoPlayerResult.play().catch(error => {
273
+ console.error('Error occurred while trying to play the video:', error);
274
+ });
275
+ };
276
+ } else {
277
+ console.error('Video path not received');
278
+
279
+ }
280
+ })
281
+ .catch(error => console.error('Error:', error));
282
+ });
283
+ });
284
+
285
+ // Function to populate the player dropdown with kit numbers based on the selected team
286
+ function populatePlayerDropdown(jsonData, selectedTeam) {
287
+ const kitNumbers = new Set();
288
+
289
+ // Iterate through the 'frame' object in the JSON and filter by team
290
+ Object.values(jsonData.frame).forEach(frameData => {
291
+ Object.values(frameData).forEach(trackData => {
292
+ if (trackData.hasOwnProperty('kit_number') && trackData['team_id'] === selectedTeam) {
293
+ kitNumbers.add(trackData['kit_number'].toString().trim());
294
+ }
295
+ });
296
+ });
297
+
298
+ const playerDropdown = document.getElementById('playerDropdown');
299
+ playerDropdown.innerHTML = '';
300
+ kitNumbers.forEach(number => {
301
+ const option = new Option(number, number);
302
+ playerDropdown.appendChild(option);
303
+ });
304
+ }
305
+
306
+ // Function to populate the team dropdown with team IDs
307
+ function populateTeamDropdown(jsonData) {
308
+ const teamIds = new Set();
309
+
310
+ // Iterate through the 'frame' object in the JSON
311
+ Object.values(jsonData.frame).forEach(frameData => {
312
+ // Iterate through each track_id in the frame
313
+ Object.values(frameData).forEach(trackData => {
314
+ if (trackData.hasOwnProperty('team_id')) {
315
+ teamIds.add(trackData['team_id'].toString().trim());
316
+ }
317
+ });
318
+ });
319
+
320
+ const teamDropdown = document.getElementById('teamDropdown');
321
+ teamDropdown.innerHTML = '';
322
+ teamIds.forEach(teamId => {
323
+ const option = new Option(teamId, teamId);
324
+ teamDropdown.appendChild(option);
325
+ });
326
+ }
327
+
328
+
329
+
330
+ // document.getElementById('videoForm').addEventListener('submit', function(e) {
331
+ // e.preventDefault();
332
+ // var m3u8Url = document.getElementById('m3u8Input').value;
333
+ // document.getElementById('overlay').style.display = 'flex'; // Show the overlay
334
+
335
+ // fetch('/process_video', {
336
+ // method: 'POST',
337
+ // body: JSON.stringify({ m3u8Url: m3u8Url }),
338
+ // headers: {
339
+ // 'Content-Type': 'application/json'
340
+ // }
341
+ // })
342
+ // .then(response => response.json())
343
+ // .then(data => {
344
+ // document.getElementById('overlay').style.display = 'none'; // Hide the overlay
345
+ // if (data.mp4Path) {
346
+ // var videoPlayer = document.getElementById('videoPlayer');
347
+ // videoPlayer.src = data.mp4Path;
348
+ // videoPlayer.load();
349
+ // videoPlayer.play();
350
+ // } else {
351
+ // console.error('Failed to process video');
352
+ // }
353
+ // })
354
+ // .catch(error => {
355
+ // console.error('Error:', error);
356
+ // document.getElementById('overlay').style.display = 'none'; // Hide the overlay even if there is an error
357
+ // });
358
+ // });
359
+
360
+
361
+ // Dark Mode
362
+
363
+ document.getElementById('darkModeToggle').addEventListener('change', function() {
364
+ document.body.classList.toggle('dark-mode', this.checked);
365
+ });
366
+
static/players_image/Espen Bj/303/270rnsen Garna/314/212s (4).png ADDED
static/players_image/Gjermund Asen (23).png ADDED
static/players_image/Jacob Storevik (1).png ADDED
static/players_image/Lars Mogstad Ranger (2).png ADDED
static/players_image/Petter Dahle Strand (24).png ADDED
static/players_image/Thomas Lehne Olsen (10).png ADDED
static/players_image/Vegar Eggen Hedenstad (6).jpg ADDED
static/players_image/Vegar Eggen Hedenstad (6).png ADDED
static/teams_jersy/HamKam.jpg ADDED
static/teams_jersy/HamKam1.jpg ADDED
static/teams_jersy/Lillestr/303/270m.jpg ADDED
static/teams_jersy/Lillestr/303/270m1.jpg ADDED
static/teams_jersy/Va/314/212lerenga.jpg ADDED
static/teams_jersy/Va/314/212lerenga1.jpg ADDED
static/teams_jersy/placeholder.jpeg ADDED
static/teams_jersy/placeholder.png ADDED