✦ StealThis .dev
Pages Medium

Music — Playlist Page (cover · tracks · share)

A dark, album-art-driven playlist detail page for a fictional collection called Neon Hours. A CSS-drawn four-tile mosaic cover themes the glassy header beside the title, curator, description and a live track-count, total runtime and likes line. A play, shuffle, like, share and overflow row sits above a searchable, sortable track table with per-row covers, play counts, like toggles and an active-row equalizer. Simulated playback drives a now-playing bar with a draggable, keyboard-seekable scrubber, a share popover with copy-link, and an inline-editable title.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Playlist Page (cover · tracks · share)

A full playlist detail page for the fictional collection Neon Hours by curator Velvet Static. The header pairs a large, fully CSS-drawn mosaic cover — four gradient tiles with a sweeping shine — against a glassy, theme-tinted backdrop. Beside it sit the playlist title, curator byline, description and a meta line that computes the track count, total runtime and like count from the data at load. A big green Play button leads a control row with shuffle, like, share and an overflow ”…” menu.

The track table lists each song with its own CSS-drawn cover, title, artist, album, date added, play count, a like toggle and a duration. Hovering a row swaps the index for a play triangle; the active track shows an animated equalizer and tints to the accent. A search box filters across title, artist and album in real time, and a sort dropdown reorders by title, artist, date added, most played or duration. Playback is fully simulated with timers — a glassy now-playing bar tracks elapsed time, auto-advances, and honors shuffle.

The scrubber supports click-to-seek, pointer dragging and ArrowLeft/ArrowRight keyboard seeking, exposing role="slider" with live aria-valuenow. Play, like and shuffle controls use aria-pressed, the share and overflow buttons use aria-expanded, and a small toast() helper confirms actions. The share popover carries quick-share chips and a copy-link field with clipboard fallback, and the playlist title is editable inline on click.

Illustrative UI only — fictional artists, albums, tracks, and data. No real audio playback.