audio/noiz
2
0
Fork 0
mirror of https://codeberg.org/armin/noiz.git synced 2026-09-01 05:50:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

Change colors to the awesome "Iceberg" palette (https://terminalcolors.com/themes/iceberg/dark/)

Browse source
This commit is contained in:
Armin 2026-07-07 00:02:57 +02:00
commit 7b4a0e908a
1 changed files with 83 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

166
index.html
View file

@ -16,95 +16,95 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #111; color: #e0e0e0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #161821; color: #c6c8d1; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.btn { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; box-shadow: 0 3px 0 #181818, 0 4px 6px rgba(0,0,0,0.4); } .btn { background: linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; box-shadow: 0 3px 0 #161821, 0 4px 6px rgba(0,0,0,0.4); }
.btn:hover { background: linear-gradient(to bottom, #404040, #2e2e2e); } .btn:hover { background: linear-gradient(to bottom, #2e3348, #272c42); }
.btn:active { background: linear-gradient(to bottom, #282828, #3a3a3a); box-shadow: 0 1px 0 #181818, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } .btn:active { background: linear-gradient(to bottom, #1e2132, #272c42); box-shadow: 0 1px 0 #161821, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); }
.btn-primary { background: linear-gradient(to bottom, #2a7dff, #185dd5); border-color: #1a6df5; color: #fff; box-shadow: 0 3px 0 #0f4ab0, 0 4px 6px rgba(0,0,0,0.4); } .btn-primary { background: linear-gradient(to bottom, #91acd1, #84a0c6); border-color: #84a0c6; color: #161821; box-shadow: 0 3px 0 #6b88b0, 0 4px 6px rgba(0,0,0,0.4); }
.btn-primary:hover { background: linear-gradient(to bottom, #3a8dff, #1a6de5); } .btn-primary:hover { background: linear-gradient(to bottom, #a0b8db, #91acd1); }
.btn-primary:active { background: linear-gradient(to bottom, #185dd5, #2a7dff); box-shadow: 0 1px 0 #0f4ab0, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); } .btn-primary:active { background: linear-gradient(to bottom, #84a0c6, #91acd1); box-shadow: 0 1px 0 #6b88b0, 0 2px 4px rgba(0,0,0,0.4); transform: translateY(2px); }
.btn-sm { padding: 4px 10px; font-size: 11px; } .btn-sm { padding: 4px 10px; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.brand { font-size: 15px; font-weight: 700; color: #999; letter-spacing: 1px; user-select: none; } .brand { font-size: 15px; font-weight: 700; color: #6b7089; letter-spacing: 1px; user-select: none; }
.brand span { color: #666; } .brand span { color: #6b7089; }
footer { display: flex !important; align-items: center; gap: 16px; padding: 10px 24px; background: linear-gradient(to bottom, #222, #181818); border-top: 1px solid #333; font-size: 14px; color: #aaa; flex-shrink: 0; } footer { display: flex !important; align-items: center; gap: 16px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; font-size: 14px; color: #6b7089; flex-shrink: 0; }
footer .brand { margin-left: auto; } footer .brand { margin-left: auto; }
.content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } .content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.pinned { flex-shrink: 0; background: linear-gradient(to bottom, #191919, #0f0f0f); padding: 16px 24px; display: flex; flex-direction: row; gap: 20px; align-items: center; } .pinned { flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); padding: 16px 24px; display: flex; flex-direction: row; gap: 20px; align-items: center; }
.player { display: flex; flex-direction: row; width: 100%; align-items: center; gap: 24px; } .player { display: flex; flex-direction: row; width: 100%; align-items: center; gap: 24px; }
canvas { width: 100%; height: 100px; border-radius: 6px; display: block; } canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
.player-right { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; } .player-right { display: flex; flex-direction: column; width: 320px; flex-shrink: 0; }
.audio-info { font-size: 11px; color: #555; font-variant-numeric: tabular-nums; align-self: flex-end; } .audio-info { font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; align-self: flex-end; }
.player .track-info { margin-bottom: 4px; } .player .track-info { margin-bottom: 4px; }
.player .track-info .title { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player .track-info .title { font-size: 16px; font-weight: 600; color: #c6c8d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .track-info .artist-name { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player .track-info .artist-name { font-size: 12px; color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-time { font-size: 28px; font-weight: 200; color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .big-time { font-size: 28px; font-weight: 200; color: #d2d4de; letter-spacing: 1px; font-variant-numeric: tabular-nums; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.big-time .sep { color: #444; margin: 0 4px; } .big-time .sep { color: #6b7089; margin: 0 4px; }
.canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; } .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #666; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; } .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
.progress-row .progress-bar { flex: 1; height: 6px; background: #333; border-radius: 3px; cursor: pointer; } .progress-row .progress-bar { flex: 1; height: 6px; background: #272c42; border-radius: 3px; cursor: pointer; }
.progress-row .progress-bar .fill { height: 100%; background: #1a6df5; border-radius: 3px; width: 0%; } .progress-row .progress-bar .fill { height: 100%; background: #84a0c6; border-radius: 3px; width: 0%; }
.progress-row .progress-bar:hover .fill { background: #3a8df5; } .progress-row .progress-bar:hover .fill { background: #91acd1; }
#noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; } #noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; }
#noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); } #noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
@keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } } @keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } }
#timeRemaining { color: #555; } #timeRemaining { color: #6b7089; }
#vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; } #vuMeter { width: 100%; height: 20px; border-radius: 2px; display: block; }
.controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; } .controls { display: flex; align-items: center; gap: 16px; align-self: flex-end; }
.controls button { background: linear-gradient(to bottom, #3a3a3a, #222); border: none; color: #ccc; cursor: pointer; padding: 6px; font-size: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #1a1a1a, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); } .controls button { background: linear-gradient(to bottom, #272c42, #1e2132); border: none; color: #c6c8d1; cursor: pointer; padding: 6px; font-size: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); }
.controls button:hover { color: #fff; background: linear-gradient(to bottom, #444, #2a2a2a); } .controls button:hover { color: #d2d4de; background: linear-gradient(to bottom, #2e3348, #272c42); }
.controls button:active { background: linear-gradient(to bottom, #222, #3a3a3a); box-shadow: 0 1px 0 #1a1a1a, 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(1px); } .controls button:active { background: linear-gradient(to bottom, #1e2132, #272c42); box-shadow: 0 1px 0 #161821, 0 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); transform: translateY(1px); }
.controls .play-btn { width: 44px; height: 44px; background: linear-gradient(to bottom, #2a7dff, #185dd5); color: #fff; font-size: 16px; border: 1px solid #1a6df5; box-shadow: 0 3px 0 #0f4ab0, 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); } .controls .play-btn { width: 44px; height: 44px; background: linear-gradient(to bottom, #91acd1, #84a0c6); color: #161821; font-size: 16px; border: 1px solid #84a0c6; box-shadow: 0 3px 0 #6b88b0, 0 4px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); }
.controls .play-btn:hover { background: linear-gradient(to bottom, #3a8dff, #2a6de5); } .controls .play-btn:hover { background: linear-gradient(to bottom, #a0b8db, #91acd1); }
.controls .play-btn:active { background: linear-gradient(to bottom, #185dd5, #2a7dff); box-shadow: 0 1px 0 #0f4ab0, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(2px); } .controls .play-btn:active { background: linear-gradient(to bottom, #84a0c6, #91acd1); box-shadow: 0 1px 0 #6b88b0, 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transform: translateY(2px); }
.volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 200px; align-self: flex-end; } .volume-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; width: 100%; max-width: 200px; align-self: flex-end; }
.volume-row input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #333; border-radius: 2px; outline: none; } .volume-row input[type="range"] { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: #272c42; border-radius: 2px; outline: none; }
.volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #1a6df5; cursor: pointer; } .volume-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #84a0c6; cursor: pointer; }
.volume-row .vol-icon { font-size: 14px; color: #666; } .volume-row .vol-icon { font-size: 14px; color: #6b7089; }
.add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e1e1e, #141414); border-top: 1px solid #222; flex-shrink: 0; } .add-bar { display: flex; gap: 8px; padding: 10px 24px; background: linear-gradient(to bottom, #1e2132, #161821); border-top: 1px solid #272c42; flex-shrink: 0; }
.empty-state { display: none; text-align: center; width: 100%; height: 100px; border-radius: 6px; background: #161616; justify-content: center; align-items: center; flex-direction: column; gap: 4px; flex-shrink: 0; } .empty-state { display: none; text-align: center; width: 100%; height: 100px; border-radius: 6px; background: #1e2132; justify-content: center; align-items: center; flex-direction: column; gap: 4px; flex-shrink: 0; }
.empty-state .icon { font-size: 20px; opacity: .2; } .empty-state .icon { font-size: 20px; opacity: .2; }
.empty-state h2 { font-size: 14px; font-weight: 600; color: #444; } .empty-state h2 { font-size: 14px; font-weight: 600; color: #6b7089; }
.empty-state p { color: #333; font-size: 11px; } .empty-state p { color: #6b7089; font-size: 11px; }
.playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; } .playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #222; flex-shrink: 0; flex-wrap: wrap; } .playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #272c42; flex-shrink: 0; flex-wrap: wrap; }
.playlist-toolbar .spacer { flex: 1; } .playlist-toolbar .spacer { flex: 1; }
.playlist-toolbar select { background: linear-gradient(to bottom, #3a3a3a, #282828); border: 1px solid #484848; color: #e0e0e0; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #181818, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; } .playlist-toolbar select { background: linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; }
.playlist-header { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 8px 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #555; border-bottom: 1px solid #222; flex-shrink: 0; background: linear-gradient(to bottom, #1e1e1e, #141414); } .playlist-header { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 8px 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #6b7089; border-bottom: 1px solid #272c42; flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); }
.playlist-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 0; position: relative; } .playlist-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 0; position: relative; }
#scanning { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.75); z-index: 10; font-size: 14px; color: #ccc; flex-direction: column; gap: 10px; } #scanning { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(22,24,33,0.85); z-index: 10; font-size: 14px; color: #c6c8d1; flex-direction: column; gap: 10px; }
#scanning .spinner { width: 20px; height: 20px; border: 2px solid #444; border-top-color: #1a6df5; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; } #scanning .spinner { width: 20px; height: 20px; border: 2px solid #6b7089; border-top-color: #84a0c6; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
.playlist-body::-webkit-scrollbar { width: 6px; } .playlist-body::-webkit-scrollbar { width: 6px; }
.playlist-body::-webkit-scrollbar-track { background: transparent; } .playlist-body::-webkit-scrollbar-track { background: transparent; }
.playlist-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } .playlist-body::-webkit-scrollbar-thumb { background: #272c42; border-radius: 3px; }
.track-item { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 6px 24px; cursor: pointer; font-size: 12px; border-left: 3px solid transparent; transition: background .08s; align-items: center; user-select: none; } .track-item { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 6px 24px; cursor: pointer; font-size: 12px; border-left: 3px solid transparent; transition: background .08s; align-items: center; user-select: none; }
.track-item:hover { background: #1a1a1a; } .track-item:hover { background: #1e2132; }
.track-item.active { background: linear-gradient(to bottom, #0f3a0f, #082208); border-left-color: #33ff55; } .track-item.active { background: linear-gradient(to bottom, rgba(180,190,130,0.12), rgba(180,190,130,0.06)); border-left-color: #b4be82; }
.track-item.active .col-title { color: #55ff77; font-weight: 700; } .track-item.active .col-title { color: #c0ca8e; font-weight: 700; }
.track-item.active .col-artist { color: #33dd55; font-weight: 600; } .track-item.active .col-artist { color: #b4be82; font-weight: 600; }
.track-item.active .col-idx { color: #55ff77; font-weight: 700; } .track-item.active .col-idx { color: #c0ca8e; font-weight: 700; }
.track-item.active .col-time { color: #33dd55; font-weight: 600; } .track-item.active .col-time { color: #b4be82; font-weight: 600; }
.track-item.active .col-genre { color: #33dd55; } .track-item.active .col-genre { color: #b4be82; }
.track-item.active .col-file { color: #33cc55; font-weight: 600; } .track-item.active .col-file { color: #b4be82; font-weight: 600; }
.track-item.selected { background: linear-gradient(to bottom, #1a3a5a, #0f2440); border-left-color: #3399ff; } .track-item.selected { background: linear-gradient(to bottom, rgba(132,160,198,0.15), rgba(132,160,198,0.08)); border-left-color: #84a0c6; }
.track-item.selected .col-title { color: #77bbff; font-weight: 600; } .track-item.selected .col-title { color: #91acd1; font-weight: 600; }
.track-item.selected .col-artist { color: #5599dd; } .track-item.selected .col-artist { color: #84a0c6; }
.track-item.selected .col-idx { color: #5599dd; } .track-item.selected .col-idx { color: #84a0c6; }
.track-item.selected .col-time { color: #5599dd; } .track-item.selected .col-time { color: #84a0c6; }
.track-item.selected .col-file { color: #4488cc; } .track-item.selected .col-file { color: #84a0c6; }
.track-item.active.selected { background: linear-gradient(to bottom, #1a6a1a, #0d3d0d); border-left-color: #66ff88; } .track-item.active.selected { background: linear-gradient(to bottom, rgba(180,190,130,0.18), rgba(132,160,198,0.12)); border-left-color: #b4be82; }
.track-item.active.selected .col-title { color: #88ffaa; } .track-item.active.selected .col-title { color: #c0ca8e; }
.track-item.dragging { opacity: 0.4; } .track-item.dragging { opacity: 0.4; }
.track-item.drag-over { border-top: 2px solid #22bb44; } .track-item.drag-over { border-top: 2px solid #b4be82; }
.track-item .col-idx { color: #444; text-align: right; font-size: 10px; } .track-item .col-idx { color: #6b7089; text-align: right; font-size: 10px; }
.track-item .col-title { color: #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-item .col-title { color: #c6c8d1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-item .col-artist { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-item .col-artist { color: #6b7089; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-item .col-file { color: #666; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-item .col-file { color: #6b7089; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-item .col-time { color: #666; font-size: 11px; font-variant-numeric: tabular-nums; } .track-item .col-time { color: #6b7089; font-size: 11px; font-variant-numeric: tabular-nums; }
.track-item .col-genre { color: #666; font-size: 10px; } .track-item .col-genre { color: #6b7089; font-size: 10px; }
footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#error { display: none; background: #3a1a1a; color: #e88; padding: 8px 16px; font-size: 13px; text-align: center; border-bottom: 1px solid #522; } #error { display: none; background: rgba(226,120,120,0.15); color: #e27878; padding: 8px 16px; font-size: 13px; text-align: center; border-bottom: 1px solid rgba(226,120,120,0.3); }
@media (max-width: 700px) { @media (max-width: 700px) {
.player { flex-direction: column; align-items: stretch; } .player { flex-direction: column; align-items: stretch; }
canvas { width: 100%; height: 80px; } canvas { width: 100%; height: 80px; }
@ -147,8 +147,8 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
</div> </div>
<div style="position:relative"> <div style="position:relative">
<canvas id="vuMeter" width="480" height="20"></canvas> <canvas id="vuMeter" width="480" height="20"></canvas>
<span style="position:absolute;left:2px;top:0;font:7px monospace;color:#8cf;line-height:6px">L</span> <span style="position:absolute;left:2px;top:0;font:7px monospace;color:#84a0c6;line-height:6px">L</span>
<span style="position:absolute;left:2px;top:10px;font:7px monospace;color:#8cf;line-height:6px">R</span> <span style="position:absolute;left:2px;top:10px;font:7px monospace;color:#84a0c6;line-height:6px">R</span>
</div> </div>
</div> </div>
<div class="player-right"> <div class="player-right">
@ -173,7 +173,7 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<div class="playlist" id="playlist"> <div class="playlist" id="playlist">
<div class="playlist-toolbar"> <div class="playlist-toolbar">
<div class="spacer"></div> <div class="spacer"></div>
<span style="font-size:11px;color:#555">Sort:</span> <span style="font-size:11px;color:#6b7089">Sort:</span>
<select id="sortSelect"> <select id="sortSelect">
<option value="idx">#</option> <option value="idx">#</option>
<option value="title">Title</option> <option value="title">Title</option>
@ -182,8 +182,8 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<option value="playtime">Length</option> <option value="playtime">Length</option>
<option value="genre">Genre</option> <option value="genre">Genre</option>
</select> </select>
<span style="font-size:11px;color:#555;margin-left:4px" id="trackCount">0</span> <span style="font-size:11px;color:#6b7089;margin-left:4px" id="trackCount">0</span>
<span style="font-size:11px;color:#555;margin-left:8px">Window:</span> <span style="font-size:11px;color:#6b7089;margin-left:8px">Window:</span>
<select id="windowSelect"> <select id="windowSelect">
<option value="none">None</option> <option value="none">None</option>
<option value="hanning" selected>Hanning</option> <option value="hanning" selected>Hanning</option>
@ -194,21 +194,21 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<option value="kaiser">Kaiser</option> <option value="kaiser">Kaiser</option>
<option value="flatTop">Flat Top</option> <option value="flatTop">Flat Top</option>
</select> </select>
<span style="font-size:11px;color:#555">Peak Decay:</span> <span style="font-size:11px;color:#6b7089">Peak Decay:</span>
<select id="decaySelect"> <select id="decaySelect">
<option value="0.995">Slow</option> <option value="0.995">Slow</option>
<option value="0.985" selected>Medium</option> <option value="0.985" selected>Medium</option>
<option value="0.97">Fast</option> <option value="0.97">Fast</option>
<option value="0.94">Very Fast</option> <option value="0.94">Very Fast</option>
</select> </select>
<span style="font-size:11px;color:#555;margin-left:8px">Bar Decay:</span> <span style="font-size:11px;color:#6b7089;margin-left:8px">Bar Decay:</span>
<select id="barDecaySelect"> <select id="barDecaySelect">
<option value="0.99">Slow</option> <option value="0.99">Slow</option>
<option value="0.96" selected>Medium</option> <option value="0.96" selected>Medium</option>
<option value="0.9">Fast</option> <option value="0.9">Fast</option>
<option value="0.8">Very Fast</option> <option value="0.8">Very Fast</option>
</select> </select>
<span style="font-size:11px;color:#555;margin-left:8px">Crossfade:</span> <span style="font-size:11px;color:#6b7089;margin-left:8px">Crossfade:</span>
<select id="crossfadeSelect"> <select id="crossfadeSelect">
<option value="0" selected>Off</option> <option value="0" selected>Off</option>
<option value="1">1s</option> <option value="1">1s</option>
@ -216,13 +216,13 @@ footer .footer-track { flex: 1; min-width: 0; white-space: nowrap; overflow: hid
<option value="3">3s</option> <option value="3">3s</option>
<option value="5">5s</option> <option value="5">5s</option>
</select> </select>
<span style="font-size:11px;color:#555;margin-left:8px">Repeat:</span> <span style="font-size:11px;color:#6b7089;margin-left:8px">Repeat:</span>
<select id="repeatSelect"> <select id="repeatSelect">
<option value="off" selected>Off</option> <option value="off" selected>Off</option>
<option value="all">All</option> <option value="all">All</option>
<option value="one">One</option> <option value="one">One</option>
</select> </select>
<span style="font-size:11px;color:#555">Shuffle:</span> <span style="font-size:11px;color:#6b7089">Shuffle:</span>
<select id="shuffleSelect"> <select id="shuffleSelect">
<option value="off" selected>Off</option> <option value="off" selected>Off</option>
<option value="on">On</option> <option value="on">On</option>
@ -465,9 +465,9 @@ function drawSpectrum() {
ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, w, h); ctx.clearRect(0, 0, w, h);
const grad = ctx.createLinearGradient(0, 0, 0, h); const grad = ctx.createLinearGradient(0, 0, 0, h);
grad.addColorStop(0, '#4a9dff'); grad.addColorStop(0, '#91acd1');
grad.addColorStop(0.4, '#1a6df5'); grad.addColorStop(0.4, '#84a0c6');
grad.addColorStop(1, '#0a1a3e'); grad.addColorStop(1, '#272c42');
const smoothFactor = barDecay; const smoothFactor = barDecay;
const barW = Math.max(1, Math.floor(w / NUM_BARS * 0.75)); const barW = Math.max(1, Math.floor(w / NUM_BARS * 0.75));
const gap = Math.max(1, Math.floor(w / NUM_BARS * 0.25)); const gap = Math.max(1, Math.floor(w / NUM_BARS * 0.25));
@ -491,7 +491,7 @@ function drawSpectrum() {
peakData[i] *= peakDecay; peakData[i] *= peakDecay;
} }
} }
ctx.fillStyle = '#ff2200'; ctx.fillStyle = '#e27878';
for (let i = 0; i < NUM_BARS; i++) { for (let i = 0; i < NUM_BARS; i++) {
const x = offset + i * totalBar; const x = offset + i * totalBar;
if (peakData[i] > 1) { if (peakData[i] > 1) {
@ -536,17 +536,17 @@ function drawSpectrum() {
const sx = labelW + i * (segW + segG); const sx = labelW + i * (segW + segG);
const on = i < lit; const on = i < lit;
const pi = Math.round(peak * segCount); const pi = Math.round(peak * segCount);
vuctx.fillStyle = on ? '#1a6df5' : '#151528'; vuctx.fillStyle = on ? '#84a0c6' : '#1e2132';
vuctx.fillRect(sx, y, segW, rowH); vuctx.fillRect(sx, y, segW, rowH);
if (on) { if (on) {
const grd = vuctx.createLinearGradient(0, y, 0, y + rowH); const grd = vuctx.createLinearGradient(0, y, 0, y + rowH);
grd.addColorStop(0, 'rgba(100,180,255,0.5)'); grd.addColorStop(0, 'rgba(145,172,209,0.5)');
grd.addColorStop(1, 'rgba(26,109,245,0.8)'); grd.addColorStop(1, 'rgba(132,160,198,0.8)');
vuctx.fillStyle = grd; vuctx.fillStyle = grd;
vuctx.fillRect(sx, y, segW, 2); vuctx.fillRect(sx, y, segW, 2);
} }
if (i === pi && peak > 0.05) { if (i === pi && peak > 0.05) {
vuctx.fillStyle = '#ff6a33'; vuctx.fillStyle = '#e98989';
vuctx.fillRect(sx, y, segW, rowH); vuctx.fillRect(sx, y, segW, rowH);
} }
} }
@ -1330,7 +1330,7 @@ content.addEventListener('dragenter', (e) => {
if (isInternalDrag) return; if (isInternalDrag) return;
e.preventDefault(); e.preventDefault();
dragCounter++; dragCounter++;
content.style.outline = '2px dashed #1a6df5'; content.style.outline = '2px dashed #84a0c6';
content.style.outlineOffset = '-12px'; content.style.outlineOffset = '-12px';
}); });