klevze/RadioPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visually fix

Browse Source
This commit is contained in:
Gregor Klevže
2026-01-02 13:25:10 +01:00
parent c5dc6b9dd4
commit e36bb1ab55
7 changed files with 632 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
android/app/src/main/assets/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio1 Player</title> <title>Radio Player</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="main.js" defer type="module"></script> <script src="main.js" defer type="module"></script>
</head> </head>

8
layout_plan.md
View File

@@ -1,8 +1,8 @@
# Radio1 Player – Glassmorphism UI Redesign (Tauri + HTML) # Radio Player – Glassmorphism UI Redesign (Tauri + HTML)
## Objective ## Objective
Redesign the **Radio1 Player** UI to match a **modern glassmorphism style** inspired by high-end music player apps. Redesign the **Radio Player** UI to match a **modern glassmorphism style** inspired by high-end music player apps.
The app is built with: The app is built with:
@@ -42,7 +42,7 @@ Single centered player card:
``` ```
┌──────────────────────────────┐ ┌──────────────────────────────┐
│ Radio1 Player │ │ Radio Player │
│ ● Playing / Ready │ │ ● Playing / Ready │
│ │ │ │
│ [ Station Artwork / Logo ] │ │ [ Station Artwork / Logo ] │
@@ -64,7 +64,7 @@ Single centered player card:
### Header ### Header
* Title: `Radio1 Player` * Title: `RadioPlayer`
* Status indicator: * Status indicator:
* `● Ready` * `● Ready`

2
sidecar/index.js
View File

@@ -175,7 +175,7 @@ function loadMedia(url) {
streamType: 'LIVE', streamType: 'LIVE',
metadata: { metadata: {
metadataType: 0, metadataType: 0,
title: 'Radio 1' title: 'RadioPlayer'
} }
}; };

2
src-tauri/check_log.txt
View File

@@ -1,4 +1,4 @@
Checking radio-tauri v0.1.0 (D:\Sites\Work\Radio1\radio-tauri\src-tauri) Checking radio-tauri v0.1.0 (D:\Sites\Work\RadioPlayer\radio-tauri\src-tauri)
warning: variable does not need to be mutable warning: variable does not need to be mutable
--> src\lib.rs:38:9 --> src\lib.rs:38:9
| |

82
src/index.html
View File

