-
Notifications
You must be signed in to change notification settings - Fork 1
/
import.html
742 lines (698 loc) · 86.2 KB
/
import.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Melovi - Import</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="stylesheet" href="css/import.css">
</head>
<body class="">
<!-- ==================== ALERT MESSAGE =================== -->
<div class="alert">
<img src="images/alert_error.svg" alt="" class="alert_icon">
<p id="alertText"></p>
<div class="close_btn">
<img src="images/cancel_error.svg" alt="" class="cancel_icon">
</div>
</div>
<div class="wrapper">
<!-- ==================== ASIDE NAVBAR =================== -->
<nav class="aside">
<div class="navbar">
<div class="navbar-top">
<div class="navbar-item">
<a href="#" class="navbar-item__home nav-button" id="to-home">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M28.0193 9.01503L18.36 1.15503C16.4723 -0.374972 13.5229 -0.389972 11.65 1.14003L1.99068 9.01503C0.604459 10.14 -0.236123 12.39 0.0588183 14.16L1.91695 25.47C2.34461 28.005 4.6599 30 7.18164 30H22.8136C25.3058 30 27.6654 27.96 28.093 25.455L29.9512 14.145C30.2166 12.39 29.376 10.14 28.0193 9.01503ZM16.1037 24C16.1037 24.615 15.6023 25.125 14.9976 25.125C14.393 25.125 13.8916 24.615 13.8916 24V19.5C13.8916 18.885 14.393 18.375 14.9976 18.375C15.6023 18.375 16.1037 18.885 16.1037 19.5V24Z"
fill="#363636" />
</svg>
</a>
</div>
<div class="navbar-item">
<a href="#" class="navbar-item__search nav-button" id="open-search">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M13.0072 0.0371635C5.83468 0.0371635 0 5.87184 0 13.0444C0 20.217 5.83468 26.0516 13.0072 26.0516C15.1999 26.0516 17.3554 25.5314 19.1764 24.5279C19.3223 24.7035 19.484 24.8652 19.6595 25.0111L23.3759 28.7274C23.719 29.1136 24.1375 29.4255 24.6056 29.644C25.0736 29.8626 25.5814 29.9832 26.0978 29.9984C26.6141 30.0136 27.1282 29.9231 27.6083 29.7324C28.0884 29.5418 28.5245 29.255 28.8897 28.8897C29.255 28.5245 29.5418 28.0884 29.7324 27.6083C29.9231 27.1281 30.0136 26.6141 29.9984 26.0978C29.9832 25.5814 29.8626 25.0736 29.644 24.6056C29.4255 24.1375 29.1136 23.719 28.7274 23.3759L25.0111 19.6595C24.83 19.4784 24.6308 19.3165 24.4165 19.1764C25.4199 17.3554 26.0516 15.2371 26.0516 13.0072C26.0516 5.83468 20.217 0 13.0444 0L13.0072 0.0371635ZM13.0072 3.75352C18.173 3.75352 22.2981 7.87867 22.2981 13.0444C22.2981 15.4972 21.4062 17.7642 19.8453 19.4365C19.8082 19.4737 19.771 19.5109 19.7338 19.548C19.5583 19.6939 19.3966 19.8556 19.2507 20.0312C17.6155 21.5177 15.3857 22.3725 12.9701 22.3725C7.80435 22.3725 3.67919 18.2473 3.67919 13.0816C3.67919 7.91584 7.80435 3.79068 12.9701 3.79068L13.0072 3.75352Z"
fill="#363636" />
</svg>
</a>
</div>
<div class="navbar-item">
<a href="playlists.html" class="navbar-item__playlists nav-button" id="to-playlists">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M0 6.37479C0 5.95708 0.169327 5.55648 0.47073 5.26111C0.772133 4.96574 1.18092 4.7998 1.60717 4.7998H25.179C25.6053 4.7998 26.0141 4.96574 26.3155 5.26111C26.6169 5.55648 26.7862 5.95708 26.7862 6.37479C26.7862 6.79251 26.6169 7.19311 26.3155 7.48848C26.0141 7.78385 25.6053 7.94978 25.179 7.94978H1.60717C1.18092 7.94978 0.772133 7.78385 0.47073 7.48848C0.169327 7.19311 0 6.79251 0 6.37479ZM1.60717 16.3497H17.1432C17.5694 16.3497 17.9782 16.1838 18.2796 15.8884C18.581 15.5931 18.7503 15.1925 18.7503 14.7747C18.7503 14.357 18.581 13.9564 18.2796 13.6611C17.9782 13.3657 17.5694 13.1998 17.1432 13.1998H1.60717C1.18092 13.1998 0.772133 13.3657 0.47073 13.6611C0.169327 13.9564 0 14.357 0 14.7747C0 15.1925 0.169327 15.5931 0.47073 15.8884C0.772133 16.1838 1.18092 16.3497 1.60717 16.3497ZM10.7145 21.5997H1.60717C1.18092 21.5997 0.772133 21.7656 0.47073 22.061C0.169327 22.3564 0 22.757 0 23.1747C0 23.5924 0.169327 23.993 0.47073 24.2884C0.772133 24.5837 1.18092 24.7497 1.60717 24.7497H10.7145C11.1407 24.7497 11.5495 24.5837 11.8509 24.2884C12.1523 23.993 12.3216 23.5924 12.3216 23.1747C12.3216 22.757 12.1523 22.3564 11.8509 22.061C11.5495 21.7656 11.1407 21.5997 10.7145 21.5997ZM29.9322 14.7026C29.8085 15.1015 29.5283 15.436 29.1532 15.6329C28.7781 15.8297 28.3387 15.8727 27.9313 15.7525L24.6433 14.7918V23.1747C24.6433 24.1777 24.3177 25.1547 23.7134 25.9643C23.1092 26.7738 22.2578 27.374 21.2823 27.6778C20.3069 27.9816 19.2582 27.9734 18.2879 27.6543C17.3175 27.3352 16.476 26.7218 15.8851 25.9029C15.2941 25.0839 14.9845 24.1019 15.0009 23.0991C15.0173 22.0962 15.3589 21.1244 15.9764 20.3245C16.5938 19.5246 17.455 18.9379 18.4352 18.6495C19.4155 18.361 20.464 18.3858 21.429 18.7201V12.6748C21.429 12.4292 21.4877 12.1871 21.6002 11.9678C21.7127 11.7484 21.876 11.5579 22.077 11.4114C22.2781 11.2649 22.5113 11.1664 22.758 11.124C23.0048 11.0815 23.2582 11.0961 23.4982 11.1667L28.8554 12.7417C29.2635 12.8619 29.6062 13.136 29.8081 13.5037C30.01 13.8714 30.0547 14.3026 29.9322 14.7026ZM21.429 23.1747C21.429 22.8632 21.3347 22.5587 21.1581 22.2997C20.9815 22.0407 20.7305 21.8388 20.4368 21.7196C20.1431 21.6004 19.82 21.5692 19.5082 21.63C19.1965 21.6907 18.9101 21.8407 18.6853 22.061C18.4606 22.2813 18.3075 22.5619 18.2455 22.8674C18.1835 23.1729 18.2153 23.4896 18.3369 23.7774C18.4586 24.0652 18.6646 24.3112 18.9289 24.4842C19.1932 24.6573 19.5039 24.7497 19.8218 24.7497C20.248 24.7497 20.6568 24.5837 20.9582 24.2884C21.2596 23.993 21.429 23.5924 21.429 23.1747Z"
fill="black" />
</svg>
</svg>
</a>
</div>
</div>
<div class="navbar-bottom">
<div class="navbar-item">
<a href="#" class="navbar-item__profile nav-button" id="to-profile">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10 8.75C10 7.42392 10.5268 6.15215 11.4645 5.21447C12.4021 4.27678 13.6739 3.75 15 3.75C16.3261 3.75 17.5979 4.27678 18.5355 5.21447C19.4732 6.15215 20 7.42392 20 8.75C20 10.0761 19.4732 11.3479 18.5355 12.2855C17.5979 13.2232 16.3261 13.75 15 13.75C13.6739 13.75 12.4021 13.2232 11.4645 12.2855C10.5268 11.3479 10 10.0761 10 8.75ZM10 16.25C8.3424 16.25 6.75269 16.9085 5.58058 18.0806C4.40848 19.2527 3.75 20.8424 3.75 22.5C3.75 23.4946 4.14509 24.4484 4.84835 25.1517C5.55161 25.8549 6.50544 26.25 7.5 26.25H22.5C23.4946 26.25 24.4484 25.8549 25.1517 25.1517C25.8549 24.4484 26.25 23.4946 26.25 22.5C26.25 20.8424 25.5915 19.2527 24.4194 18.0806C23.2473 16.9085 21.6576 16.25 20 16.25H10Z"
fill="#363636" />
</svg>
</a>
</div>
<div class="navbar-item">
<a href="#" class="navbar-item__theme nav-button" id="switch-theme">
<svg class="to-dark-theme" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.4187 4.39759C14.5118 4.19262 14.5478 3.96633 14.5229 3.74261C14.498 3.51889 14.4131 3.30604 14.2773 3.12654C14.1415 2.94705 13.9597 2.80756 13.7511 2.72282C13.5426 2.63808 13.315 2.61122 13.0925 2.64509C7.09375 3.56509 2.5 8.74509 2.5 15.0001C2.5 21.9038 8.09625 27.5001 15 27.5001C21.9037 27.5001 27.5 21.9038 27.5 15.0001C27.4999 14.8834 27.4982 14.7667 27.495 14.6501C27.4888 14.4247 27.4217 14.2052 27.3009 14.0149C27.1801 13.8245 27.01 13.6704 26.8088 13.5688C26.6075 13.4672 26.3825 13.4219 26.1576 13.4378C25.9327 13.4536 25.7163 13.53 25.5312 13.6588C24.1826 14.5981 22.5628 15.0683 20.9209 14.9973C19.279 14.9263 17.7059 14.3179 16.4434 13.2657C15.1809 12.2136 14.299 10.7759 13.9332 9.17364C13.5674 7.57142 13.738 5.89341 14.4187 4.39759Z"
fill="#363636" />
</svg>
<svg class="to-light-theme hidden" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<g clip-path="url(#clip0_648_8)">
<path
d="M15 23.75C15.3315 23.75 15.6494 23.8817 15.8838 24.1161C16.1183 24.3505 16.25 24.6685 16.25 25V26.25C16.25 26.5815 16.1183 26.8995 15.8838 27.1339C15.6494 27.3683 15.3315 27.5 15 27.5C14.6684 27.5 14.3505 27.3683 14.1161 27.1339C13.8817 26.8995 13.75 26.5815 13.75 26.25V25C13.75 24.6685 13.8817 24.3505 14.1161 24.1161C14.3505 23.8817 14.6684 23.75 15 23.75ZM22.955 21.1875L23.8387 22.0712C24.0664 22.307 24.1924 22.6228 24.1895 22.9505C24.1867 23.2782 24.0552 23.5918 23.8235 23.8235C23.5917 24.0553 23.2782 24.1867 22.9505 24.1896C22.6227 24.1924 22.307 24.0664 22.0712 23.8387L21.1875 22.955C20.9598 22.7192 20.8338 22.4035 20.8366 22.0757C20.8395 21.748 20.9709 21.4345 21.2027 21.2027C21.4344 20.971 21.748 20.8395 22.0757 20.8367C22.4035 20.8338 22.7192 20.9598 22.955 21.1875ZM7.04496 21.1875C7.2699 20.9633 7.57175 20.8332 7.88919 20.8235C8.20662 20.8138 8.51585 20.9253 8.75406 21.1353C8.99226 21.3454 9.14159 21.6382 9.17171 21.9543C9.20182 22.2705 9.11047 22.5863 8.91621 22.8375L8.81246 22.955L7.92871 23.8387C7.70376 24.0629 7.40191 24.1931 7.08448 24.2028C6.76704 24.2125 6.45782 24.101 6.21961 23.8909C5.9814 23.6809 5.83208 23.3881 5.80196 23.0719C5.77184 22.7558 5.86319 22.44 6.05746 22.1887L6.16121 22.0712L7.04496 21.1875ZM15 7.5C16.9891 7.5 18.8967 8.29018 20.3033 9.6967C21.7098 11.1032 22.5 13.0109 22.5 15C22.5 16.9891 21.7098 18.8968 20.3033 20.3033C18.8967 21.7098 16.9891 22.5 15 22.5C13.0108 22.5 11.1032 21.7098 9.69666 20.3033C8.29013 18.8968 7.49996 16.9891 7.49996 15C7.49996 13.0109 8.29013 11.1032 9.69666 9.6967C11.1032 8.29018 13.0108 7.5 15 7.5ZM4.99996 13.75C5.31856 13.7504 5.625 13.8723 5.85667 14.0911C6.08834 14.3098 6.22775 14.6087 6.24642 14.9267C6.26509 15.2448 6.16161 15.558 5.95713 15.8023C5.75264 16.0466 5.46258 16.2036 5.14621 16.2413L4.99996 16.25H3.74996C3.43136 16.2496 3.12492 16.1277 2.89325 15.9089C2.66158 15.6902 2.52216 15.3913 2.50349 15.0733C2.48482 14.7552 2.5883 14.442 2.79279 14.1977C2.99728 13.9534 3.28734 13.7964 3.60371 13.7587L3.74996 13.75H4.99996ZM26.25 13.75C26.5815 13.75 26.8994 13.8817 27.1338 14.1161C27.3683 14.3505 27.5 14.6685 27.5 15C27.5 15.3315 27.3683 15.6495 27.1338 15.8839C26.8994 16.1183 26.5815 16.25 26.25 16.25H25C24.6684 16.25 24.3505 16.1183 24.1161 15.8839C23.8817 15.6495 23.75 15.3315 23.75 15C23.75 14.6685 23.8817 14.3505 24.1161 14.1161C24.3505 13.8817 24.6684 13.75 25 13.75H26.25ZM6.16121 6.16125C6.37645 5.94603 6.66282 5.81674 6.96661 5.79764C7.27039 5.77854 7.5707 5.87094 7.81121 6.0575L7.92871 6.16125L8.81246 7.045C9.03664 7.26995 9.1668 7.57179 9.17649 7.88923C9.18619 8.20667 9.07469 8.51589 8.86465 8.7541C8.6546 8.99231 8.36177 9.14163 8.04561 9.17175C7.72946 9.20187 7.4137 9.11051 7.16246 8.91625L7.04496 8.8125L6.16121 7.92875C5.92687 7.69434 5.79522 7.37646 5.79522 7.045C5.79522 6.71354 5.92687 6.39566 6.16121 6.16125ZM23.8387 6.16125C24.073 6.39566 24.2047 6.71354 24.2047 7.045C24.2047 7.37646 24.073 7.69434 23.8387 7.92875L22.955 8.8125C22.8396 8.93189 22.7017 9.02712 22.5492 9.09263C22.3967 9.15814 22.2327 9.19262 22.0667 9.19406C21.9007 9.19551 21.7361 9.16388 21.5825 9.10103C21.4289 9.03818 21.2893 8.94536 21.172 8.82799C21.0546 8.71063 20.9618 8.57106 20.8989 8.41744C20.8361 8.26382 20.8044 8.09922 20.8059 7.93325C20.8073 7.76727 20.8418 7.60325 20.9073 7.45074C20.9728 7.29824 21.0681 7.16031 21.1875 7.045L22.0712 6.16125C22.3056 5.92691 22.6235 5.79527 22.955 5.79527C23.2864 5.79527 23.6043 5.92691 23.8387 6.16125ZM15 2.5C15.3315 2.5 15.6494 2.6317 15.8838 2.86612C16.1183 3.10054 16.25 3.41848 16.25 3.75V5C16.25 5.33152 16.1183 5.64946 15.8838 5.88388C15.6494 6.1183 15.3315 6.25 15 6.25C14.6684 6.25 14.3505 6.1183 14.1161 5.88388C13.8817 5.64946 13.75 5.33152 13.75 5V3.75C13.75 3.41848 13.8817 3.10054 14.1161 2.86612C14.3505 2.6317 14.6684 2.5 15 2.5Z"
fill="#F5F5F5" />
</g>
<defs>
<clipPath id="clip0_648_8">
<rect width="30" height="30" fill="white" />
</clipPath>
</defs>
</svg>
</a>
</div>
</div>
</div>
</nav>
<!-- ==================== MAIN =================== -->
<main class="main" id="main">
<!-- ==================== PRELOADER =================== -->
<div class="preloader hidden" id="import-preloader">
<div class="preloader__container container">
<div class="preloader__preloader">
<div class="preloaser__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="76" viewBox="0 0 66 76" fill="none">
<path
d="M63.8624 9.62666L33.8624 0.626658C33.4145 0.49221 32.9413 0.464334 32.4807 0.545257C32.0201 0.626179 31.5848 0.813658 31.2096 1.09273C30.8343 1.3718 30.5295 1.73473 30.3195 2.15255C30.1094 2.57037 30 3.03151 29.9999 3.49916V44.0967C26.9275 41.3487 23.0051 39.7384 18.8881 39.535C14.7711 39.3316 10.7091 40.5474 7.38079 42.9791C4.05252 45.4109 1.65971 48.9113 0.602251 52.8954C-0.455203 56.8794 -0.113228 61.1057 1.57102 64.8679C3.25528 68.6301 6.17976 71.7002 9.8557 73.5653C13.5316 75.4303 17.7363 75.9771 21.767 75.1144C25.7978 74.2518 29.4103 72.0318 32.0008 68.8256C34.5914 65.6194 36.003 61.6211 35.9999 57.4992V25.5304L62.1374 33.3717C62.5853 33.5061 63.0584 33.534 63.519 33.4531C63.9796 33.3721 64.4149 33.1847 64.7901 32.9056C65.1654 32.6265 65.4702 32.2636 65.6802 31.8458C65.8903 31.4279 65.9997 30.9668 65.9999 30.4992V12.4992C65.9997 11.8542 65.7916 11.2265 65.4066 10.7091C65.0216 10.1916 64.4801 9.81208 63.8624 9.62666ZM17.9999 69.4992C15.6265 69.4992 13.3064 68.7954 11.333 67.4768C9.35962 66.1582 7.82155 64.2841 6.9133 62.0914C6.00505 59.8986 5.76741 57.4858 6.23043 55.1581C6.69345 52.8303 7.83634 50.6921 9.51457 49.0139C11.1928 47.3356 13.331 46.1928 15.6588 45.7297C17.9865 45.2667 20.3993 45.5043 22.5921 46.4126C24.7848 47.3209 26.6589 48.8589 27.9775 50.8323C29.2961 52.8057 29.9999 55.1258 29.9999 57.4992C29.9999 60.6818 28.7356 63.734 26.4851 65.9844C24.2347 68.2349 21.1825 69.4992 17.9999 69.4992ZM59.9999 26.4679L35.9999 19.2679V7.53041L59.9999 14.7492V26.4679Z"
fill="#7B3AB0" />
</svg>
</div>
</div>
</div>
</div>
<!-- ==================== HEADER =================== -->
<header class="header">
<div class="header-container" id="header-import">
<div class="playlist-header-scroll hide" id="playlist-header-scroll">
<button class="playlist-header-scroll-button action-button" id="play-all">
<div class="icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M1.96048 0.15419L29.355 14.0237C29.5513 14.1234 29.7142 14.266 29.8273 14.4373C29.9405 14.6086 30 14.8026 30 15C30 15.1974 29.9405 15.3914 29.8273 15.5627C29.7142 15.734 29.5513 15.8766 29.355 15.9763L1.96048 29.8458C1.76238 29.9461 1.53729 29.9993 1.30793 30C1.07858 30.0007 0.853077 29.9488 0.6542 29.8497C0.455323 29.7505 0.290111 29.6076 0.175247 29.4353C0.0603826 29.263 -6.79181e-05 29.0674 5.72643e-08 28.8684V1.12935C0.000390233 0.930493 0.0611742 0.735234 0.176225 0.563258C0.291276 0.391281 0.456529 0.248663 0.655329 0.149778C0.854129 0.0508925 1.07945 -0.000766118 1.30858 8.58683e-06C1.53772 0.000783292 1.76257 0.0539638 1.96048 0.15419Z"
fill="#121212" />
</svg>
</div>
</button>
<h3 class="playlist-title-text-scrolled" id="playlist-title-text-scrolled">Playlist for real Meloman (not full version)</h3>
</div>
<div class="header-container-right" id="header-import-right">
<div class="import-forms">
<div class="forPlaylist import-form" id="for-playlist-form">
<input class="import-input" type="text" id="playlistId"
placeholder="Playlist link in YouTube Music...">
<button class="import-button" id="importPlaylist" onclick="loadClient().then(fetchPlaylist)">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<path
d="M4.375 1.68262C4.48034 1.68265 4.58397 1.70931 4.67625 1.76012L27.7537 14.4526C27.8517 14.5066 27.9335 14.5858 27.9904 14.6821C28.0473 14.7784 28.0773 14.8883 28.0773 15.0001C28.0773 15.112 28.0473 15.2218 27.9904 15.3181C27.9335 15.4144 27.8517 15.4937 27.7537 15.5476L4.67625 28.2414C4.581 28.2938 4.47373 28.3204 4.36503 28.3187C4.25633 28.3169 4.14996 28.2869 4.05643 28.2315C3.9629 28.1761 3.88544 28.0972 3.8317 28.0027C3.77796 27.9082 3.7498 27.8013 3.75 27.6926V2.30762C3.75 2.14186 3.81585 1.98289 3.93306 1.86568C4.05027 1.74847 4.20924 1.68262 4.375 1.68262ZM6.25 5.47887V13.7501H12.5V16.2501H6.25V24.5214L23.5625 15.0001L6.25 5.47887Z"
fill="#121212" />
</svg>
</button>
</div>
<div class="forSong import-form hidden" id="for-song-form">
<input class="import-input" type="text" id="songId"
placeholder="Song link in YouTube Music...">
<button class="import-button" id="importSong" onclick="loadClient().then(fetchSong)">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"
fill="none">
<path
d="M4.375 1.68262C4.48034 1.68265 4.58397 1.70931 4.67625 1.76012L27.7537 14.4526C27.8517 14.5066 27.9335 14.5858 27.9904 14.6821C28.0473 14.7784 28.0773 14.8883 28.0773 15.0001C28.0773 15.112 28.0473 15.2218 27.9904 15.3181C27.9335 15.4144 27.8517 15.4937 27.7537 15.5476L4.67625 28.2414C4.581 28.2938 4.47373 28.3204 4.36503 28.3187C4.25633 28.3169 4.14996 28.2869 4.05643 28.2315C3.9629 28.1761 3.88544 28.0972 3.8317 28.0027C3.77796 27.9082 3.7498 27.8013 3.75 27.6926V2.30762C3.75 2.14186 3.81585 1.98289 3.93306 1.86568C4.05027 1.74847 4.20924 1.68262 4.375 1.68262ZM6.25 5.47887V13.7501H12.5V16.2501H6.25V24.5214L23.5625 15.0001L6.25 5.47887Z"
fill="#121212" />
</svg>
</button>
</div>
</div>
<label class="switch-block" id="switch-block">
<input type="checkbox" id="switch-check" checked>
<div class="toPlaylist switch-button" id="to-playlist">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="26" viewBox="0 0 32 26" fill="none">
<path
d="M0 1.71432C0 1.25965 0.180615 0.823608 0.502112 0.502111C0.823608 0.180615 1.25965 0 1.71432 0H26.8576C27.3123 0 27.7483 0.180615 28.0698 0.502111C28.3913 0.823608 28.5719 1.25965 28.5719 1.71432C28.5719 2.16898 28.3913 2.60502 28.0698 2.92652C27.7483 3.24802 27.3123 3.42863 26.8576 3.42863H1.71432C1.25965 3.42863 0.823608 3.24802 0.502112 2.92652C0.180615 2.60502 0 2.16898 0 1.71432ZM1.71432 12.5717H18.286C18.7407 12.5717 19.1767 12.391 19.4982 12.0695C19.8197 11.748 20.0004 11.312 20.0004 10.8573C20.0004 10.4027 19.8197 9.96663 19.4982 9.64513C19.1767 9.32364 18.7407 9.14302 18.286 9.14302H1.71432C1.25965 9.14302 0.823608 9.32364 0.502112 9.64513C0.180615 9.96663 0 10.4027 0 10.8573C0 11.312 0.180615 11.748 0.502112 12.0695C0.823608 12.391 1.25965 12.5717 1.71432 12.5717ZM11.4288 18.286H1.71432C1.25965 18.286 0.823608 18.4667 0.502112 18.7882C0.180615 19.1097 0 19.5457 0 20.0004C0 20.455 0.180615 20.8911 0.502112 21.2126C0.823608 21.5341 1.25965 21.7147 1.71432 21.7147H11.4288C11.8834 21.7147 12.3195 21.5341 12.641 21.2126C12.9625 20.8911 13.1431 20.455 13.1431 20.0004C13.1431 19.5457 12.9625 19.1097 12.641 18.7882C12.3195 18.4667 11.8834 18.286 11.4288 18.286ZM31.9277 10.7788C31.7957 11.213 31.4969 11.5771 31.0968 11.7914C30.6967 12.0056 30.228 12.0525 29.7934 11.9216L26.2862 10.8759V20.0004C26.2862 21.0921 25.9388 22.1555 25.2943 23.0367C24.6498 23.9179 23.7416 24.5711 22.7012 24.9018C21.6607 25.2325 20.5421 25.2236 19.507 24.8763C18.472 24.5289 17.5744 23.8613 16.9441 22.9699C16.3138 22.0785 15.9834 21.0096 16.0009 19.918C16.0185 18.8265 16.3829 17.7688 17.0415 16.898C17.7 16.0273 18.6186 15.3888 19.6642 15.0748C20.7099 14.7609 21.8283 14.7878 22.8575 15.1517V8.57158C22.8576 8.30435 22.9202 8.04084 23.0402 7.80208C23.1602 7.56332 23.3344 7.35592 23.5488 7.19645C23.7633 7.03698 24.012 6.92985 24.2752 6.88361C24.5384 6.83737 24.8088 6.8533 25.0647 6.93012L30.7791 8.64444C31.2144 8.77526 31.5799 9.07358 31.7953 9.47381C32.0107 9.87404 32.0583 10.3434 31.9277 10.7788ZM22.8575 20.0004C22.8575 19.6613 22.757 19.3299 22.5686 19.0479C22.3803 18.766 22.1125 18.5463 21.7993 18.4165C21.486 18.2868 21.1413 18.2528 20.8088 18.319C20.4762 18.3851 20.1708 18.5484 19.931 18.7882C19.6913 19.0279 19.528 19.3334 19.4619 19.6659C19.3957 19.9985 19.4297 20.3431 19.5594 20.6564C19.6892 20.9696 19.9089 21.2374 20.1908 21.4258C20.4727 21.6141 20.8042 21.7147 21.1432 21.7147C21.5979 21.7147 22.0339 21.5341 22.3554 21.2126C22.6769 20.8911 22.8575 20.455 22.8575 20.0004Z"
fill="black" />
</svg>
</div>
<div class="toSong switch-button " id="to-song">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<g clip-path="url(#clip0_674_301)">
<path
d="M2 16C2 17.8385 2.36212 19.659 3.06569 21.3576C3.76925 23.0561 4.80048 24.5995 6.1005 25.8995C7.40053 27.1995 8.94387 28.2307 10.6424 28.9343C12.341 29.6379 14.1615 30 16 30C17.8385 30 19.659 29.6379 21.3576 28.9343C23.0561 28.2307 24.5995 27.1995 25.8995 25.8995C27.1995 24.5995 28.2307 23.0561 28.9343 21.3576C29.6379 19.659 30 17.8385 30 16C30 14.1615 29.6379 12.341 28.9343 10.6424C28.2307 8.94387 27.1995 7.40053 25.8995 6.10051C24.5995 4.80048 23.0561 3.76925 21.3576 3.06569C19.659 2.36212 17.8385 2 16 2C14.1615 2 12.341 2.36212 10.6424 3.06569C8.94387 3.76925 7.40053 4.80048 6.1005 6.10051C4.80048 7.40053 3.76925 8.94387 3.06569 10.6424C2.36212 12.341 2 14.1615 2 16Z"
stroke="var(--clr-bg-disabled)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M8.22217 15.9999C8.22217 13.9372 9.04161 11.9588 10.5002 10.5002C11.9588 9.04161 13.9372 8.22217 15.9999 8.22217M15.9999 23.7777C18.0627 23.7777 20.041 22.9583 21.4997 21.4997C22.9583 20.041 23.7777 18.0627 23.7777 15.9999M14.4444 15.9999C14.4444 16.4125 14.6083 16.8082 14.9 17.0999C15.1917 17.3916 15.5874 17.5555 15.9999 17.5555C16.4125 17.5555 16.8082 17.3916 17.0999 17.0999C17.3916 16.8082 17.5555 16.4125 17.5555 15.9999C17.5555 15.5874 17.3916 15.1917 17.0999 14.9C16.8082 14.6083 16.4125 14.4444 15.9999 14.4444C15.5874 14.4444 15.1917 14.6083 14.9 14.9C14.6083 15.1917 14.4444 15.5874 14.4444 15.9999Z"
stroke="var(--clr-bg-disabled)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_674_301">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<span class="import-slider"></span>
</label>
</div>
<div class="header-container-left" id="header-import-left">
<div class="header-title">
<p>
Import
</p>
</div>
</div>
</div>
</header>
<div class="main-container">
<div class="result_block" id="result">
<div class="forPlaylist" id="for-playlist-block">
<div class="hidden" id="for-playlist-content">
<!-- <div class="" id="for-playlist-content"> -->
<div class="playlist-header-container" id="playlist-header">
<div class="playlist-header-background">
<div class="playlist-header-background-filter"></div>
<img src="" id="playlist-background-img" alt="">
</div>
<div class="playlist-header-data">
<div class="playlist-img">
<img src="" alt="Playlist image" id="playlist-thumbnail">
</div>
<div class="playlist-text">
<div class="playlist-title">
<h3 class="playlist-title-text" id="playlist-title-text">
</h3>
<!-- <button class="title-edit" id="title-edit">
<div class="icon-button">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
<path
d="M6.68125 16.5519L17.2458 5.98734L15.7729 4.51443L5.20833 15.079V16.5519H6.68125ZM7.54479 18.6353H3.125V14.2155L15.0365 2.30401C15.2318 2.10873 15.4967 1.99902 15.7729 1.99902C16.0491 1.99902 16.314 2.10873 16.5094 2.30401L19.4562 5.25088C19.6515 5.44623 19.7612 5.71113 19.7612 5.98734C19.7612 6.26356 19.6515 6.52846 19.4562 6.7238L7.54479 18.6353ZM3.125 20.7186H21.875V22.8019H3.125V20.7186Z"
fill="#121212" />
</svg>
</div>
</button> -->
</div>
<h4 class="playlist-author" id="playlist-author">
Abviol
</h4>
<p class="playlist-song-add_details" id="playlist-song-add_details">322 songs</p>
</div>
</div>
<div class="playlist-buttons">
<div class="buttons">
<button class="playlist-button action-button" id="save-imported-playlist">
<div class="icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M4.5 0H25.5C25.8978 0 26.2794 0.153108 26.5607 0.425642C26.842 0.698176 27 1.06781 27 1.45323V29.2725C27.0002 29.4024 26.9644 29.53 26.8963 29.642C26.8283 29.7539 26.7305 29.8462 26.6132 29.9091C26.4959 29.972 26.3633 30.0033 26.2292 29.9997C26.0952 29.9961 25.9646 29.9578 25.851 29.8886L15 23.2953L4.149 29.8872C4.03555 29.9562 3.90508 29.9946 3.77115 29.9983C3.63722 30.0019 3.50473 29.9708 3.38744 29.908C3.27016 29.8453 3.17236 29.7532 3.10422 29.6414C3.03609 29.5297 3.0001 29.4023 3 29.2725V1.45323C3 1.06781 3.15804 0.698176 3.43934 0.425642C3.72064 0.153108 4.10218 0 4.5 0Z"
fill="#fff" />
</svg>
</div>
<p>
Save
</p>
</button>
<button class="playlist-button action-button" id="play-all">
<div class="icon-container">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path
d="M1.96048 0.15419L29.355 14.0237C29.5513 14.1234 29.7142 14.266 29.8273 14.4373C29.9405 14.6086 30 14.8026 30 15C30 15.1974 29.9405 15.3914 29.8273 15.5627C29.7142 15.734 29.5513 15.8766 29.355 15.9763L1.96048 29.8458C1.76238 29.9461 1.53729 29.9993 1.30793 30C1.07858 30.0007 0.853077 29.9488 0.6542 29.8497C0.455323 29.7505 0.290111 29.6076 0.175247 29.4353C0.0603826 29.263 -6.79181e-05 29.0674 5.72643e-08 28.8684V1.12935C0.000390233 0.930493 0.0611742 0.735234 0.176225 0.563258C0.291276 0.391281 0.456529 0.248663 0.655329 0.149778C0.854129 0.0508925 1.07945 -0.000766118 1.30858 8.58683e-06C1.53772 0.000783292 1.76257 0.0539638 1.96048 0.15419Z"
fill="#fff" />
</svg>
</div>
Play all
</button>
</div>
</div>
</div>
<div class="table-header grid-template-columns" id="playlist-songs-table">
<div class="column-header">
<span>
#
</span>
</div>
<div class="column-header">
<span>
Image
</span>
</div>
<div class="column-header">
<span>
Title
</span>
</div>
<div class="column-header">
<span>
Author
</span>
</div>
<div class="column-header">
<span class="column-time">
<svg class="icon__container-16" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"
fill="none">
<path opacity="0.2"
d="M24.0385 12.5004C24.0385 14.7825 23.3618 17.0133 22.0939 18.9108C20.826 20.8083 19.024 22.2872 16.9156 23.1605C14.8072 24.0338 12.4872 24.2623 10.249 23.8171C8.01073 23.3719 5.95477 22.273 4.34109 20.6593C2.72741 19.0456 1.62848 16.9897 1.18326 14.7514C0.738047 12.5132 0.966547 10.1932 1.83987 8.0848C2.71318 5.97642 4.1921 4.17436 6.08959 2.9065C7.98708 1.63863 10.2179 0.961914 12.5 0.961914C15.5602 0.961914 18.4951 2.17757 20.6589 4.34145C22.8228 6.50533 24.0385 9.44018 24.0385 12.5004Z"
fill="#888888" />
<path
d="M12.5 0C10.0277 0 7.61099 0.733112 5.55538 2.10663C3.49976 3.48015 1.89761 5.43238 0.951511 7.71645C0.00541604 10.0005 -0.242126 12.5139 0.24019 14.9386C0.722505 17.3634 1.91301 19.5907 3.66117 21.3388C5.40933 23.087 7.63661 24.2775 10.0614 24.7598C12.4861 25.2421 14.9995 24.9946 17.2835 24.0485C19.5676 23.1024 21.5199 21.5002 22.8934 19.4446C24.2669 17.389 25 14.9723 25 12.5C24.9965 9.18587 23.6784 6.00848 21.335 3.66503C18.9915 1.32158 15.8141 0.00349978 12.5 0ZM12.5 23.0769C10.4081 23.0769 8.36315 22.4566 6.62378 21.2944C4.88441 20.1322 3.52874 18.4803 2.7282 16.5476C1.92766 14.6149 1.7182 12.4883 2.12631 10.4365C2.53443 8.38482 3.54178 6.50019 5.02099 5.02099C6.5002 3.54178 8.38483 2.53442 10.4365 2.12631C12.4883 1.7182 14.6149 1.92765 16.5476 2.7282C18.4803 3.52874 20.1322 4.88441 21.2944 6.62377C22.4566 8.36314 23.0769 10.4081 23.0769 12.5C23.0737 15.3042 21.9584 17.9926 19.9755 19.9755C17.9926 21.9584 15.3042 23.0737 12.5 23.0769ZM20.1923 12.5C20.1923 12.755 20.091 12.9996 19.9107 13.1799C19.7304 13.3602 19.4858 13.4615 19.2308 13.4615H12.5C12.245 13.4615 12.0004 13.3602 11.8201 13.1799C11.6398 12.9996 11.5385 12.755 11.5385 12.5V5.76923C11.5385 5.51421 11.6398 5.26964 11.8201 5.08932C12.0004 4.909 12.245 4.80769 12.5 4.80769C12.755 4.80769 12.9996 4.909 13.1799 5.08932C13.3602 5.26964 13.4615 5.51421 13.4615 5.76923V11.5385H19.2308C19.4858 11.5385 19.7304 11.6398 19.9107 11.8201C20.091 12.0004 20.1923 12.245 20.1923 12.5Z"
fill="#888888" />
</svg>
</span>
</div>
</div>
<div class="songs-list" id="songs-list">
</div>
</div>
</div>
<div class="forSong hidden" id="for-song-block">
<div class="hidden" id="for-song-content">
<div class="table-header grid-template-columns" id="single-song-table">
<div class="column-header">
<span>
#
</span>
</div>
<div class="column-header">
<span>
Image
</span>
</div>
<div class="column-header">
<span>
Title
</span>
</div>
<div class="column-header">
<span>
Author
</span>
</div>
<div class="column-header">
<span class="column-time">
<svg class="icon__container-16" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"
fill="none">
<path opacity="0.2"
d="M24.0385 12.5004C24.0385 14.7825 23.3618 17.0133 22.0939 18.9108C20.826 20.8083 19.024 22.2872 16.9156 23.1605C14.8072 24.0338 12.4872 24.2623 10.249 23.8171C8.01073 23.3719 5.95477 22.273 4.34109 20.6593C2.72741 19.0456 1.62848 16.9897 1.18326 14.7514C0.738047 12.5132 0.966547 10.1932 1.83987 8.0848C2.71318 5.97642 4.1921 4.17436 6.08959 2.9065C7.98708 1.63863 10.2179 0.961914 12.5 0.961914C15.5602 0.961914 18.4951 2.17757 20.6589 4.34145C22.8228 6.50533 24.0385 9.44018 24.0385 12.5004Z"
fill="#888888" />
<path
d="M12.5 0C10.0277 0 7.61099 0.733112 5.55538 2.10663C3.49976 3.48015 1.89761 5.43238 0.951511 7.71645C0.00541604 10.0005 -0.242126 12.5139 0.24019 14.9386C0.722505 17.3634 1.91301 19.5907 3.66117 21.3388C5.40933 23.087 7.63661 24.2775 10.0614 24.7598C12.4861 25.2421 14.9995 24.9946 17.2835 24.0485C19.5676 23.1024 21.5199 21.5002 22.8934 19.4446C24.2669 17.389 25 14.9723 25 12.5C24.9965 9.18587 23.6784 6.00848 21.335 3.66503C18.9915 1.32158 15.8141 0.00349978 12.5 0ZM12.5 23.0769C10.4081 23.0769 8.36315 22.4566 6.62378 21.2944C4.88441 20.1322 3.52874 18.4803 2.7282 16.5476C1.92766 14.6149 1.7182 12.4883 2.12631 10.4365C2.53443 8.38482 3.54178 6.50019 5.02099 5.02099C6.5002 3.54178 8.38483 2.53442 10.4365 2.12631C12.4883 1.7182 14.6149 1.92765 16.5476 2.7282C18.4803 3.52874 20.1322 4.88441 21.2944 6.62377C22.4566 8.36314 23.0769 10.4081 23.0769 12.5C23.0737 15.3042 21.9584 17.9926 19.9755 19.9755C17.9926 21.9584 15.3042 23.0737 12.5 23.0769ZM20.1923 12.5C20.1923 12.755 20.091 12.9996 19.9107 13.1799C19.7304 13.3602 19.4858 13.4615 19.2308 13.4615H12.5C12.245 13.4615 12.0004 13.3602 11.8201 13.1799C11.6398 12.9996 11.5385 12.755 11.5385 12.5V5.76923C11.5385 5.51421 11.6398 5.26964 11.8201 5.08932C12.0004 4.909 12.245 4.80769 12.5 4.80769C12.755 4.80769 12.9996 4.909 13.1799 5.08932C13.3602 5.26964 13.4615 5.51421 13.4615 5.76923V11.5385H19.2308C19.4858 11.5385 19.7304 11.6398 19.9107 11.8201C20.091 12.0004 20.1923 12.245 20.1923 12.5Z"
fill="#888888" />
</svg>
</span>
</div>
</div>
<div class="songs-list" id="single-songs-list">
</div>
</div>
</div>
</main>
<!-- ==================== FOOTER PLAYER =================== -->
<footer class="player" id="footer-player">
<div class="player-container">
<!-- 3 fracrions -->
<div class="player-contaner-left">
<!-- 3 fracrions -->
<div class="player-song-image" id="player-song-image">
<img src="images/songs_imgs/default.png" alt="Song image">
<div id="player"></div>
</div>
<div class="player-song-info">
<span class="player-song-name" id="player-song-title">
<p>
Nothing is playing
</p>
</span>
<span class="player-song-author" id="player-song-author">
<p>
Noone
</p>
</span>
</div>
<!-- <div class="player-song-feedback-status button-container">
<button class="feedback-status icon-button" aria-pressed="false">
<svg class="feedback-liked hidden" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M19.5161 4.68874C19.2058 3.9669 18.7584 3.31277 18.1988 2.76298C17.6389 2.21154 16.9787 1.77332 16.2542 1.47215C15.5029 1.15862 14.6971 0.998135 13.8835 1.00002C12.7422 1.00002 11.6286 1.314 10.6609 1.90708C10.4294 2.04895 10.2095 2.20478 10.0011 2.37457C9.79279 2.20478 9.57286 2.04895 9.34135 1.90708C8.37364 1.314 7.26009 1.00002 6.11876 1.00002C5.2969 1.00002 4.50051 1.15817 3.74811 1.47215C3.02118 1.77451 2.36601 2.20943 1.80345 2.76298C1.24319 3.31215 0.795642 3.96643 0.486167 4.68874C0.164371 5.43998 0 6.23773 0 7.05874C0 7.83323 0.157425 8.64028 0.469961 9.46129C0.731565 10.1474 1.10661 10.8591 1.58583 11.5778C2.34518 12.7151 3.38928 13.9013 4.68572 15.1037C6.83412 17.0969 8.96167 18.4738 9.05196 18.5296L9.60064 18.8831C9.84372 19.039 10.1563 19.039 10.3993 18.8831L10.948 18.5296C11.0383 18.4715 13.1635 17.0969 15.3143 15.1037C16.6107 13.9013 17.6548 12.7151 18.4141 11.5778C18.8934 10.8591 19.2707 10.1474 19.53 9.46129C19.8425 8.64028 20 7.83323 20 7.05874C20.0023 6.23773 19.8379 5.43998 19.5161 4.68874Z"
fill="#363636" />
</svg>
<svg class="feedback-unliked" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M19.5161 4.68874C19.2058 3.9669 18.7584 3.31277 18.1988 2.76298C17.6389 2.21154 16.9787 1.77332 16.2542 1.47215C15.5029 1.15862 14.6971 0.998135 13.8835 1.00002C12.7422 1.00002 11.6286 1.314 10.6609 1.90708C10.4294 2.04895 10.2095 2.20478 10.0011 2.37457C9.79279 2.20478 9.57286 2.04895 9.34135 1.90708C8.37364 1.314 7.26009 1.00002 6.11876 1.00002C5.2969 1.00002 4.50052 1.15817 3.74811 1.47215C3.02118 1.77451 2.36601 2.20943 1.80345 2.76298C1.24319 3.31215 0.795642 3.96643 0.486167 4.68874C0.164371 5.43998 0 6.23773 0 7.05874C0 7.83323 0.157426 8.64028 0.469961 9.46129C0.731565 10.1474 1.10661 10.8591 1.58583 11.5778C2.34518 12.7151 3.38928 13.9013 4.68572 15.1037C6.83412 17.0969 8.96167 18.4738 9.05196 18.5296L9.60064 18.8831C9.84372 19.039 10.1563 19.039 10.3993 18.8831L10.948 18.5296C11.0383 18.4715 13.1635 17.0969 15.3143 15.1037C16.6107 13.9013 17.6548 12.7151 18.4141 11.5778C18.8934 10.8591 19.2707 10.1474 19.53 9.46129C19.8426 8.64028 20 7.83323 20 7.05874C20.0023 6.23773 19.8379 5.43998 19.5161 4.68874ZM10.0011 17.0434C10.0011 17.0434 1.75946 11.7383 1.75946 7.05874C1.75946 4.68874 3.71107 2.76763 6.11876 2.76763C7.81108 2.76763 9.27884 3.71656 10.0011 5.10274C10.7235 3.71656 12.1912 2.76763 13.8835 2.76763C16.2912 2.76763 18.2428 4.68874 18.2428 7.05874C18.2428 11.7383 10.0011 17.0434 10.0011 17.0434Z"
fill="#363636" />
</svg>
</button>
</div> -->
</div>
<div class="player-contaner-center">
<!-- 2 fractions -->
<div class="player-controls-top">
<!-- 5 fractions -->
<div class="control-shuffle button-container">
<button class="button-shuffle icon-button" data-status="on" id="shuffle-btn">
<svg class="shuffle-on" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M3.81293 14.5515C5.44299 14.5515 6.74263 13.9731 7.71186 12.8162C7.71186 12.735 7.65679 12.6639 7.54665 12.603L6.91885 11.4461C6.63249 11.9941 6.20846 12.4356 5.64674 12.7705C5.08503 13.1054 4.47376 13.2728 3.81293 13.2728H2.19388C2.01765 13.2728 1.85795 13.3388 1.71477 13.4707C1.57159 13.6027 1.5 13.7498 1.5 13.9122C1.5 14.0746 1.57159 14.2217 1.71477 14.3536C1.85795 14.4856 2.01765 14.5515 2.19388 14.5515H3.81293ZM16.1045 3.71311C15.752 3.42896 15.4216 3.42896 15.1132 3.71311C14.7828 4.01756 14.7828 4.32201 15.1132 4.62646L16.0053 5.47892H13.2629C11.6548 5.47892 10.3662 6.05738 9.39699 7.21429C9.39699 7.27518 9.44104 7.34621 9.52915 7.4274L10.1569 8.58431C10.4433 8.0363 10.8673 7.59485 11.4291 7.25995C11.9908 6.92506 12.602 6.75761 13.2629 6.75761H16.0053L15.1132 7.61007C14.7828 7.91452 14.7828 8.21897 15.1132 8.52342C15.2454 8.6452 15.4106 8.70609 15.6088 8.70609C15.763 8.70609 15.9282 8.6452 16.1045 8.52342L18.2191 6.57494C18.5055 6.27049 18.5055 5.96604 18.2191 5.66159L16.1045 3.71311ZM16.1045 11.507C15.752 11.2229 15.4216 11.2229 15.1132 11.507C14.7828 11.8115 14.7828 12.1159 15.1132 12.4204L16.0053 13.2728H13.2629C12.602 13.2728 11.9853 13.1054 11.4125 12.7705C10.8398 12.4356 10.3993 11.9941 10.0909 11.4461L9.3309 10.0152L8.5379 8.58431L8.20748 8.00586C7.81098 7.23458 7.21623 6.62061 6.42323 6.16393C5.63022 5.70726 4.76012 5.47892 3.81293 5.47892H2.19388C2.01765 5.47892 1.85795 5.54489 1.71477 5.67682C1.57159 5.80874 1.5 5.95589 1.5 6.11827C1.5 6.28064 1.57159 6.42779 1.71477 6.55972C1.85795 6.69165 2.01765 6.75761 2.19388 6.75761H3.81293C5.22271 6.75761 6.28005 7.36651 6.98494 8.58431L7.77794 10.0152L8.5379 11.4461L8.90136 12.0246C9.34192 12.7959 9.95319 13.4098 10.7352 13.8665C11.5172 14.3232 12.3818 14.5515 13.329 14.5515H16.1045L15.1793 15.404C14.8489 15.7084 14.8489 16.0129 15.1793 16.3173C15.3115 16.4391 15.4767 16.5 15.6749 16.5C15.8512 16.5 16.0164 16.4391 16.1706 16.3173L18.2852 14.3689C18.5716 14.0644 18.5716 13.76 18.2852 13.4555L16.1045 11.507Z"
fill="#363636" />
</svg>
<svg class="shuffle-off hidden" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M3.81293 14.5515C5.44299 14.5515 6.74263 13.9731 7.71186 12.8162C7.71186 12.735 7.65679 12.6639 7.54665 12.603L6.91885 11.4461C6.63249 11.9941 6.20846 12.4356 5.64674 12.7705C5.08503 13.1054 4.47376 13.2728 3.81293 13.2728H2.19388C2.01765 13.2728 1.85795 13.3388 1.71477 13.4707C1.57159 13.6027 1.5 13.7498 1.5 13.9122C1.5 14.0746 1.57159 14.2217 1.71477 14.3536C1.85795 14.4856 2.01765 14.5515 2.19388 14.5515H3.81293ZM16.1045 3.71311C15.752 3.42896 15.4216 3.42896 15.1132 3.71311C14.7828 4.01756 14.7828 4.32201 15.1132 4.62646L16.0053 5.47892H13.2629C11.6548 5.47892 10.3662 6.05738 9.39699 7.21429C9.39699 7.27518 9.44104 7.34621 9.52915 7.4274L10.1569 8.58431C10.4433 8.0363 10.8673 7.59485 11.4291 7.25995C11.9908 6.92506 12.602 6.75761 13.2629 6.75761H16.0053L15.1132 7.61007C14.7828 7.91452 14.7828 8.21897 15.1132 8.52342C15.2454 8.6452 15.4106 8.70609 15.6088 8.70609C15.763 8.70609 15.9282 8.6452 16.1045 8.52342L18.2191 6.57494C18.5055 6.27049 18.5055 5.96604 18.2191 5.66159L16.1045 3.71311ZM16.1045 11.507C15.752 11.2229 15.4216 11.2229 15.1132 11.507C14.7828 11.8115 14.7828 12.1159 15.1132 12.4204L16.0053 13.2728H13.2629C12.602 13.2728 11.9853 13.1054 11.4125 12.7705C10.8398 12.4356 10.3993 11.9941 10.0909 11.4461L9.3309 10.0152L8.5379 8.58431L8.20748 8.00586C7.81098 7.23458 7.21623 6.62061 6.42323 6.16393C5.63022 5.70726 4.76012 5.47892 3.81293 5.47892H2.19388C2.01765 5.47892 1.85795 5.54489 1.71477 5.67682C1.57159 5.80874 1.5 5.95589 1.5 6.11827C1.5 6.28064 1.57159 6.42779 1.71477 6.55972C1.85795 6.69165 2.01765 6.75761 2.19388 6.75761H3.81293C5.22271 6.75761 6.28005 7.36651 6.98494 8.58431L7.77794 10.0152L8.5379 11.4461L8.90136 12.0246C9.34192 12.7959 9.95319 13.4098 10.7352 13.8665C11.5172 14.3232 12.3818 14.5515 13.329 14.5515H16.1045L15.1793 15.404C14.8489 15.7084 14.8489 16.0129 15.1793 16.3173C15.3115 16.4391 15.4767 16.5 15.6749 16.5C15.8512 16.5 16.0164 16.4391 16.1706 16.3173L18.2852 14.3689C18.5716 14.0644 18.5716 13.76 18.2852 13.4555L16.1045 11.507Z"
fill="#363636" />
<path d="M4.19995 1.5L12.8129 18.2785" stroke="var(--clr-icon-buttons)" stroke-width="1.5"
stroke-linecap="round" />
</svg>
</button>
</div>
<div class="control-previous button-container">
<button class="button-previous icon-button" id="songBeginning">
<svg class="previous" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M2.22316 2.75346C2.22316 2.46518 2.10604 2.18871 1.89758 1.98487C1.68912 1.78102 1.40639 1.6665 1.11158 1.6665C0.816769 1.6665 0.534035 1.78102 0.325573 1.98487C0.117112 2.18871 0 2.46518 0 2.75346V17.2462C0 17.5345 0.117112 17.811 0.325573 18.0148C0.534035 18.2187 0.816769 18.3332 1.11158 18.3332C1.40639 18.3332 1.68912 18.2187 1.89758 18.0148C2.10604 17.811 2.22316 17.5345 2.22316 17.2462V2.75346ZM6.82064 10.9564C6.67114 10.8434 6.55009 10.6985 6.46681 10.5327C6.38353 10.3668 6.34023 10.1846 6.34023 9.99984C6.34023 9.8151 6.38353 9.63283 6.46681 9.46701C6.55009 9.30119 6.67114 9.15625 6.82064 9.04331C9.9277 6.69281 13.3971 4.84022 17.099 3.55491L17.7897 3.31578C17.986 3.24981 18.195 3.22739 18.4013 3.25016C18.6076 3.27294 18.8061 3.34033 18.9825 3.44744C19.1589 3.55456 19.3087 3.69872 19.421 3.86946C19.5333 4.04021 19.6054 4.23326 19.6319 4.43462C20.1227 8.12925 20.1227 11.8704 19.6319 15.5651C19.6054 15.7664 19.5333 15.9595 19.421 16.1302C19.3087 16.301 19.1589 16.4451 18.9825 16.5522C18.8061 16.6593 18.6076 16.7267 18.4013 16.7495C18.195 16.7723 17.986 16.7499 17.7897 16.6839L17.099 16.4448C13.397 15.159 9.92761 13.3074 6.82064 10.9564Z"
fill="#363636" />
</svg>
</button>
</div>
<div class="control-play_pause button-container" id="playPause">
<button class="button-play icon-button" aria-pressed="false">
<svg class="play" id="play-controller" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
fill="none">
<g clip-path="url(#clip0_470_17)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.56356 1.51977C1.59419 1.25356 1.68501 0.998372 1.82877 0.774522C1.97254 0.550672 2.16529 0.364348 2.39167 0.23039C2.61804 0.0964323 2.87179 0.0185426 3.13269 0.00292479C3.3936 -0.012693 3.65446 0.0343926 3.89449 0.140431C5.10795 0.672477 7.82737 1.93697 11.2781 3.9796C14.7299 6.0234 17.1579 7.80822 18.2126 8.61801C19.113 9.3106 19.1152 10.6841 18.2137 11.379C17.1694 12.1841 14.771 13.9455 11.2781 16.0151C7.78166 18.0847 5.09423 19.3339 3.8922 19.8589C2.857 20.3125 1.69839 19.6246 1.56356 18.4796C1.40588 17.1413 1.11108 14.1025 1.11108 9.99851C1.11108 5.89684 1.40474 2.85926 1.56356 1.51977Z"
fill="#363636" />
</g>
<defs>
<clipPath id="clip0_470_17">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
<svg class="pause hidden" id="pause-controller" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M5.95 0H3.975C3.4512 0 2.94885 0.210714 2.57846 0.585786C2.20808 0.960859 2 1.46957 2 2V18C2 18.5304 2.20808 19.0391 2.57846 19.4142C2.94885 19.7893 3.4512 20 3.975 20H5.95C6.4738 20 6.97615 19.7893 7.34654 19.4142C7.71692 19.0391 7.925 18.5304 7.925 18V2C7.925 1.46957 7.71692 0.960859 7.34654 0.585786C6.97615 0.210714 6.4738 0 5.95 0ZM15.825 0H13.85C13.3262 0 12.8238 0.210714 12.4535 0.585786C12.0831 0.960859 11.875 1.46957 11.875 2V18C11.875 18.5304 12.0831 19.0391 12.4535 19.4142C12.8238 19.7893 13.3262 20 13.85 20H15.825C16.3488 20 16.8512 19.7893 17.2215 19.4142C17.5919 19.0391 17.8 18.5304 17.8 18V2C17.8 1.46957 17.5919 0.960859 17.2215 0.585786C16.8512 0.210714 16.3488 0 15.825 0Z"
fill="#363636" />
</svg>
</button>
</div>
<div class="control-next button-container" id="nextSong">
<button class="button-next icon-button">
<svg class="next" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
fill="none">
<path
d="M17.7768 2.75346C17.7768 2.46518 17.894 2.18871 18.1024 1.98487C18.3109 1.78102 18.5936 1.6665 18.8884 1.6665C19.1832 1.6665 19.466 1.78102 19.6744 1.98487C19.8829 2.18871 20 2.46518 20 2.75346V17.2462C20 17.5345 19.8829 17.811 19.6744 18.0148C19.466 18.2187 19.1832 18.3332 18.8884 18.3332C18.5936 18.3332 18.3109 18.2187 18.1024 18.0148C17.894 17.811 17.7768 17.5345 17.7768 17.2462V2.75346ZM13.1794 10.9564C13.3289 10.8434 13.4499 10.6985 13.5332 10.5327C13.6165 10.3668 13.6598 10.1846 13.6598 9.99984C13.6598 9.8151 13.6165 9.63283 13.5332 9.46701C13.4499 9.30119 13.3289 9.15625 13.1794 9.04332C10.0723 6.69281 6.60288 4.84022 2.90097 3.55491L2.21031 3.31578C2.01396 3.24981 1.80505 3.22739 1.59873 3.25016C1.39242 3.27294 1.19387 3.34033 1.0175 3.44744C0.841124 3.55456 0.691339 3.69872 0.57901 3.86946C0.466681 4.04021 0.394621 4.23326 0.368059 4.43462C-0.122686 8.12925 -0.122686 11.8704 0.368059 15.5651C0.394621 15.7664 0.466681 15.9595 0.57901 16.1302C0.691339 16.301 0.841124 16.4451 1.0175 16.5522C1.19387 16.6593 1.39242 16.7267 1.59873 16.7495C1.80505 16.7723 2.01396 16.7499 2.21031 16.6839L2.90097 16.4448C6.60296 15.159 10.0724 13.3074 13.1794 10.9564Z"
fill="#363636" />
</svg>
</button>
</div>
<div class="control-playback-mode button-container">
<button class="button-playback-mode icon-button" id="playbackMode">
<svg class="playback-once" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.90556 19.832C5.80292 19.8325 5.70121 19.8125 5.6064 19.7731C5.5116 19.7337 5.42561 19.6759 5.35348 19.6028L2.22848 16.4778C2.08218 16.3313 2 16.1328 2 15.9257C2 15.7187 2.08218 15.5201 2.22848 15.3737L5.35348 12.2487C5.425 12.1719 5.51125 12.1103 5.60709 12.0676C5.70292 12.0249 5.80637 12.002 5.91127 12.0001C6.01617 11.9983 6.12036 12.0176 6.21764 12.0569C6.31492 12.0962 6.40329 12.1546 6.47748 12.2288C6.55166 12.303 6.61015 12.3914 6.64944 12.4887C6.68873 12.5859 6.70803 12.6901 6.70618 12.795C6.70433 12.8999 6.68137 13.0034 6.63867 13.0992C6.59597 13.195 6.5344 13.2813 6.45765 13.3528L3.88473 15.9257L6.45765 18.4987C6.60395 18.6451 6.68612 18.8437 6.68612 19.0507C6.68612 19.2578 6.60395 19.4563 6.45765 19.6028C6.38552 19.6759 6.29953 19.7337 6.20472 19.7731C6.10992 19.8125 6.00821 19.8325 5.90556 19.832Z"
fill="var(--clr-icon-buttons)" />
<path d="M4 16H17" stroke="var(--clr-icon-buttons)" stroke-width="2" stroke-linecap="round" />
<path
d="M7.23113 11L10.2791 2.6H11.4191L14.4731 11H13.2071L12.5051 9.038H9.21113L8.52113 11H7.23113ZM9.58313 7.952H12.1151L11.1131 5.126C11.0851 5.05 11.0551 4.964 11.0231 4.868C10.9911 4.768 10.9591 4.67 10.9271 4.574C10.8951 4.478 10.8711 4.394 10.8551 4.322C10.8351 4.394 10.8091 4.478 10.7771 4.574C10.7491 4.67 10.7191 4.768 10.6871 4.868C10.6551 4.964 10.6251 5.05 10.5971 5.126L9.58313 7.952Z"
fill="var(--clr-icon-buttons)" />
</svg>
<svg class="playback-repeat hidden" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.60002 19.1998C7.69127 19.1972 5.86145 18.4378 4.51176 17.0881C3.16207 15.7384 2.40265 13.9086 2.40002 11.9998C2.40002 11.8023 2.4785 11.6128 2.61818 11.4731C2.75786 11.3334 2.94731 11.255 3.14485 11.255C3.34239 11.255 3.53184 11.3334 3.67152 11.4731C3.81121 11.6128 3.88968 11.8023 3.88968 11.9998C3.88968 13.1292 4.22459 14.2332 4.85205 15.1723C5.47951 16.1114 6.37134 16.8433 7.41477 17.2755C8.4582 17.7077 9.60636 17.8208 10.7141 17.6004C11.8218 17.3801 12.8392 16.8362 13.6378 16.0376C14.4365 15.239 14.9803 14.2215 15.2006 13.1138C15.421 12.0061 15.3079 10.858 14.8757 9.81455C14.4435 8.77112 13.7116 7.87929 12.7725 7.25183C11.8335 6.62437 10.7294 6.28946 9.60002 6.28946H7.11727C6.91973 6.28946 6.73028 6.21099 6.59059 6.0713C6.45091 5.93162 6.37244 5.74217 6.37244 5.54463C6.37244 5.34709 6.45091 5.15764 6.59059 5.01796C6.73028 4.87828 6.91973 4.7998 7.11727 4.7998H9.60002C11.5096 4.7998 13.3409 5.55837 14.6912 6.90864C16.0415 8.2589 16.8 10.0902 16.8 11.9998C16.8 13.9094 16.0415 15.7407 14.6912 17.091C13.3409 18.4412 11.5096 19.1998 9.60002 19.1998Z"
fill="var(--clr-icon-buttons)" />
<path
d="M9.5833 9.60009C9.47861 9.60058 9.37487 9.58013 9.27818 9.53994C9.18149 9.49974 9.09379 9.44061 9.02022 9.36601L5.833 6.17397C5.68379 6.02435 5.59998 5.82152 5.59998 5.61005C5.59998 5.39857 5.68379 5.19575 5.833 5.04612L9.02022 1.85409C9.09317 1.77568 9.18114 1.7128 9.27888 1.66918C9.37662 1.62557 9.48213 1.60211 9.58912 1.60022C9.6961 1.59833 9.80237 1.61804 9.90159 1.65818C10.0008 1.69831 10.0909 1.75805 10.1666 1.83383C10.2423 1.90961 10.3019 1.99987 10.342 2.09924C10.3821 2.1986 10.4017 2.30503 10.3999 2.41218C10.398 2.51933 10.3745 2.625 10.331 2.72289C10.2874 2.82078 10.2247 2.90888 10.1464 2.98194L7.52223 5.61005L10.1464 8.23815C10.2956 8.38778 10.3794 8.59061 10.3794 8.80208C10.3794 9.01355 10.2956 9.21638 10.1464 9.36601C10.0728 9.44061 9.9851 9.49974 9.88841 9.53994C9.79172 9.58013 9.68799 9.60058 9.5833 9.60009Z"
fill="var(--clr-icon-buttons)" />
<path
d="M7.17073 16L9.20273 10.4H9.96273L11.9987 16H11.1547L10.6867 14.692H8.49073L8.03073 16H7.17073ZM8.73873 13.968H10.4267L9.75873 12.084C9.74006 12.0333 9.72006 11.976 9.69873 11.912C9.67739 11.8453 9.65606 11.78 9.63473 11.716C9.61339 11.652 9.59739 11.596 9.58673 11.548C9.57339 11.596 9.55606 11.652 9.53473 11.716C9.51606 11.78 9.49606 11.8453 9.47473 11.912C9.45339 11.976 9.43339 12.0333 9.41473 12.084L8.73873 13.968Z"
fill="var(--clr-icon-buttons)" />
</svg>
<svg class="playback-repeat-one hidden" width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.60002 19.1998C7.69127 19.1972 5.86145 18.4378 4.51176 17.0881C3.16207 15.7384 2.40265 13.9086 2.40002 11.9998C2.40002 11.8023 2.4785 11.6128 2.61818 11.4731C2.75786 11.3334 2.94731 11.255 3.14485 11.255C3.34239 11.255 3.53184 11.3334 3.67152 11.4731C3.81121 11.6128 3.88968 11.8023 3.88968 11.9998C3.88968 13.1292 4.22459 14.2332 4.85205 15.1723C5.47951 16.1114 6.37134 16.8433 7.41477 17.2755C8.4582 17.7077 9.60636 17.8208 10.7141 17.6004C11.8218 17.3801 12.8392 16.8362 13.6378 16.0376C14.4365 15.239 14.9803 14.2215 15.2006 13.1138C15.421 12.0061 15.3079 10.858 14.8757 9.81455C14.4435 8.77112 13.7116 7.87929 12.7725 7.25183C11.8335 6.62437 10.7294 6.28946 9.60002 6.28946H7.11727C6.91973 6.28946 6.73028 6.21099 6.59059 6.0713C6.45091 5.93162 6.37244 5.74217 6.37244 5.54463C6.37244 5.34709 6.45091 5.15764 6.59059 5.01796C6.73028 4.87828 6.91973 4.7998 7.11727 4.7998H9.60002C11.5096 4.7998 13.3409 5.55837 14.6912 6.90864C16.0415 8.2589 16.8 10.0902 16.8 11.9998C16.8 13.9094 16.0415 15.7407 14.6912 17.091C13.3409 18.4412 11.5096 19.1998 9.60002 19.1998Z"
fill="#363636" />
<path
d="M9.5833 9.60009C9.47861 9.60058 9.37487 9.58013 9.27818 9.53994C9.18149 9.49974 9.09379 9.44061 9.02022 9.36601L5.833 6.17397C5.68379 6.02435 5.59998 5.82152 5.59998 5.61005C5.59998 5.39857 5.68379 5.19575 5.833 5.04612L9.02022 1.85409C9.09317 1.77568 9.18114 1.7128 9.27888 1.66918C9.37662 1.62557 9.48213 1.60211 9.58912 1.60022C9.6961 1.59833 9.80237 1.61804 9.90159 1.65818C10.0008 1.69831 10.0909 1.75805 10.1666 1.83383C10.2423 1.90961 10.3019 1.99987 10.342 2.09924C10.3821 2.1986 10.4017 2.30503 10.3999 2.41218C10.398 2.51933 10.3745 2.625 10.331 2.72289C10.2874 2.82078 10.2247 2.90888 10.1464 2.98194L7.52223 5.61005L10.1464 8.23815C10.2956 8.38778 10.3794 8.59061 10.3794 8.80208C10.3794 9.01355 10.2956 9.21638 10.1464 9.36601C10.0728 9.44061 9.9851 9.49974 9.88841 9.53994C9.79172 9.58013 9.68799 9.60058 9.5833 9.60009Z"
fill="#363636" />
<path
d="M9.02251 15.7998V11.7118H8.19051V10.7878C8.36651 10.7878 8.52518 10.7705 8.66651 10.7358C8.80785 10.6985 8.92651 10.6371 9.02251 10.5518C9.12118 10.4665 9.19585 10.3491 9.24651 10.1998H10.1745V15.7998H9.02251Z"
fill="#363636" />
</svg>
</button>
</div>
</div>
<div class="player-controls-bottom playback__container">
<div class="playback__position" id="playback-position">
-:--
</div>
<div class="progressbar__container playback-progressbar__container" >
<input class="progressbar" id="sliderPlayback" type="range" min="0" max="100" value="0" name="" id="">
</div>
<div class="playback__duration" id="playback-duration">
-:--
</div>
</div>
</div>
<div class="player-contaner-right">
<div class="button-container">
<button class="button-download icon-button" id="song-download">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path
d="M10 0C15.52 0 20 4.48 20 10C20 15.52 15.52 20 10 20C4.48 20 0 15.52 0 10C0 4.48 4.48 0 10 0ZM10 18C14.42 18 18 14.42 18 10C18 5.58 14.42 2 10 2C5.58 2 2 5.58 2 10C2 14.42 5.58 18 10 18ZM11 10H14L10 14L6 10H9V6H11V10Z"
fill="#363636" />
</svg>
</button>
</div>
<div class="control-volume">
<div class="button-container">
<button class="volume-status icon-button" id="volume-status">
<svg class="volume-loud" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M12.95 7.05006C13.7311 7.83143 14.17 8.89105 14.17 9.9959C14.17 11.1007 13.7311 12.1604 12.95 12.9417M15.8917 4.1084C17.4539 5.67113 18.3316 7.79036 18.3316 10.0001C18.3316 12.2098 17.4539 14.329 15.8917 15.8917M9.16669 4.16673L5.00002 7.50006H1.66669V12.5001H5.00002L9.16669 15.8334V4.16673Z"
stroke="var(--clr-icon-buttons)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="volume-silent hidden" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M12.95 7.04984C13.7311 7.8312 14.17 8.89082 14.17 9.99567C14.17 11.1005 13.7311 12.1601 12.95 12.9415M9.16669 4.1665L5.00002 7.49984H1.66669V12.4998H5.00002L9.16669 15.8332V4.1665Z"
stroke="var(--clr-icon-buttons)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="volume-none hidden" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M18.3334 7.49984L13.3334 12.4998M13.3334 7.49984L18.3334 12.4998M9.16669 4.1665L5.00002 7.49984H1.66669V12.4998H5.00002L9.16669 15.8332V4.1665Z"
stroke="var(--clr-icon-buttons)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<div class="volume-bar">
<div class="playback-progressbar__container progressbar__container">
<input class="progressbar" id="sliderValume" type="range" min="0" max="100" value="100" name="" id="" style="background: linear-gradient(to right, var(--clr-progressbar-main-completed) 100%, var(--clr-progressbar-main) 100%);">
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- ==================== FULLSCREEN PLAYER =================== -->
<div class="fullscreen-player" id="fullscreen-player">
<div class="fullscreen-player__container">
<div class="fullscreen-player__background">
<div class="background-img">
<img src="images/songs_imgs/who_do_you_want.png" id="fullscreen-player-background-song-image" alt="">
</div>
<div class="background-color-blur"></div>
</div>
<div class="fullscreen-player__content__container">
<div class="fullscreen-player__content">
<div class="fullscreen-player__song-imgs__slider swiper-container">
<div class="swiper-wrapper">
</div>
</div>
<div class="fullscreen-player__content-bottom">
<div class="fullscreen-player__song-data">
<div class="fullscreen-player__song-data__text">
<h3 class="fullscreen-player__song-title" id="fullscreen-player-song-title">Who Do You Want</h3>
<h4 class="fullscreen-player__song-autor" id="fullscreen-player-song-author">Ex Habit</h4>
</div>
<span class="fullscreen-player__song-download fullscreen-player__icon-button" id="fullscreen-player-song-download">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
<path
d="M12 0.5C18.624 0.5 24 5.876 24 12.5C24 19.124 18.624 24.5 12 24.5C5.376 24.5 0 19.124 0 12.5C0 5.876 5.376 0.5 12 0.5ZM12 22.1C17.304 22.1 21.6 17.804 21.6 12.5C21.6 7.196 17.304 2.9 12 2.9C6.696 2.9 2.4 7.196 2.4 12.5C2.4 17.804 6.696 22.1 12 22.1ZM13.2 12.5H16.8L12 17.3L7.2 12.5H10.8V7.7H13.2V12.5Z"
fill="black" />
</svg>
</span>
</div>
<div class="fullscreen-player__playback__container">
<div class="fullscreen-player__playback-progressbar__container">
<input class="progressbar fullscreen-player__playback__progressbar playback__progressbar"
id="fullscreen-player-sliderPlayback" type="range" min="0" max="100" value="0" name="" id="">
</div>
<div class="fullscreen-player__playback__time">
<div class="fullscreen-player__playback__position" id="fullscreen-player-playback-position">
0:00
</div>
<div class="fullscreen-player__playback__duration" id="fullscreen-player-playback-duration">
2:21
</div>
</div>
</div>
<div class="fullscreen-player__controls__container">
<div class="fullscreen-player__controls">
<div class="fullscreen-player__icon-button">
<button class="button-shuffle" data-status="on" id="fullscreen-player-shuffle-btn">
<svg class="shuffle-on hidden" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none">
<path
d="M4.57531 17.462C6.53139 17.462 8.09096 16.7679 9.25403 15.3796C9.25403 15.2822 9.18795 15.1969 9.05578 15.1238L8.30243 13.7356C7.95879 14.3932 7.44995 14.9229 6.7759 15.3248C6.10185 15.7267 5.36832 15.9276 4.57531 15.9276H2.63246C2.42099 15.9276 2.22935 16.0068 2.05753 16.1651C1.88571 16.3234 1.7998 16.5 1.7998 16.6948C1.7998 16.8897 1.88571 17.0662 2.05753 17.2246C2.22935 17.3829 2.42099 17.462 2.63246 17.462H4.57531ZM19.3252 4.45593C18.9022 4.11495 18.5057 4.11495 18.1357 4.45593C17.7392 4.82127 17.7392 5.18661 18.1357 5.55195L19.2062 6.5749H15.9153C13.9856 6.5749 12.4393 7.26905 11.2762 8.65734C11.2762 8.73041 11.3291 8.81565 11.4348 8.91308L12.1881 10.3014C12.5318 9.64376 13.0406 9.11401 13.7147 8.71214C14.3887 8.31027 15.1223 8.10933 15.9153 8.10933H19.2062L18.1357 9.13228C17.7392 9.49762 17.7392 9.86296 18.1357 10.2283C18.2943 10.3744 18.4925 10.4475 18.7304 10.4475C18.9155 10.4475 19.1137 10.3744 19.3252 10.2283L21.8628 7.89013C22.2064 7.52479 22.2064 7.15945 21.8628 6.79411L19.3252 4.45593ZM19.3252 13.8086C18.9022 13.4676 18.5057 13.4676 18.1357 13.8086C17.7392 14.174 17.7392 14.5393 18.1357 14.9046L19.2062 15.9276H15.9153C15.1223 15.9276 14.3821 15.7267 13.6948 15.3248C13.0076 14.9229 12.4789 14.3932 12.1088 13.7356L11.1969 12.0185L10.2453 10.3014L9.84878 9.60722C9.37298 8.68169 8.65928 7.94493 7.70768 7.39692C6.75607 6.84891 5.71195 6.5749 4.57531 6.5749H2.63246C2.42099 6.5749 2.22935 6.65406 2.05753 6.81237C1.88571 6.97069 1.7998 7.14727 1.7998 7.34212C1.7998 7.53696 1.88571 7.71354 2.05753 7.87186C2.22935 8.03017 2.42099 8.10933 2.63246 8.10933H4.57531C6.26705 8.10933 7.53586 8.84001 8.38173 10.3014L9.33333 12.0185L10.2453 13.7356L10.6814 14.4297C11.2101 15.3552 11.9436 16.092 12.882 16.64C13.8204 17.188 14.8579 17.462 15.9946 17.462H19.3252L18.215 18.485C17.8185 18.8503 17.8185 19.2157 18.215 19.581C18.3736 19.7271 18.5718 19.8002 18.8097 19.8002C19.0212 19.8002 19.2194 19.7271 19.4045 19.581L21.9421 17.2428C22.2857 16.8775 22.2857 16.5121 21.9421 16.1468L19.3252 13.8086Z"
fill="black" />
</svg>
<svg class="shuffle-off" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none">
<path
d="M4.57531 17.462C6.53139 17.462 8.09096 16.7679 9.25403 15.3796C9.25403 15.2822 9.18795 15.1969 9.05578 15.1239L8.30243 13.7356C7.95879 14.3932 7.44995 14.9229 6.7759 15.3248C6.10185 15.7267 5.36832 15.9276 4.57531 15.9276H2.63246C2.42099 15.9276 2.22935 16.0068 2.05753 16.1651C1.88571 16.3234 1.7998 16.5 1.7998 16.6948C1.7998 16.8897 1.88571 17.0662 2.05753 17.2246C2.22935 17.3829 2.42099 17.462 2.63246 17.462H4.57531ZM19.3252 4.45593C18.9022 4.11495 18.5057 4.11495 18.1357 4.45593C17.7392 4.82127 17.7392 5.18661 18.1357 5.55195L19.2062 6.5749H15.9153C13.9856 6.5749 12.4393 7.26905 11.2762 8.65734C11.2762 8.73041 11.3291 8.81565 11.4348 8.91308L12.1881 10.3014C12.5318 9.64376 13.0406 9.11401 13.7147 8.71214C14.3887 8.31027 15.1223 8.10933 15.9153 8.10933H19.2062L18.1357 9.13228C17.7392 9.49762 17.7392 9.86296 18.1357 10.2283C18.2943 10.3744 18.4925 10.4475 18.7304 10.4475C18.9155 10.4475 19.1137 10.3744 19.3252 10.2283L21.8628 7.89013C22.2064 7.52479 22.2064 7.15945 21.8628 6.79411L19.3252 4.45593ZM19.3252 13.8086C18.9022 13.4676 18.5057 13.4676 18.1357 13.8086C17.7392 14.174 17.7392 14.5393 18.1357 14.9046L19.2062 15.9276H15.9153C15.1223 15.9276 14.3821 15.7267 13.6948 15.3248C13.0076 14.9229 12.4789 14.3932 12.1088 13.7356L11.1969 12.0185L10.2453 10.3014L9.84878 9.60722C9.37298 8.68169 8.65928 7.94493 7.70768 7.39692C6.75607 6.84891 5.71195 6.5749 4.57531 6.5749H2.63246C2.42099 6.5749 2.22935 6.65406 2.05753 6.81237C1.88571 6.97069 1.7998 7.14727 1.7998 7.34212C1.7998 7.53696 1.88571 7.71354 2.05753 7.87186C2.22935 8.03017 2.42099 8.10933 2.63246 8.10933H4.57531C6.26705 8.10933 7.53586 8.84001 8.38173 10.3014L9.33333 12.0185L10.2453 13.7356L10.6814 14.4297C11.2101 15.3552 11.9436 16.092 12.882 16.64C13.8204 17.188 14.8579 17.462 15.9946 17.462H19.3252L18.215 18.485C17.8185 18.8503 17.8185 19.2157 18.215 19.581C18.3736 19.7271 18.5718 19.8002 18.8097 19.8002C19.0212 19.8002 19.2194 19.7271 19.4045 19.581L21.9421 17.2428C22.2857 16.8775 22.2857 16.5121 21.9421 16.1468L19.3252 13.8086Z"
fill="black" />
<path d="M5.04004 1.7998L15.3755 21.934" stroke="var(--clr-text)" stroke-width="1.5"
stroke-linecap="round" />
</svg>
</button>
</div>
<div class="fullscreen-player__icon-button">
<button class="button-previous" id="fullscreen-player-songBeginning">
<svg class="previous" xmlns="http://www.w3.org/2000/svg" width="29" height="29"
viewBox="0 0 29 29" fill="none">
<g clip-path="url(#clip0_1051_676)">
<path
d="M3.61242 4.62086C3.61242 4.21727 3.44846 3.83021 3.15661 3.54483C2.86477 3.25945 2.46894 3.09912 2.05621 3.09912C1.64348 3.09912 1.24765 3.25945 0.955803 3.54483C0.663957 3.83021 0.5 4.21727 0.5 4.62086V24.9107C0.5 25.3143 0.663957 25.7014 0.955803 25.9867C1.24765 26.2721 1.64348 26.4325 2.05621 26.4325C2.46894 26.4325 2.86477 26.2721 3.15661 25.9867C3.44846 25.7014 3.61242 25.3143 3.61242 24.9107V4.62086ZM10.0489 16.1049C9.83959 15.9468 9.67013 15.7439 9.55354 15.5117C9.43694 15.2796 9.37632 15.0244 9.37632 14.7658C9.37632 14.5072 9.43694 14.252 9.55354 14.0198C9.67013 13.7877 9.83959 13.5848 10.0489 13.4267C14.3988 10.1359 19.256 7.54232 24.4386 5.74289L25.4056 5.40811C25.6805 5.31574 25.9729 5.28436 26.2618 5.31625C26.5506 5.34813 26.8286 5.44247 27.0755 5.59244C27.3224 5.7424 27.5321 5.94422 27.6894 6.18327C27.8466 6.42231 27.9475 6.69258 27.9847 6.97448C28.6718 12.147 28.6718 17.3846 27.9847 22.5571C27.9475 22.839 27.8466 23.1093 27.6894 23.3483C27.5321 23.5874 27.3224 23.7892 27.0755 23.9391C26.8286 24.0891 26.5506 24.1834 26.2618 24.2153C25.9729 24.2472 25.6805 24.2158 25.4056 24.1235L24.4386 23.7887C19.2558 21.9886 14.3987 19.3963 10.0489 16.1049Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_1051_676">
<rect width="28" height="28" fill="white" transform="translate(0.5 0.765625)" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="fullscreen-player__icon-button" id="fullscreen-player-playPause">
<button class="button-play " aria-pressed="false">
<svg class="play" id="fullscreen-player-play-controller" xmlns="http://www.w3.org/2000/svg" width="32"
height="33" viewBox="0 0 32 33" fill="none">
<g clip-path="url(#clip0_1051_678)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.50179 3.19725C2.5508 2.77132 2.69611 2.36302 2.92614 2.00486C3.15617 1.6467 3.46456 1.34858 3.82676 1.13425C4.18896 0.919917 4.59496 0.795293 5.01241 0.770305C5.42986 0.745316 5.84723 0.820653 6.23128 0.990315C8.17281 1.84159 12.5239 3.86477 18.045 7.13298C23.5679 10.4031 27.4528 13.2588 29.1402 14.5544C30.5808 15.6626 30.5845 17.8602 29.142 18.9721C27.4711 20.2602 23.6337 23.0784 18.045 26.3898C12.4508 29.7011 8.15087 31.6999 6.22763 32.5399C4.57129 33.2656 2.71752 32.1649 2.50179 30.333C2.2495 28.1917 1.77783 23.3297 1.77783 16.7632C1.77783 10.2006 2.24768 5.34043 2.50179 3.19725Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_1051_678">
<rect width="32" height="32" fill="white" transform="translate(0 0.765625)" />
</clipPath>
</defs>
</svg>
<svg class="pause hidden" id="fullscreen-player-pause-controller" xmlns="http://www.w3.org/2000/svg" width="32"
height="32" viewBox="0 0 32 32" fill="none">
<path
d="M9.5202 0H6.3602C5.52211 0 4.71835 0.337142 4.12574 0.937258C3.53312 1.53737 3.2002 2.35131 3.2002 3.2V28.8C3.2002 29.6487 3.53312 30.4626 4.12574 31.0627C4.71835 31.6629 5.52211 32 6.3602 32H9.5202C10.3583 32 11.162 31.6629 11.7547 31.0627C12.3473 30.4626 12.6802 29.6487 12.6802 28.8V3.2C12.6802 2.35131 12.3473 1.53737 11.7547 0.937258C11.162 0.337142 10.3583 0 9.5202 0ZM25.3202 0H22.1602C21.3221 0 20.5184 0.337142 19.9257 0.937258C19.3331 1.53737 19.0002 2.35131 19.0002 3.2V28.8C19.0002 29.6487 19.3331 30.4626 19.9257 31.0627C20.5184 31.6629 21.3221 32 22.1602 32H25.3202C26.1583 32 26.962 31.6629 27.5547 31.0627C28.1473 30.4626 28.4802 29.6487 28.4802 28.8V3.2C28.4802 2.35131 28.1473 1.53737 27.5547 0.937258C26.962 0.337142 26.1583 0 25.3202 0Z"
fill="black" />
</svg>
</button>
</div>
<div class="fullscreen-player__icon-button" id="fullscreen-player-nextSong">
<button class="button-next ">
<svg class="next" xmlns="http://www.w3.org/2000/svg" width="29" height="28"
viewBox="0 0 29 28" fill="none">
<g clip-path="url(#clip0_1070_16)">
<path
d="M25.3876 3.85524C25.3876 3.45164 25.5515 3.06458 25.8434 2.7792C26.1352 2.49382 26.5311 2.3335 26.9438 2.3335C27.3565 2.3335 27.7524 2.49382 28.0442 2.7792C28.336 3.06458 28.5 3.45164 28.5 3.85524V24.1451C28.5 24.5487 28.336 24.9357 28.0442 25.2211C27.7524 25.5065 27.3565 25.6668 26.9438 25.6668C26.5311 25.6668 26.1352 25.5065 25.8434 25.2211C25.5515 24.9357 25.3876 24.5487 25.3876 24.1451V3.85524ZM18.9511 15.3393C19.1604 15.1812 19.3299 14.9783 19.4465 14.7461C19.5631 14.514 19.6237 14.2588 19.6237 14.0002C19.6237 13.7415 19.5631 13.4863 19.4465 13.2542C19.3299 13.0221 19.1604 12.8191 18.9511 12.661C14.6012 9.37032 9.74403 6.7767 4.56136 4.97726L3.59444 4.64248C3.31954 4.55012 3.02707 4.51874 2.73823 4.55062C2.44939 4.5825 2.17143 4.67685 1.9245 4.82681C1.67758 4.97677 1.46788 5.1786 1.31062 5.41764C1.15335 5.65669 1.05247 5.92696 1.01529 6.20886C0.328241 11.3813 0.328241 16.619 1.01529 21.7915C1.05247 22.0734 1.15335 22.3436 1.31062 22.5827C1.46788 22.8217 1.67758 23.0236 1.9245 23.1735C2.17143 23.3235 2.44939 23.4178 2.73823 23.4497C3.02707 23.4816 3.31954 23.4502 3.59444 23.3578L4.56136 23.0231C9.74415 21.223 14.6013 18.6307 18.9511 15.3393Z"
fill="black" />
</g>
<defs>
<clipPath id="clip0_1070_16">
<rect width="28" height="28" fill="white" transform="matrix(-1 0 0 1 28.5 0)" />
</clipPath>
</defs>
</svg>
</button>
</div>
<div class="fullscreen-player__icon-button">
<button class="button-playback-mode " id="fullscreen-player-playbackMode">
<svg class="playback-once" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7.08658 23.7983C6.9634 23.7989 6.84135 23.7748 6.72759 23.7276C6.61382 23.6804 6.51063 23.6109 6.42408 23.5233L2.67408 19.7733C2.49851 19.5975 2.3999 19.3592 2.3999 19.1108C2.3999 18.8623 2.49851 18.6241 2.67408 18.4483L6.42408 14.6983C6.50991 14.6062 6.61341 14.5323 6.7284 14.4811C6.8434 14.4298 6.96755 14.4023 7.09342 14.4C7.2193 14.3978 7.34434 14.421 7.46107 14.4681C7.57781 14.5153 7.68385 14.5855 7.77287 14.6745C7.8619 14.7635 7.93208 14.8696 7.97923 14.9863C8.02638 15.103 8.04954 15.2281 8.04732 15.3539C8.0451 15.4798 8.01754 15.604 7.9663 15.719C7.91506 15.834 7.84119 15.9375 7.74908 16.0233L4.66158 19.1108L7.74908 22.1983C7.92464 22.3741 8.02325 22.6123 8.02325 22.8608C8.02325 23.1092 7.92464 23.3475 7.74908 23.5233C7.66252 23.6109 7.55933 23.6804 7.44557 23.7276C7.3318 23.7748 7.20975 23.7989 7.08658 23.7983Z"
fill="var(--clr-text)" />
<path d="M4.7998 19.2002H20.3998" stroke="var(--clr-text)" stroke-width="2"
stroke-linecap="round" />
<path
d="M9.58391 13L12.8859 3.9H14.1209L17.4294 13H16.0579L15.2974 10.8745H11.7289L10.9814 13H9.58391ZM12.1319 9.698H14.8749L13.7894 6.6365C13.7591 6.55417 13.7266 6.461 13.6919 6.357C13.6572 6.24867 13.6226 6.1425 13.5879 6.0385C13.5532 5.9345 13.5272 5.8435 13.5099 5.7655C13.4882 5.8435 13.4601 5.9345 13.4254 6.0385C13.3951 6.1425 13.3626 6.24867 13.3279 6.357C13.2932 6.461 13.2607 6.55417 13.2304 6.6365L12.1319 9.698Z"
fill="var(--clr-text)" />
</svg>
<svg class="playback-repeat-one hidden" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.5199 23.0398C9.22938 23.0366 7.03359 22.1253 5.41396 20.5057C3.79433 18.8861 2.88304 16.6903 2.87988 14.3998C2.87988 14.1627 2.97405 13.9354 3.14167 13.7678C3.30929 13.6001 3.53663 13.506 3.77368 13.506C4.01072 13.506 4.23806 13.6001 4.40568 13.7678C4.5733 13.9354 4.66747 14.1627 4.66747 14.3998C4.66747 15.755 5.06936 17.0799 5.82231 18.2068C6.57526 19.3336 7.64546 20.2119 8.89758 20.7306C10.1497 21.2492 11.5275 21.3849 12.8567 21.1205C14.186 20.8561 15.4069 20.2035 16.3653 19.2452C17.3236 18.2868 17.9762 17.0658 18.2406 15.7366C18.505 14.4074 18.3693 13.0296 17.8507 11.7775C17.332 10.5253 16.4538 9.45514 15.3269 8.70219C14.2 7.94924 12.8752 7.54735 11.5199 7.54735H8.54057C8.30352 7.54735 8.07618 7.45318 7.90857 7.28557C7.74095 7.11795 7.64678 6.89061 7.64678 6.65356C7.64678 6.41651 7.74095 6.18917 7.90857 6.02155C8.07618 5.85393 8.30352 5.75977 8.54057 5.75977H11.5199C13.8114 5.75977 16.009 6.67005 17.6293 8.29036C19.2496 9.91068 20.1599 12.1083 20.1599 14.3998C20.1599 16.6912 19.2496 18.8889 17.6293 20.5092C16.009 22.1295 13.8114 23.0398 11.5199 23.0398Z"
fill="black" />
<path
d="M11.5002 11.5199C11.3746 11.5205 11.2501 11.496 11.1341 11.4477C11.018 11.3995 10.9128 11.3285 10.8245 11.239L6.99985 7.40857C6.82079 7.22902 6.72021 6.98563 6.72021 6.73186C6.72021 6.47809 6.82079 6.2347 6.99985 6.05515L10.8245 2.22471C10.912 2.13062 11.0176 2.05516 11.1349 2.00282C11.2522 1.95048 11.3788 1.92234 11.5072 1.92007C11.6356 1.9178 11.7631 1.94145 11.8822 1.98962C12.0012 2.03778 12.1094 2.10947 12.2002 2.2004C12.291 2.29133 12.3625 2.39965 12.4106 2.51889C12.4587 2.63813 12.4823 2.76585 12.4801 2.89443C12.4778 3.023 12.4497 3.14981 12.3974 3.26727C12.3452 3.38474 12.2698 3.49046 12.1759 3.57813L9.02692 6.73186L12.1759 9.88559C12.3549 10.0651 12.4555 10.3085 12.4555 10.5623C12.4555 10.8161 12.3549 11.0595 12.1759 11.239C12.0876 11.3285 11.9824 11.3995 11.8663 11.4477C11.7503 11.496 11.6258 11.5205 11.5002 11.5199Z"
fill="black" />
<path
d="M10.7183 19.5601V14.4501H9.67834V13.2951C9.89834 13.2951 10.0967 13.2734 10.2733 13.2301C10.45 13.1834 10.5983 13.1067 10.7183 13.0001C10.8417 12.8934 10.935 12.7467 10.9983 12.5601H12.1583V19.5601H10.7183Z"
fill="black" />
</svg>
<svg class="playback-repeat hidden" width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.5199 23.0398C9.22938 23.0366 7.03359 22.1253 5.41396 20.5057C3.79433 18.8861 2.88304 16.6903 2.87988 14.3998C2.87988 14.1627 2.97405 13.9354 3.14167 13.7678C3.30929 13.6001 3.53663 13.506 3.77368 13.506C4.01072 13.506 4.23806 13.6001 4.40568 13.7678C4.5733 13.9354 4.66747 14.1627 4.66747 14.3998C4.66747 15.755 5.06936 17.0799 5.82231 18.2068C6.57526 19.3336 7.64546 20.2119 8.89758 20.7306C10.1497 21.2492 11.5275 21.3849 12.8567 21.1205C14.186 20.8561 15.4069 20.2035 16.3653 19.2452C17.3236 18.2868 17.9762 17.0658 18.2406 15.7366C18.505 14.4074 18.3693 13.0296 17.8507 11.7775C17.332 10.5253 16.4538 9.45514 15.3269 8.70219C14.2 7.94924 12.8752 7.54735 11.5199 7.54735H8.54057C8.30352 7.54735 8.07618 7.45318 7.90857 7.28557C7.74095 7.11795 7.64678 6.89061 7.64678 6.65356C7.64678 6.41651 7.74095 6.18917 7.90857 6.02155C8.07618 5.85393 8.30352 5.75977 8.54057 5.75977H11.5199C13.8114 5.75977 16.009 6.67005 17.6293 8.29036C19.2496 9.91068 20.1599 12.1083 20.1599 14.3998C20.1599 16.6912 19.2496 18.8889 17.6293 20.5092C16.009 22.1295 13.8114 23.0398 11.5199 23.0398Z"
fill="black" />
<path
d="M11.5002 11.5199C11.3746 11.5205 11.2501 11.496 11.1341 11.4477C11.018 11.3995 10.9128 11.3285 10.8245 11.239L6.99985 7.40857C6.82079 7.22902 6.72021 6.98563 6.72021 6.73186C6.72021 6.47809 6.82079 6.2347 6.99985 6.05515L10.8245 2.22471C10.912 2.13062 11.0176 2.05516 11.1349 2.00282C11.2522 1.95048 11.3788 1.92234 11.5072 1.92007C11.6356 1.9178 11.7631 1.94145 11.8822 1.98962C12.0012 2.03778 12.1094 2.10947 12.2002 2.2004C12.291 2.29133 12.3625 2.39965 12.4106 2.51889C12.4587 2.63813 12.4823 2.76585 12.4801 2.89443C12.4778 3.023 12.4497 3.14981 12.3974 3.26727C12.3452 3.38474 12.2698 3.49046 12.1759 3.57813L9.02692 6.73186L12.1759 9.88559C12.3549 10.0651 12.4555 10.3085 12.4555 10.5623C12.4555 10.8161 12.3549 11.0595 12.1759 11.239C12.0876 11.3285 11.9824 11.3995 11.8663 11.4477C11.7503 11.496 11.6258 11.5205 11.5002 11.5199Z"
fill="black" />
<path
d="M8.72594 20L11.2659 13H12.2159L14.7609 20H13.7059L13.1209 18.365H10.3759L9.80094 20H8.72594ZM10.6859 17.46H12.7959L11.9609 15.105C11.9376 15.0417 11.9126 14.97 11.8859 14.89C11.8593 14.8067 11.8326 14.725 11.8059 14.645C11.7793 14.565 11.7593 14.495 11.7459 14.435C11.7293 14.495 11.7076 14.565 11.6809 14.645C11.6576 14.725 11.6326 14.8067 11.6059 14.89C11.5793 14.97 11.5543 15.0417 11.5309 15.105L10.6859 17.46Z"
fill="black" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://apis.google.com/js/api.js"></script> <!-- ! must be first -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="js/player.js"></script>
<script src="js/preloder.js"></script>
<script src="js/import.js"></script>
<script src="js/main.js"></script>
<script src="js/progressbar.js"></script>
<script src="js/playlist.js"></script>
</body>
</html>