-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
435 lines (422 loc) · 37.7 KB
/
index.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
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>lrc maker</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="icon" type="image/x-icon" href="/asset-image/favicon.ico" />
<!-- note chage the description latter. yes, i use chatgpt 🗿 -->
<meta name="description" content="LRC File Maker adalah alat sederhana yang dirancang untuk membuat file lirik ter-sinkronisasi (LRC) dasar untuk lagu favorit mereka, sempurna untuk sesi karaoke. Dengan antarmuka yang intuitif, LRC File Maker memungkinkan pengguna menambahkan stempel waktu ke lirik dengan mudah, memastikan sinkronisasi sederhana dengan pemutaran musik. Baik Anda seorang penyanyi, DJ, atau seseorang yang menyukai karaoke, LRC File Maker adalah solusi ideal untuk meningkatkan pengalaman musik Anda. Buat file lirik khusus dengan mudah dan nikmati bernyanyi bersama dengan timing yang tepat. LRC File Maker - membuat malam karaoke Anda lebih menyenangkan dan menarik.LRC" />
<meta name="keywords" content="LRC, LRC File Maker, lyrics, music, tool, ReazonGD, synchronized lyrics, music enthusiasts, DJ, singer, song lyrics, lirik, musik, alat, karaoke" />
<meta name="author" content="ReazonGD" />
<meta name="robots" content="index, follow" />
<meta property="og:title" content="LRC File Maker" />
<meta property="og:description" content="LRC File Maker adalah alat sederhana yang dirancang untuk membuat file lirik ter-sinkronisasi (LRC) dasar untuk lagu favorit mereka, sempurna untuk sesi karaoke. Dengan antarmuka yang intuitif, LRC File Maker memungkinkan pengguna menambahkan stempel waktu ke lirik dengan mudah, memastikan sinkronisasi sederhana dengan pemutaran musik. Baik Anda seorang penyanyi, DJ, atau seseorang yang menyukai karaoke, LRC File Maker adalah solusi ideal untuk meningkatkan pengalaman musik Anda. Buat file lirik khusus dengan mudah dan nikmati bernyanyi bersama dengan timing yang tepat. LRC File Maker - membuat malam karaoke Anda lebih menyenangkan dan menarik.LRC" />
<meta property="og:image" content="/asset-images/og-lrc_maker.jpg" />
<meta property="og:url" content="/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="LRC File Maker" />
<meta name="twitter:description" content="LRC File Maker adalah alat sederhana yang dirancang untuk membuat file lirik ter-sinkronisasi (LRC) dasar untuk lagu favorit mereka, sempurna untuk sesi karaoke. Dengan antarmuka yang intuitif, LRC File Maker memungkinkan pengguna menambahkan stempel waktu ke lirik dengan mudah, memastikan sinkronisasi sederhana dengan pemutaran musik. Baik Anda seorang penyanyi, DJ, atau seseorang yang menyukai karaoke, LRC File Maker adalah solusi ideal untuk meningkatkan pengalaman musik Anda. Buat file lirik khusus dengan mudah dan nikmati bernyanyi bersama dengan timing yang tepat. LRC File Maker - membuat malam karaoke Anda lebih menyenangkan dan menarik.LRC" />
<meta name="twitter:image" content="/asset-images/og-lrc_maker.jpg" />
<link href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap" rel="stylesheet" />
<style>
* {
user-select: none;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: ["selector", '[data-mode="dark"]'],
theme: {
extend: {
colors: {
1: "#5A7D7C", // dark
2: "#d8f3dc", // light
3: "#232C33", // dark
4: "#588157", // light
5: "#101316", // dark
6: "#31572c", // light
},
},
fontFamily: {
body: ["Lexend", "sans-serif"],
},
},
};
</script>
</head>
<body class="dark:bg-5 font-body text-gray-700 dark:text-white" data-mode="dark">
<!-- Header -->
<nav class="shadow-sm bg-white dark:bg-5 py-2 top-0 left-0 w-full sticky flex items-center justify-between px-4">
<div id="lang-btn" class="relative">
<button class="gap-[4px] bg-2/50 p-2 rounded-md flex items-center" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="lang-listbox">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-translate" viewBox="0 0 16 16">
<path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z" />
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31" />
</svg>
<span class="hidden md:inline text-sm lrc-lang-display">ID</span>
</button>
<!-- lang selector -->
<ul class="bg-2/50 dark:bg-3 py-2 rounded-lg absolute top-full left-0 hidden backdrop-blur-md" data-value="id" id="lang-list" tabindex="-1" role="listbox" aria-labelledby="lang-listbox" aria-activedescendant="lang-listbox-option-1">
<li class="bg-4 dark:bg-1 px-2" id="lang-listbox-option-0" role="option" tabindex="1" data-name="id">Indonesia</li>
<li class="px-2" id="lang-listbox-option-1" role="option" tabindex="2" data-name="en">English</li>
</ul>
<!-- .lang selector -->
</div>
<h1 class="text-3xl text-center dark:text-white">.LRC MAKER</h1>
<div class="lrc-theme display flex items-center" tabindex="0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-moon-stars-fill dark:block hidden" viewBox="0 0 16 16">
<path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278" />
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-brightness-low-fill dark:hidden" viewBox="0 0 16 16">
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707M3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707" />
</svg>
</div>
</nav>
<!-- .Header -->
<!-- content -->
<div id="main" class="w-full min-h-[85vh] flex" data-id="-1">
<!-- first page & dnd-->
<section style="display: flex" id="greeting" class="flex min-h-[85vh] flex-col w-full h-full items-center justify-center space-y-2 ease-out">
<div class="text-center">
<h1 class="text-2xl">.LRC FILE MAKER</h1>
<!-- <p class="text-xm">by Reazon</p> -->
</div>
<p class="lrc_text">greeting.start</p>
<button class="dark:bg-1 bg-4 py-1 px-2 rounded-md lrc-select-file cursor-pointer text-white lrc_text">select.audio</button>
<p class="lrc_text">greeting.dnd</p>
</section>
<!-- .first page & dnd -->
<!-- property form -->
<section style="display: none" id="property" class="flex flex-col w-full h-full justify-center p-5 gap-5 max-w-[60rem] mx-auto">
<p class="lrc_text">property.form.des</p>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 w-full">
<p class="text-lg lrc_text">form.title</p>
<input placeholder="" id="title" class="bg-2 dark:bg-3 py-2 px-3 rounded-md" type="text" />
</div>
<div class="flex items-center gap-2 flex-col md:flex-row">
<div class="flex flex-col gap-2 w-full">
<p class="text-lg lrc_text">form.artist</p>
<input placeholder="" id="artist" class="bg-2 dark:bg-3 py-2 px-3 rounded-md" type="text" />
</div>
<div class="flex flex-col gap-2 w-full">
<p class="text-lg lrc_text">form.album</p>
<input placeholder="" id="album" class="bg-2 dark:bg-3 py-2 px-3 rounded-md" type="text" />
</div>
</div>
<div class="flex items-center gap-2 flex-col md:flex-row">
<div class="flex flex-col gap-2 w-full">
<p class="text-lg lrc_text">form.author</p>
<input placeholder="" id="author" class="bg-2 dark:bg-3 py-2 px-3 rounded-md" type="text" />
</div>
<div class="flex flex-col gap-2 w-full">
<p class="text-lg lrc_text">form.userName</p>
<input placeholder="" id="username" class="bg-2 dark:bg-3 py-2 px-3 rounded-md" type="text" />
</div>
</div>
<p class="text-lg lrc_text">form.seletcted.audio</p>
<div class="dark:bg-1 bg-4 flex items-center justify-center gap-2 p-2 rounded-lg lrc-select-file cursor-pointer text-white">
<svg class="fill-black dark:fill-white" width="18" height="18" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.46975 0.248169H1.5C1.10218 0.248169 0.720644 0.406204 0.43934 0.687509C0.158035 0.968813 0 1.35034 0 1.74817V10.7482C0 11.146 0.158035 11.5275 0.43934 11.8088C0.720644 12.0901 1.10218 12.2482 1.5 12.2482H7.5C7.89782 12.2482 8.27936 12.0901 8.56066 11.8088C8.84196 11.5275 9 11.146 9 10.7482V3.77842C8.99996 3.57952 8.92091 3.38879 8.78025 3.24817L6 0.467919C5.85938 0.327257 5.66865 0.248211 5.46975 0.248169ZM5.625 2.87317V1.37317L7.875 3.62317H6.375C6.17609 3.62317 5.98532 3.54415 5.84467 3.4035C5.70402 3.26285 5.625 3.07208 5.625 2.87317ZM6.75 5.22817V6.54067L5.25 6.91567V9.62317C5.25 9.99442 5.02425 10.2854 4.7535 10.4654C4.4805 10.6477 4.12425 10.7482 3.75 10.7482C3.37575 10.7482 3.0195 10.6477 2.7465 10.4654C2.4765 10.2854 2.25 9.99442 2.25 9.62317C2.25 9.25192 2.47575 8.96092 2.7465 8.78092C3.0195 8.59867 3.37575 8.49817 3.75 8.49817C4.017 8.49817 4.275 8.54917 4.5 8.64517V5.41567C4.5 5.24847 4.55588 5.08607 4.65874 4.95426C4.76161 4.82245 4.90557 4.7288 5.06775 4.68817L5.81775 4.50067C5.92834 4.47297 6.04379 4.47084 6.15532 4.49445C6.26685 4.51806 6.37153 4.56678 6.46141 4.63692C6.55129 4.70706 6.62399 4.79676 6.674 4.89921C6.724 5.00166 6.75 5.11416 6.75 5.22817Z"
fill="currentColor" />
</svg>
<p class="dark:text-white lrc-name truncate">The Title of That Songs.mp3</p>
</div>
<p class="text-lg lrc_text">form.export.text</p>
<div class="dark:bg-3 bg-2 rounded-lg cursor-pointer p-5 lrc_export_button text-4 dark:text-white">
<div class="flex items-center justify-center gap-2 rounded-lg h-28 border-dashed border-2 border-4 dark:border-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-upload" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
<path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z" />
</svg>
<p class="dark:text-white lrc_text truncate">form.export</p>
</div>
</div>
<p class="text-lg lrc_text">form.lyrics</p>
<textarea id="lyrics" placeholder="" class="p-2 rounded-md bg-2 dark:bg-3 h-[90vh]" style="resize: none"></textarea>
<br />
<!-- <button class="dark:bg-1 bg-4 py-1 px-2 rounded-md lrc_text text-white" data-gotopage="2">form.next</button> -->
</div>
<!-- <span class="block h-24"></span> -->
</section>
<!-- .property form -->
<!-- Lyrics editor -->
<section style="display: none" id="lyrics-editor" class="w-full flex-col">
<div class="dark:bg-1 bg-4 px-3 py-2 w-full flex items-center gap-2">
<p class="text-white">
<span class="lrc_text">editor.intruction_1</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="hidden bi bi-box-arrow-up-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stopwatch-fill inline" viewBox="0 0 16 16">
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584l.013-.012.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354-.012.012A6.97 6.97 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0" />
</svg>
<span class="lrc_text">editor.intruction_2</span>
</p>
</div>
<table class="w-full border-collapse border border-slate-500">
<thead>
<tr>
<th class="border border-slate-600 p-2 lrc_text" style="width: 120px">editor.time</th>
<th class="border border-slate-600 p-2 lrc_text">editor.lyrics</th>
</tr>
</thead>
<tbody class="lrc_table_body"></tbody>
</table>
</section>
<!-- .Lyrics editor -->
<!-- save selection -->
<section style="display: none" id="save-page" class="flex min-h-[85vh] flex-col w-full h-full space-y-2 ease-out p-5 gap-2 max-w-[60rem] mx-auto">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" height="24" width="24" fill="currentColor" class="cursor-pointer" data-gotopage="2">
<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
</svg>
<h1 class="text-2xl lrc_text">save.header</h1>
</div>
<!-- file name option -->
<div class="flex flex-col gap justify-center">
<p class="lrc_text">save.option</p>
<div class="flex gap-2">
<div class="flex gap-2 items-center w-full h-full">
<input class="peer" hidden checked type="radio" name="FileNameMode" id="filenamemode-audioname" />
<label class="peer-checked:bg-4 dark:peer-checked:bg-1 dark:bg-3 bg-2 p-2 rounded-lg w-full h-full text-center lrc_text peer-checked:text-white" for="filenamemode-audioname"> save.option.audio</label>
</div>
<div class="flex gap-2 items-center w-full h-full">
<input class="peer" hidden type="radio" name="FileNameMode" id="filenamemode-title" />
<label class="peer-checked:bg-4 dark:peer-checked:bg-1 dark:bg-3 bg-2 p-2 rounded-lg w-full h-full text-center lrc_text peer-checked:text-white" for="filenamemode-title"> save.option.property </label>
</div>
<div class="flex gap-2 items-center w-full h-full">
<input class="peer" hidden type="radio" name="FileNameMode" id="filenamemode-custom" />
<label class="peer-checked:bg-4 dark:peer-checked:bg-1 dark:bg-3 bg-2 p-2 rounded-lg w-full h-full text-center lrc_text peer-checked:text-white" for="filenamemode-custom">save.option.custom</label>
</div>
</div>
<div class="flex rounded-md overflow-hidden items-center bg-4 dark:bg-1 my-2">
<input placeholder="file" id="fileName" data-temp="" class="bg-2 dark:bg-3 py-2 px-3 w-full disabled:bg-gray-200 dark:disabled:bg-gray-800 disabled:cursor-not-allowed" value="The Title of That Songs" type="text" disabled />
<span class="h-full px-6 text-white">.lrc</span>
</div>
</div>
<!-- .file name option -->
<br />
<div class="flex gap-2">
<button class="bg-2 dark:bg-3 py-1 px-2 rounded-md cursor-pointer w-full lrc_text" id="copy-file">save.copy</button>
<button class="bg-4 dark:bg-1 py-1 px-2 rounded-md cursor-pointer w-full text-white" id="save">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save-fill inline" viewBox="0 0 16 16">
<path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6c-.314.418-.5.937-.5 1.5v7.793L4.854 6.646a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0-.708-.708L8.5 9.293z" />
</svg>
<span class="lrc_text"> save.download </span>
</button>
</div>
<br />
<h1 class="text-2xl lrc_text">feedback.header</h1>
<p class="lrc_text">feedback.desc</p>
<a href="https://github.com/ReazonGd/LRC-MAKER/issues" class="bg-4 dark:bg-1 py-1 px-2 rounded-md cursor-pointer w-full text-white" id="save">
<span class="lrc_text"> feedback.btn </span>
</a>
<!-- <p>tech stack</p> -->
</section>
<!-- .save selection -->
<!-- view-page -->
<section style="display: none" id="view-page" class="flex min-h-[85vh] flex-col w-full h-full items-center justify-center space-y-2 ease-out">
<!-- before:block before:z-[3] arter:block arter:z-[3] overflow-hidden before:content-[''] before:h-30% before:top-0 before:left-0 before:bg-gradient-to-b before:from-white before:dark:from-5 before:to-transparent after:content-[''] after:h-30% after:bottom-0 after:left-0 after:bg-gradient-to-t after:from-white after:dark:from-5 after:to-transparent -->
<div data-id="0" class="text-center h-[50vh] overflow-hidden px-5 duration-3000 flex flex-col gap-5" id="view-conteiner">
<h1 class="text-2xl text-5 dark:text-white" id="view-lyrics-display" data-id="0">hello world</h1>
<!-- <p class="text-xm dark:text-gray-600" id="view-lyrics-time">00:00:00</p> -->
</div>
</section>
<!-- .view-page -->
</div>
<!-- .content -->
<!-- footer & media player -->
<div class="bottom-0 left-0 w-full sticky">
<div class="hidden items-end justify-end p-2 lrc-form-quick-action bg-gradient-to-t from-white dark:from-5 to-transparent">
<div data-gotopage="2" class="p-2 bg-4 flex items-center gap-2 rounded-lg text-white dark:bg-1">
<p class="lrc_text">form.next</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" height="16" width="16" fill="currentColor" class="cursor-pointer">
<path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</div>
<div class="hidden items-end justify-end p-2 lrc-view-quick-action bg-gradient-to-t from-white dark:from-5 to-transparent">
<div data-gotopage="2" class="p-2 bg-4 flex items-center gap-2 rounded-lg text-white dark:bg-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" height="16" width="16" fill="currentColor" class="cursor-pointer">
<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
</svg>
<p class="lrc_text">viewer.back</p>
</div>
</div>
<div class="hidden items-end justify-between p-2 lrc-controler-mode bg-gradient-to-t from-white dark:from-5 to-transparent">
<!-- Offset -->
<div class="flex flex-col items-center">
<p class="text-xs">Offset (s)</p>
<div class="flex rounded-sm overflow-hidden">
<button class="bg-4 dark:bg-1 p-2 text-white" onclick="document.getElementById('offset').value =+(Number(document.getElementById('offset').value) - 0.1).toFixed(1)">-</button>
<input class="bg-2 dark:bg-3 p-2 w-16" type="number" id="offset" value="0" step="0.1" required />
<button class="bg-4 dark:bg-1 p-2 text-white" onclick="document.getElementById('offset').value =+(Number(document.getElementById('offset').value) + 0.1).toFixed(1)">+</button>
</div>
<div class="flex items-center gap-2 mt-2 rounded-sm bg-2 dark:bg-3 p-1">
<label for="audio-playback">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.6728 12.6057L19.9876 13.8229C19.9869 13.057 19.9856 12.1461 19.984 11.0604C19.9808 8.79605 19.9764 5.77156 19.9741 1.71758C19.9741 1.15118 19.6518 0.819144 19.0903 0.858207C18.9634 0.858207 18.2604 0.990125 13.8287 1.8217C12.2921 2.11003 10.3072 2.48248 7.74264 2.9627C7.66451 2.9627 7.29342 3.06036 7.08834 3.23125C6.88815 3.39239 6.78073 3.60723 6.74166 3.86114C6.6802 4.10698 6.69704 5.90213 6.7176 8.09421V8.09426C6.75259 11.8232 6.79834 16.7009 6.48776 17.0545C6.27291 17.2938 6.01901 17.3621 5.72604 17.4158C5.61989 17.4345 5.51589 17.4525 5.41399 17.4703L5.41278 17.4705C3.83246 17.7454 2.75565 17.9327 1.97604 18.6756C0.545374 20.0721 1.28756 22.5086 3.39694 22.9041C4.18795 23.0506 5.67233 22.8504 6.49264 22.3963C7.2153 22.0252 7.76217 21.3563 7.96725 20.4676C7.97169 20.4483 7.97599 20.4299 7.98014 20.4121C7.99246 20.3592 8.00354 20.3117 8.01348 20.264C8.10157 19.841 8.10093 19.3996 8.09456 15.0481C8.0923 13.5056 8.08932 11.4717 8.08932 8.77325C8.08932 8.21172 8.24557 8.06524 8.74362 7.95782C8.74362 7.95782 17.4106 6.33672 17.811 6.26836C18.3725 6.17071 18.6411 6.32207 18.6411 6.86895C18.6411 8.72097 18.6466 10.1229 18.6508 11.1888C18.653 11.7405 18.6549 12.2022 18.6554 12.5897L18.6728 12.6057ZM17.9929 22.9521L22.4932 18.7861C22.8518 18.4528 22.8518 17.8383 22.4932 17.505L17.9929 13.339C17.5101 12.8911 16.7624 13.2661 16.7624 13.9795V22.3116C16.7624 23.025 17.5101 23.3974 17.9929 22.9521ZM11.9927 22.9521L16.4929 18.7861C16.8515 18.4528 16.8515 17.8383 16.4929 17.505L11.9927 13.339C11.5098 12.8911 10.7621 13.2661 10.7621 13.9795V22.3116C10.7621 23.025 11.5098 23.3974 11.9927 22.9521Z" />
</svg>
</label>
<select name="audio-playback" id="audio-playback" class="px-1 bg-2 dark:bg-3">
<option value="0.5">x 0.5</option>
<option value="0.75">x 0.75</option>
<option value="1" selected>x 1</option>
<option value="1.5">x 1.5</option>
<option value="2">x 2</option>
</select>
</div>
</div>
<!-- .Offset -->
<!-- <div class="flex fle-col"></div> -->
<div class="flex gap-2 text-white">
<div class="flex flex-col justify-end space-y-2">
<div data-gotopage="4" class="p-3 flex justify-center bg-4 dark:bg-1 rounded-lg cursor-pointer">
<svg title="play view" class="play-view" width="16" height="16" viewBox="0 0 28 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M22.0906 17.4416L7.7746 25.7482C6.55966 26.4524 5.00049 25.5997 5.00049 24.18V7.56686C5.00049 6.14943 6.55741 5.29447 7.7746 6.00094L22.0906 14.3075C22.367 14.4653 22.5968 14.6934 22.7565 14.9686C22.9163 15.2438 23.0005 15.5563 23.0005 15.8746C23.0005 16.1928 22.9163 16.5054 22.7565 16.7806C22.5968 17.0558 22.367 17.2839 22.0906 17.4416Z" fill="currentColor" />
</svg>
</div>
<!-- <div class="p-3 flex justify-center bg-4 dark:bg-1 rounded-lg cursor-pointer" data-gotopage="1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path
d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"
/>
</svg>
</div> -->
</div>
<div class="flex flex-col space-y-2">
<div data-gotopage="3" class="p-3 flex justify-center bg-4 dark:bg-1 rounded-lg cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save-fill" viewBox="0 0 16 16">
<path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6c-.314.418-.5.937-.5 1.5v7.793L4.854 6.646a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0-.708-.708L8.5 9.293z" />
</svg>
</div>
<div class="p-3 flex justify-center bg-4 dark:bg-1 rounded-lg cursor-pointer" data-gotopage="1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
</svg>
</div>
</div>
<div id="stopwatch" class="p-5 bg-4 dark:bg-1 rounded-lg flex items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-stopwatch-fill" viewBox="0 0 16 16">
<path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584l.013-.012.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354-.012.012A6.97 6.97 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0" />
</svg>
</div>
</div>
</div>
<div class="flex flex-col p-5 bg-4 dark:bg-3">
<!-- filename Display -->
<div id="controler-filename" class="hidden text-white lrc-controler-mode bg-6 dark:bg-1 flex items-center justify-center gap-2 p-2 lrc-select-file cursor-pointer">
<svg width="13" height="13" viewBox="0 0 9 13" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.46975 0.248169H1.5C1.10218 0.248169 0.720644 0.406204 0.43934 0.687509C0.158035 0.968813 0 1.35034 0 1.74817V10.7482C0 11.146 0.158035 11.5275 0.43934 11.8088C0.720644 12.0901 1.10218 12.2482 1.5 12.2482H7.5C7.89782 12.2482 8.27936 12.0901 8.56066 11.8088C8.84196 11.5275 9 11.146 9 10.7482V3.77842C8.99996 3.57952 8.92091 3.38879 8.78025 3.24817L6 0.467919C5.85938 0.327257 5.66865 0.248211 5.46975 0.248169ZM5.625 2.87317V1.37317L7.875 3.62317H6.375C6.17609 3.62317 5.98532 3.54415 5.84467 3.4035C5.70402 3.26285 5.625 3.07208 5.625 2.87317ZM6.75 5.22817V6.54067L5.25 6.91567V9.62317C5.25 9.99442 5.02425 10.2854 4.7535 10.4654C4.4805 10.6477 4.12425 10.7482 3.75 10.7482C3.37575 10.7482 3.0195 10.6477 2.7465 10.4654C2.4765 10.2854 2.25 9.99442 2.25 9.62317C2.25 9.25192 2.47575 8.96092 2.7465 8.78092C3.0195 8.59867 3.37575 8.49817 3.75 8.49817C4.017 8.49817 4.275 8.54917 4.5 8.64517V5.41567C4.5 5.24847 4.55588 5.08607 4.65874 4.95426C4.76161 4.82245 4.90557 4.7288 5.06775 4.68817L5.81775 4.50067C5.92834 4.47297 6.04379 4.47084 6.15532 4.49445C6.26685 4.51806 6.37153 4.56678 6.46141 4.63692C6.55129 4.70706 6.62399 4.79676 6.674 4.89921C6.724 5.00166 6.75 5.11416 6.75 5.22817Z"
fill="currentColor" />
</svg>
<p class="lrc-name text-xs truncate">The Title of That Songs.mp3</p>
</div>
<!-- .filename Display -->
<!-- time bar -->
<div class="flex flex-col mt-2">
<div class="flex w-full h-2 bg-white relative cursor-pointer" style="--w: 0%">
<input progress type="range" class="absolute h-2 w-full opacity-0" id="time-range" min="0" value="0" max="100" />
<div style="width: var(--w)" class="bg-6 dark:bg-1 h-full"></div>
</div>
<div class="flex justify-between text-white">
<p class="currentTime">00:00</p>
<p class="endTime">00:00</p>
</div>
</div>
<!-- .time bar -->
<!-- controler -->
<div class="flex items-center gap-5">
<div class="flex items-center gap-2 text-white">
<div id="rewind" class="cursor-pointer">
<svg width="26" height="27" viewBox="0 0 26 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6564 12.7431C13.4572 12.8571 13.2917 13.0218 13.1765 13.2204C13.0614 13.419 13.0007 13.6445 13.0007 13.8741C13.0007 14.1036 13.0614 14.3291 13.1765 14.5277C13.2917 14.7263 13.4572 14.891 13.6564 15.0051L23.9963 21.0046C24.8413 21.4953 25.9999 20.9347 25.9999 19.8736V7.87456C25.9999 6.81344 24.8413 6.25281 23.9963 6.74356L13.6564 12.7431Z" fill="currentColor" />
<path d="M0.656449 12.7431C0.457223 12.8571 0.291661 13.0218 0.176517 13.2204C0.0613725 13.419 0.000732422 13.6445 0.000732422 13.8741C0.000732422 14.1036 0.0613725 14.3291 0.176517 14.5277C0.291661 14.7263 0.457223 14.891 0.656449 15.0051L10.9963 21.0046C11.8413 21.4953 12.9999 20.9347 12.9999 19.8736V7.87456C12.9999 6.81344 11.8413 6.25281 10.9963 6.74356L0.656449 12.7431Z" fill="currentColor" />
</svg>
</div>
<div id="p-n-p" class="cursor-pointer">
<svg title="play" class="play" width="31" height="31" viewBox="0 0 28 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M22.0906 17.4416L7.7746 25.7482C6.55966 26.4524 5.00049 25.5997 5.00049 24.18V7.56686C5.00049 6.14943 6.55741 5.29447 7.7746 6.00094L22.0906 14.3075C22.367 14.4653 22.5968 14.6934 22.7565 14.9686C22.9163 15.2438 23.0005 15.5563 23.0005 15.8746C23.0005 16.1928 22.9163 16.5054 22.7565 16.7806C22.5968 17.0558 22.367 17.2839 22.0906 17.4416Z" fill="currentColor" />
</svg>
<svg title="pause" class="pause hidden" xmlns="http://www.w3.org/2000/svg" width="31" height="31" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5" />
</svg>
</div>
<div id="forward" class="cursor-pointer">
<svg width="26" height="27" viewBox="0 0 26 27" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_290_263)">
<path d="M12.3442 12.7431C12.5435 12.8571 12.709 13.0218 12.8242 13.2204C12.9393 13.419 12.9999 13.6445 12.9999 13.8741C12.9999 14.1036 12.9393 14.3291 12.8242 14.5277C12.709 14.7263 12.5435 14.891 12.3442 15.0051L2.00436 21.0046C1.15936 21.4953 0.000732422 20.9347 0.000732422 19.8736V7.87456C0.000732422 6.81344 1.15936 6.25281 2.00436 6.74356L12.3442 12.7431Z" fill="currentColor" />
<path d="M25.3442 12.7431C25.5435 12.8571 25.709 13.0218 25.8242 13.2204C25.9393 13.419 25.9999 13.6445 25.9999 13.8741C25.9999 14.1036 25.9393 14.3291 25.8242 14.5277C25.709 14.7263 25.5435 14.891 25.3442 15.0051L15.0044 21.0046C14.1594 21.4953 13.0007 20.9347 13.0007 19.8736V7.87456C13.0007 6.81344 14.1594 6.25281 15.0044 6.74356L25.3442 12.7431Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0_290_263">
<rect width="26" height="26" fill="currentColor" transform="translate(0.000732422 0.874084)" />
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="flex items-center relative text-white" title="volume">
<div class="lrc-volume cursor-pointer">
<svg class="sound" width="27" height="28" viewBox="0 0 27 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M19.6113 21.6298C20.6313 20.6125 21.4403 19.4036 21.9917 18.0726C22.5431 16.7416 22.826 15.3148 22.8243 13.8741C22.826 12.4334 22.5431 11.0066 21.9917 9.67561C21.4403 8.34462 20.6313 7.13571 19.6113 6.11835L18.4182 7.31141C19.2816 8.17211 19.9662 9.19503 20.4328 10.3213C20.8993 11.4476 21.1386 12.655 21.1368 13.8741C21.139 15.0934 20.9001 16.301 20.4339 17.4276C19.9676 18.5542 19.2831 19.5774 18.4199 20.4385L19.6113 21.6298Z" fill="currentColor" />
<path
d="M17.225 19.2437C17.9302 18.5385 18.4895 17.7014 18.8712 16.7801C19.2528 15.8588 19.4492 14.8713 19.4492 13.8741C19.4492 12.8768 19.2528 11.8894 18.8712 10.9681C18.4895 10.0467 17.9302 9.20959 17.225 8.50444L16.032 9.69751C16.5804 10.246 17.0154 10.8971 17.3122 11.6138C17.609 12.3304 17.7617 13.0984 17.7617 13.8741C17.7617 14.6497 17.609 15.4178 17.3122 16.1344C17.0154 16.851 16.5804 17.5021 16.032 18.0506L17.225 19.2437ZM13.8669 6.36469C14.0099 6.43356 14.1305 6.54134 14.215 6.67566C14.2995 6.80998 14.3443 6.96539 14.3445 7.12407V20.6241C14.3443 20.7828 14.2992 20.9383 14.2146 21.0726C14.13 21.207 14.0092 21.3147 13.866 21.3834C13.7229 21.4522 13.5633 21.4791 13.4056 21.4612C13.2478 21.4433 13.0983 21.3813 12.9742 21.2822L8.98667 18.0928H5.06323C4.83946 18.0928 4.62484 18.0039 4.46661 17.8457C4.30838 17.6875 4.21948 17.4728 4.21948 17.2491V10.4991C4.21948 10.2753 4.30838 10.0607 4.46661 9.90245C4.62484 9.74421 4.83946 9.65532 5.06323 9.65532H8.98667L12.9742 6.46594C13.0984 6.3667 13.248 6.30454 13.406 6.28663C13.5639 6.26871 13.7237 6.29577 13.8669 6.36469Z"
fill="currentColor" />
</svg>
<svg class="mute hidden" xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06M6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0" />
</svg>
</div>
<div class="p-2">
<div class="flex w-24 h-2 bg-white relative rounded-lg cursor-pointer" style="--w: 100%">
<input progress type="range" class="absolute h-2 w-full opacity-0" id="volume-range" min="0" value="1" max="1" step="0.01" />
<div style="width: var(--w)" class="bg-6 dark:bg-1 h-full mt-auto rounded-lg"></div>
</div>
</div>
</div>
</div>
</div>
<!-- .controler -->
</div>
<!-- .Footer & media player -->
<!-- popup container -->
<div id="popup-container" class="before:content-[''] before:bg-black/30 before:fixed before:inset-0 before:w-full before:h-full before:z-[90] hidden"></div>
<!-- .popup container -->
<!-- loading -->
<div id="popup-loading" class="before:content-[''] before:bg-black/30 before:fixed before:inset-0 before:w-full before:h-full before:z-[90]">
<div data-loadname="language-loading" class="max-w-80 fixed top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 z-[99] rounded-lg bg-white dark:bg-5 rounded-lg p-5 flex flex-col items-center">
<img src="/asset-image/aset1.gif" class="w-40 h-40" alt="loading" />
<br />
<p>loading....</p>
</div>
</div>
<!-- .loading -->
<div id="lrc">
<!-- file input -->
<input type="file" id="fileInput" accept="audio/*" hidden />
<audio id="audioPlayer" hidden></audio>
<input type="file" id="lrcFileInput" hidden />
<input type="text" name="file_name" id="file_name" hidden />
<input type="number" name="last-lyrics-set-index" id="last-lyrics-set-index" hidden />
<!-- .file input -->
</div>
<!-- script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
<script type="module" src="script/main.js"></script>
<!-- script -->
</body>
</html>