@@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio1 Player</title> <title>RadioPlayer</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script src="main.js" defer type="module"></script> <script src="main.js" defer type="module"></script>
</head> </head>
@@ -16,28 +16,27 @@
<main class="glass-card"> <main class="glass-card">
<header data-tauri-drag-region> <header data-tauri-drag-region>
<button id="menu-btn" class="icon-btn" aria-label="Menu"> <div class="header-top-row">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" <div class="header-icons-left" aria-hidden="true">
<button id="edit-stations-btn" class="icon-btn" title="Edit Stations" aria-label="Edit Stations">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line> <path d="M12 20h9" />
<line x1="3" y1="6" x2="21" y2="6"></line> <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg> </svg>
</button> </button>
<div class="header-info" data-tauri-drag-region> <button id="cast-toggle-btn" class="icon-btn" aria-label="Cast" title="Cast">
<span class="app-title">Radio1 Player</span>
<span class="status-indicator" id="status-indicator">
<span class="status-dot"></span> <span id="status-text">Ready</span>
</span>
</div>
<div class="header-buttons">
<button id="cast-toggle-btn" class="icon-btn" aria-label="Cast">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
<path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a14 14 0 0 1 14 14h-2" /> <path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a14 14 0 0 1 14 14h-2" />
</svg> </svg>
</button> </button>
<button id="close-btn" class="icon-btn close-btn" aria-label="Close"> </div>
<!-- status moved below station info -->
<div class="header-close">
<button id="close-btn" class="icon-btn close-btn" aria-label="Close" title="Close">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line> <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -45,6 +44,25 @@
</svg> </svg>
</button> </button>
</div> </div>
</div>
<div class="header-third-row">
<div class="header-icons">
<button id="edit-stations-btn" class="icon-btn" title="Edit Stations" aria-label="Edit Stations">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4 12.5-12.5z" />
</svg>
</button>
<button id="cast-toggle-btn" class="icon-btn" aria-label="Cast" title="Cast">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a14 14 0 0 1 14 14h-2" />
</svg>
</button>
</div>
</div>
</header> </header>
<section class="artwork-section"> <section class="artwork-section">
@@ -84,6 +102,10 @@
<section class="track-info"> <section class="track-info">
<h2 id="station-name">Radio 1 MB</h2> <h2 id="station-name">Radio 1 MB</h2>
<p id="station-subtitle">Live Stream</p> <p id="station-subtitle">Live Stream</p>
<div id="status-indicator" class="status-indicator-wrap" aria-hidden="true">
<span class="status-dot"></span>
<span id="status-text">Ready</span>
</div>
</section> </section>
<!-- Visual Progress Bar (Live) --> <!-- Visual Progress Bar (Live) -->
@@ -151,6 +173,36 @@
</div> </div>
</div> </div>
<!-- Stations Editor Overlay -->
<div id="editor-overlay" class="overlay hidden" aria-hidden="true">
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="editorTitle">
<h2 id="editorTitle">Edit Stations</h2>
<ul id="editor-list" class="device-list"></ul>
<form id="add-station-form">
<div style="margin-bottom:8px;">
<input id="us_title" placeholder="Title" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
</div>
<div style="margin-bottom:8px;">
<input id="us_url" placeholder="Stream URL" required style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
</div>
<div style="margin-bottom:8px;">
<input id="us_logo" placeholder="Logo URL (optional)" style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
</div>
<div style="margin-bottom:12px;">
<input id="us_www" placeholder="Website (optional)" style="width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit">
</div>
<input type="hidden" id="us_id">
<input type="hidden" id="us_index">
<div style="display:flex;gap:8px;">
<button id="us_save_btn" class="btn cancel" type="submit" style="flex:1">Save</button>
<button id="editor-close-btn" class="btn" type="button" style="flex:0;background:#6b6bff">Close</button>
</div>
</form>
</div>
</div>
</main> </main>
</div> </div>
</body> </body>

315
src/main.js
View File

