-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathresult.html
418 lines (378 loc) · 27.8 KB
/
result.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name="author" content="Muses team">
<!-- Viewport Config -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Title -->
<title>Muses</title>
<meta property='og:title' content='🎵 Muses | Lyrics website'>
<meta name='twitter:title' content='🎵 Muses | Lyrics website'>
<!-- Description -->
<meta name='description' content='Lyrics of the songs that you love to hear in one place.'>
<meta property='og:description' content='Lyrics of the songs that you love to hear in one place.'>
<meta name='twitter:description' content='Lyrics of the songs that you love to hear in one place.'>
<!-- Locale Config -->
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="fa_IR">
<!-- Iconset Config -->
<link rel="shortcut icon" href="assets/logo/icon.png" type="image/x-icon">
<link rel='icon' type='image/png' href='assets/logo/icon@32.png'>
<link rel='icon' sizes='192x192' href='assets/logo/icon@192.png'>
<link rel='apple-touch-icon' href='assets/logo/icon@152.png'>
<meta name='msapplication-square310x310logo' content='assets/logo/icon@310.png'>
<!-- Assets -->
<link rel="stylesheet" href="assets/styles/main.css">
<!-- PWA -->
<meta name='mobile-web-app-capable' content='yes'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name='theme-color' content='#F1F4FF'>
</head>
<body id="body" onload="showToast('Lyrics successfuly received!','success')">
<header>
<div class="container-full flexbox">
<!-- Muses Logo -->
<div class="flex flex-center-x flex-center-y width-100 logo my-2">
<a href="index.html">
<svg width="218" height="105" viewBox="0 0 237 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M46.5109 79.445C45.6442 79.445 45.2109 79.0333 45.2109 78.21C45.2109 77.9933 45.2976 77.6683 45.4709 77.235C45.6876 76.845 45.9909 76.2817 46.3809 75.545L50.0859 68.655C52.0792 65.0583 53.8126 61.765 55.2859 58.775C56.8026 55.7417 58.1026 53.0333 59.1859 50.65C62.4359 43.24 64.0609 37.6283 64.0609 33.815C64.0609 33.555 64.2342 33.2517 64.5809 32.905C64.9709 32.5583 65.3392 32.385 65.6859 32.385C66.2059 32.385 66.4659 32.8833 66.4659 33.88C66.4659 36.6967 65.4476 40.965 63.4109 46.685C62.5876 48.8517 61.7426 50.9533 60.8759 52.99C60.0092 55.0267 59.0992 56.9983 58.1459 58.905C60.0092 56.6517 61.9376 54.4633 63.9309 52.34C65.9242 50.2167 68.0042 48.1583 70.1709 46.165C76.5842 40.1417 81.2642 37.13 84.2109 37.13C86.0742 37.13 87.0059 38.3433 87.0059 40.77C87.0059 43.37 85.7276 48.05 83.1709 54.81C79.8776 63.3033 78.0576 68.1783 77.7109 69.435C87.5476 57.5183 97.5576 48.83 107.741 43.37C109.128 42.6333 110.579 41.9183 112.096 41.225C113.656 40.4883 114.848 40.12 115.671 40.12C116.884 40.12 117.491 40.8567 117.491 42.33C117.491 43.0667 117.361 43.955 117.101 44.995C116.841 46.035 116.408 47.1833 115.801 48.44L109.821 61.115C109.258 62.3283 108.629 63.6717 107.936 65.145C107.286 66.6183 106.658 68.0917 106.051 69.565C105.488 70.995 105.011 72.295 104.621 73.465C104.231 74.5917 104.036 75.4583 104.036 76.065C104.036 76.7583 104.318 77.105 104.881 77.105C105.748 77.105 106.831 76.585 108.131 75.545C109.474 74.505 110.904 73.1833 112.421 71.58C112.638 71.32 112.919 71.0167 113.266 70.67C113.656 70.3233 114.003 70.15 114.306 70.15C114.999 70.15 115.346 70.54 115.346 71.32C115.346 71.45 115.303 71.6017 115.216 71.775C115.129 71.905 114.934 72.1217 114.631 72.425C114.068 72.9883 113.504 73.5517 112.941 74.115C112.378 74.6783 111.858 75.1767 111.381 75.61C110.254 76.5633 109.063 77.4083 107.806 78.145C106.593 78.925 105.423 79.315 104.296 79.315C102.519 79.315 101.631 78.3183 101.631 76.325C101.631 75.1117 102.064 73.2267 102.931 70.67C103.798 68.1133 105.119 64.885 106.896 60.985L113.721 46.165C114.198 45.1683 114.501 44.475 114.631 44.085C114.761 43.6517 114.826 43.3483 114.826 43.175C114.826 42.915 114.718 42.785 114.501 42.785C114.414 42.785 114.176 42.85 113.786 42.98C113.439 43.0667 112.811 43.3267 111.901 43.76C109.258 44.9733 106.354 46.5983 103.191 48.635C100.028 50.6717 97.0809 52.8817 94.3509 55.265C92.1409 57.1717 90.1692 58.9917 88.4359 60.725C86.7026 62.4583 85.0126 64.2567 83.3659 66.12C81.7192 67.9833 79.8992 70.1067 77.9059 72.49C77.3426 73.14 76.9526 73.595 76.7359 73.855C76.5192 74.0717 76.1726 74.18 75.6959 74.18C74.9592 74.18 74.5909 73.79 74.5909 73.01C74.5909 72.1867 74.7642 71.1033 75.1109 69.76C75.4576 68.4167 75.8909 67.0517 76.4109 65.665L81.2209 52.795C82.3909 49.6317 83.2576 47.01 83.8209 44.93C84.3842 42.85 84.6659 41.29 84.6659 40.25C84.6659 39.3833 84.2976 38.95 83.5609 38.95C82.1309 38.95 78.9026 41.2467 73.8759 45.84C72.1426 47.4433 70.5176 48.9817 69.0009 50.455C67.4842 51.9283 66.0976 53.3583 64.8409 54.745C63.1509 56.565 61.6126 58.2983 60.2259 59.945C58.8392 61.5917 57.4959 63.3033 56.1959 65.08C54.9392 66.8133 53.6392 68.7417 52.2959 70.865C50.9526 72.9883 49.5009 75.4583 47.9409 78.275C47.5076 79.055 47.0309 79.445 46.5109 79.445ZM140.099 78.21C137.975 78.21 136.914 76.6717 136.914 73.595C136.914 71.9483 137.304 69.955 138.084 67.615C132.84 73.725 128.724 76.78 125.734 76.78C123.264 76.78 122.029 75.285 122.029 72.295C122.029 71.1683 122.202 69.825 122.549 68.265C122.939 66.6617 123.437 65.015 124.044 63.325C124.694 61.635 125.387 60.0533 126.124 58.58C126.86 57.1067 127.597 55.915 128.334 55.005C128.594 54.7017 128.919 54.55 129.309 54.55C129.525 54.55 129.742 54.6367 129.959 54.81C130.175 54.94 130.284 55.1567 130.284 55.46C130.284 55.72 130.132 56.0883 129.829 56.565C127.879 59.7717 126.492 62.5667 125.669 64.95C124.629 67.68 124.109 70.0417 124.109 72.035C124.109 73.8983 124.585 74.83 125.539 74.83C126.145 74.83 126.947 74.5267 127.944 73.92C128.94 73.3133 129.959 72.5767 130.999 71.71C132.082 70.8 133.014 69.955 133.794 69.175C135.96 66.8783 137.91 64.43 139.644 61.83C140.424 60.6167 141.117 59.4467 141.724 58.32C142.374 57.15 142.959 55.9367 143.479 54.68C143.695 54.2033 143.869 53.8567 143.999 53.64C144.172 53.38 144.41 53.25 144.714 53.25C145.624 53.25 146.079 53.5967 146.079 54.29C146.079 54.7233 145.927 55.0267 145.624 55.2C141.204 64.17 138.994 70.345 138.994 73.725C138.994 74.635 139.08 75.285 139.254 75.675C139.427 76.0217 139.73 76.195 140.164 76.195C140.77 76.195 141.702 75.805 142.959 75.025C144.259 74.245 145.775 73.0533 147.509 71.45L154.334 65.21C154.68 64.8633 155.005 64.69 155.309 64.69C156.002 64.69 156.349 65.015 156.349 65.665C156.349 66.2283 154.984 67.745 152.254 70.215C151.084 71.2983 150.044 72.2083 149.134 72.945C148.224 73.6817 147.379 74.3317 146.599 74.895C145.125 75.935 143.825 76.7367 142.699 77.3C141.572 77.9067 140.705 78.21 140.099 78.21ZM153.732 78.145C151.306 78.145 150.092 77.3433 150.092 75.74C150.092 74.7433 150.439 73.7467 151.132 72.75C151.869 71.7533 152.736 70.8433 153.732 70.02C154.729 69.1967 155.661 68.5683 156.527 68.135C156.787 68.005 157.134 67.875 157.567 67.745C158.044 67.615 158.434 67.55 158.737 67.55C159.084 67.55 159.257 67.68 159.257 67.94C159.257 68.1567 159.019 68.395 158.542 68.655C156.549 69.6083 154.989 70.7567 153.862 72.1C152.779 73.4 152.237 74.4617 152.237 75.285C152.237 76.065 152.909 76.455 154.252 76.455C155.379 76.455 156.592 76.1733 157.892 75.61C159.236 75.0467 160.492 74.31 161.662 73.4C162.876 72.49 163.872 71.515 164.652 70.475C165.432 69.435 165.822 68.4383 165.822 67.485C165.822 66.835 165.606 66.25 165.172 65.73C164.782 65.21 164.132 64.82 163.222 64.56L158.932 63.26C157.849 62.9133 157.069 62.4583 156.592 61.895C156.116 61.3317 155.877 60.7033 155.877 60.01C155.877 58.71 156.354 57.54 157.307 56.5C158.304 55.46 159.539 54.6367 161.012 54.03C162.486 53.4233 163.916 53.12 165.302 53.12C166.689 53.12 167.902 53.4667 168.942 54.16C169.982 54.81 170.502 55.6983 170.502 56.825C170.502 57.475 170.307 58.0817 169.917 58.645C169.571 59.2083 169.159 59.49 168.682 59.49C167.946 59.49 167.577 59.1867 167.577 58.58C167.577 58.3633 167.686 58.1033 167.902 57.8C168.162 57.4533 168.292 57.1283 168.292 56.825C168.292 55.525 167.296 54.875 165.302 54.875C164.219 54.875 163.136 55.1133 162.052 55.59C161.012 56.0233 160.146 56.6083 159.452 57.345C158.759 58.0817 158.412 58.8833 158.412 59.75C158.412 60.6167 159.279 61.31 161.012 61.83L165.172 63.13C166.429 63.52 167.296 64.0617 167.772 64.755C168.249 65.405 168.487 66.1417 168.487 66.965C168.487 68.915 167.296 70.93 164.912 73.01C161.056 76.4333 157.329 78.145 153.732 78.145ZM179.055 77.17C177.235 77.17 175.805 76.5417 174.765 75.285C173.725 74.0283 173.205 72.49 173.205 70.67C173.205 67.55 174.245 64.3433 176.325 61.05C176.888 60.14 177.538 59.2517 178.275 58.385C179.011 57.475 179.813 56.6083 180.68 55.785C181.98 54.5283 183.345 53.4883 184.775 52.665C186.205 51.8417 187.591 51.43 188.935 51.43C191.145 51.43 192.25 52.47 192.25 54.55C192.25 57.15 190.733 59.5117 187.7 61.635C184.883 63.5417 182.11 64.495 179.38 64.495C178.903 64.495 178.47 64.4733 178.08 64.43C177.733 64.3433 177.408 64.2567 177.105 64.17C176.671 64.9933 176.281 66.055 175.935 67.355C175.588 68.655 175.415 69.7817 175.415 70.735C175.415 73.595 176.671 75.025 179.185 75.025C181.221 75.025 183.15 74.6783 184.97 73.985C186.79 73.2483 188.956 71.8833 191.47 69.89C193.03 68.6767 194.2 67.7017 194.98 66.965C195.76 66.2283 196.605 65.4483 197.515 64.625C197.775 64.4517 198.013 64.365 198.23 64.365C198.446 64.365 198.663 64.43 198.88 64.56C199.096 64.69 199.205 64.885 199.205 65.145C199.205 65.6217 198.771 66.2933 197.905 67.16C197.168 67.8533 196.388 68.59 195.565 69.37C194.741 70.1067 193.441 71.1467 191.665 72.49C189.758 73.9633 187.678 75.1117 185.425 75.935C183.171 76.7583 181.048 77.17 179.055 77.17ZM178.99 62.415C180.376 62.415 181.698 62.1983 182.955 61.765C184.211 61.3317 185.403 60.7033 186.53 59.88C189.043 58.0167 190.3 56.2617 190.3 54.615C190.3 53.8783 189.845 53.51 188.935 53.51C187.201 53.51 185.186 54.5717 182.89 56.695C181.763 57.735 180.831 58.6883 180.095 59.555C179.401 60.3783 178.751 61.2883 178.145 62.285C178.405 62.3717 178.686 62.415 178.99 62.415ZM196.706 78.145C194.279 78.145 193.066 77.3433 193.066 75.74C193.066 74.7433 193.413 73.7467 194.106 72.75C194.843 71.7533 195.709 70.8433 196.706 70.02C197.703 69.1967 198.634 68.5683 199.501 68.135C199.761 68.005 200.108 67.875 200.541 67.745C201.018 67.615 201.408 67.55 201.711 67.55C202.058 67.55 202.231 67.68 202.231 67.94C202.231 68.1567 201.993 68.395 201.516 68.655C199.523 69.6083 197.963 70.7567 196.836 72.1C195.753 73.4 195.211 74.4617 195.211 75.285C195.211 76.065 195.883 76.455 197.226 76.455C198.353 76.455 199.566 76.1733 200.866 75.61C202.209 75.0467 203.466 74.31 204.636 73.4C205.849 72.49 206.846 71.515 207.626 70.475C208.406 69.435 208.796 68.4383 208.796 67.485C208.796 66.835 208.579 66.25 208.146 65.73C207.756 65.21 207.106 64.82 206.196 64.56L201.906 63.26C200.823 62.9133 200.043 62.4583 199.566 61.895C199.089 61.3317 198.851 60.7033 198.851 60.01C198.851 58.71 199.328 57.54 200.281 56.5C201.278 55.46 202.513 54.6367 203.986 54.03C205.459 53.4233 206.889 53.12 208.276 53.12C209.663 53.12 210.876 53.4667 211.916 54.16C212.956 54.81 213.476 55.6983 213.476 56.825C213.476 57.475 213.281 58.0817 212.891 58.645C212.544 59.2083 212.133 59.49 211.656 59.49C210.919 59.49 210.551 59.1867 210.551 58.58C210.551 58.3633 210.659 58.1033 210.876 57.8C211.136 57.4533 211.266 57.1283 211.266 56.825C211.266 55.525 210.269 54.875 208.276 54.875C207.193 54.875 206.109 55.1133 205.026 55.59C203.986 56.0233 203.119 56.6083 202.426 57.345C201.733 58.0817 201.386 58.8833 201.386 59.75C201.386 60.6167 202.253 61.31 203.986 61.83L208.146 63.13C209.403 63.52 210.269 64.0617 210.746 64.755C211.223 65.405 211.461 66.1417 211.461 66.965C211.461 68.915 210.269 70.93 207.886 73.01C204.029 76.4333 200.303 78.145 196.706 78.145Z" id="muses-logo-text"/>
<path d="M218.931 84C222.931 76 244.79 44.935 218.931 41C172.931 34 171.598 14.6667 168.431 4.5M49.3619 55C35.0286 64.5 11.2619 87.1 30.8619 101.5C55.3619 119.5 79.3618 68.5 126.362 101.5" id="muses-logo-stroke" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</a>
</div>
<!-- Query Info Section -->
<div class="flexbox width-100 flex-center-y">
<!-- Song Section -->
<div class="flexbox">
<h2 class="title-3 title-padding">Hate The Way</h2>
</div>
<!-- Artist Section -->
<div class="flexbox">
<h2 class="title-4 title-padding">G-Eazy</h2>
</div>
</div>
<!-- Music Controls Section: Desktop -->
<div class="flexbox width-100 flex-center-x flex-center-y" id="desktop-controls">
<!-- Like Button Section -->
<div class="flex flex-center-x flex-center-y m-1">
<button class="btn btn-circle btn-small" title="Link song">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
</button>
<!-- Play/Pause Button Section -->
<button class="btn btn-circle btn-primary" title="Play/Pause song">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button>
<!-- Link Button Section -->
<button class="btn btn-circle btn-small" title="Copy link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
</button>
</div>
<!-- Music Progress Bar Section -->
<div class="flex flex-center-x flex-center-y w-100">
<span class="text p-1">00:45</span>
<progress id="song-seek" max="139" value="50"></progress> <!-- Max: song max seconds -->
<span class="text p-1">3:16</span>
</div>
</div>
</div>
</header>
<main>
<!-- Lyrics Box Section -->
<div class="flexbox width-100 flex-center-y">
<div class="container-sm lyric-container m-1" id="lyric-container">
<pre class="lyric-text-container">
<pre class="text-lyric">Yeah
I hate the way, the way I always miss you
Yeah, I know I'm crazy but you're sick too
Even after everything we been through
Thought I was the one with all the issues
And every time I leave, it's too long
And every time I leave, it's all wrong (you know)
I hate the way, the way I always miss you (ayy)
(I hate the way, the way I always miss you) yeah
Made a promise to myself, a promise I should stick to
Talkin' to myself, I said I promised I would quit you
I've been tryna let go but it's powerful, it grips you
First you think you got control until I see you, can't resist you
Know I got my issues, some I won't admit to
No-one's got the answers, everybody wants to fix you
Got this Magic 8-Ball, but I ain't got no crystal
Just don't fall in Courtney Love
And don't go Cobain with no pistol (no pistol)
It don't take a psychic or a scientist to know that
Then why the f- the minute I see you, I always go back?
The definition of insanity is... yeah, I know that
I had a hundred chances to move on, I always...
I always blow that, yeah
I can't seem to find out what's the issue
See your face on my Explore and then I miss you
Yeah, I said I was finished f- ing wit' you
I said I hate the fucking way I always...
I hate the way, the way I always miss you (miss you)
Yeah, I know I'm crazy but you're sick too
Even after everything we been through
Thought I was the one with all the issues
And every time I leave, it's too long
And every time I leave, it's all wrong
I hate the way, the way I always miss you (yeah)
(I hate the way, the way I always miss you) ayy, yeah (yeah-yeah)
Lie to myself every time I say that I'm done with you
Every day without you passes slower than one wit' you
Two days pass, it's feelin' like a week, this shit is stressful
I swear, all these helpin' hands ain't even helpful
Wishing I was closer to you, wish you wasn't distant
Wishing I was wit' you, still wish this shit was different
Wishing we could travel back in time and we could switch it
All this pain, wishin' it was something that could fix it
Medicate myself, different substances, I mix it
Set my limits, try to draw the line and then she sniffs it
Never lied, I give you my word and then you twist it
Fights outside the club, I think the paparazzi...
Think the paparazzi flicked it, yeah
Still can't seem to find out what's the issue
Hate the way you talkin' when you with your friends too, yeah
They don't know about the shit we've been through
I said I hate the fucking way I always...
I hate the way, the way I always miss you (miss you)
Yeah, I know I'm crazy but you're sick too
Even after everything we been through
Thought I was the one with all the issues
And every time I leave, it's too long
And every time I leave, it's all wrong
I hate the way, the way I always miss you
(I hate the way, the way I always miss you)
I hate the way, the way I always miss you
I hate the way, the way I always miss you
I hate the way, the way I always miss you
I hate the way, the way I always miss you</pre>
</pre>
<!-- Lyrics Box Links Section -->
<div class="lyric-links">
<div class="flexbox flex-center-x flex-center-y h-100">
<div class="flex flex-center-x flex-center-y">
<!-- Lyrics Box Links: Copy to Clipboard -->
<button class="btn btn-circle btn-primary btn-small" title="Copy to Clipboard">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
</svg>
</button>
<!-- Lyrics Box Links: Copy link -->
<button class="btn btn-circle btn-primary btn-small" title="Copy link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Music Controls Section: Mobile -->
<div class="flexbox width-100 flex-center-x flex-center-y" id="mobile-controls">
<!-- Like Button Section -->
<div class="flex flex-center-x flex-center-y m-1">
<button class="btn btn-circle btn-small" title="Link song">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>
</button>
<!-- Play/Pause Button Section -->
<button class="btn btn-circle btn-primary" title="Play/Pause song">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polygon points="5 3 19 12 5 21 5 3" />
</svg>
</button>
<!-- Link Button Section -->
<button class="btn btn-circle btn-small" title="Copy link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
</svg>
</button>
</div>
<!-- Music Progress Bar Section -->
<div class="flex flex-center-x flex-center-y w-100">
<span class="text p-1">00:45</span>
<progress id="song-seek" max="139" value="50"></progress> <!-- Max: song max seconds -->
<span class="text p-1">3:16</span>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="home-static-footer container-full flex flex-center-y flex-space-between-x">
<!-- Theme Button -->
<button class="btn btn-circle btn-link btn-small btn-theme" id="btn-theme-change">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
</button>
<!-- Nav Link Buttons -->
<nav class="flexbox">
<ul class="flex">
<li><a href="#"><button class="btn btn-link btn-small">About</button></a></li>
<li><a href="#"><button class="btn btn-link btn-small">Contact</button></a></li>
<li><a href="#"><button class="btn btn-link btn-small">Privacy</button></a></li>
</ul>
</nav>
<!-- Github Button -->
<a href="https://github.com/mohammadjr7/Muses-FrontEnd" >
<button class="btn btn-circle btn-link btn-small">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</svg>
</button>
</a>
</div>
</footer>
<!-- Spare Space -->
<div class="empty m-5"></div>
<!-- Toast -->
<div class="toast-container container-full w-100 p-1 flex flex-center-x flex-center-y toast-container-hide" id="toast-shadow-container">
<div class="container-sm" id="toast-container">
<div class="flex flex-center-x flex-space-between-x toast" id="toast">
<span class="text" id="toast-message">Placeholder...</span>
<span class="btn btn-circle btn-small" id="btn-close-toast" onclick="closeToast()">
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/scripts/theme.js"></script>
<script src="assets/scripts/input.js"></script>
<script src="assets/scripts/toast.js"></script>
</body>
</html>