From 5d6fc4a491f44a3171ab92d20000b25fb891e2da Mon Sep 17 00:00:00 2001
From: bitcoinafterlife <info@bitcoin-after.life>
Date: Fri, 23 Oct 2026 16:23:59 +0200
Subject: [PATCH] Explainer preview: big "Tap to start" screen over the drawing

- browsers play sound only after a first tap: the screen makes it obvious
- a tap on it starts the story from step 1 with the voice
- text in English, or Italian / Spanish with ?lang=it / ?lang=es
---
 preview-2a86b5/index.html  | 6 ++++++
 preview-2a86b5/simple.html | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/preview-2a86b5/index.html b/preview-2a86b5/index.html
index 343b37f..d3200f0 100644
--- a/preview-2a86b5/index.html
+++ b/preview-2a86b5/index.html
@@ -136,10 +136,16 @@ svg.tips .tip{opacity:1}
 @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #balLogo .lt{display:none}:root:not([data-theme="light"]) #balLogo .dk{display:inline}}
 :root[data-theme="dark"] #balLogo .lt{display:none}:root[data-theme="dark"] #balLogo .dk{display:inline}
 @media (max-width:560px){body{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.right{flex-wrap:wrap;margin-left:0}.sndhint{font-size:15px;padding:5px 11px}}
+.tapstart{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;padding:0;margin:0;cursor:pointer;background:color-mix(in srgb,var(--stage) 62%,transparent);color:var(--ink);font:700 clamp(18px,3.2vw,30px)/1.1 var(--display)}
+.tapstart small{font:600 clamp(13px,1.8vw,17px) var(--body);color:var(--muted)}
+.tapstart .pl{width:clamp(62px,11vw,108px);aspect-ratio:1;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.18);animation:sndpulse 1.4s ease-in-out infinite}
+.tapstart .pl svg{width:44%;height:44%;margin-left:9%}
 </style>
 
 <div class="wrap">
   <div class="stage">
+    <button class="tapstart" id="tapStart" type="button" onclick="this.remove();document.getElementById('restart').click()"><span class="pl"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3l15 9-15 9z" fill="#fff"/></svg></span><span id="tapT">Tap to start</span><small id="tapS">with voice</small></button>
+    <script>(function(){var l=new URLSearchParams(location.search).get("lang"),t={it:["Tocca per iniziare","con la voce"],es:["Toca para empezar","con voz"]}[l];if(t){document.getElementById("tapT").textContent=t[0];document.getElementById("tapS").textContent=t[1]}document.addEventListener("pointerdown",function(e){var b=document.getElementById("tapStart");if(b&&!b.contains(e.target))b.remove()},{once:true})})()</script>
     <svg viewBox="0 0 1030 516" role="img" aria-labelledby="scene-t scene-d">
       <title id="scene-t" data-k="sceneT">La blockchain, tre will-executor, il tuo indirizzo e quello degli eredi</title>
       <desc id="scene-d" data-k="sceneD">Le copie firmate del testamento vanno dal tuo computer ai tre will-executor. Alla data di consegna tutti e tre inviano la loro copia: il nuovo blocco ne accetta una sola, le altre due vengono scartate, e i bitcoin passano dal tuo indirizzo a quello degli eredi.</desc>
diff --git a/preview-2a86b5/simple.html b/preview-2a86b5/simple.html
index 79b01f1..7e5f0c2 100644
--- a/preview-2a86b5/simple.html
+++ b/preview-2a86b5/simple.html
@@ -136,10 +136,16 @@ svg.tips .tip{opacity:1}
 @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #balLogo .lt{display:none}:root:not([data-theme="light"]) #balLogo .dk{display:inline}}
 :root[data-theme="dark"] #balLogo .lt{display:none}:root[data-theme="dark"] #balLogo .dk{display:inline}
 @media (max-width:560px){body{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.right{flex-wrap:wrap;margin-left:0}.sndhint{font-size:15px;padding:5px 11px}}
+.tapstart{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:0;padding:0;margin:0;cursor:pointer;background:color-mix(in srgb,var(--stage) 62%,transparent);color:var(--ink);font:700 clamp(18px,3.2vw,30px)/1.1 var(--display)}
+.tapstart small{font:600 clamp(13px,1.8vw,17px) var(--body);color:var(--muted)}
+.tapstart .pl{width:clamp(62px,11vw,108px);aspect-ratio:1;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.18);animation:sndpulse 1.4s ease-in-out infinite}
+.tapstart .pl svg{width:44%;height:44%;margin-left:9%}
 </style>
 
 <div class="wrap">
   <div class="stage">
+    <button class="tapstart" id="tapStart" type="button" onclick="this.remove();document.getElementById('restart').click()"><span class="pl"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3l15 9-15 9z" fill="#fff"/></svg></span><span id="tapT">Tap to start</span><small id="tapS">with voice</small></button>
+    <script>(function(){var l=new URLSearchParams(location.search).get("lang"),t={it:["Tocca per iniziare","con la voce"],es:["Toca para empezar","con voz"]}[l];if(t){document.getElementById("tapT").textContent=t[0];document.getElementById("tapS").textContent=t[1]}document.addEventListener("pointerdown",function(e){var b=document.getElementById("tapStart");if(b&&!b.contains(e.target))b.remove()},{once:true})})()</script>
     <svg viewBox="0 0 1030 516" role="img" aria-labelledby="scene-t scene-d">
       <title id="scene-t" data-k="sceneT">La blockchain, tre will-executor, il tuo indirizzo e quello degli eredi</title>
       <desc id="scene-d" data-k="sceneD">Le copie firmate del testamento vanno dal tuo computer ai tre will-executor. Alla data di consegna tutti e tre inviano la loro copia: il nuovo blocco ne accetta una sola, le altre due vengono scartate, e i bitcoin passano dal tuo indirizzo a quello degli eredi.</desc>