213 lines
3.8 KiB
Markdown
213 lines
3.8 KiB
Markdown
# 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
|