RadioPlayer/layout_plan.md

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

--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

appWindow.setDecorations(false);

Draggable Header

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