Deep Work FM

Focus radio for engineers and coders — a static, single-page landing inspired by saloon.wtf, reimagined as a "tune in and ship deep work" room for builders.

Features

• One static page, no backend, no framework
• Dark + light toggle (sun/moon button, persisted to localStorage), default dark
• Three background scenes — rainy Loft, lightweight Ambient, and the current Track artwork
• Sparse play-first layout (big stacked title, stamp, cover, prev/play/next) inspired by truckplaylist.wtf
• Accessible: focus rings, 44px targets, prefers-reduced-motion, semantic controls (fieldset, native <progress>)

How the music works

The now-playing card plays this YouTube playlist in-page via the IFrame Player API (no API key):

Lofi Music | Epic Music | Study | Sleep Music

• Playback: visible 16:9 YouTube embed with native controls, plus custom prev / play-pause / next controls and a clickable progress bar
• Now playing: video title, channel, native video player, and "Track X of N" update on every track change
• Auto-advance: next video plays when one ends; the playlist loops
• Keyboard: Space = play/pause, ← / → = prev / next
• Link-out buttons: YouTube opens this playlist in a new tab; Spotify stays as an external focus playlist

To use a different playlist, change PLAYLIST_ID in index.html.

Serve over HTTP (not file://) so the YouTube player can load — see Run locally below.

Stack

• HTML5
• Custom CSS (styles.css) — dark + light theming via CSS variables
• Righteous + Poppins (Google Fonts)
• Inline SVG icons
• Vanilla JS (theme toggle + YouTube IFrame Player API)

Themes

Two themes — dark (default) and light — toggled via the sun/moon button in the top bar. Choice is saved to localStorage under dwfm-theme and restored on next load.

• Dark: near-black navy, soft blue/amber gradient glow, glass player card, high contrast
• Light: soft off-white, subtle blue accents, clean card, amber CTA

Theme palettes live in the [data-theme="dark"] / [data-theme="light"] blocks in styles.css.

Background scenes

Use the segmented control in the top bar to switch scenes. The selected scene is saved under dwfm-background.

• Loft: locally hosted rainy coding-room artwork from assets/deep-work-loft.jpg
• Ambient: the original CSS gradient with no image request
• Track: a blurred YouTube thumbnail that updates with the current video; the Ambient gradient remains behind it as a loading and error fallback

Theme-specific scrims keep the foreground readable in both dark and light modes. Scene transitions honor prefers-reduced-motion.

Run locally

python3 -m http.server 8080
# then open http://localhost:8080

Open http://localhost:8080 — the YouTube player needs HTTP, not file://.

Customize

What	Where
Brand / logo	assets/logo.svg, <title> in index.html
Video player	YouTube IFrame options and .cover-wrap in index.html / styles.css
Playlist source	PLAYLIST_ID in index.html
Background scenes	styles.css and background-scenes.js
Default background	data-background on <html> + dwfm-background key
Online count	.online-count in index.html
Social links	.platform-links anchors in index.html
Theme palettes	[data-theme="..."] blocks in styles.css
Default theme	data-theme on <html> in index.html + dwfm-theme key

Deploy

Any static host works (publish directory = .):

• GitHub Pages — push and enable Pages on repo root
• Netlify — drag-and-drop the folder, or connect the repo
• Vercel — import the repo; framework preset = Other / static

No environment variables or server required.

File layout

Pet project/
├── index.html
├── styles.css
├── background-scenes.js
├── README.md
├── tests/
│   └── background-scenes.test.js
└── assets/
    ├── deep-work-loft.jpg
    ├── logo.svg
    └── cover.svg

Accessibility notes

• Theme toggle is a single button with aria-pressed and a live label
• Background scenes use a labeled segmented control with aria-pressed states
• Playback uses native <progress> (no role="progressbar")
• The visible YouTube player retains native controls, keyboard support, and fullscreen
• Icon-only links have aria-label and title
• All interactive elements have visible :focus-visible rings
• prefers-reduced-motion disables the online-dot pulse and hover transforms
• Contrast meets WCAG AA/AAA on all four themes