Initial commit

2025-12-30 15:12:26 +01:00
commit 5934d24f7f
38 changed files with 7636 additions and 0 deletions
--- a/layout_plan.md
+++ b/layout_plan.md
@@ -0,0 +1,212 @@
+# Radio1 Player – Glassmorphism UI Redesign (Tauri + HTML)
+
+## Objective
+
+Redesign the **Radio1 Player** UI to match a **modern glassmorphism style** inspired by high-end music player apps.
+
+The app is built with:
+
+* **Tauri**
+* **HTML / CSS / Vanilla JS**
+* Desktop-first (Windows)
+
+The UI must feel:
+
+* Premium
+* Lightweight
+* Native
+* Smooth
+* Purple / neon themed
+
+---
+
+## Visual Reference
+
+Style inspiration:
+
+* Frosted glass cards
+* Soft purple / blue gradient background
+* Rounded corners everywhere
+* Subtle glow instead of hard borders
+* Floating controls
+
+Target aesthetic keywords:
+
+> glassmorphism, neon glow, frosted glass, modern music player, soft gradients
+
+---
+
+## Layout Structure
+
+Single centered player card:
+
+```
+┌──────────────────────────────┐
+│ Radio1 Player                │
+│ ● Playing / Ready            │
+│                              │
+│ [ Station Artwork / Logo ]   │
+│                              │
+│ Radio 1 MB                   │
+│ Live Stream                  │
+│                              │
+│ ────────●────────            │
+│                              │
+│   ⏮   ▶ / ⏸   ⏭             │
+│                              │
+│ 🔊 ─────●──── 50%            │
+└──────────────────────────────┘
+```
+
+---
+
+## Required UI Elements
+
+### Header
+
+* Title: `Radio1 Player`
+* Status indicator:
+
+  * `● Ready`
+  * `● Playing`
+  * `● Casting to <Device>`
+
+### Artwork Area
+
+* Square (1:1)
+* Rounded corners (20–24px)
+* Gradient or station logo
+* Soft glow around container
+
+### Metadata
+
+* Station name (Radio 1 MB)
+* Subtitle (Live Stream / Casting Mode)
+
+### Playback Controls
+
+* Previous (optional, visual only)
+* Play / Pause (primary accent button)
+* Next (optional, visual only)
+
+### Volume Control
+
+* Speaker icon
+* Horizontal slider
+* Percentage text
+* * / – buttons optional
+
+---
+
+## Color Palette
+
+```css
+--background-gradient: linear-gradient(135deg, #7b7fd8, #b57cf2);
+--glass-bg: rgba(255, 255, 255, 0.15);
+--glass-border: rgba(255, 255, 255, 0.25);
+--accent: #c77dff;
+--accent-glow: rgba(199, 125, 255, 0.7);
+--text-main: #ffffff;
+--text-muted: rgba(255, 255, 255, 0.65);
+--success: #7dffb3;
+--danger: #ff5f5f;
+```
+
+---
+
+## Styling Rules
+
+* Use **glassmorphism**
+
+  * `backdrop-filter: blur(20px)`
+  * Semi-transparent backgrounds
+* No hard borders
+* Use glow (`box-shadow`) instead of outlines
+* Large border radius (20–28px)
+* Smooth hover animations
+* No external UI libraries
+
+---
+
+## CSS Requirements
+
+* Must work inside **Tauri WebView**
+* Avoid heavy filters or SVG masks
+* Use `accent-color` for sliders
+* Buttons should animate on hover (`scale`, `glow`)
+
+---
+
+## Tauri-Specific Enhancements
+
+### Frameless Window
+
+```ts
+appWindow.setDecorations(false);
+```
+
+### Draggable Header
+
+```css
+header {
+  -webkit-app-region: drag;
+}
+button, input {
+  -webkit-app-region: no-drag;
+}
+```
+
+---
+
+## States to Support
+
+### Playback States
+
+* Ready
+* Playing locally
+* Casting to Google Speaker
+* Stopped
+
+### UI Feedback
+
+* Change accent glow when playing
+* Dim Play button when active
+* Update status text dynamically
+
+---
+
+## Accessibility & UX
+
+* Buttons ≥ 44px
+* Clear contrast for text
+* Keyboard accessible controls
+* Volume slider supports mouse wheel
+
+---
+
+## Non-Goals
+
+* No playlists
+* No track seeking (live stream)
+* No mobile layout
+* No heavy animations
+
+---
+
+## Success Criteria
+
+* UI visually matches glassmorphism inspiration
+* Smooth performance in Tauri
+* Looks premium and modern
+* Clean HTML & CSS
+* Easy to extend later
+
+---
+
+## Instructions for Copilot Agent
+
+* Generate **HTML + CSS only**
+* Keep JavaScript minimal
+* Prioritize visual fidelity
+* Avoid overengineering
+* Comment code where helpful