@@ -27,6 +27,19 @@ const closeOverlayBtn = document.getElementById('close-overlay');
const deviceListEl = document.getElementById('device-list'); const deviceListEl = document.getElementById('device-list');
const logoTextEl = document.querySelector('.station-logo-text'); const logoTextEl = document.querySelector('.station-logo-text');
const logoImgEl = document.getElementById('station-logo-img'); const logoImgEl = document.getElementById('station-logo-img');
const artworkPlaceholder = document.querySelector('.artwork-placeholder');
// Editor elements
const editBtn = document.getElementById('edit-stations-btn');
const editorOverlay = document.getElementById('editor-overlay');
const editorCloseBtn = document.getElementById('editor-close-btn');
const editorListEl = document.getElementById('editor-list');
const addStationForm = document.getElementById('add-station-form');
const usTitle = document.getElementById('us_title');
const usUrl = document.getElementById('us_url');
const usLogo = document.getElementById('us_logo');
const usWww = document.getElementById('us_www');
const usId = document.getElementById('us_id');
const usIndex = document.getElementById('us_index');
// Init // Init
async function init() { async function init() {
@@ -62,8 +75,38 @@ async function loadStations() {
// Filter out disabled stations and those without a stream URL // Filter out disabled stations and those without a stream URL
.filter((s) => s.enabled !== false && s.url && s.url.length > 0); .filter((s) => s.enabled !== false && s.url && s.url.length > 0);
// Load user-defined stations from localStorage and merge
const user = loadUserStations();
const userNormalized = user
.map((s) => {
const name = s.title || s.name || s.id || 'UserStation';
const url = s.url || s.liveAudio || s.liveVideo || '';
return {
id: s.id || `user-${name.replace(/\s+/g, '-')}`,
name,
url,
logo: s.logo || '',
enabled: typeof s.enabled === 'boolean' ? s.enabled : true,
raw: s,
_user: true,
};
})
.filter((s) => s.url && s.url.length > 0);
// Append user stations after file stations
stations = stations.concat(userNormalized);
if (stations.length > 0) { if (stations.length > 0) {
// Try to restore last selected station by id
const lastId = getLastStationId();
if (lastId) {
const found = stations.findIndex(s => s.id === lastId);
if (found >= 0) currentIndex = found;
else currentIndex = 0;
} else {
currentIndex = 0; currentIndex = 0;
}
loadStation(currentIndex); loadStation(currentIndex);
} }
} catch (e) { } catch (e) {
@@ -72,6 +115,159 @@ async function loadStations() {
} }
} }
// --- User Stations (localStorage) ---
function loadUserStations() {
try {
const raw = localStorage.getItem('userStations');
if (!raw) return [];
return JSON.parse(raw);
} catch (e) {
console.error('Error reading user stations', e);
return [];
}
}
function saveUserStations(arr) {
try {
localStorage.setItem('userStations', JSON.stringify(arr || []));
} catch (e) {
console.error('Error saving user stations', e);
}
}
function openEditorOverlay() {
renderUserStationsList();
editorOverlay.classList.remove('hidden');
editorOverlay.setAttribute('aria-hidden', 'false');
}
function closeEditorOverlay() {
editorOverlay.classList.add('hidden');
editorOverlay.setAttribute('aria-hidden', 'true');
// clear form
addStationForm.reset();
usIndex.value = '';
}
function renderUserStationsList() {
const list = loadUserStations();
editorListEl.innerHTML = '';
if (!list || list.length === 0) {
editorListEl.innerHTML = '<li class="device"><div class="device-main">No user stations</div><div class="device-sub">Add your stream using the form below</div></li>';
return;
}
list.forEach((s, idx) => {
const li = document.createElement('li');
li.className = 'device';
const main = s.title || s.name || s.id || 'User Station';
const sub = s.url || '';
li.innerHTML = `<div style="display:flex;justify-content:space-between;align-items:center;">
<div>
<div class=\"device-main\">${main}</div>
<div class=\"device-sub\">${sub}</div>
</div>
<div style=\"display:flex;gap:8px;align-items:center;\">
<button data-idx=\"${idx}\" class=\"btn edit-btn\" style=\"background:#6bd3ff;color:#042\">Edit</button>
<button data-idx=\"${idx}\" class=\"btn delete-btn\" style=\"background:#ff6b6b\">Delete</button>
</div>
</div>`;
editorListEl.appendChild(li);
});
// Attach handlers
editorListEl.querySelectorAll('.edit-btn').forEach(b => {
b.addEventListener('click', () => {
const idx = Number(b.getAttribute('data-idx'));
editUserStation(idx);
});
});
editorListEl.querySelectorAll('.delete-btn').forEach(b => {
b.addEventListener('click', () => {
const idx = Number(b.getAttribute('data-idx'));
deleteUserStation(idx);
});
});
}
function editUserStation(idx) {
const list = loadUserStations();
const s = list[idx];
if (!s) return;
usTitle.value = s.title || s.name || '';
usUrl.value = s.url || s.liveAudio || '';
usLogo.value = s.logo || '';
usWww.value = s.www || s.website || '';
usId.value = s.id || '';
usIndex.value = String(idx);
}
function deleteUserStation(idx) {
const list = loadUserStations();
list.splice(idx, 1);
saveUserStations(list);
// refresh stations in runtime
refreshStationsFromSources();
renderUserStationsList();
}
function refreshStationsFromSources() {
// reload stations.json and user stations into `stations` array
// For simplicity, re-run loadStations()
loadStations();
}
// Persist last-selected station id between sessions
function saveLastStationId(id) {
try {
if (!id) return;
localStorage.setItem('lastStationId', id);
} catch (e) {
console.error('Failed to save last station id', e);
}
}
function getLastStationId() {
try {
return localStorage.getItem('lastStationId');
} catch (e) {
return null;
}
}
// Handle form submit (add/update)
addStationForm && addStationForm.addEventListener('submit', (e) => {
e.preventDefault();
const list = loadUserStations();
const station = {
id: usId.value || `user-${Date.now()}`,
title: usTitle.value.trim(),
url: usUrl.value.trim(),
logo: usLogo.value.trim(),
www: usWww.value.trim(),
enabled: true,
};
const idx = usIndex.value === '' ? -1 : Number(usIndex.value);
if (idx >= 0 && idx < list.length) {
list[idx] = station;
} else {
list.push(station);
}
saveUserStations(list);
renderUserStationsList();
refreshStationsFromSources();
addStationForm.reset();
usIndex.value = '';
});
// Editor button handlers
editBtn && editBtn.addEventListener('click', openEditorOverlay);
editorCloseBtn && editorCloseBtn.addEventListener('click', closeEditorOverlay);
function setupEventListeners() { function setupEventListeners() {
playBtn.addEventListener('click', togglePlay); playBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', playPrev); prevBtn.addEventListener('click', playPrev);
@@ -94,10 +290,10 @@ function setupEventListeners() {
}); });
// Menu button - explicit functionality or placeholder? // Menu button - explicit functionality or placeholder?
// For now just log or maybe show about // Menu removed — header click opens stations via artwork placeholder
document.getElementById('menu-btn').addEventListener('click', () => {
openStationsOverlay(); // Click artwork to open stations chooser
}); artworkPlaceholder && artworkPlaceholder.addEventListener('click', openStationsOverlay);
// Hotkeys? // Hotkeys?
} }
@@ -113,9 +309,18 @@ function loadStation(index) {
// Simple heuristic: if name has a number, use it, else first letter // Simple heuristic: if name has a number, use it, else first letter
// If station has a logo URL, show the image; otherwise show the text fallback // If station has a logo URL, show the image; otherwise show the text fallback
if (station.logo && station.logo.length > 0) { if (station.logo && station.logo.length > 0) {
// Verify the logo exists before showing it
checkImageExists(station.logo).then((exists) => {
if (exists) {
logoImgEl.src = station.logo; logoImgEl.src = station.logo;
logoImgEl.classList.remove('hidden'); logoImgEl.classList.remove('hidden');
logoTextEl.classList.add('hidden'); logoTextEl.classList.add('hidden');
} else {
logoImgEl.src = '';
logoImgEl.classList.add('hidden');
logoTextEl.classList.remove('hidden');
}
});
} else { } else {
// Fallback to single-letter/logo text // Fallback to single-letter/logo text
logoImgEl.src = ''; logoImgEl.src = '';
@@ -130,6 +335,39 @@ function loadStation(index) {
} }
} }
// Check if an image URL is reachable and valid
function checkImageExists(url, timeout = 6000) {
return new Promise((resolve) => {
if (!url) return resolve(false);
try {
const img = new Image();
let timedOut = false;
const t = setTimeout(() => {
timedOut = true;
img.src = ''; // stop load
resolve(false);
}, timeout);
img.onload = () => {
if (!timedOut) {
clearTimeout(t);
resolve(true);
}
};
img.onerror = () => {
if (!timedOut) {
clearTimeout(t);
resolve(false);
}
};
// Bypass caching oddities by assigning after handlers
img.src = url;
} catch (e) {
resolve(false);
}
});
}
async function togglePlay() { async function togglePlay() {
if (isPlaying) { if (isPlaying) {
await stop(); await stop();
@@ -202,6 +440,9 @@ async function playNext() {
currentIndex = (currentIndex + 1) % stations.length; currentIndex = (currentIndex + 1) % stations.length;
loadStation(currentIndex); loadStation(currentIndex);
// persist selection
saveLastStationId(stations[currentIndex].id);
if (wasPlaying) await play(); if (wasPlaying) await play();
} }
@@ -215,6 +456,9 @@ async function playPrev() {
currentIndex = (currentIndex - 1 + stations.length) % stations.length; currentIndex = (currentIndex - 1 + stations.length) % stations.length;
loadStation(currentIndex); loadStation(currentIndex);
// persist selection
saveLastStationId(stations[currentIndex].id);
if (wasPlaying) await play(); if (wasPlaying) await play();
} }
@@ -253,6 +497,8 @@ function handleVolumeInput() {
async function openCastOverlay() { async function openCastOverlay() {
castOverlay.classList.remove('hidden'); castOverlay.classList.remove('hidden');
castOverlay.setAttribute('aria-hidden', 'false'); castOverlay.setAttribute('aria-hidden', 'false');
// ensure cast overlay shows linear list style
deviceListEl.classList.remove('stations-grid');
deviceListEl.innerHTML = '<li class="device"><div class="device-main">Scanning...</div><div class="device-sub">Searching for speakers</div></li>'; deviceListEl.innerHTML = '<li class="device"><div class="device-main">Scanning...</div><div class="device-sub">Searching for speakers</div></li>';
try { try {
@@ -316,40 +562,75 @@ async function selectCastDevice(deviceName) {
window.addEventListener('DOMContentLoaded', init); window.addEventListener('DOMContentLoaded', init);
// Open overlay and show list of stations (used by menu/hamburger) // Open overlay and show list of stations (used by menu/hamburger)
function openStationsOverlay() { async function openStationsOverlay() {
castOverlay.classList.remove('hidden'); castOverlay.classList.remove('hidden');
castOverlay.setAttribute('aria-hidden', 'false'); castOverlay.setAttribute('aria-hidden', 'false');
deviceListEl.innerHTML = '<li class="device"><div class="device-main">Loading...</div><div class="device-sub">Preparing stations</div></li>'; deviceListEl.innerHTML = '<li class="device"><div class="device-main">Loading...</div><div class="device-sub">Preparing stations</div></li>';
// If stations not loaded yet, show message // If stations not loaded yet, show message
if (!stations || stations.length === 0) { if (!stations || stations.length === 0) {
deviceListEl.classList.remove('stations-grid');
deviceListEl.innerHTML = '<li class="device"><div class="device-main">No stations found</div><div class="device-sub">Check your stations.json</div></li>'; deviceListEl.innerHTML = '<li class="device"><div class="device-main">No stations found</div><div class="device-sub">Check your stations.json</div></li>';
return; return;
} }
// Render stations as responsive grid of cards (2-3 per row depending on width)
deviceListEl.classList.add('stations-grid');
deviceListEl.innerHTML = ''; deviceListEl.innerHTML = '';
stations.forEach((s, idx) => { for (let idx = 0; idx < stations.length; idx++) {
const s = stations[idx];
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'device' + (currentIndex === idx ? ' selected' : ''); li.className = 'station-card' + (currentIndex === idx ? ' selected' : '');
const logoUrl = s.logo || (s.raw && (s.raw.logo || s.raw.poster)) || '';
const title = s.name || s.title || s.id || 'Station';
const subtitle = (s.raw && s.raw.www) ? s.raw.www : (s.id || ''); const subtitle = (s.raw && s.raw.www) ? s.raw.www : (s.id || '');
li.innerHTML = `<div class="device-main">${s.name}</div><div class="device-sub">${subtitle}</div>`;
const left = document.createElement('div');
left.className = 'station-card-left';
// Check if logo exists, otherwise show fallback
const hasLogo = await checkImageExists(logoUrl);
if (hasLogo) {
const img = document.createElement('img');
img.className = 'station-card-logo';
img.src = logoUrl;
img.alt = `${title} logo`;
left.appendChild(img);
} else {
const fb = document.createElement('div');
fb.className = 'station-card-fallback';
fb.textContent = title.charAt(0).toUpperCase();
left.appendChild(fb);
}
const body = document.createElement('div');
body.className = 'station-card-body';
const tEl = document.createElement('div');
tEl.className = 'station-card-title';
tEl.textContent = title;
const sEl = document.createElement('div');
sEl.className = 'station-card-sub';
sEl.textContent = subtitle;
body.appendChild(tEl);
body.appendChild(sEl);
li.appendChild(left);
li.appendChild(body);
li.onclick = async () => { li.onclick = async () => {
// Always switch to local playback when selecting from stations menu
currentMode = 'local'; currentMode = 'local';
currentCastDevice = null; currentCastDevice = null;
castBtn.style.color = 'var(--text-main)'; castBtn.style.color = 'var(--text-main)';
// Select and play
currentIndex = idx; currentIndex = idx;
// Remember this selection
saveLastStationId(stations[idx].id);
loadStation(currentIndex); loadStation(currentIndex);
closeCastOverlay(); closeCastOverlay();
try { try { await play(); } catch (e) { console.error('Failed to play station from grid', e); }
await play();
} catch (e) {
console.error('Failed to play station from menu', e);
}
}; };
deviceListEl.appendChild(li); deviceListEl.appendChild(li);
}); }
} }

256
src/styles.css
View File

@@ -29,6 +29,14 @@ body {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background: linear-gradient(-45deg, #7b7fd8, #b57cf2, #8b5cf6, #6930c3, #7b7fd8); background: linear-gradient(-45deg, #7b7fd8, #b57cf2, #8b5cf6, #6930c3, #7b7fd8);
.status-indicator-wrap {
display:flex;
align-items:center;
gap:10px;
justify-content:center;
margin-top:8px;
color:var(--text-main);
}
background-size: 400% 400%; background-size: 400% 400%;
animation: gradientShift 12s ease-in-out infinite; animation: gradientShift 12s ease-in-out infinite;
font-family: 'Segoe UI', system-ui, sans-serif; font-family: 'Segoe UI', system-ui, sans-serif;
@@ -111,36 +119,96 @@ body {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
} }
/* Make whole card draggable for window movement; interactive children override with no-drag */
.glass-card {
-webkit-app-region: drag;
}
/* Header */ /* Header */
header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
-webkit-app-region: drag; /* Draggable area */ -webkit-app-region: drag; /* Draggable area */
padding: 10px 14px 8px 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(60,84,255,0.14), rgba(123,127,216,0.10));
border: 1px solid rgba(120,130,255,0.12);
box-shadow: 0 10px 30px rgba(28,25,60,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
backdrop-filter: blur(8px) saturate(120%);
position: relative;
z-index: 3;
} }
.header-top {
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}
.header-top-row {
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}
.header-icons-left { flex: 0 0 auto; display:flex; align-items:center; gap:8px; padding-left:8px; }
.header-center-status { flex:1; display:flex; justify-content:center; align-items:center; }
.header-close { flex:0 0 auto; }
.header-second-row {
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin-top:6px;
}
.status-indicator-wrap { display:flex; gap:8px; align-items:center; color:var(--text-main); }
.header-third-row { display:none; }
.header-left {
justify-content: flex-start;
flex: 0 0 auto;
}
.header-right {
justify-content: flex-end;
flex: 0 0 auto;
}
.app-title { text-align: center; }
.header-info { .header-info {
text-align: center; text-align: center;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 4px;
} }
.app-title { .app-title {
font-weight: 600; font-weight: 700;
font-size: 1rem; font-size: 1.05rem;
color: var(--text-main); color: var(--text-main);
letter-spacing: 0.4px;
} }
.status-indicator { .status-indicator {
font-size: 0.8rem; font-size: 0.85rem;
color: var(--success); color: var(--success);
margin-top: 4px; margin-top: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
} }
.status-dot { .status-dot {
@@ -152,26 +220,28 @@ header {
} }
.icon-btn { .icon-btn {
background: none; background: rgba(255,255,255,0.02);
border: none; border: 1px solid rgba(255,255,255,0.03);
color: var(--text-main); color: var(--text-main);
padding: 8px; padding: 8px;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background 0.2s; transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
-webkit-app-region: no-drag; /* Buttons clickable */ -webkit-app-region: no-drag; /* Buttons clickable */
} }
.icon-btn:hover { .icon-btn:hover {
background: rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.2);
} }
.header-buttons { .header-buttons {
display: flex; display: flex;
gap: 4px; gap: 8px;
align-items: center; align-items: center;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
@@ -195,8 +265,11 @@ header {
height: 220px; height: 220px;
border-radius: 24px; border-radius: 24px;
padding: 6px; /* spacing for ring */ padding: 6px; /* spacing for ring */
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)); background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
box-shadow: 5px 5px 15px rgba(0,0,0,0.1), inset 1px 1px 2px rgba(255,255,255,0.3); box-shadow: 0 12px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(8px) saturate(120%);
position: relative;
} }
.artwork-placeholder { .artwork-placeholder {
@@ -209,7 +282,28 @@ header {
align-items: center; align-items: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: inset 0 0 20px rgba(0,0,0,0.2); box-shadow: inset 0 0 30px rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.04);
}
/* glossy inner rim for artwork */
.artwork-container::after {
content: '';
position: absolute;
inset: 6px; /* follows padding to create rim */
border-radius: 20px;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -20px 40px rgba(255,255,255,0.02);
mix-blend-mode: overlay;
}
/* Make artwork clickable and give subtle hover feedback */
.artwork-placeholder {
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.artwork-placeholder:hover {
box-shadow: 0 18px 40px rgba(255, 255, 0, 0.45), inset 0 0 28px rgba(255,255,255,0.02);
} }
.artwork-placeholder { .artwork-placeholder {
@@ -541,6 +635,90 @@ input[type=range]::-webkit-slider-thumb {
overflow-y: auto; overflow-y: auto;
} }
/* Stations grid to show cards (used for stations overlay) */
.stations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
padding: 8px;
}
.station-card {
list-style: none;
padding: 12px;
border-radius: 14px;
cursor: pointer;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.06);
display: flex;
gap: 12px;
align-items: center;
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}
.station-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.station-card.selected {
background: linear-gradient(135deg, #c77dff, #8b5cf6);
color: #111;
box-shadow: 0 10px 30px rgba(199,125,255,0.22);
}
.station-card-left {
width: 56px;
height: 56px;
flex: 0 0 56px;
display:flex;
align-items:center;
justify-content:center;
}
.station-card-logo {
width: 56px;
height: 56px;
object-fit:contain;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
background: rgba(255,255,255,0.02);
}
.station-card-fallback {
width: 56px;
height: 56px;
border-radius: 10px;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:1.2rem;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
color: var(--text-main);
}
.station-card-body {
display:flex;
flex-direction:column;
gap:3px;
overflow:hidden;
}
.station-card-title {
font-weight:700;
font-size:0.95rem;
line-height:1.1;
}
.station-card-sub {
font-size:0.8rem;
color: rgba(255,255,255,0.7);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Device row */ /* Device row */
.device { .device {
padding: 12px 14px; padding: 12px 14px;
@@ -604,3 +782,51 @@ input[type=range]::-webkit-slider-thumb {
transform: scale(1.02); transform: scale(1.02);
background: #e17c8d; background: #e17c8d;
} }
/* Editor specific tweaks */
.modal form input {
outline: none;
}
/* Ensure editor overlay input fields look consistent */
#editor-list .device {
display: block;
}
.btn.edit-btn, .btn.delete-btn {
padding: 8px 10px;
border-radius: 10px;
border: none;
color: #fff;
font-weight: 700;
cursor: pointer;
}
#add-station-form button.btn {
border-radius: 10px;
}
/* Make modal form inputs visible on dark translucent background */
.modal input,
.modal textarea,
.modal select {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text-main);
padding: 10px 12px;
border-radius: 8px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.modal input::placeholder,
.modal textarea::placeholder {
color: rgba(255,255,255,0.55);
}
.btn {
padding: 10px 14px;
border-radius: 10px;
border: none;
cursor: pointer;
font-weight: 700;
}