site 1.4.1: PLAY/PAUSE key in Open the builder, blinking green like the player's

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/versions.js

@@ -1,8 +1,15 @@
 // Generated by tools/make_builder_data.py from tools/changelog.json and the mods' versions.
 window.CDJ_VERSIONS = {
- "site": "1.4.0",
+ "site": "1.4.1",
  "date": "2026-10-20",
  "log": [
+  {
+   "version": "1.4.1",
+   "date": "2026-10-20",
+   "changes": [
+    "Open the builder carries a PLAY/PAUSE key that blinks green like the player's."
+   ]
+  },
   {
    "version": "1.4.0",
    "date": "2026-10-20",

builder.html

@@ -8,12 +8,12 @@
   <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=Barlow:wght@400;500;600;700&family=Chakra+Petch:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css?v=1.4.0">
+  <link rel="stylesheet" href="style.css?v=1.4.1">
-  <script src="assets/versions.js?v=1.4.0"></script>
+  <script src="assets/versions.js?v=1.4.1"></script>
-  <script src="script.js?v=1.4.0"></script>
+  <script src="script.js?v=1.4.1"></script>
-  <script src="builder/data.js?v=1.4.0"></script>
+  <script src="builder/data.js?v=1.4.1"></script>
-  <script src="builder/builder.js?v=1.4.0"></script>
+  <script src="builder/builder.js?v=1.4.1"></script>
-  <script src="builder/ui.js?v=1.4.0"></script>
+  <script src="builder/ui.js?v=1.4.1"></script>
 </head>
 <body>
 

docs.html

@@ -8,9 +8,9 @@
   <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=Barlow:wght@400;500;600;700&family=Chakra+Petch:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css?v=1.4.0">
+  <link rel="stylesheet" href="style.css?v=1.4.1">
-  <script src="assets/versions.js?v=1.4.0"></script>
+  <script src="assets/versions.js?v=1.4.1"></script>
-  <script src="script.js?v=1.4.0"></script>
+  <script src="script.js?v=1.4.1"></script>
 </head>
 <body>
 

index.html

@@ -8,9 +8,9 @@
   <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=Barlow:wght@400;500;600;700&family=Chakra+Petch:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css?v=1.4.0">
+  <link rel="stylesheet" href="style.css?v=1.4.1">
-  <script src="assets/versions.js?v=1.4.0"></script>
+  <script src="assets/versions.js?v=1.4.1"></script>
-  <script src="script.js?v=1.4.0"></script>
+  <script src="script.js?v=1.4.1"></script>
 </head>
 <body>
 
@@ -35,7 +35,7 @@
       <p class="lead">Firmware mods for the Pioneer CDJ-900NXS. We took the player's firmware apart in an emulator and added what newer Pioneer players have: hot cues on the deck, beat jump, colour and 3-band waveforms, keys in Camelot colours and more.</p>
       <p class="lead">Pick the mods you want in the builder. It patches the official 1.31 update in your browser and gives you a normal <code>C900NXS.UPD</code> to install like any update. The boot loader is never touched, so you can always go back to stock.</p>
       <div class="cta">
-        <a class="btn primary" href="builder.html">Open the builder</a>
+        <a class="btn primary play" href="builder.html"><span class="play-key" aria-hidden="true"><svg viewBox="0 0 17 10"><path d="M0 0v10l8-5z"/><rect x="10" y="0" width="2.5" height="10"/><rect x="14.5" y="0" width="2.5" height="10"/></svg></span>Open the builder</a>
         <a class="btn" href="#mods">The mods</a>
         <a class="btn" href="docs.html">Docs</a>
       </div>
@@ -278,7 +278,7 @@
     <div class="wrap">
       <h2 class="section-title">Build it in your browser</h2>
       <p class="section-sub">The <a href="builder.html">builder</a> takes the official 1.31 update and adds the mods you tick, on your computer. Only the main application changes; the boot loader and recovery are copied byte for byte and checked.</p>
-      <div class="cta"><a class="btn primary" href="builder.html">Open the builder</a></div>
+      <div class="cta"><a class="btn primary play" href="builder.html"><span class="play-key" aria-hidden="true"><svg viewBox="0 0 17 10"><path d="M0 0v10l8-5z"/><rect x="10" y="0" width="2.5" height="10"/><rect x="14.5" y="0" width="2.5" height="10"/></svg></span>Open the builder</a></div>
       <p class="section-sub" style="margin-top:28px">Prefer the command line? The Python patcher builds the same file, byte for byte:</p>
       <div class="term"><span class="c"># pick the mods in a list</span>
 <span class="p">$</span> python cdj900nxs_patcher.py C900NXS.UPD

style.css

@@ -492,6 +492,26 @@ h2.section-title { text-transform: uppercase; letter-spacing: .02em; }
 @media (max-width: 560px) {
   .tabs a { padding: 10px 7px 8px; letter-spacing: .06em; font-size: .72rem; }
 }
+/* PLAY/PAUSE key inside the builder button: a round key with a green ring
+   that blinks like the player's when it waits; steady green on hover */
+.btn.play { padding: 7px 20px 7px 7px; gap: 12px; }
+.play-key {
+  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
+  background: radial-gradient(circle at 50% 35%, #2a2d33, #121418 70%);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.5);
+  position: relative;
+}
+.play-key::before {
+  content: ""; position: absolute; inset: 2px; border-radius: 50%;
+  border: 2px solid var(--lcd-green); box-shadow: 0 0 8px var(--lcd-green), inset 0 0 6px color-mix(in srgb, var(--lcd-green) 50%, transparent);
+  animation: play-blink 1s steps(1, end) infinite;
+}
+.play-key svg { width: 17px; height: 10px; fill: #e8eaee; }
+.btn.play:hover .play-key::before { animation: none; opacity: 1; }
+@keyframes play-blink { 0% { opacity: 1; } 50% { opacity: .12; } }
+:root[data-theme="light"] .play-key::before { border-color: #8dffb4; box-shadow: 0 0 8px #8dffb4; }
+
 @media (prefers-reduced-motion: reduce) {
   .brand .disc { animation: none; }
+  .play-key::before { animation: none; }
 }

tools/changelog.json

@@ -1,6 +1,13 @@
 {
   "_about": "The site's changelog, newest first. Versions follow Semantic Versioning (MAJOR.MINOR.PATCH), dates ISO 8601 (DIN EN 28601). make_builder_data.py adds every mod's current version from its module and writes assets/versions.js.",
   "site": [
+    {
+      "version": "1.4.1",
+      "date": "2026-10-20",
+      "changes": [
+        "Open the builder carries a PLAY/PAUSE key that blinks green like the player's."
+      ]
+    },
     {
       "version": "1.4.0",
       "date": "2026-10-20",

upcoming.html

@@ -8,9 +8,9 @@
   <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=Barlow:wght@400;500;600;700&family=Chakra+Petch:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="style.css?v=1.4.0">
+  <link rel="stylesheet" href="style.css?v=1.4.1">
-  <script src="assets/versions.js?v=1.4.0"></script>
+  <script src="assets/versions.js?v=1.4.1"></script>
-  <script src="script.js?v=1.4.0"></script>
+  <script src="script.js?v=1.4.1"></script>
 </head>
 <body>