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

@@ -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>

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>