Docker/NovaSonic
0
0 Fork 0
Code Issues 15 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

refactor: reorder settings sections — important ones first, login last

Browse Source 
Theme → Bibliothek (+ Romaji) → Audiobookshelf → Discover APIs → Navidrome Server
Also merged the standalone Romaji Korrekturen row into the Bibliothek section.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HoneyandClaude Sonnet 4.6 committed 2026-06-07 20:59:10 +02:00
1 parent e3c435420c
commit 106fbf54bf
1 file changed
+50 -54
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+50 -54
View File
@@ -586,37 +586,41 @@
<div style="flex:1;overflow-y:auto;padding:18px 24px 8px">
<div class="settings-section">
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<span style="width:24px;height:24px;border-radius:6px;background:var(--blue-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🌐</span>
Navidrome Server
<span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🎨</span>
Theme
</h3>
<div class="field"><label>Server URL</label><input id="s-url" type="url" placeholder="https://music.example.com"></div>
<div class="field"><label>Benutzername</label><input id="s-user" type="text" placeholder="admin"></div>
<div class="field"><label>Passwort</label><input id="s-pass" type="password" placeholder="(unverändert lassen)"></div>
<div id="theme-picker" class="theme-picker"></div>
<div class="edit-pl-toggle-row" style="margin-top:14px">
<span>Einfarbiger Player-Hintergrund</span>
<div id="s-cover-color-bg" class="toggle" onclick="this.classList.toggle('on')"></div>
</div>
</div>
<div class="settings-section">
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<span style="width:24px;height:24px;border-radius:6px;background:var(--accent-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🔑</span>
Discover APIs
<span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📊</span>
Bibliothek
</h3>
<div class="field">
<label>Last.fm API Key</label>
<input id="s-lastfm" type="text" placeholder="Für Künstler-Infos & Empfehlungen">
<div class="hint">Kostenlos unter last.fm/api/account/create</div>
<div class="edit-pl-toggle-row">
<span>Abspielhäufigkeit anzeigen</span>
<div id="s-show-playcount" class="toggle" onclick="this.classList.toggle('on')"></div>
</div>
<div class="field">
<label>NovaSonic Backend URL</label>
<input id="s-backend" type="url" placeholder="http://192.168.x.x:3700">
<div class="hint">Für Download-to-Server via yt-dlp</div>
<div class="edit-pl-toggle-row" style="margin-top:12px">
<span>Romaji anzeigen</span>
<div id="s-show-romaji" class="toggle" onclick="this.classList.toggle('on')"></div>
</div>
<div class="settings-row" style="margin-top:8px;border-radius:9px">
<div>
<div style="font-size:13px;font-weight:500">Backend Status</div>
<div class="hint" id="backend-status-text">Nicht verbunden</div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div class="status-dot" id="backend-status-dot"></div>
<button class="btn-outline" style="padding:6px 12px;font-size:12px" onclick="checkBackend()">Testen</button>
</div>
<div class="edit-pl-toggle-row" style="margin-top:12px">
<span>Scrobble senden nach</span>
<select id="s-scrobble-mode" style="background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:var(--font);font-size:13px;cursor:pointer">
<option value="15s">15 Sekunden</option>
<option value="30s">30 Sekunden</option>
<option value="1/3">1/3 der Song-Dauer</option>
<option value="2/3">2/3 der Song-Dauer</option>
<option value="end">Song-Ende</option>
</select>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;margin-top:14px">
<div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
<button onclick="openRomajiOverridesModal()" class="btn-outline" style="padding:7px 14px;font-size:13px;font-weight:600;flex-shrink:0">Liste öffnen</button>
</div>
</div>
<div class="settings-section">
@@ -650,46 +654,38 @@
</div>
<div class="settings-section">
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📊</span>
Bibliothek
<span style="width:24px;height:24px;border-radius:6px;background:var(--accent-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🔑</span>
Discover APIs
</h3>
<div class="edit-pl-toggle-row">
<span>Abspielhäufigkeit anzeigen</span>
<div id="s-show-playcount" class="toggle" onclick="this.classList.toggle('on')"></div>
<div class="field">
<label>Last.fm API Key</label>
<input id="s-lastfm" type="text" placeholder="Für Künstler-Infos & Empfehlungen">
<div class="hint">Kostenlos unter last.fm/api/account/create</div>
</div>
<div class="edit-pl-toggle-row" style="margin-top:12px">
<span>Romaji anzeigen</span>
<div id="s-show-romaji" class="toggle" onclick="this.classList.toggle('on')"></div>
<div class="field">
<label>NovaSonic Backend URL</label>
<input id="s-backend" type="url" placeholder="http://192.168.x.x:3700">
<div class="hint">Für Download-to-Server via yt-dlp</div>
</div>
<div class="edit-pl-toggle-row" style="margin-top:12px">
<span>Scrobble senden nach</span>
<select id="s-scrobble-mode" style="background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-family:var(--font);font-size:13px;cursor:pointer">
<option value="15s">15 Sekunden</option>
<option value="30s">30 Sekunden</option>
<option value="1/3">1/3 der Song-Dauer</option>
<option value="2/3">2/3 der Song-Dauer</option>
<option value="end">Song-Ende</option>
</select>
</div>
</div>
<div class="settings-section">
<div style="display:flex;align-items:center;justify-content:space-between">
<div class="settings-row" style="margin-top:8px;border-radius:9px">
<div>
<div style="font-size:13px;font-weight:600">Romaji Korrekturen</div>
<div style="font-size:13px;font-weight:500">Backend Status</div>
<div class="hint" id="backend-status-text">Nicht verbunden</div>
</div>
<div style="display:flex;align-items:center;gap:8px">
<div class="status-dot" id="backend-status-dot"></div>
<button class="btn-outline" style="padding:6px 12px;font-size:12px" onclick="checkBackend()">Testen</button>
</div>
<button onclick="openRomajiOverridesModal()" class="btn-outline" style="padding:7px 14px;font-size:13px;font-weight:600;flex-shrink:0">Liste öffnen</button>
</div>
</div>
<div class="settings-section">
<h3 style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
<span style="width:24px;height:24px;border-radius:6px;background:var(--surface2);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🎨</span>
Theme
<span style="width:24px;height:24px;border-radius:6px;background:var(--blue-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">🌐</span>
Navidrome Server
</h3>
<div id="theme-picker" class="theme-picker"></div>
<div class="edit-pl-toggle-row" style="margin-top:14px">
<span>Einfarbiger Player-Hintergrund</span>
<div id="s-cover-color-bg" class="toggle" onclick="this.classList.toggle('on')"></div>
</div>
<div class="field"><label>Server URL</label><input id="s-url" type="url" placeholder="https://music.example.com"></div>
<div class="field"><label>Benutzername</label><input id="s-user" type="text" placeholder="admin"></div>
<div class="field"><label>Passwort</label><input id="s-pass" type="password" placeholder="(unverändert lassen)"></div>
</div>
</div>
<!-- Sticky footer -->