radio95/RadioPlayer
0
1
Fork 0
mirror of https://github.com/radio95-rnt/RadioPlayer.git synced 2026-07-29 15:29:14 +02:00
Code Issues Activity

some design changes

Browse Source
This commit is contained in:
kuba
2026-04-18 20:54:01 +02:00
parent dae95d5298
commit ff8c9ec22e
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/web/index.html
+13 -11
View File
@@ -19,8 +19,8 @@
.left{flex:1.2; min-width:420px}
.right{flex:1; display:flex; flex-direction:column; gap:6px}
.frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
.frame-title{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
.frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 2px 0; transition: color 0.2s ease; }
.frame-title{ font-size:16px; color:var(--muted); margin-bottom:4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 2px 0; transition: color 0.2s ease; }
.frame-title:hover { color: #fff; }
.frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; margin-left: 8px; }
@@ -33,7 +33,7 @@
.now .track, .next .track {font-weight:400; font-size:14px; word-break:break-all}
.progress-wrap { display:flex; gap:10px; align-items:center}
.progress-bar { flex:1; height:10px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #2aa2ff); transition:width 0.5s linear}
.progress-fill { height:100%; width:0%; background:linear-gradient(45deg,var(--accent), #2aa2ff); transition: width 0.5s linear}
button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
button:hover, .btn:hover { background-color: var(--glass); }
@@ -42,13 +42,13 @@
.btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); }
ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
ul.playlist li{ padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
ul.playlist li{ padding:4px 6px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
ul.playlist li:hover{ background:rgba(255,255,255,0.04); }
ul.playlist li.current{background:rgba(62,166,255,0.08)}
ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
ul.playlist li.pointer{background:rgba(255,255,255,0.04)}
.controls{display:flex; gap:6px; margin-top:6px}
.controls{display:flex; gap:4px; margin-top:4px}
.listbox{
height:100%;
@@ -62,7 +62,7 @@
}
.listbox::-webkit-scrollbar { display: none; }
.listbox div.item{ padding:6px; border-radius:6px; transition: background-color 0.2s ease; }
.listbox div.item{ padding:4px; border-radius:6px; transition: background-color 0.2s ease; }
.listbox div.item:hover{background:rgba(255,255,255,0.04); cursor:pointer}
.listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
@@ -74,10 +74,10 @@
.small{font-size:12px; color:var(--muted)}
.muted{color:var(--muted); font-size:13px}
.footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 6px 18px rgba(2,8,16,0.6);}
.footer{display:flex; justify-content:space-between; gap:5px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 8px 18px rgba(2,8,16,0.6);}
.directory-grid {
display: flex;
gap: 12px;
gap: 8px;
flex-grow: 1;
overflow: hidden;
align-items: stretch;
@@ -106,7 +106,9 @@
margin-bottom: 8px;
}
#keybinds {display: flex; gap: 10px; align-items: center; white-space: nowrap; }
#keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 6px; font-family: "Consolas", monospace; font-size: 12px; }
#keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 4px; font-family: "Consolas", monospace; font-size: 12px; }
#clear-btn { margin: 8px; }
#whep-section { flex-shrink: 0; }
#whep-section .collapsible-content {
@@ -166,6 +168,7 @@
button, .btn {padding: 10px 14px}
.panel.right { height: auto; }
#section-playlist, #section-queue { flex: 1 1 auto; }
#keybinds {display: none;}
}
</style>
<script defer src="./reader.js"></script>
@@ -190,7 +193,6 @@
<div class="small" id="rds-text" style="margin-top:6px; color:var(--muted); font-family:'Consolas',monospace;"></div>
<div class="controls" style="margin-top:10px">
<button id="skip-btn" class="btn">⏭ Skip</button>
<button id="clear-btn" class="btn">✖ Clear Queue</button>
<div style="display:flex;align-items:center;gap:4px;border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:2px 4px">
<button id="skpn-dec" class="btn" style="padding:4px 10px;border:none">−</button>
<span style="font-size:13px;min-width:60px;text-align:center">Skip next: <b id="skpn-count">0</b></span>
@@ -216,7 +218,7 @@
</div>
<div class="box" id="section-queue">
<div class="frame-title" onclick="toggleSection('section-queue')">Queue</div>
<div class="frame-title" onclick="toggleSection('section-queue')"><div>Queue<button id="clear-btn" class="btn">✖ Clear</button></div></div>
<div class="collapsible-content listbox" id="queue-box" style="flex-grow: 1;">
<ul class="playlist" id="queue-ul"></ul>
</div>
modules/web/web.js
+3 -5
View File
@@ -158,7 +158,7 @@ function renderPlaylist() {
if(currentIndex !== null && Queue.length === 0 && i > currentIndex && i <= currentIndex + skipCount)
li.style.textDecoration = "line-through";
li.textContent = ` ${String(i).padStart(digits,'0')}: `;
li.textContent = li.textContent + (i === currentTrackIndex ? "▶ " : " ") + displayPath;
li.textContent = (i === currentTrackIndex ? "▶ " : " ") + li.textContent + displayPath;
ul.appendChild(li);
});
if(currentIndex !== null){
@@ -172,7 +172,7 @@ function renderQueue() {
ul.innerHTML = "";
Queue.forEach((element, i) => {
const li = document.createElement("li");
li.textContent = element;
li.textContent = element.replace(basePath, "").slice(1);
if(i < skipCount) li.style.textDecoration = "line-through";
ul.appendChild(li);
});
@@ -382,9 +382,7 @@ async function whepConnect() {
onStateChange: (state) => {
whepLog('State: ' + state);
if (state === 'closed') {
whepDisconnect();
}
if (state === 'closed') whepDisconnect();
}
});