Soft-gate wallpaper download with drop-list nudge; set STOCK KV id

- scripts/subscribe.js: reusable email-to-Kit submitter (shared hidden
  iframe) for one-off signup spots outside the homepage form.
- Product page shows a gentle "first dibs on the next drop?" nudge after
  a wallpaper download. Download stays free and ungated; the nudge only
  appears if a provider is configured and at most once per session.
- wrangler.toml: fill in the STOCK KV namespace id.

https://claude.ai/code/session_01VhWRYXbuqapZ9YkvksroaS

Author: claude

product.html

@@ -57,6 +57,14 @@
         </div>
         <div class="pd-stage-meta tiny"><span id="pdInk">マシンドロー</span><span id="pdSize"></span></div>
         <button class="pd-wallpaper tiny" id="pdWallpaper">↓ Download phone wallpaper</button>
+        <div class="pd-nudge" id="pdNudge" hidden>
+          <p class="pd-nudge-copy tiny">Saved to your phone. Want first dibs when the next edition drops?</p>
+          <form class="pd-nudge-form" id="pdNudgeForm" novalidate>
+            <input type="email" id="pdNudgeEmail" placeholder="you@example.com" aria-label="Email address" autocomplete="email" />
+            <button type="submit">Notify me</button>
+          </form>
+          <p class="pd-nudge-msg tiny" id="pdNudgeMsg" hidden></p>
+        </div>
       </div>
 
       <!-- RIGHT: details + acquire -->
@@ -122,6 +130,7 @@ <h3>Shipping &amp; returns</h3>
 <script src="data/editions.js"></script>
 <script src="scripts/config.js"></script>
 <script src="scripts/stock.js"></script>
+<script src="scripts/subscribe.js"></script>
 <script src="scripts/product.js"></script>
 <script src="scripts/cart.js"></script>
 </body>

scripts/product.js

@@ -248,7 +248,38 @@
         a.download = key + "-" + color + "-wallpaper.png";
         a.click();
         dlBtn.textContent = "↓ Download phone wallpaper";
+        revealNudge();
       }, 50);
     });
   }
+
+  // ---- soft gate: gentle drop-list nudge after a download ----
+  // The wallpaper is always free; this just invites a signup once per visit,
+  // and only if an email provider is wired up.
+  function revealNudge() {
+    var nudge = $("pdNudge");
+    if (!nudge || nudge.dataset.done) return;
+    if (!(window.PlotflowSubscribe && window.PlotflowSubscribe.configured())) return;
+    try { if (sessionStorage.getItem("pf_nudge")) return; } catch (e) {}
+    nudge.hidden = false;
+  }
+
+  (function wireNudge() {
+    var form = $("pdNudgeForm"); if (!form) return;
+    var inp = $("pdNudgeEmail"), msg = $("pdNudgeMsg"), nudge = $("pdNudge");
+    form.addEventListener("submit", function (e) {
+      e.preventDefault();
+      var sub = window.PlotflowSubscribe;
+      if (!sub || !sub.valid(inp.value)) {
+        msg.textContent = "Please enter a valid email."; msg.hidden = false;
+        return;
+      }
+      sub.submit(inp.value);
+      form.hidden = true;
+      msg.textContent = "You're on the list. Watch for the next drop.";
+      msg.hidden = false;
+      nudge.dataset.done = "1";
+      try { sessionStorage.setItem("pf_nudge", "1"); } catch (e) {}
+    });
+  })();
 })();

scripts/subscribe.js

@@ -0,0 +1,49 @@
+/* ============================================================
+   PLOTFLOW · Subscribe helper
+   A tiny, reusable email-to-Kit submitter for one-off signup spots
+   (e.g. the post-wallpaper-download nudge) that aren't the main
+   homepage form. Posts to PLOTFLOW_CONFIG.newsletterEndpoint via a
+   shared hidden iframe so it works cross-origin without CORS and
+   never navigates the page.
+   Depends on: scripts/config.js
+   ============================================================ */
+(function () {
+  var CFG = window.PLOTFLOW_CONFIG || {};
+  var sink, form, input;
+
+  function ensure() {
+    if (form) return;
+    sink = document.createElement("iframe");
+    sink.name = "plotflow-sub-sink";
+    sink.setAttribute("aria-hidden", "true");
+    sink.style.display = "none";
+    document.body.appendChild(sink);
+
+    form = document.createElement("form");
+    form.method = "post";
+    form.target = "plotflow-sub-sink";
+    form.style.display = "none";
+    input = document.createElement("input");
+    input.type = "hidden";
+    input.name = CFG.newsletterField || "email_address";
+    form.appendChild(input);
+    document.body.appendChild(form);
+  }
+
+  function valid(v) { return /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(String(v || "")); }
+
+  window.PlotflowSubscribe = {
+    valid: valid,
+    configured: function () { return !!CFG.newsletterEndpoint; },
+    // Fire-and-forget POST. Returns true if it was sent, false if invalid
+    // email or no provider configured.
+    submit: function (emailVal) {
+      if (!CFG.newsletterEndpoint || !valid(emailVal)) return false;
+      ensure();
+      form.action = CFG.newsletterEndpoint;
+      input.value = emailVal;
+      form.submit();
+      return true;
+    }
+  };
+})();

styles/styles.css

@@ -240,6 +240,16 @@ footer .grain{opacity:.3}
 .pd-wallpaper{display:block;width:100%;margin-top:8px;padding:10px;color:var(--dim);border:1px solid var(--line);
   background:transparent;font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;text-align:center;transition:border-color .2s,color .2s}
 .pd-wallpaper:hover{border-color:var(--mute);color:var(--white)}
+.pd-nudge{margin-top:10px;padding:14px;border:1px solid var(--line);background:rgba(245,244,239,.04)}
+.pd-nudge-copy{color:var(--mute);letter-spacing:.06em;line-height:1.5;margin-bottom:10px;text-transform:none;font-size:11px;font-weight:600}
+.pd-nudge-form{display:flex;gap:8px}
+.pd-nudge-form input{flex:1;min-width:0;background:var(--con2);border:1px solid var(--line);color:var(--white);
+  font-family:var(--sans);font-size:13px;padding:9px 11px}
+.pd-nudge-form input:focus{outline:none;border-color:var(--mute)}
+.pd-nudge-form button{background:var(--white);color:var(--ink);font-weight:800;font-size:9px;letter-spacing:.12em;
+  text-transform:uppercase;padding:9px 14px;white-space:nowrap}
+.pd-nudge-form button:hover{background:var(--red);color:var(--white)}
+.pd-nudge-msg{margin-top:8px;color:var(--dim);letter-spacing:.06em;text-transform:none;font-size:11px;font-weight:600}
 
 .pd-head{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
 .pd-code{color:var(--red);letter-spacing:.18em;margin-bottom:8px}

worker/wrangler.toml

@@ -10,4 +10,4 @@ compatibility_date = "2024-11-01"
 # (older wrangler: `wrangler kv:namespace create STOCK`)
 [[kv_namespaces]]
 binding = "STOCK"
-id = "REPLACE_WITH_KV_NAMESPACE_ID"
+id = "2b13bb3aa5f04e6eae5d65c80844f865"