11<!DOCTYPE html>
2- < html >
3-
2+ < html lang ="en ">
43< head >
5- < title > My Page</ title >
6- < link rel ="stylesheet " data-inline ="true " href ="./styles/styles.css " />
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > LRCGetter</ title >
7+ < link rel ="stylesheet " href ="./styles/styles.css ">
8+ < link rel ="preconnect " href ="https://fonts.googleapis.com ">
9+ < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin >
10+ < link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap " rel ="stylesheet ">
711</ head >
8-
912< body >
10- < script type ="module " data-inline ="true " src ="./src/main.js "> </ script >
11- < h1 > Hello, world!</ h1 >
12- < p > This is a demo page.</ p >
13- < button onclick ="testFunction() "> Click me!</ button >
14- < button onclick ="outputToPage() "> Show a square.</ button >
15- </ body >
13+ < div class ="container ">
14+ < header >
15+ < div class ="logo ">
16+ < svg width ="32 " height ="32 " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 " stroke-linecap ="round " stroke-linejoin ="round ">
17+ < path d ="M9 18V5l12-2v13 "> </ path >
18+ < circle cx ="6 " cy ="18 " r ="3 "> </ circle >
19+ < circle cx ="18 " cy ="16 " r ="3 "> </ circle >
20+ </ svg >
21+ < span > LRCGetter</ span >
22+ </ div >
23+ < nav >
24+ < a href ="# " class ="nav-link active " data-view ="search "> Search</ a >
25+ < a href ="# " class ="nav-link " data-view ="get "> Get</ a >
26+ < a href ="# " class ="nav-link " data-view ="publish "> Publish</ a >
27+ < a href ="https://lrclib.net/docs " target ="_blank " class ="nav-link "> Docs</ a >
28+ </ nav >
29+ </ header >
30+
31+ < main >
32+ <!-- Search View -->
33+ < section id ="view-search " class ="view active ">
34+ < div class ="view-header ">
35+ < h1 > Search Lyrics</ h1 >
36+ < p class ="subtitle "> Find synchronized and plain lyrics from the LRCLIB database</ p >
37+ </ div >
38+ < form id ="form-search " class ="form-card ">
39+ < div class ="form-group ">
40+ < label for ="search-q "> Search query</ label >
41+ < input type ="text " id ="search-q " name ="q " placeholder ="Search across all fields... ">
42+ </ div >
43+ < div class ="form-row ">
44+ < div class ="form-group ">
45+ < label for ="search-track "> Track name</ label >
46+ < input type ="text " id ="search-track " name ="track_name " placeholder ="Track title ">
47+ </ div >
48+ < div class ="form-group ">
49+ < label for ="search-artist "> Artist name</ label >
50+ < input type ="text " id ="search-artist " name ="artist_name " placeholder ="Artist ">
51+ </ div >
52+ </ div >
53+ < div class ="form-group ">
54+ < label for ="search-album "> Album name</ label >
55+ < input type ="text " id ="search-album " name ="album_name " placeholder ="Album ">
56+ </ div >
57+ < button type ="submit " class ="btn btn-primary ">
58+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 "> < circle cx ="11 " cy ="11 " r ="8 "> </ circle > < path d ="m21 21-4.35-4.35 "> </ path > </ svg >
59+ Search
60+ </ button >
61+ </ form >
62+
63+ < div id ="search-results " class ="results-container "> </ div >
64+ </ section >
65+
66+ <!-- Get View -->
67+ < section id ="view-get " class ="view ">
68+ < div class ="view-header ">
69+ < h1 > Get Lyrics</ h1 >
70+ < p class ="subtitle "> Retrieve lyrics by track signature or LRCLIB ID</ p >
71+ </ div >
72+
73+ < div class ="tabs ">
74+ < button class ="tab active " data-tab ="signature "> By Signature</ button >
75+ < button class ="tab " data-tab ="id "> By ID</ button >
76+ </ div >
77+
78+ < div id ="tab-signature " class ="tab-content active ">
79+ < form id ="form-get-signature " class ="form-card ">
80+ < div class ="form-row ">
81+ < div class ="form-group ">
82+ < label for ="get-track "> Track name *</ label >
83+ < input type ="text " id ="get-track " name ="track_name " required placeholder ="Track title ">
84+ </ div >
85+ < div class ="form-group ">
86+ < label for ="get-artist "> Artist name *</ label >
87+ < input type ="text " id ="get-artist " name ="artist_name " required placeholder ="Artist ">
88+ </ div >
89+ </ div >
90+ < div class ="form-row ">
91+ < div class ="form-group ">
92+ < label for ="get-album "> Album name *</ label >
93+ < input type ="text " id ="get-album " name ="album_name " required placeholder ="Album ">
94+ </ div >
95+ < div class ="form-group ">
96+ < label for ="get-duration "> Duration (seconds) *</ label >
97+ < input type ="number " id ="get-duration " name ="duration " required placeholder ="e.g. 233 ">
98+ </ div >
99+ </ div >
100+ < div class ="form-group checkbox-group ">
101+ < label >
102+ < input type ="checkbox " id ="get-cached " name ="cached ">
103+ < span > Use cached endpoint only (faster, no external lookups)</ span >
104+ </ label >
105+ </ div >
106+ < button type ="submit " class ="btn btn-primary "> Get Lyrics</ button >
107+ </ form >
108+ </ div >
109+
110+ < div id ="tab-id " class ="tab-content ">
111+ < form id ="form-get-id " class ="form-card ">
112+ < div class ="form-group ">
113+ < label for ="get-id "> LRCLIB ID *</ label >
114+ < input type ="text " id ="get-id " name ="id " required placeholder ="e. g. 3396226 ">
115+ </ div >
116+ < button type ="submit " class ="btn btn-primary "> Get Lyrics</ button >
117+ </ form >
118+ </ div >
16119
120+ < div id ="get-results " class ="results-container "> </ div >
121+ </ section >
122+
123+ <!-- Publish View -->
124+ < section id ="view-publish " class ="view ">
125+ < div class ="view-header ">
126+ < h1 > Publish Lyrics</ h1 >
127+ < p class ="subtitle "> Contribute lyrics to the LRCLIB database</ p >
128+ </ div >
129+
130+ < form id ="form-publish " class ="form-card ">
131+ < div class ="form-row ">
132+ < div class ="form-group ">
133+ < label for ="pub-track "> Track name *</ label >
134+ < input type ="text " id ="pub-track " name ="trackName " required placeholder ="Track title ">
135+ </ div >
136+ < div class ="form-group ">
137+ < label for ="pub-artist "> Artist name *</ label >
138+ < input type ="text " id ="pub-artist " name ="artistName " required placeholder ="Artist ">
139+ </ div >
140+ </ div >
141+ < div class ="form-row ">
142+ < div class ="form-group ">
143+ < label for ="pub-album "> Album name *</ label >
144+ < input type ="text " id ="pub-album " name ="albumName " required placeholder ="Album ">
145+ </ div >
146+ < div class ="form-group ">
147+ < label for ="pub-duration "> Duration (seconds) *</ label >
148+ < input type ="number " id ="pub-duration " name ="duration " required placeholder ="e.g. 233 ">
149+ </ div >
150+ </ div >
151+ < div class ="form-group ">
152+ < label for ="pub-plain "> Plain Lyrics</ label >
153+ < textarea id ="pub-plain " name ="plainLyrics " rows ="6 " placeholder ="Plain text lyrics (one line per line) "> </ textarea >
154+ </ div >
155+ < div class ="form-group ">
156+ < label for ="pub-synced "> Synchronized Lyrics (LRC format)</ label >
157+ < textarea id ="pub-synced " name ="syncedLyrics " rows ="6 " placeholder ="[00:17. 12] First line of lyrics [00:22.45] Second line... "> </ textarea >
158+ </ div >
159+
160+ < div class ="challenge-section ">
161+ < div class ="challenge-header ">
162+ < h3 > Proof of Work Challenge</ h3 >
163+ < p class ="muted "> Required to prevent spam. Click to request and solve automatically.</ p >
164+ </ div >
165+ < div class ="challenge-controls ">
166+ < button type ="button " id ="btn-challenge " class ="btn btn-secondary "> Request Challenge</ button >
167+ < button type ="button " id ="btn-solve " class ="btn btn-secondary " disabled > Solve Challenge</ button >
168+ < button type ="button " id ="btn-cancel " class ="btn btn-ghost " disabled > Cancel</ button >
169+ </ div >
170+ < div id ="challenge-status " class ="challenge-status "> </ div >
171+ < input type ="hidden " id ="pub-prefix " name ="prefix ">
172+ < input type ="hidden " id ="pub-nonce " name ="nonce ">
173+ </ div >
174+
175+ < button type ="submit " class ="btn btn-primary btn-lg ">
176+ < svg width ="16 " height ="16 " viewBox ="0 0 24 24 " fill ="none " stroke ="currentColor " stroke-width ="2 "> < path d ="M12 5v14M5 12h14 "> </ path > </ svg >
177+ Publish Lyrics
178+ </ button >
179+ </ form >
180+
181+ < div id ="publish-results " class ="results-container "> </ div >
182+ </ section >
183+ </ main >
184+
185+ < footer >
186+ < p > Alternative frontend for < a href ="https://lrclib.net " target ="_blank "> LRCLIB</ a > . Free lyrics database</ p >
187+ </ footer >
188+ </ div >
189+
190+ < script src ="./script/main.js "> </ script >
191+ </ body >
17192</ html >
0 commit comments