페이지 Hard
Music — Artist Dashboard (streams · listeners · revenue)
A dark, for-artists analytics dashboard for the fictional act Neon Tides, built in plain HTML, CSS, and vanilla JS. Animated count-up KPI cards track total streams, monthly listeners, followers, and estimated revenue with trend deltas and sparklines. A smooth SVG area chart of streams over time toggles across 7d, 28d, and 12mo ranges with a hover tooltip, while a sortable top-tracks table, top-locations bar meters, and a milestones feed round it out, all backed by a simulated now-playing preview bar with a keyboard-accessible scrubber.
Lab에서 열기
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0b0b0f;
--bg-2: #13131a;
--surface: #1a1a22;
--surface-2: #22222c;
--text: #f4f4f7;
--muted: #a0a0ad;
--line: rgba(255, 255, 255, 0.10);
--line-2: rgba(255, 255, 255, 0.18);
--accent: #1db954;
--accent-2: #8b5cf6;
--accent-3: #ff3d71;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--r-full: 999px;
--shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
--shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background:
radial-gradient(1100px 620px at 12% -8%, rgba(139, 92, 246, 0.16), transparent 60%),
radial-gradient(900px 560px at 100% 0%, rgba(29, 185, 84, 0.12), transparent 58%),
var(--bg);
color: var(--text);
font-family: var(--font-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
/* ===== Layout ===== */
.app {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
}
/* ===== Sidebar ===== */
.sidebar {
border-right: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
padding: 22px 18px;
display: flex;
flex-direction: column;
gap: 22px;
position: sticky;
top: 0;
height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo {
width: 44px; height: 44px;
border-radius: var(--r-md);
background: linear-gradient(140deg, var(--accent), var(--accent-2));
display: grid; place-items: center;
box-shadow: var(--shadow-sm);
}
.brand__name { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name strong { font-family: var(--font-display); font-size: 16px; }
.brand__name span { font-size: 12px; color: var(--muted); }
/* equalizer logo */
.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.eq i {
width: 3px; background: #08110b; border-radius: 2px;
animation: bounce 1s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 90%; animation-delay: .15s; }
.eq i:nth-child(3) { height: 60%; animation-delay: .3s; }
.eq i:nth-child(4) { height: 100%; animation-delay: .45s; }
@keyframes bounce { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--r-sm);
color: var(--muted); text-decoration: none;
font-weight: 600; font-size: 14px;
transition: background .15s, color .15s;
}
.nav__item:hover { background: var(--surface); color: var(--text); }
.nav__item.is-active { background: var(--surface-2); color: var(--text); }
.nav__dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.sidebar__card {
margin-top: auto;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
padding: 14px;
display: flex; flex-direction: column; gap: 12px;
}
.release { display: flex; align-items: center; gap: 12px; }
.release__art { width: 46px; height: 46px; border-radius: 10px; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.release__meta { display: flex; flex-direction: column; line-height: 1.25; }
.release__meta strong { font-size: 13.5px; }
.release__meta span { font-size: 11.5px; color: var(--muted); }
/* CSS-drawn cover art */
[data-cover="reservoir"] {
background:
radial-gradient(60% 80% at 25% 20%, rgba(255, 255, 255, 0.35), transparent 55%),
conic-gradient(from 200deg at 70% 80%, var(--accent-2), var(--accent-3), #0d1b3a, var(--accent-2));
}
/* ===== Main ===== */
.main { padding: 26px 30px 120px; min-width: 0; }
.topbar {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.topbar h1 { font-size: 28px; }
.topbar__sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.avatar {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center;
font-weight: 700; font-size: 13px;
background: linear-gradient(140deg, var(--accent-3), var(--accent-2));
color: #fff; box-shadow: var(--shadow-sm);
}
/* segmented control */
.seg {
display: inline-flex; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-full); padding: 3px;
}
.seg__btn {
border: 0; background: transparent; color: var(--muted);
font: inherit; font-weight: 600; font-size: 13px;
padding: 7px 14px; border-radius: var(--r-full); cursor: pointer;
transition: background .15s, color .15s;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active { background: var(--accent); color: #06120a; box-shadow: 0 4px 14px rgba(29, 185, 84, 0.35); }
.seg__btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* buttons */
.btn {
border: 1px solid var(--line-2); background: var(--surface);
color: var(--text); font: inherit; font-weight: 600; font-size: 13.5px;
padding: 9px 16px; border-radius: var(--r-full); cursor: pointer;
transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: 12.5px; }
/* ===== KPI cards ===== */
.kpis {
display: grid; gap: 16px; margin-bottom: 18px;
grid-template-columns: repeat(4, 1fr);
}
.kpi {
position: relative; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--r-lg);
background: linear-gradient(180deg, var(--surface), var(--bg-2));
padding: 18px 18px 0; box-shadow: var(--shadow-sm);
}
.kpi::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: var(--accent);
}
.kpi[data-accent="accent-2"]::before { background: var(--accent-2); }
.kpi[data-accent="accent-3"]::before { background: var(--accent-3); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__label { color: var(--muted); font-size: 13px; font-weight: 600; }
.kpi__delta { font-size: 12px; font-weight: 700; white-space: nowrap; }
.kpi__delta.is-up { color: var(--accent); }
.kpi__delta.is-down { color: var(--accent-3); }
.kpi__value {
font-family: var(--font-display); font-weight: 700;
font-size: 30px; margin: 8px 0 12px; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.kpi__spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.kpi__spark i {
flex: 1; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--accent), rgba(29, 185, 84, 0.15));
transform-origin: bottom; transform: scaleY(0);
animation: grow .6s ease forwards;
}
.kpi[data-accent="accent-2"] .kpi__spark i { background: linear-gradient(180deg, var(--accent-2), rgba(139, 92, 246, 0.15)); }
.kpi[data-accent="accent-3"] .kpi__spark i { background: linear-gradient(180deg, var(--accent-3), rgba(255, 61, 113, 0.15)); }
@keyframes grow { to { transform: scaleY(1); } }
/* ===== Cards / grids ===== */
.grid { display: grid; gap: 16px; margin-bottom: 18px; }
.grid--2 { grid-template-columns: 1.6fr 1fr; }
.grid--tracks { grid-template-columns: 1.7fr 1fr; }
.card {
border: 1px solid var(--line); border-radius: var(--r-lg);
background: var(--surface); padding: 18px; box-shadow: var(--shadow-sm);
}
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__head h2 { font-size: 17px; }
.card__sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.legend { display: flex; gap: 14px; }
.legend__item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--accent { background: var(--accent); }
.dot--accent-2 { background: var(--accent-2); }
/* ===== Chart ===== */
.chart { position: relative; }
.chart__svg { width: 100%; height: 240px; display: block; }
.chart__grid line { stroke: var(--line); stroke-width: 1; }
.chart__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--a { stroke: var(--accent); filter: drop-shadow(0 4px 10px rgba(29, 185, 84, 0.4)); }
.chart__line--b { stroke: var(--accent-2); opacity: .85; }
.chart__area { stroke: none; }
.chart__cursor { fill: var(--accent); stroke: #06120a; stroke-width: 2; transition: opacity .15s; }
.chart__tip {
position: absolute; transform: translate(-50%, -120%);
background: var(--surface-2); border: 1px solid var(--line-2);
border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px;
pointer-events: none; white-space: nowrap; box-shadow: var(--shadow);
font-variant-numeric: tabular-nums; z-index: 3;
}
.chart__tip strong { font-family: var(--font-display); }
.chart__axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; }
/* ===== Activity feed ===== */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.feed__item { display: flex; gap: 12px; padding: 10px 8px; border-radius: var(--r-sm); transition: background .15s; }
.feed__item:hover { background: var(--surface-2); }
.feed__item p { margin: 0; font-size: 13.5px; }
.feed__item time { font-size: 11.5px; color: var(--muted); }
.feed__icon {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
display: grid; place-items: center; font-size: 13px;
}
.feed__icon--accent { background: rgba(29, 185, 84, 0.16); color: var(--accent); }
.feed__icon--accent-2 { background: rgba(139, 92, 246, 0.18); color: var(--accent-2); }
.feed__icon--accent-3 { background: rgba(255, 61, 113, 0.16); color: var(--accent-3); }
/* ===== Tracks table ===== */
.table-wrap { overflow-x: auto; }
.ttable { width: 100%; border-collapse: collapse; min-width: 560px; }
.ttable th, .ttable td { padding: 11px 10px; text-align: left; }
.ttable thead th {
font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line);
user-select: none;
}
.ttable th[data-sort] { cursor: pointer; transition: color .15s; }
.ttable th[data-sort]:hover { color: var(--text); }
.ttable th.is-num, .ttable td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ttable th.is-sorted { color: var(--accent); }
.caret { display: inline-block; width: 10px; }
.ttable tbody tr { border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.ttable tbody tr:last-child { border-bottom: 0; }
.ttable tbody tr:hover { background: var(--surface-2); }
.ttable tbody tr.is-playing { background: rgba(29, 185, 84, 0.08); }
.ttable__rank { width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trk { display: flex; align-items: center; gap: 12px; }
.trk__art { width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.trk__title { font-weight: 600; font-size: 14px; }
.trk__album { font-size: 11.5px; color: var(--muted); }
.miniEq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 8px; vertical-align: middle; }
.miniEq i { width: 3px; background: var(--accent); border-radius: 2px; animation: bounce .9s ease-in-out infinite; }
.miniEq i:nth-child(2) { animation-delay: .2s; }
.miniEq i:nth-child(3) { animation-delay: .4s; }
.miniEq i:nth-child(1) { height: 60%; }
.miniEq i:nth-child(2) { height: 100%; }
.miniEq i:nth-child(3) { height: 45%; }
.pos { color: var(--accent); font-weight: 700; }
/* ===== Locations ===== */
.locs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.loc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.loc__name { font-size: 13.5px; font-weight: 600; }
.loc__val { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.meter__fill {
height: 100%; border-radius: var(--r-full); width: 0;
background: linear-gradient(90deg, var(--accent-2), var(--accent));
transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
/* ===== Now-playing bar ===== */
.nowplay {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
width: min(720px, calc(100% - 36px));
display: flex; align-items: center; gap: 14px;
background: rgba(26, 26, 34, 0.92); backdrop-filter: blur(14px);
border: 1px solid var(--line-2); border-radius: var(--r-lg);
padding: 12px 16px; box-shadow: var(--shadow); z-index: 40;
}
.nowplay__art { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.nowplay__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 96px; }
.nowplay__meta strong { font-size: 13.5px; }
.nowplay__meta span { font-size: 11.5px; color: var(--muted); }
.nowplay__time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.playbtn {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
border: 0; background: var(--accent); color: #06120a; cursor: pointer;
display: grid; place-items: center; transition: transform .1s;
}
.playbtn:hover { transform: scale(1.05); }
.playbtn:active { transform: scale(.96); }
.playbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.playbtn__icon {
width: 0; height: 0; margin-left: 2px;
border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.playbtn[aria-pressed="true"] .playbtn__icon {
width: 11px; height: 12px; margin-left: 0; border: 0;
border-left: 4px solid currentColor; border-right: 4px solid currentColor;
}
.scrub {
position: relative; flex: 1; height: 6px; border-radius: var(--r-full);
background: var(--surface-2); cursor: pointer; min-width: 60px;
}
.scrub:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
.scrub__fill { position: absolute; inset: 0; width: 0; border-radius: var(--r-full); background: var(--accent); }
.scrub__knob {
position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
width: 13px; height: 13px; border-radius: 50%; background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity .15s;
}
.scrub:hover .scrub__knob, .scrub:focus-visible .scrub__knob { opacity: 1; }
.iconbtn {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--line); background: transparent; color: var(--muted);
cursor: pointer; font-size: 13px; transition: background .15s, color .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* ===== Toast ===== */
.toast {
position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 16px);
background: var(--surface-2); border: 1px solid var(--line-2);
color: var(--text); padding: 11px 18px; border-radius: var(--r-full);
font-size: 13px; font-weight: 600; box-shadow: var(--shadow);
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* ===== Responsive ===== */
@media (max-width: 980px) {
.app { grid-template-columns: 1fr; }
.sidebar {
position: static; height: auto; flex-direction: row; align-items: center;
flex-wrap: wrap; gap: 16px;
}
.nav { flex-direction: row; flex-wrap: wrap; }
.sidebar__card { margin: 0; flex: 1; min-width: 240px; }
.kpis { grid-template-columns: repeat(2, 1fr); }
.grid--2, .grid--tracks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.main { padding: 18px 16px 130px; }
.topbar h1 { font-size: 23px; }
.topbar__actions { width: 100%; justify-content: space-between; }
.kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { padding: 14px 14px 0; }
.kpi__value { font-size: 24px; }
.sidebar { flex-direction: column; align-items: stretch; }
.nav { gap: 4px; }
.nowplay { gap: 10px; padding: 10px 12px; flex-wrap: wrap; }
.nowplay__time { order: 5; }
.legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* Visibility guard: honor the [hidden] attribute over base display */
.nowplay[hidden] {
display: none;
}(function () {
"use strict";
var $ = function (s, r) { return (r || document).querySelector(s); };
var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
var reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- toast ---------- */
var toastHost = $("[data-toast-host]");
var toastTimer;
function toast(msg) {
toastHost.textContent = msg;
toastHost.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastHost.classList.remove("is-show"); }, 2200);
}
$$("[data-toast]").forEach(function (el) {
el.addEventListener("click", function () { toast(el.getAttribute("data-toast")); });
});
/* ---------- formatting ---------- */
function fmtInt(n) { return Math.round(n).toLocaleString("en-US"); }
function fmtUsd(n) { return "$" + Math.round(n).toLocaleString("en-US"); }
function fmtCompact(n) {
if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, "") + "K";
return String(n);
}
function fmtTime(sec) {
var m = Math.floor(sec / 60), s = Math.floor(sec % 60);
return m + ":" + (s < 10 ? "0" : "") + s;
}
/* ---------- count-up KPIs ---------- */
function countUp(el) {
var target = parseFloat(el.getAttribute("data-count"));
var fmt = el.getAttribute("data-format");
var render = fmt === "usd" ? fmtUsd : fmtInt;
if (reduce) { el.textContent = render(target); return; }
var dur = 1100, start = performance.now();
function step(now) {
var p = Math.min(1, (now - start) / dur);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = render(target * eased);
if (p < 1) requestAnimationFrame(step);
}
requestAnimationFrame(step);
}
$$("[data-count]").forEach(countUp);
/* ---------- sparklines ---------- */
$$("[data-spark]").forEach(function (el) {
var vals = el.getAttribute("data-spark").split(",").map(Number);
var max = Math.max.apply(null, vals);
vals.forEach(function (v, i) {
var bar = document.createElement("i");
bar.style.height = (v / max * 100) + "%";
bar.style.animationDelay = (i * 45) + "ms";
el.appendChild(bar);
});
});
/* =====================================================
CHART
===================================================== */
var svg = $("[data-chart] .chart__svg");
var W = 600, H = 240, PAD = 14;
var lineA = $("[data-line-a]"), lineB = $("[data-line-b]");
var areaA = $("[data-area-a]"), areaB = $("[data-area-b]");
var gridG = $("[data-grid]"), cursor = $("[data-cursor]");
var tip = $("[data-tip]"), axis = $("[data-axis]");
var subTotal = $("[data-chart-total]"), subEl = $("[data-chart-sub]");
function seeded(seed) {
return function () { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
}
// build datasets per range: [labels[], streams[], listeners[]]
function buildData(range) {
var rnd = seeded(range === "7d" ? 11 : range === "28d" ? 42 : 99);
var n, labels = [], base, slope, vol;
if (range === "7d") { n = 7; base = 78000; slope = 1400; vol = 9000; }
else if (range === "28d") { n = 28; base = 70000; slope = 700; vol = 11000; }
else { n = 12; base = 1500000; slope = 80000; vol = 220000; }
var dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
var months = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
var streams = [], listeners = [];
for (var i = 0; i < n; i++) {
var s = base + slope * i + (rnd() - 0.45) * vol;
s = Math.max(base * 0.4, s);
streams.push(s);
listeners.push(s * (0.34 + rnd() * 0.05));
if (range === "7d") labels.push(dayNames[i % 7]);
else if (range === "28d") labels.push(i % 4 === 0 ? "W" + (Math.floor(i / 7) + 1) : "");
else labels.push(months[i % 12]);
}
return { n: n, labels: labels, streams: streams, listeners: listeners };
}
function pathFor(data, key, max) {
var n = data.n, pts = [];
for (var i = 0; i < n; i++) {
var x = PAD + (i / (n - 1)) * (W - PAD * 2);
var y = H - PAD - (data[key][i] / max) * (H - PAD * 2);
pts.push([x, y]);
}
var d = "M" + pts[0][0] + "," + pts[0][1];
for (var j = 1; j < pts.length; j++) {
var p0 = pts[j - 1], p1 = pts[j];
var cx = (p0[0] + p1[0]) / 2;
d += " C" + cx + "," + p0[1] + " " + cx + "," + p1[1] + " " + p1[0] + "," + p1[1];
}
return { d: d, pts: pts };
}
var current = null;
function renderChart(range) {
var data = buildData(range);
var max = Math.max.apply(null, data.streams) * 1.1;
var pa = pathFor(data, "streams", max);
var pb = pathFor(data, "listeners", max);
lineA.setAttribute("d", pa.d);
lineB.setAttribute("d", pb.d);
areaA.setAttribute("d", pa.d + " L" + (W - PAD) + "," + (H - PAD) + " L" + PAD + "," + (H - PAD) + " Z");
areaB.setAttribute("d", pb.d + " L" + (W - PAD) + "," + (H - PAD) + " L" + PAD + "," + (H - PAD) + " Z");
// grid
gridG.innerHTML = "";
for (var g = 0; g <= 3; g++) {
var gy = PAD + g * ((H - PAD * 2) / 3);
var ln = document.createElementNS("http://www.w3.org/2000/svg", "line");
ln.setAttribute("x1", PAD); ln.setAttribute("x2", W - PAD);
ln.setAttribute("y1", gy); ln.setAttribute("y2", gy);
gridG.appendChild(ln);
}
// axis labels
axis.innerHTML = "";
var step = data.n > 8 ? Math.ceil(data.n / 6) : 1;
for (var a = 0; a < data.n; a += step) {
var sp = document.createElement("span");
sp.textContent = data.labels[a] ||
(range === "28d" ? "D" + (a + 1) : "");
axis.appendChild(sp);
}
var total = data.streams.reduce(function (x, y) { return x + y; }, 0);
subTotal.textContent = fmtCompact(Math.round(total));
var labelMap = { "7d": "Last 7 days", "28d": "Last 28 days", "12mo": "Last 12 months" };
subEl.innerHTML = labelMap[range] + " · <strong data-chart-total>" + fmtCompact(Math.round(total)) + "</strong> streams";
// line draw animation
if (!reduce) {
[lineA, lineB].forEach(function (ln) {
var len = ln.getTotalLength();
ln.style.transition = "none";
ln.style.strokeDasharray = len;
ln.style.strokeDashoffset = len;
// force reflow
void ln.getBoundingClientRect();
ln.style.transition = "stroke-dashoffset .8s ease";
ln.style.strokeDashoffset = 0;
});
}
current = { data: data, pts: pa.pts, range: range };
}
// hover interaction
function pointerMove(ev) {
if (!current) return;
var rect = svg.getBoundingClientRect();
var clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
var relX = (clientX - rect.left) / rect.width;
var idx = Math.round(relX * (current.data.n - 1));
idx = Math.max(0, Math.min(current.data.n - 1, idx));
var p = current.pts[idx];
cursor.setAttribute("cx", p[0]);
cursor.setAttribute("cy", p[1]);
cursor.style.opacity = 1;
tip.hidden = false;
tip.style.left = (p[0] / W * 100) + "%";
tip.style.top = (p[1] / H * 100) + "%";
var lab = current.data.labels[idx] || ((current.range === "28d" ? "Day " : "#") + (idx + 1));
tip.innerHTML = "<strong>" + fmtCompact(Math.round(current.data.streams[idx])) + "</strong> streams<br>" +
fmtCompact(Math.round(current.data.listeners[idx])) + " listeners · " + lab;
}
function pointerLeave() { cursor.style.opacity = 0; tip.hidden = true; }
svg.addEventListener("mousemove", pointerMove);
svg.addEventListener("mouseleave", pointerLeave);
svg.addEventListener("touchmove", pointerMove, { passive: true });
svg.addEventListener("touchend", pointerLeave);
// range toggle
$$(".seg__btn").forEach(function (btn) {
btn.addEventListener("click", function () {
$$(".seg__btn").forEach(function (b) { b.classList.remove("is-active"); b.removeAttribute("aria-pressed"); });
btn.classList.add("is-active"); btn.setAttribute("aria-pressed", "true");
renderChart(btn.getAttribute("data-range"));
});
});
renderChart("28d");
/* =====================================================
TRACKS TABLE (sortable)
===================================================== */
var COVERS = ["a", "b", "c", "d", "e", "f"];
var tracks = [
{ title: "Paper Lanterns", album: "Midnight Reservoir", streams: 1042310, listeners: 318044, saves: 84210, revenue: 4118, dur: 222 },
{ title: "Velvet Static", album: "Midnight Reservoir", streams: 884502, listeners: 271338, saves: 71044, revenue: 3496, dur: 198 },
{ title: "Neon Tides", album: "Glass Harbour", streams: 652180, listeners: 204710, saves: 58330, revenue: 2577, dur: 241 },
{ title: "Cassette Sunrise", album: "Glass Harbour", streams: 498744, listeners: 162005, saves: 40118, revenue: 1972, dur: 187 },
{ title: "Halftone Heart", album: "Midnight Reservoir", streams: 421066, listeners: 138902, saves: 33890, revenue: 1664, dur: 263 },
{ title: "Saltwater Radio", album: "Singles", streams: 312901, listeners: 109774, saves: 25612, revenue: 1237, dur: 174 },
{ title: "Low Orbit", album: "Glass Harbour", streams: 268540, listeners: 95011, saves: 21008, revenue: 1062, dur: 209 },
{ title: "Driftwood", album: "Singles", streams: 190233, listeners: 71288, saves: 16240, revenue: 752, dur: 231 }
];
tracks.forEach(function (t, i) { t.cover = COVERS[i % COVERS.length]; });
var tbody = $("[data-tbody]");
var sortKey = "streams", sortDir = -1;
var playingTitle = null;
function coverGradient(key) {
var grads = {
a: "conic-gradient(from 200deg at 70% 80%, var(--accent-2), var(--accent-3), #0d1b3a, var(--accent-2))",
b: "linear-gradient(140deg, var(--accent), #0a3d2a, #062018)",
c: "radial-gradient(70% 90% at 30% 20%, var(--accent-3), #2a0d2e 70%)",
d: "linear-gradient(135deg, var(--accent-2), #1a1145, var(--accent-3))",
e: "conic-gradient(from 40deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent))",
f: "radial-gradient(60% 80% at 60% 30%, #ffd36b, var(--accent-3) 60%, #2a0d2e)"
};
return grads[key] || grads.a;
}
function renderTable() {
var sorted = tracks.slice().sort(function (a, b) {
if (sortKey === "title") return a.title.localeCompare(b.title) * sortDir;
return (a[sortKey] - b[sortKey]) * sortDir;
});
tbody.innerHTML = "";
sorted.forEach(function (t, i) {
var tr = document.createElement("tr");
tr.setAttribute("data-title", t.title);
if (t.title === playingTitle) tr.classList.add("is-playing");
var rank = t.title === playingTitle
? '<span class="miniEq" aria-hidden="true"><i></i><i></i><i></i></span>'
: (i + 1);
tr.innerHTML =
'<td class="ttable__rank">' + rank + '</td>' +
'<td class="is-text"><div class="trk">' +
'<span class="trk__art" style="background:' + coverGradient(t.cover) + '"></span>' +
'<span><span class="trk__title">' + t.title + '</span><br>' +
'<span class="trk__album">' + t.album + ' · ' + fmtTime(t.dur) + '</span></span>' +
'</div></td>' +
'<td class="is-num">' + fmtInt(t.streams) + '</td>' +
'<td class="is-num">' + fmtInt(t.listeners) + '</td>' +
'<td class="is-num">' + fmtInt(t.saves) + '</td>' +
'<td class="is-num">' + fmtUsd(t.revenue) + '</td>';
tr.addEventListener("click", function () { playTrack(t); });
tbody.appendChild(tr);
});
$$(".ttable th[data-sort]").forEach(function (th) {
var key = th.getAttribute("data-sort");
var caret = $(".caret", th);
th.classList.toggle("is-sorted", key === sortKey);
if (key === sortKey) {
th.setAttribute("aria-sort", sortDir === -1 ? "descending" : "ascending");
if (caret) caret.textContent = sortDir === -1 ? "▾" : "▴";
} else {
th.removeAttribute("aria-sort");
if (caret) caret.textContent = "";
}
});
}
$$(".ttable th[data-sort]").forEach(function (th) {
th.addEventListener("click", function () {
var key = th.getAttribute("data-sort");
if (key === sortKey) sortDir *= -1;
else { sortKey = key; sortDir = key === "title" ? 1 : -1; }
renderTable();
});
});
renderTable();
/* =====================================================
TOP LOCATIONS
===================================================== */
var locs = [
{ name: "Los Angeles, US", val: 42118 },
{ name: "London, UK", val: 36740 },
{ name: "Berlin, DE", val: 28902 },
{ name: "Mexico City, MX", val: 24515 },
{ name: "Tokyo, JP", val: 19330 },
{ name: "São Paulo, BR", val: 15208 }
];
var locHost = $("[data-locs]");
var locMax = locs[0].val;
locs.forEach(function (l) {
var li = document.createElement("li");
li.innerHTML =
'<div class="loc__row"><span class="loc__name">' + l.name + '</span>' +
'<span class="loc__val">' + fmtInt(l.val) + '</span></div>' +
'<div class="meter"><div class="meter__fill"></div></div>';
locHost.appendChild(li);
var fill = $(".meter__fill", li);
requestAnimationFrame(function () {
requestAnimationFrame(function () { fill.style.width = (l.val / locMax * 100) + "%"; });
});
});
/* =====================================================
NOW-PLAYING PREVIEW (simulated)
===================================================== */
var np = $("[data-nowplay]");
var npTitle = $("[data-np-title]");
var npCur = $("[data-np-cur]");
var npDur = $("[data-np-dur]");
var npToggle = $("[data-np-toggle]");
var npClose = $("[data-np-close]");
var scrub = $("[data-scrub]");
var scrubFill = $("[data-scrub-fill]");
var cur = null; // current track
var pos = 0; // seconds
var playing = false;
var raf = null, last = 0;
function setProgress() {
var pct = cur ? Math.min(100, pos / cur.dur * 100) : 0;
scrubFill.style.width = pct + "%";
scrub.setAttribute("aria-valuenow", Math.round(pct));
npCur.textContent = fmtTime(pos);
}
function tick(now) {
if (!playing || !cur) return;
if (!last) last = now;
pos += (now - last) / 1000;
last = now;
if (pos >= cur.dur) { pos = cur.dur; setProgress(); pause(); toast("Preview ended."); return; }
setProgress();
raf = requestAnimationFrame(tick);
}
function play() {
if (!cur) return;
playing = true; last = 0;
npToggle.setAttribute("aria-pressed", "true");
npToggle.setAttribute("aria-label", "Pause preview");
if (!reduce) raf = requestAnimationFrame(tick);
}
function pause() {
playing = false;
if (raf) cancelAnimationFrame(raf);
npToggle.setAttribute("aria-pressed", "false");
npToggle.setAttribute("aria-label", "Play preview");
}
function playTrack(t) {
cur = t; pos = 0;
np.hidden = false;
npTitle.textContent = t.title;
npDur.textContent = fmtTime(t.dur);
playingTitle = t.title;
setProgress();
renderTable();
play();
}
npToggle.addEventListener("click", function () { playing ? pause() : play(); });
npClose.addEventListener("click", function () {
pause(); np.hidden = true; playingTitle = null; cur = null; renderTable();
});
// scrubber: click + drag + keyboard
function seekFromEvent(ev) {
if (!cur) return;
var rect = scrub.getBoundingClientRect();
var clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
var p = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
pos = p * cur.dur; setProgress();
}
var dragging = false;
scrub.addEventListener("mousedown", function (e) { dragging = true; seekFromEvent(e); });
window.addEventListener("mousemove", function (e) { if (dragging) seekFromEvent(e); });
window.addEventListener("mouseup", function () { dragging = false; });
scrub.addEventListener("touchstart", function (e) { seekFromEvent(e); }, { passive: true });
scrub.addEventListener("touchmove", function (e) { seekFromEvent(e); }, { passive: true });
scrub.addEventListener("keydown", function (e) {
if (!cur) return;
var d = 0;
if (e.key === "ArrowRight" || e.key === "ArrowUp") d = 5;
else if (e.key === "ArrowLeft" || e.key === "ArrowDown") d = -5;
else if (e.key === "Home") { pos = 0; setProgress(); e.preventDefault(); return; }
else if (e.key === "End") { pos = cur.dur; setProgress(); e.preventDefault(); return; }
else return;
pos = Math.max(0, Math.min(cur.dur, pos + d)); setProgress(); e.preventDefault();
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Neon Tides — Artist Dashboard</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
<!-- Sidebar -->
<aside class="sidebar">
<div class="brand">
<div class="brand__logo" aria-hidden="true">
<span class="eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
</div>
<div class="brand__name">
<strong>Neon Tides</strong>
<span>for Artists</span>
</div>
</div>
<nav class="nav" aria-label="Dashboard sections">
<a class="nav__item is-active" href="#" aria-current="page">
<span class="nav__dot"></span> Overview
</a>
<a class="nav__item" href="#">Audience</a>
<a class="nav__item" href="#">Music</a>
<a class="nav__item" href="#">Revenue</a>
<a class="nav__item" href="#">Marketing</a>
<a class="nav__item" href="#">Settings</a>
</nav>
<div class="sidebar__card">
<div class="release">
<div class="release__art" data-cover="reservoir" aria-hidden="true"></div>
<div class="release__meta">
<strong>Midnight Reservoir</strong>
<span>New release · 4 days ago</span>
</div>
</div>
<button class="btn btn--ghost btn--block" type="button" data-toast="Pitch sent to editorial team.">
Pitch a playlist
</button>
</div>
</aside>
<!-- Main -->
<main class="main">
<header class="topbar">
<div class="topbar__head">
<h1>Overview</h1>
<p class="topbar__sub">Performance for <strong>Neon Tides</strong> · Last updated just now</p>
</div>
<div class="topbar__actions">
<div class="seg" role="group" aria-label="Date range">
<button class="seg__btn" type="button" data-range="7d">7d</button>
<button class="seg__btn is-active" type="button" data-range="28d" aria-pressed="true">28d</button>
<button class="seg__btn" type="button" data-range="12mo">12mo</button>
</div>
<button class="btn btn--ghost" type="button" data-toast="Report exported as CSV.">Export</button>
<div class="avatar" title="Neon Tides">NT</div>
</div>
</header>
<!-- KPI cards -->
<section class="kpis" aria-label="Key metrics">
<article class="kpi" data-accent="accent">
<div class="kpi__top">
<span class="kpi__label">Total streams</span>
<span class="kpi__delta is-up" data-delta="streams">▲ 12.4%</span>
</div>
<div class="kpi__value" data-count="2486213" data-format="int">0</div>
<div class="kpi__spark" data-spark="6,10,8,14,12,18,16,22,20,26,24,30"></div>
</article>
<article class="kpi" data-accent="accent-2">
<div class="kpi__top">
<span class="kpi__label">Monthly listeners</span>
<span class="kpi__delta is-up" data-delta="listeners">▲ 7.8%</span>
</div>
<div class="kpi__value" data-count="412908" data-format="int">0</div>
<div class="kpi__spark" data-spark="10,12,11,14,13,16,15,18,17,19,18,21"></div>
</article>
<article class="kpi" data-accent="accent-3">
<div class="kpi__top">
<span class="kpi__label">Followers</span>
<span class="kpi__delta is-up" data-delta="followers">▲ 3.1%</span>
</div>
<div class="kpi__value" data-count="187540" data-format="int">0</div>
<div class="kpi__spark" data-spark="8,9,9,11,10,12,13,12,14,15,16,17"></div>
</article>
<article class="kpi" data-accent="accent">
<div class="kpi__top">
<span class="kpi__label">Est. revenue</span>
<span class="kpi__delta is-down" data-delta="revenue">▼ 1.6%</span>
</div>
<div class="kpi__value" data-count="9842" data-format="usd">0</div>
<div class="kpi__spark" data-spark="14,16,15,17,16,15,16,14,15,13,14,12"></div>
</article>
</section>
<!-- Chart + activity -->
<section class="grid grid--2">
<article class="card chart-card">
<header class="card__head">
<div>
<h2>Streams over time</h2>
<p class="card__sub" data-chart-sub>Last 28 days · <strong data-chart-total>—</strong> streams</p>
</div>
<div class="legend">
<span class="legend__item"><i class="dot dot--accent"></i> Streams</span>
<span class="legend__item"><i class="dot dot--accent-2"></i> Listeners</span>
</div>
</header>
<div class="chart" data-chart>
<svg class="chart__svg" viewBox="0 0 600 240" preserveAspectRatio="none" role="img" aria-label="Streams over time area chart">
<defs>
<linearGradient id="fillA" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--accent)" stop-opacity="0.35" />
<stop offset="100%" stop-color="var(--accent)" stop-opacity="0" />
</linearGradient>
<linearGradient id="fillB" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="var(--accent-2)" stop-opacity="0.22" />
<stop offset="100%" stop-color="var(--accent-2)" stop-opacity="0" />
</linearGradient>
</defs>
<g class="chart__grid" data-grid></g>
<path class="chart__area" data-area-b fill="url(#fillB)" d="" />
<path class="chart__line chart__line--b" data-line-b d="" />
<path class="chart__area" data-area-a fill="url(#fillA)" d="" />
<path class="chart__line chart__line--a" data-line-a d="" />
<circle class="chart__cursor" data-cursor r="4" cx="-10" cy="-10" />
</svg>
<div class="chart__tip" data-tip hidden></div>
<div class="chart__axis" data-axis></div>
</div>
</article>
<article class="card activity-card">
<header class="card__head">
<h2>Recent activity</h2>
<button class="btn btn--ghost btn--sm" type="button" data-toast="All caught up.">Mark read</button>
</header>
<ul class="feed" data-feed>
<li class="feed__item">
<span class="feed__icon feed__icon--accent" aria-hidden="true">★</span>
<div>
<p><strong>Paper Lanterns</strong> hit <strong>1,000,000</strong> streams.</p>
<time>2h ago</time>
</div>
</li>
<li class="feed__item">
<span class="feed__icon feed__icon--accent-2" aria-hidden="true">▶</span>
<div>
<p>Added to editorial playlist <strong>Indie Glow</strong>.</p>
<time>9h ago</time>
</div>
</li>
<li class="feed__item">
<span class="feed__icon feed__icon--accent-3" aria-hidden="true">♥</span>
<div>
<p><strong>+4,210</strong> new followers this week.</p>
<time>1d ago</time>
</div>
</li>
<li class="feed__item">
<span class="feed__icon feed__icon--accent" aria-hidden="true">✦</span>
<div>
<p><strong>Midnight Reservoir</strong> released worldwide.</p>
<time>4d ago</time>
</div>
</li>
<li class="feed__item">
<span class="feed__icon feed__icon--accent-2" aria-hidden="true">↗</span>
<div>
<p>Trending in <strong>Berlin</strong> — #12 viral chart.</p>
<time>5d ago</time>
</div>
</li>
</ul>
</article>
</section>
<!-- Tracks + locations -->
<section class="grid grid--tracks">
<article class="card tracks-card">
<header class="card__head">
<h2>Top tracks</h2>
<p class="card__sub">Tap a row to preview · click headers to sort</p>
</header>
<div class="table-wrap">
<table class="ttable" data-table>
<thead>
<tr>
<th class="ttable__rank">#</th>
<th data-sort="title" class="is-text">Track</th>
<th data-sort="streams" aria-sort="descending" class="is-num is-sorted">Streams <span class="caret">▾</span></th>
<th data-sort="listeners" class="is-num">Listeners <span class="caret"></span></th>
<th data-sort="saves" class="is-num">Saves <span class="caret"></span></th>
<th data-sort="revenue" class="is-num">Revenue <span class="caret"></span></th>
</tr>
</thead>
<tbody data-tbody><!-- rows injected by JS --></tbody>
</table>
</div>
</article>
<article class="card loc-card">
<header class="card__head">
<h2>Top locations</h2>
<p class="card__sub">By monthly listeners</p>
</header>
<ul class="locs" data-locs></ul>
</article>
</section>
</main>
</div>
<!-- Now-playing preview bar -->
<div class="nowplay" data-nowplay hidden aria-live="polite">
<div class="nowplay__art" data-cover="reservoir" aria-hidden="true"></div>
<div class="nowplay__meta">
<strong data-np-title>—</strong>
<span>Neon Tides · preview</span>
</div>
<button class="playbtn" type="button" data-np-toggle aria-pressed="false" aria-label="Pause preview">
<span class="playbtn__icon"></span>
</button>
<div class="scrub" data-scrub role="slider" tabindex="0" aria-label="Seek preview" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="scrub__fill" data-scrub-fill></div>
<div class="scrub__knob" data-scrub-knob></div>
</div>
<span class="nowplay__time"><span data-np-cur>0:00</span> / <span data-np-dur>0:00</span></span>
<button class="iconbtn" type="button" data-np-close aria-label="Close preview">✕</button>
</div>
<div class="toast" data-toast-host aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Artist Dashboard (streams · listeners · revenue)
A for-artists analytics console for the fictional synth-pop act Neon Tides, rendered entirely on the dark music palette with no images — every cover and chart is drawn in CSS or SVG. Four KPI stat cards lead with total streams, monthly listeners, followers, and estimated revenue, each animating a count-up on load, carrying an up/down trend delta in the accent or warning color, and topping out with a tiny grown-in sparkline. A sticky sidebar holds the equalizer-logo brand, section nav, and a new-release pitch card.
The centerpiece is a smooth streams over time area chart built from inline SVG: two stacked series (streams and listeners) drawn as Catmull-style bézier curves with gradient fills, a faint baseline grid, and animated line-draw. A segmented 7d / 28d / 12mo toggle re-seeds and re-renders the data, and moving the pointer snaps a cursor dot to the nearest point and shows a floating tooltip. Beside it sits a milestones / recent-activity feed.
Below, a top-tracks table is fully sortable — click any header to sort by streams, listeners, saves, revenue, or title, with the caret and aria-sort flipping direction. Clicking a row opens a simulated now-playing preview bar: a morphing play/pause button, a role="slider" scrubber you can drag, click, or drive with arrow / Home / End keys, live duration timestamps, and a mini-equalizer marking the active track in the table. A top-locations list animates bar meters by listener share, and a toast() helper confirms exports and pitches. Motion respects prefers-reduced-motion and the grid reflows cleanly to a single column down to ~360px.
Illustrative UI only — fictional artists, albums, tracks, and data. No real audio playback.