Skip to content

Commit 55df664

Browse files
committed
ehhhh initial idea
1 parent 8c3ebd3 commit 55df664

11 files changed

Lines changed: 1252 additions & 53 deletions

File tree

.devcontainer/devcontainer.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
2+
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
3+
{
4+
"name": "Node.js",
5+
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6+
"image": "mcr.microsoft.com/devcontainers/javascript-node:1-22-bookworm"
7+
8+
// Features to add to the dev container. More info: https://containers.dev/features.
9+
// "features": {},
10+
11+
// Use 'forwardPorts' to make a list of ports inside the container available locally.
12+
// "forwardPorts": [],
13+
14+
// Use 'postCreateCommand' to run commands after the container is created.
15+
// "postCreateCommand": "yarn install",
16+
17+
// Configure tool-specific properties.
18+
// "customizations": {},
19+
20+
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
21+
// "remoteUser": "root"
22+
}

.github/dependabot.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# To get started with Dependabot version updates, you'll need to specify which
2+
# package ecosystems to update and where the package manifests are located.
3+
# Please see the documentation for more information:
4+
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
5+
# https://containers.dev/guide/dependabot
6+
7+
version: 2
8+
updates:
9+
- package-ecosystem: "devcontainers"
10+
directory: "/"
11+
schedule:
12+
interval: weekly

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,3 +137,5 @@ dist
137137
# Vite logs files
138138
vite.config.js.timestamp-*
139139
vite.config.ts.timestamp-*
140+
141+
.codesandbox/

Build/index.html

Lines changed: 186 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,192 @@
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&#10;[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>

Build/package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Build/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "web-template",
2+
"name": "lrclibtest",
33
"version": "0.1.0",
44
"description": "My typical web dev starter project.",
55
"main": "index.js",
@@ -11,14 +11,14 @@
1111
},
1212
"repository": {
1313
"type": "git",
14-
"url": "git+https://github.com/NellowTCS/Web-Template.git"
14+
"url": "git+https://github.com/HTMLToolkit/LRCLibTest.git"
1515
},
1616
"author": "NellowTCS",
1717
"license": "MIT",
1818
"bugs": {
19-
"url": "https://github.com/NellowTCS/Web-Template/issues"
19+
"url": "https://github.com/HTMLToolkit/LRCLibTest/issues"
2020
},
21-
"homepage": "https://github.com/NellowTCS/Web-Template#readme",
21+
"homepage": "https://github.com/HTMLToolkit/LRCLibTest#readme",
2222
"dependencies": {
2323
"vite": "^7.1.3"
2424
},

0 commit comments

Comments
 (0)