chrisandClaude Opus 5.5
17ae36064c
- Album-art-tinted cards that crossfade on song change, equalizer bars, live avatar rings, drifting ambient colour, Space Grotesk display font, brand purple-to-blue gradient from the logo - Feed cards rise in and glide to new positions (motion); respects reduced-motion - New logo as nav mark, favicon and Apple touch icon - Installable PWA: manifest, maskable icons, small service worker (cached build assets + offline page), security headers - Show-QR-code on your own profile; centred profile header with stats - Settings explains connecting Spotify via Last.fm or ListenBrainz Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#07070b" />
|
|
<title>musicshare · offline</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
background: radial-gradient(circle at 20% 10%, #3b1170 0, transparent 45%),
|
|
radial-gradient(circle at 90% 90%, #0f3f86 0, transparent 50%), #07070b;
|
|
color: #f4f3fa;
|
|
font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
}
|
|
img { width: 88px; height: 88px; border-radius: 22px; }
|
|
h1 { font-size: 1.6rem; margin: 1rem 0 0.4rem; }
|
|
p { color: #9b99ae; margin: 0 0 1.5rem; }
|
|
button {
|
|
font: inherit; font-weight: 600; color: #fff; border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer;
|
|
background: linear-gradient(135deg, #7b2ff7, #5b4cf0, #2f8cff);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<img src="/icon-192.png" alt="" />
|
|
<h1>You're offline</h1>
|
|
<p>musicshare needs a connection to see what your friends are playing.</p>
|
|
<button onclick="location.reload()">Try again</button>
|
|
</main>
|
|
</body>
|
|
</html>
|