# 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