Rename the site to pl8list rewind with a dubplate mark

The infinity sign becomes a dubplate: a wobbling riddim groove around a red label
with a rewind arrow, after the soundsystem rewind where a tune the dance loves is
pulled back and run again. Icons, manifest, titles, legal pages and the README use
the new name; cookie names, storage keys and the link key info keep pl8inf so no
one is signed out or loses settings.

README.md

@@ -1,9 +1,12 @@
-# pl8list ∞
+# pl8list rewind
 
 An endless, TikTok-style scroll through [pl8list](https://pl8list.com), with its own
 recommendation algorithm that learns from what you like, finish and skip. Sign in with
 your pl8list account; each user gets their own feed and taste profile.
 
+The name is the soundsystem rewind: when a dance loves a tune, the selector pulls the
+plate back and runs it again. Here, what you like comes back.
+
 Not affiliated with pl8list.
 
 ![Feed on desktop](docs/feed-desktop.png)

backend/templates/datenschutz.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex">
-  <title>Datenschutzerklärung · pl8list ∞</title>
+  <title>Datenschutzerklärung · pl8list rewind</title>
   <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/legal.css">
 </head>

backend/templates/impressum.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex">
-  <title>Impressum · pl8list ∞</title>
+  <title>Impressum · pl8list rewind</title>
   <link rel="icon" href="/static/icons/icon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/legal.css">
 </head>
@@ -32,7 +32,7 @@
 
     <h2>Hinweis zu pl8list</h2>
     <p>
-      pl8list ∞ ist ein privates, nicht kommerzielles Projekt und steht in keiner Verbindung zu
+      pl8list rewind ist ein privates, nicht kommerzielles Projekt und steht in keiner Verbindung zu
       pl8list.com oder deren Betreibern. Alle Titel, Namen, Bilder und Audioinhalte stammen von
       pl8list.com und gehören den jeweiligen Künstlerinnen und Künstlern. Wenn Sie als Rechteinhaber
       möchten, dass Inhalte hier nicht mehr erscheinen, schreiben Sie bitte an die oben genannte

web/index.html

@@ -3,13 +3,13 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <title>pl8list ∞</title>
+  <title>pl8list rewind</title>
-  <meta name="description" content="Endless scroll through pl8list, tuned to what you like.">
+  <meta name="description" content="Endless riddim from pl8list. Like it, and it comes back.">
   <meta name="theme-color" content="#000000">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="apple-mobile-web-app-title" content="pl8 ∞">
+  <meta name="apple-mobile-web-app-title" content="rewind">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
@@ -28,11 +28,12 @@
     <symbol id="i-play" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z"/></symbol>
     <symbol id="i-vol" viewBox="0 0 24 24"><path fill="currentColor" d="M4 9h4l5-4.5v15L8 15H4z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12"/></symbol>
     <symbol id="i-mute" viewBox="0 0 24 24"><path fill="currentColor" d="M4 9h4l5-4.5v15L8 15H4z"/><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M16.5 9.5l5 5M21.5 9.5l-5 5"/></symbol>
+    <symbol id="i-rewind" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" d="M14.27 7.54A5 5 0 1 0 16.76 13.55"/><path fill="currentColor" d="M17.66 10.79l1.13 4.26-4.56-1.48z"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/></symbol>
     <symbol id="i-pause" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4.5h3.5v15H7zM13.5 4.5H17v15h-3.5z"/></symbol>
   </svg>
 
   <header id="bar" hidden>
-    <span class="logo">pl8list <b>∞</b></span>
+    <span class="logo"><svg aria-hidden="true"><use href="#i-rewind"/></svg><span class="logo-pl8">pl8list </span><b>rewind</b></span>
     <button id="mode-chip" type="button" title="back to your feed" hidden>
       <span class="chip-avatar" aria-hidden="true"></span><span class="chip-label"></span><span aria-hidden="true">×</span>
     </button>
@@ -49,8 +50,8 @@
 
   <div id="login" hidden>
     <div class="login-box">
-      <h1>pl8list <b>∞</b></h1>
+      <h1><svg class="login-mark" aria-hidden="true"><use href="#i-rewind"/></svg>pl8list <b>rewind</b></h1>
-      <p class="tagline">endless scroll through pl8list, tuned to what you like</p>
+      <p class="tagline">endless riddim from pl8list. like it, and it comes back.</p>
       <form id="email-form">
         <label for="email">sign in with your pl8list email</label>
         <input id="email" type="email" name="email" autocomplete="email" required placeholder="you@example.com">

web/public/icons/icon.svg

@@ -5,8 +5,19 @@
       <stop offset="0.6" stop-color="#0b0b10"/>
       <stop offset="1" stop-color="#05050a"/>
     </radialGradient>
+    <linearGradient id="shine" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#fff" stop-opacity="0.16"/>
+      <stop offset="0.45" stop-color="#fff" stop-opacity="0"/>
+      <stop offset="0.7" stop-color="#fff" stop-opacity="0.06"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </linearGradient>
   </defs>
   <rect width="512" height="512" rx="112" fill="url(#g)"/>
-  <path d="M256 256c-38-44-62-66-98-66-37 0-66 29-66 66s29 66 66 66c36 0 60-22 98-66zm0 0c38 44 62 66 98 66 37 0 66-29 66-66s-29-66-66-66c-36 0-60 22-98 66z"
+  <circle cx="256" cy="256" r="196" fill="#09090c"/>
-        fill="none" stroke="#ff4d6d" stroke-width="40" stroke-linejoin="round"/>
+  <circle cx="256" cy="256" r="182.3" fill="none" stroke="#fff" stroke-opacity="0.07" stroke-width="2"/><circle cx="256" cy="256" r="168.6" fill="none" stroke="#fff" stroke-opacity="0.07" stroke-width="2"/><circle cx="256" cy="256" r="154.8" fill="none" stroke="#fff" stroke-opacity="0.07" stroke-width="2"/><circle cx="256" cy="256" r="103.9" fill="none" stroke="#fff" stroke-opacity="0.07" stroke-width="2"/><circle cx="256" cy="256" r="92.1" fill="none" stroke="#fff" stroke-opacity="0.07" stroke-width="2"/>
+  <path d="M385.4 256.0L385.6 257.1L385.9 258.3L386.1 259.4L386.4 260.6L386.5 261.7L386.5 262.8L386.4 264.0L386.1 265.1L385.5 266.2L384.9 267.3L384.1 268.3L383.2 269.4L382.4 270.4L381.7 271.4L381.1 272.5L380.9 273.6L381.0 274.7L381.5 275.9L382.3 277.1L383.4 278.5L384.6 279.8L385.9 281.2L387.0 282.6L387.8 284.0L388.1 285.3L387.8 286.4L386.9 287.4L385.4 288.3L383.4 288.9L381.0 289.5L378.3 289.9L375.7 290.3L373.4 290.8L371.6 291.4L370.6 292.1L370.4 293.2L371.1 294.5L372.7 296.2L374.9 298.1L377.6 300.2L380.4 302.5L383.0 304.8L385.2 306.9L386.5 308.7L386.8 310.2L386.0 311.2L384.1 311.7L381.1 311.7L377.4 311.3L373.2 310.7L369.0 309.9L365.0 309.2L361.7 308.7L359.3 308.6L358.1 309.2L358.2 310.3L359.4 312.1L361.7 314.6L364.7 317.5L368.0 320.7L371.4 324.0L374.3 327.1L376.4 329.8L377.5 331.9L377.4 333.4L376.1 334.0L373.6 333.9L370.3 333.1L366.2 331.8L362.0 330.2L357.8 328.6L354.1 327.2L351.1 326.4L349.1 326.1L348.1 326.7L348.1 328.0L349.1 330.1L350.8 332.7L352.9 335.9L355.1 339.2L357.1 342.4L358.7 345.3L359.7 347.7L359.9 349.5L359.2 350.6L357.8 350.9L355.7 350.6L353.1 349.8L350.3 348.7L347.5 347.5L344.8 346.4L342.5 345.5L340.6 345.1L339.3 345.3L338.4 346.0L338.1 347.2L338.1 348.8L338.4 350.8L338.8 352.9L339.2 355.1L339.3 357.1L339.3 358.9L339.0 360.3L338.3 361.3L337.3 362.0L336.1 362.3L334.7 362.4L333.2 362.3L331.7 362.1L330.2 362.0L328.8 361.9L327.5 362.0L326.4 362.3L325.3 362.8L324.5 363.4L323.6 364.3L322.9 365.2L322.2 366.1L321.4 367.1L320.7 368.0L319.9 368.9L319.0 369.6L318.0 370.3L317.1 370.8L316.0 371.3L315.0 371.7L313.9 372.1L312.8 372.5L311.7 372.9L310.7 373.2L309.6 373.6L308.6 374.1L307.5 374.5L306.5 375.0L305.5 375.4L304.4 375.9L303.4 376.3L302.3 376.7L301.3 377.2L300.2 377.6L299.2 377.9L298.1 378.3L297.0 378.7L296.0 379.0L294.9 379.4L293.8 379.7L292.7 380.0L291.7 380.3L290.6 380.7L289.5 381.0L288.4 381.2L287.3 381.5L286.2 381.8L285.1 382.0L284.0 382.3L282.9 382.5L281.8 382.8L280.7 383.0L279.6 383.2L278.5 383.4L277.4 383.6L276.2 383.8L275.1 384.0L274.0 384.1L272.9 384.3L271.8 384.4L270.6 384.6L269.5 384.7L268.4 384.8L267.3 384.9L266.1 384.9L265.0 384.9L263.9 384.9L262.8 384.9L261.6 384.9L260.5 384.9L259.4 384.9L258.3 385.0L257.1 385.2L256.0 385.4L254.9 385.6L253.7 385.9L252.6 386.1L251.4 386.4L250.3 386.5L249.2 386.5L248.0 386.4L246.9 386.1L245.8 385.5L244.7 384.9L243.7 384.1L242.6 383.2L241.6 382.4L240.6 381.7L239.5 381.1L238.4 380.9L237.3 381.0L236.1 381.5L234.9 382.3L233.5 383.4L232.2 384.6L230.8 385.9L229.4 387.0L228.0 387.8L226.7 388.1L225.6 387.8L224.6 386.9L223.7 385.4L223.1 383.4L222.5 381.0L222.1 378.3L221.7 375.7L221.2 373.4L220.6 371.6L219.9 370.6L218.8 370.4L217.5 371.1L215.8 372.7L213.9 374.9L211.8 377.6L209.5 380.4L207.2 383.0L205.1 385.2L203.3 386.5L201.8 386.8L200.8 386.0L200.3 384.1L200.3 381.1L200.7 377.4L201.3 373.2L202.1 369.0L202.8 365.0L203.3 361.7L203.4 359.3L202.8 358.1L201.7 358.2L199.9 359.4L197.4 361.7L194.5 364.7L191.3 368.0L188.0 371.4L184.9 374.3L182.2 376.4L180.1 377.5L178.6 377.4L178.0 376.1L178.1 373.6L178.9 370.3L180.2 366.2L181.8 362.0L183.4 357.8L184.8 354.1L185.6 351.1L185.9 349.1L185.3 348.1L184.0 348.1L181.9 349.1L179.3 350.8L176.1 352.9L172.8 355.1L169.6 357.1L166.7 358.7L164.3 359.7L162.5 359.9L161.4 359.2L161.1 357.8L161.4 355.7L162.2 353.1L163.3 350.3L164.5 347.5L165.6 344.8L166.5 342.5L166.9 340.6L166.7 339.3L166.0 338.4L164.8 338.1L163.2 338.1L161.2 338.4L159.1 338.8L156.9 339.2L154.9 339.3L153.1 339.3L151.7 339.0L150.7 338.3L150.0 337.3L149.7 336.1L149.6 334.7L149.7 333.2L149.9 331.7L150.0 330.2L150.1 328.8L150.0 327.5L149.7 326.4L149.2 325.3L148.6 324.5L147.7 323.6L146.8 322.9L145.9 322.2L144.9 321.4L144.0 320.7L143.1 319.9L142.4 319.0L141.7 318.0L141.2 317.1L140.7 316.0L140.3 315.0L139.9 313.9L139.5 312.8L139.1 311.7L138.8 310.7L138.4 309.6L137.9 308.6L137.5 307.5L137.0 306.5L136.6 305.5L136.1 304.4L135.7 303.4L135.3 302.3L134.8 301.3L134.4 300.2L134.1 299.2L133.7 298.1L133.3 297.0L133.0 296.0L132.6 294.9L132.3 293.8L132.0 292.7L131.7 291.7L131.3 290.6L131.0 289.5L130.8 288.4L130.5 287.3L130.2 286.2L130.0 285.1L129.7 284.0L129.5 282.9L129.2 281.8L129.0 280.7L128.8 279.6L128.6 278.5L128.4 277.4L128.2 276.2L128.0 275.1L127.9 274.0L127.7 272.9L127.6 271.8L127.4 270.6L127.3 269.5L127.2 268.4L127.1 267.3L127.1 266.1L127.1 265.0L127.1 263.9L127.1 262.8L127.1 261.6L127.1 260.5L127.1 259.4L127.0 258.3L126.8 257.1L126.6 256.0L126.4 254.9L126.1 253.7L125.9 252.6L125.6 251.4L125.5 250.3L125.5 249.2L125.6 248.0L125.9 246.9L126.5 245.8L127.1 244.7L127.9 243.7L128.8 242.6L129.6 241.6L130.3 240.6L130.9 239.5L131.1 238.4L131.0 237.3L130.5 236.1L129.7 234.9L128.6 233.5L127.4 232.2L126.1 230.8L125.0 229.4L124.2 228.0L123.9 226.7L124.2 225.6L125.1 224.6L126.6 223.7L128.6 223.1L131.0 222.5L133.7 222.1L136.3 221.7L138.6 221.2L140.4 220.6L141.4 219.9L141.6 218.8L140.9 217.5L139.3 215.8L137.1 213.9L134.4 211.8L131.6 209.5L129.0 207.2L126.8 205.1L125.5 203.3L125.2 201.8L126.0 200.8L127.9 200.3L130.9 200.3L134.6 200.7L138.8 201.3L143.0 202.1L147.0 202.8L150.3 203.3L152.7 203.4L153.9 2Line truncated
+  <circle cx="256" cy="256" r="196" fill="url(#shine)"/>
+  <circle cx="256" cy="256" r="78.4" fill="#ff4d6d"/>
+  <path d="M275.6 217.6A43.12 43.12 0 1 0 297.0 269.3" fill="none" stroke="#09090c" stroke-width="13" stroke-linecap="round"/><path d="M303.9 248.2L312.7 280.9L277.5 269.5Z" fill="#09090c" stroke="#09090c" stroke-width="4.55" stroke-linejoin="round"/>
+  <circle cx="256" cy="256" r="6.0" fill="#09090c"/>
 </svg>

web/public/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
-  "name": "pl8list ∞",
+  "name": "pl8list rewind",
-  "short_name": "pl8 ∞",
+  "short_name": "rewind",
-  "description": "Endless scroll through pl8list, tuned to what you like.",
+  "description": "Endless riddim from pl8list. Like it, and it comes back.",
   "id": "/",
   "start_url": "/",
   "scope": "/",

web/public/sw.js

@@ -7,8 +7,8 @@ self.addEventListener("install", () => self.skipWaiting());
 self.addEventListener("activate", (e) => e.waitUntil(self.clients.claim()));
 
 const OFFLINE = `<!doctype html><html lang="en"><head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1"><title>pl8list ∞</title></head>
+<meta name="viewport" content="width=device-width, initial-scale=1"><title>pl8list rewind</title></head>
-<body bgcolor="#000000" text="#f2f2f2"><p>You are offline. pl8list ∞ needs a connection to play.</p></body></html>`;
+<body bgcolor="#000000" text="#f2f2f2"><p>You are offline. pl8list rewind needs a connection to play.</p></body></html>`;
 
 self.addEventListener("fetch", (e) => {
   if (e.request.mode !== "navigate") return;

web/src/main.ts

@@ -92,7 +92,7 @@ async function loadMore(): Promise<void> {
         updateRadioEnd();
       } else setStatus(mode.mode !== "classic" || Object.keys(filters).length
         ? "nothing new matches this feed and your filters right now. loosen them, or check back in a bit."
-        : "nothing new right now, the crawler is still digging. try again in a bit.");
+        : "the plate's empty for now, the crawler is still digging. try again in a bit.");
       setTimeout(() => { if (gen === feedGen) loading = false; }, 8000);
       return;
     }
@@ -296,7 +296,7 @@ function updateMediaSession(track: Track): void {
   navigator.mediaSession.metadata = new MediaMetadata({
     title: cleanTitle(track.title),
     artist: track.artist_name,
-    album: "pl8list ∞",
+    album: "pl8list rewind",
     artwork,
   });
 }

web/src/style.css

@@ -66,8 +66,9 @@ button {
   background: linear-gradient(#000c, #0000);
 }
 
-.logo { font-weight: 600; margin-right: auto; }
+.logo { font-weight: 600; margin-right: auto; display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
-.logo b { color: var(--accent); }
+.logo b { color: var(--accent); font-weight: 700; }
+.logo svg { width: 1.3em; height: 1.3em; color: var(--accent); flex: none; }
 #stats { color: var(--muted); font-size: 0.8rem; }
 #help-btn { width: 2.2em; padding: 0.35em 0; }
 #volume { display: flex; align-items: center; gap: 0.3rem; }
@@ -682,8 +683,11 @@ button.primary svg { width: 1em; height: 1em; }
   flex-direction: column;
   gap: 0.9rem;
 }
-.login-box h1 { margin: 0; font-size: 2.4rem; }
+.login-box h1 { margin: 0; font-size: 2.4rem; display: flex; align-items: center; gap: 0.3em; }
 .login-box h1 b { color: var(--accent); }
+/* A wheel up: the plate is pulled back once, then rests. */
+.login-mark { width: 1.2em; height: 1.2em; color: var(--accent); flex: none; animation: wheel-up 1.1s 0.3s cubic-bezier(0.3, 0, 0.2, 1) both; }
+@keyframes wheel-up { from { transform: rotate(0); } to { transform: rotate(-720deg); } }
 .tagline { margin: 0 0 0.8rem; color: var(--muted); }
 .login-box form { display: flex; flex-direction: column; gap: 0.6rem; }
 .login-box label { color: var(--muted); font-size: 0.9rem; }
@@ -719,6 +723,7 @@ button.primary svg { width: 1em; height: 1em; }
   #station { place-items: end stretch; padding: 0; }
   .station-box { width: 100%; border-radius: var(--radius-l) var(--radius-l) 0 0; padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
   #mode-chip { max-width: 9rem; }
+  .logo-pl8 { display: none; }
   /* A station chip says more than the logo; there is no room for both. */
   #bar:has(#mode-chip:not([hidden])) .logo { display: none; }
   #likes { width: auto; }