diff --git a/index.html b/index.html index 7173669..fe600e0 100644 --- a/index.html +++ b/index.html @@ -1964,147 +1964,174 @@

Settings

-
-
-
-
- Theme - Choose your preferred color scheme +
+ + + + + + +
+
+
+
+
+
+ Theme + Choose your preferred color scheme +
-
-
-
System
-
Light
-
Dark
-
Black
-
Ocean
-
Purple
-
Forest
-
Mocha
-
Machiatto
-
Frappé
-
Latte
-
Custom
-
-
-

Custom Theme

-
-
- - +
+
System
+
Light
+
Dark
+
Black
+
Ocean
+
Purple
+
Forest
+
Mocha
+
Machiatto
+
Frappé
+
Latte
+
Custom
-
-
-
- Waveform Seekbar - Show a visual waveform of the track in the progress bar (Experimental) +
+

Custom Theme

+
+
+ + +
- -
-
-
- Smooth Scrolling - Provides a smoother scrolling experience with Lenis (Experimental) +
+
+ Waveform Seekbar + Show a visual waveform of the track in the progress bar + (Experimental) +
+
- -
-
-
- Album Cover Background - Use the album cover as a blurred background on album pages and as primary - color +
+
+ Smooth Scrolling + Provides a smoother scrolling experience with Lenis (Experimental) +
+
- -
-
-
- Full-screen Visualizer - Enable particle visualizer in full-screen mode +
+
+ Album Cover Background + Use the album cover as a blurred background on album pages and as primary + color +
+
- -
-
-
- Visualizer Style - Select the visualization style +
+
+ Full-screen Visualizer + Enable particle visualizer in full-screen mode +
+
- -
-
-
- Visualizer Mode - Choose how the visualizer is displayed in full-screen +
+
+ Visualizer Style + Select the visualization style +
+
- -
-
-
- Smart Intensity Switching - Automatically adjust visualizer intensity based on song energy +
+
+ Visualizer Mode + Choose how the visualizer is displayed in full-screen +
+
- -
-
-
- Visualizer Sensitivity - Adjust the intensity of the visualizer effects. - Warning: High sensitivity may cause flashing lights and rapid motion, which - can trigger seizures in people with photosensitive epilepsy. +
+
+ Smart Intensity Switching + Automatically adjust visualizer intensity based on song energy +
+
-
- - 60% +
+
+ Visualizer Sensitivity + Adjust the intensity of the visualizer effects. + Warning: High sensitivity may cause flashing lights and rapid motion, + which can trigger seizures in people with photosensitive + epilepsy. +
+
+ + 60% +
+
+
+
+
+
+
+ ListenBrainz Scrobbling + Submit listens to ListenBrainz (requires User Token) +
+
@@ -2264,107 +2291,119 @@ >Submit listens to ListenBrainz (requires User Token)
- -
- - -
-
-
- Last.fm Scrobbling - Connect your Last.fm account to scrobble tracks +
+
+
+
+
+
+ Streaming Quality + Quality for streaming playback +
+
-
- +
+
+ Download Quality + Quality for track downloads +
+
-
- - - -
-
-
- Streaming Quality - Quality for streaming playback -
- -
-
-
- Download Quality - Quality for track downloads -
- -
-
-
- Cover Art Size - Size for downloaded/embedded cover art -
- -
-
-
- Show Quality Badges - Display "HD" badge for Hi-Res tracks +
+
+ Show Quality Badges + Display "HD" badge for Hi-Res tracks +
+
+
+
+ Gapless Playback + Play audio without interruption between tracks +
+
- -
-
-
- ReplayGain Mode - Normalize volume across tracks -
- -
-
-
- ReplayGain Pre-Amp - Adjust gain manually (dB) -
- -
- - -
-
- Equalizer - 16-band parametric equalizer for fine audio control -
- -
- - -
- -
-
-
- Now Playing View Mode - Choose what shows when you click the album art -
- -
- -
-
- Compact Artists - Show artist cards in a compact, horizontal layout -
- -
-
-
- Compact Albums - Show album cards in a compact, horizontal layout -
- -
-
- -
-
-
- Zipped Bulk Downloads - Download multiple tracks as a single ZIP file (requires browser support) -
- -
-
-
- Download Lyrics - Include .lrc files when downloading tracks/albums -
- -
-
-
- Romaji Lyrics - Convert Japanese lyrics to Romaji (Latin characters) -
- -
-
-
- Filename Template - Customize download filenames. Available: {trackNumber}, {artist}, {title}, - {album} -
- -
-
-
- ZIP Folder Template - Customize album folder names. Available: {albumTitle}, {albumArtist}, - {year} -
- -
-
-
- Generate M3U - Include M3U playlist files in downloads -
- -
-
-
- Generate M3U8 - Include extended M3U8 playlist files in downloads -
- -
-
-
- Generate CUE - Include CUE sheets for gapless playback in downloads -
- -
-
-
- Generate NFO - Include NFO files for media center compatibility -
- -
-
-
- Generate JSON - Include JSON files with rich metadata -
- -
-
-
- Relative Paths - Use relative paths in playlist files -
- -
-
- -
-
-
- Keyboard Shortcuts - View available keyboard shortcuts -
- -
- -
-
- Cache - Stores API responses to reduce requests -
- -
-
-
- Backup & Restore - Export or import your library and history as JSON -
-
- - - -
-
-
-
- ADVANCED: Custom Database/Auth - Configure custom PocketBase and Firebase instances -
- -
-
-
+
- API Instances + ReplayGain Mode + Normalize volume across tracks +
+ +
+
+
+ ReplayGain Pre-Amp + Adjust gain manually (dB) +
+ +
+ + +
+
+ Equalizer Manage and prioritize API instances. Automatically sorted by speed.16-band parametric equalizer for fine audio control
- + +
+ + +
+
+
+
+
+
+
+
+ Now Playing View Mode + Choose what shows when you click the album art +
+ +
+ +
+
+ Compact Artists + Show artist cards in a compact, horizontal layout +
+ +
+
+
+ Compact Albums + Show album cards in a compact, horizontal layout +
+ +
+
+
+
+
+
+
+
+
+ Zipped Bulk Downloads + Download multiple tracks as a single ZIP file (requires browser + support) +
+ +
+
+
+ Download Lyrics + Include .lrc files when downloading tracks/albums +
+ +
+
+
+ Romaji Lyrics + Convert Japanese lyrics to Romaji (Latin characters) +
+ +
+
+
+ Filename Template + Customize download filenames. Available: {trackNumber}, {artist}, {title}, + {album} +
+ +
+
+
+ ZIP Folder Template + Customize album folder names. Available: {albumTitle}, {albumArtist}, + {year} +
+ +
+
+
+ Generate M3U + Include M3U playlist files in downloads +
+ +
+
+
+ Generate M3U8 + Include extended M3U8 playlist files in downloads +
+ +
+
+
+ Generate CUE + Include CUE sheets for gapless playback in downloads +
+ +
+
+
+ Generate NFO + Include NFO files for media center compatibility +
+ +
+
+
+ Generate JSON + Include JSON files with rich metadata +
+ +
+
+
+ Relative Paths + Use relative paths in playlist files +
+ +
+
+
+
+
+
+
+
+
+ Keyboard Shortcuts + View available keyboard shortcuts +
+ +
+ +
+
+ Cache + Stores API responses to reduce requests +
+ +
+
+
+ Backup & Restore + Export or import your library and history as JSON +
+
+ + + +
+
+
+
+ ADVANCED: Custom Database/Auth + Configure custom PocketBase and Firebase instances +
+ +
+
+
+
+ API Instances + Manage and prioritize API instances. Automatically sorted by + speed. +
+ +
+
    -
      diff --git a/js/ui-interactions.js b/js/ui-interactions.js index 5d43030..f2fd1be 100644 --- a/js/ui-interactions.js +++ b/js/ui-interactions.js @@ -473,6 +473,19 @@ export function initializeUIInteractions(player, api, ui) { }); }); + // Settings tabs + document.querySelectorAll('.settings-tab').forEach((tab) => { + tab.addEventListener('click', () => { + document.querySelectorAll('.settings-tab').forEach((t) => t.classList.remove('active')); + document.querySelectorAll('.settings-tab-content').forEach((c) => c.classList.remove('active')); + + tab.classList.add('active'); + + const contentId = `settings-tab-${tab.dataset.tab}`; + document.getElementById(contentId)?.classList.add('active'); + }); + }); + // Tooltip for truncated text let tooltipEl = document.getElementById('custom-tooltip'); if (!tooltipEl) { diff --git a/styles.css b/styles.css index 1ef7b15..6620248 100644 --- a/styles.css +++ b/styles.css @@ -890,6 +890,55 @@ input[type='search']::-webkit-search-cancel-button { /* Use standardized animation */ } +/* Settings Tabs */ +.settings-tabs { + display: flex; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-lg); + border-bottom: 1px solid var(--border); + flex-wrap: wrap; +} + +.settings-tab { + background: transparent; + border: none; + color: var(--muted-foreground); + padding: var(--spacing-sm) var(--spacing-lg); + cursor: pointer; + font-size: 1rem; + font-weight: 500; + border-bottom: 2px solid transparent; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; + transition: + color var(--transition-fast), + background-color var(--transition-fast), + transform var(--transition-fast); + position: relative; +} + +.settings-tab:hover { + color: var(--foreground); + background-color: rgb(var(--highlight-rgb), 0.05); +} + +.settings-tab:active { + transform: translateY(1px); +} + +.settings-tab.active { + color: var(--foreground); + border-bottom-color: var(--highlight); +} + +.settings-tab-content { + display: none; +} + +.settings-tab-content.active { + display: block; + animation: fade-in-slide-up 0.4s var(--ease-out-back); +} + .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));