- the pages start in the light theme also on phones set to dark mode - new light/dark button next to the music and sound buttons
1071 lines
122 KiB
HTML
1071 lines
122 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="description" content="Animated guide in 15 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="Bitcoin After Life">
|
|
<meta property="og:title" content="How the BAL Protocol works">
|
|
<meta property="og:description" content="Animated guide in 15 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
|
|
<meta property="og:url" content="https://bitcoin-after.life/preview-2a86b5/">
|
|
<meta property="og:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="How the BAL Protocol works">
|
|
<meta name="twitter:description" content="Animated guide in 15 steps, with voice in English, Italian and Spanish: how will-executors deliver your bitcoin to your heirs, without ever holding your keys.">
|
|
<meta name="twitter:image" content="https://bitcoin-after.life/preview-2a86b5/cover.jpg">
|
|
<script>document.documentElement.setAttribute("data-theme","light")</script>
|
|
<title data-k="title">Come funziona BAL PROTOCOL</title>
|
|
<meta name="claude:viewport-fit-sides" content="cover">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Manrope:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap">
|
|
<style>
|
|
/* Colours: light-blue version, from the Bitcoin After Life web site (generated by make_celeste.py from the master: do not edit by hand). */
|
|
/* Layout: the scene reads top to bottom: the blockchain, the three will-executors in a row, then you (left) and the heirs (right) with their addresses, and time at the bottom. A caption card and the step controls follow. */
|
|
:root{
|
|
--bg:#EEF4F8; --panel:#FFFFFF; --ink:#1A2027; --muted:#5B6672; --line:#DCE6EE;
|
|
--teal:#3A9EDB; --teal-2:#6CC0F0;
|
|
--srv:#E4F3FC; --srv-line:#2B86C5; --srv-soft:#BFE3F8; --led:#6CC0F0; --led-off:#EF4444;
|
|
--chain:#3A9EDB; --chain-line:#B5DDF5; --chain-soft:#E4F3FC;
|
|
--heir:#2B86C5; --ok:#1F9D57; --danger:#B42318; --stage:#F3F9FD; --orange:#D97706;
|
|
--display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
|
|
--body:"Manrope", "Segoe UI", system-ui, sans-serif;
|
|
--mono:"JetBrains Mono", Consolas, monospace;
|
|
}
|
|
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
|
|
--bg:#0C141C; --panel:#121C27; --ink:#E8EEF6; --muted:#9AA8BA; --line:#22313F;
|
|
--stage:#0D1822; --chain:#6CC0F0; --chain-line:#255A7F; --chain-soft:#12283A; --heir:#8FD0F5;
|
|
--srv:#15334A; --srv-line:#8FD0F5; --srv-soft:#2A5576; --led:#8FD0F5; --ok:#3CC47C; --danger:#F87171; color-scheme:dark}}
|
|
:root[data-theme="dark"]{
|
|
--bg:#0C141C; --panel:#121C27; --ink:#E8EEF6; --muted:#9AA8BA; --line:#22313F;
|
|
--stage:#0D1822; --chain:#6CC0F0; --chain-line:#255A7F; --chain-soft:#12283A; --heir:#8FD0F5;
|
|
--srv:#15334A; --srv-line:#8FD0F5; --srv-soft:#2A5576; --led:#8FD0F5; --ok:#3CC47C; --danger:#F87171; color-scheme:dark}
|
|
html{scrollbar-gutter:stable}
|
|
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
|
|
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 40px}
|
|
.wrap{max-width:1032px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
|
|
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
|
|
header h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.1;margin:0;text-wrap:balance}
|
|
header p{margin:6px 0 0;color:var(--muted);max-width:62ch}
|
|
.right{display:flex;align-items:center;gap:8px;margin-left:auto}
|
|
.langs{display:flex;gap:6px;margin:0}
|
|
.langs button{font:600 13px var(--body);padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
|
|
.langs button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
|
|
.snd{display:inline-flex;align-items:center;justify-content:center;width:36px;height:31px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
|
|
.snd[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
|
|
.sndhint{font:700 18px var(--body);color:#fff;background:var(--teal);padding:7px 14px;border-radius:999px;white-space:nowrap;animation:sndpulse 1.1s ease-in-out infinite} /* big and coloured: the sound starts only after a tap (owner, 2026-10-20) */
|
|
.sndhint[hidden]{display:none}
|
|
.snd.wait{animation:sndpulse 1.1s ease-in-out infinite}
|
|
@keyframes sndpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--teal) 0%,transparent)}}
|
|
.snd .mute{display:none}.snd[aria-pressed="false"] .mute{display:inline}.snd[aria-pressed="false"] .wave{display:none}
|
|
header p.subtitle{font:600 clamp(19px,2.6vw,24px)/1.25 var(--display);color:var(--ink);margin:8px 0 0}
|
|
.stage{position:relative;background:var(--stage);border:1px solid var(--line);border-radius:18px;overflow:hidden}
|
|
.qslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 8%;background:linear-gradient(135deg,#2B86C5 0%,#6CC0F0 55%,#BFE6FA 100%);color:#fff;font:600 clamp(22px,4.2vw,44px)/1.25 var(--display);opacity:0;pointer-events:none;transition:opacity .9s ease;text-wrap:balance}
|
|
.stage.ask .qslide{opacity:1}
|
|
.stage svg{display:block;width:100%;height:auto}
|
|
.card{box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:grid;gap:6px;min-height:130px}
|
|
.eyebrowrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 38px} /* title right after "Passo N di M", about 1 cm apart */
|
|
.brand{font:600 13px var(--display);color:var(--teal);margin:0;opacity:.85}
|
|
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600}
|
|
.joy .bob{transform-box:fill-box;transform-origin:center;animation:bob 1.1s ease-in-out infinite alternate}.joy .b2{animation-delay:.25s}.joy .b3{animation-delay:.5s}
|
|
@keyframes bob{from{transform:translateY(0) scale(1)}to{transform:translateY(-5px) scale(1.12)}}
|
|
.card h2{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.1;margin:0 0 -10px} /* tighter space between title and text */
|
|
.card p{margin:0;color:var(--muted);font-size:18px}
|
|
.card p.note{font-size:14px;margin-top:6px}
|
|
.card p.note:empty{display:none}
|
|
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
|
|
.btns{display:flex;gap:8px}
|
|
.btns button.ctl{width:40px;height:40px;padding:0;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
|
|
.dots{display:flex;flex-wrap:wrap;gap:6px}
|
|
.dot{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 13px var(--body);cursor:pointer}
|
|
.dot[aria-current="step"]{background:var(--teal);border-color:var(--teal);color:#fff}
|
|
.dot.done{color:var(--teal);border-color:var(--teal)}
|
|
button.ctl{font:600 14px var(--body);padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
|
|
button.ctl.primary{background:var(--teal);border-color:var(--teal);color:#fff}
|
|
button:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px}
|
|
/* scene */
|
|
.lbl{font:600 19px var(--body);fill:var(--ink)}
|
|
.sub{font:500 16px var(--body);fill:var(--muted)}
|
|
.addr{font:500 15px var(--mono);fill:var(--ink)}
|
|
.mv{transition:transform 1.56s cubic-bezier(.45,.05,.2,1),opacity 1.08s ease}
|
|
.fade{transition:opacity 1.08s ease}
|
|
#heirB,#heirC,#heir3g{transition:opacity 2.6s ease-in-out} /* the third heir fades in slowly */
|
|
#coins3{transition:transform 1.56s cubic-bezier(.45,.05,.2,1),opacity 2.4s ease-in-out} /* the third coin fades in slowly */
|
|
.tip{opacity:0;transition:opacity 1.08s ease}
|
|
.bad{opacity:0;transition:opacity 1.08s ease}
|
|
.isbad .bad{opacity:1}
|
|
svg.tips .tip{opacity:1}
|
|
#wifi circle,#wifi path{animation:wf 1.4s ease-in-out infinite}
|
|
#wifi path:nth-child(2){animation-delay:.25s}#wifi path:nth-child(1){animation-delay:.5s}
|
|
@keyframes wf{0%,100%{opacity:.3}50%{opacity:1}}
|
|
#amtBar{transform-box:fill-box;transform-origin:left center;transition:transform 1.5s ease}
|
|
.half{transition:transform 1.56s ease,opacity 1.56s ease;transform-box:fill-box;transform-origin:center}
|
|
.blk{fill:none;stroke:var(--chain);stroke-width:2}
|
|
.blk-n{font:700 12.5px var(--mono);fill:var(--chain)}
|
|
.blk-top{fill:var(--chain-line)}
|
|
.blk-tx{stroke:var(--chain-line);stroke-width:3;stroke-linecap:round}
|
|
.link{fill:none;stroke:var(--chain);stroke-width:2}
|
|
.slot{fill:none;stroke:var(--chain);stroke-width:2;stroke-dasharray:6 5}
|
|
.glow{animation:glow 2s ease-in-out infinite}
|
|
@keyframes glow{50%{opacity:.25}}
|
|
.tx{fill:none;stroke:var(--chain);stroke-width:3;stroke-dasharray:8 7}
|
|
.beat path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.6s linear infinite}
|
|
@keyframes draw{to{stroke-dashoffset:0}}
|
|
/* step 1: a will written once with a quill on your screen (6 s, restarted when step 1 is shown) */
|
|
.ink{fill:none;stroke:#1F2A44;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
|
|
#w1{animation:w1 6s linear forwards}#w2{animation:w2 6s linear forwards}#w3{animation:w3 6s linear forwards}
|
|
#w4{animation:w4 6s linear forwards}#w5{animation:w5 6s linear forwards}
|
|
@keyframes w1{0%{stroke-dashoffset:1}16%,100%{stroke-dashoffset:0}}
|
|
@keyframes w2{0%,18%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
|
|
@keyframes w3{0%,36%{stroke-dashoffset:1}52%,100%{stroke-dashoffset:0}}
|
|
@keyframes w4{0%,54%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
|
|
@keyframes w5{0%,72%{stroke-dashoffset:1}88%,100%{stroke-dashoffset:0}}
|
|
#quill{animation:quill 6s linear forwards}
|
|
@keyframes quill{
|
|
0%{transform:translate(70px,333px)}16%{transform:translate(140px,333px)}
|
|
18%{transform:translate(70px,345px)}34%{transform:translate(132px,345px)}
|
|
36%{transform:translate(70px,357px)}52%{transform:translate(138px,357px)}
|
|
54%{transform:translate(70px,369px)}70%{transform:translate(118px,369px)}
|
|
72%{transform:translate(104px,383px)}88%,100%{transform:translate(142px,380px)}}
|
|
@media (max-width:560px){.card h2{font-size:20px}.card p{font-size:16px}.dot{width:26px;height:26px}}
|
|
/* the BAL mark, almost invisible, behind the drawing */
|
|
.stage::before{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:205/212;transform:translate(-50%,-50%);background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.03;pointer-events:none}
|
|
.stage svg{position:relative}
|
|
#balLogo{cursor:pointer}#balLogo:hover image{opacity:1}#balLogo .dk{display:none}
|
|
@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}}
|
|
</style>
|
|
|
|
<div class="wrap">
|
|
<div class="stage">
|
|
<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>
|
|
<defs>
|
|
<linearGradient id="gScreen" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5BB8EC"/><stop offset="1" stop-color="#5BB8EC"/></linearGradient>
|
|
<linearGradient id="gRack" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:var(--rack-2)"/><stop offset="1" style="stop-color:var(--rack)"/></linearGradient>
|
|
<linearGradient id="gEnv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFF4DC"/><stop offset="1" stop-color="#FFF4DC"/></linearGradient>
|
|
<radialGradient id="gCoin" cx=".35" cy=".3" r=".8"><stop offset="0" stop-color="#FFF4DC"/><stop offset="1" stop-color="#FFF4DC"/></radialGradient>
|
|
<filter id="sh" x="-20%" y="-20%" width="140%" height="160%"><feDropShadow dx="0" dy="6" stdDeviation="7" flood-color="#0A0F1C" flood-opacity="0"/></filter>
|
|
<marker id="arrowTx" viewBox="0 0 16 16" markerUnits="userSpaceOnUse" markerWidth="16" markerHeight="16" refX="13" refY="8" orient="auto"><path d="M1 1 L14 8 L1 15 Z" fill="var(--chain)"/></marker>
|
|
<symbol id="env" viewBox="0 0 48 34">
|
|
<rect x="1" y="1" width="46" height="32" rx="3" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.8"/>
|
|
<path d="M2 2 L24 18 L46 2" fill="none" stroke="#D97706" stroke-width="1.8" stroke-linejoin="round"/>
|
|
<circle cx="24" cy="21" r="3.2" fill="#D97706"/>
|
|
</symbol>
|
|
<symbol id="person" viewBox="0 0 40 60">
|
|
<circle cx="20" cy="13" r="10" fill="currentColor"/>
|
|
<path d="M3 58 C3 38 12 30 20 30 C28 30 37 38 37 58 Z" fill="currentColor"/>
|
|
</symbol>
|
|
</defs>
|
|
|
|
<!-- the blockchain: blocks linked in a chain; the last place is the next block -->
|
|
<g id="chain" class="mv"></g>
|
|
<a id="balLogo" href="https://bitcoin-after.life/" target="_blank" rel="noopener"><title>Bitcoin After Life</title><rect x="24" y="10" width="58" height="60" fill="transparent"/><image class="lt" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23000%3Bstroke%3A%23000%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E" x="25" y="11" width="56" height="58" opacity=".9"/><image class="dk" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20205.29%20212.5%22%20role%3D%22img%22%20aria-label%3D%22Bitcoin%20After%20Life%22%3E%3Cdefs%3E%3Cstyle%3E.m4%2C.m5%7Bfill%3A%23fff%3Bstroke%3A%23fff%3Bstroke-miterlimit%3A10%3B%7D.m5%7Bstroke-width%3A7px%3B%7D.mt%7Bfont-size%3A22px%3Bfont-family%3A%27Optima-Bold%27%2C%20Optima%2C%20Candara%2C%20%27Segoe%20UI%27%2C%20%27Trebuchet%20MS%27%2C%20sans-serif%3Bfont-weight%3A700%3Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M116.39%2C113.29s0%2C0%2C0%2C0A17.05%2C17.05%2C0%2C0%2C0%2C103%2C85.63H97.54s0%2C0%2C0%2C0V82.23A2.23%2C2.23%2C0%2C0%2C0%2C95.28%2C80H90.05A2.08%2C2.08%2C0%2C0%2C0%2C88%2C82.07v3.54s0%2C0%2C0%2C0H85.23s0%2C0%2C0%2C0V82.42A2.43%2C2.43%2C0%2C0%2C0%2C82.77%2C80H78.56a2.89%2C2.89%2C0%2C0%2C0-2.89%2C2.9v2.72s0%2C0%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29l0%2C0v15l0%2C0H71.35s0%2C0%2C0%2C0v9.48s0%2C0%2C0%2C0h4.29s0%2C0%2C0%2C0v15a0%2C0%2C0%2C0%2C1%2C0%2C0H71.35s0%2C0%2C0%2C0v9.48a0%2C0%2C0%2C0%2C0%2C0%2C0h4.29a0%2C0%2C0%2C0%2C1%2C0%2C0v3.12a2.49%2C2.49%2C0%2C0%2C0%2C2.49%2C2.5h4.45a2.59%2C2.59%2C0%2C0%2C0%2C2.59-2.59v-3a0%2C0%2C0%2C0%2C1%2C0%2C0H88a0%2C0%2C0%2C0%2C1%2C0%2C0v3.72a1.9%2C1.9%2C0%2C0%2C0%2C1.9%2C1.9h5.31a2.32%2C2.32%2C0%2C0%2C0%2C2.32-2.32v-3.3a0%2C0%2C0%2C0%2C1%2C0%2C0h8.82a17.25%2C17.25%2C0%2C0%2C0%2C17.32-18A17%2C17%2C0%2C0%2C0%2C116.39%2C113.29Zm-13.57-3.07H85.23s0%2C0%2C0%2C0v-15s0%2C0%2C0%2C0H103c2.86%2C0%2C3.7%2C2.72%2C3.58%2C7-.12%2C4.1%2C0%2C7.71-3.75%2C8.08Zm-17.59%2C9.54h21.24c1.86%2C0%2C4.5%2C3.42%2C4.62%2C7.52.12%2C4.25-3.07%2C7.39-4.45%2C7.53H85.23a0%2C0%2C0%2C0%2C1%2C0%2C0v-15S85.21%2C119.76%2C85.23%2C119.76Z%22%2F%3E%3Cpath%20class%3D%22m4%22%20d%3D%22M26.7%2C112c0%2C.78.08%2C1.57.12%2C2.36%2C0%2C.19%2C0%2C.39%2C0%2C.58l.05.59.05.59%2C0%2C.3%2C0%2C.29a68.65%2C68.65%2C0%2C0%2C0%2C1.6%2C9.33c.36%2C1.54.8%2C3.07%2C1.27%2C4.58.25.75.48%2C1.51.76%2C2.25.13.38.25.75.4%2C1.12l.42%2C1.12c.58%2C1.47%2C1.21%2C2.94%2C1.89%2C4.37.33.72.7%2C1.43%2C1%2C2.14.18.36.37.7.56%2C1.05s.37.71.57%2C1A71.56%2C71.56%2C0%2C0%2C0%2C47%2C159l.85.85.86.83c.57.57%2C1.17%2C1.09%2C1.76%2C1.64l.9.78.45.4.47.38.92.77.94.74.48.37.48.36%2C1%2C.72c.65.46%2C1.3.94%2C2%2C1.38%2C1.32.91%2C2.68%2C1.75%2C4.06%2C2.57l1%2C.6.52.29.53.29c.7.39%2C1.42.74%2C2.14%2C1.11%2C1.44.71%2C2.89%2C1.39%2C4.38%2C2%2C.74.32%2C1.49.6%2C2.24.89l1.13.41.57.21.57.19%2C1.14.38%2C1.15.36.58.18.58.16%2C1.16.33%2C1.17.29.59.15.59.14%2C1.17.26%2C1.19.24.59.12.59.11%2C1.19.2c.4.07.8.12%2C1.2.18l1.19.17a74%2C74%2C0%2C0%2C0%2C9.64.59h1.21l1.2%2C0%2C.61%2C0%2C.6%2C0%2C1.21-.08c1.6-.12%2C3.21-.27%2C4.81-.5a73%2C73%2C0%2C0%2C0%2C9.47-2%2C72.19%2C72.19%2C0%2C0%2C0%2C17.75-7.6%2C73%2C73%2C0%2C0%2C0%2C26.57-27.52A72.34%2C72.34%2C0%2C0%2C0%2C168.68%2C89h0c-1.13-5.7%2C1.31-15.16%2C6.1-17.38%2C4.45-2.06%2C12%2C1.84%2C18.58-1.69%2C6.24-3.37%2C10-10.29%2C11-17.3s-.2-14.16-1.87-21c-1.81%2C3.59-5.23%2C6.12-8.86%2C7.86s-7.53%2C2.79-11.28%2C4.25-7.43%2C3.4-10%2C6.5a20%2C20%2C0%2C0%2C0-4%2C9.22c-.61%2C3.33%2C0%2C7.15.66%2C10.64a29.64%2C29.64%2C0%2C0%2C1%2C7.51-6.1c16.51-8.44%2C20-15.2%2C20.56-16.76-2.58%2C7.45-8.18%2C11.22-13%2C14.2l-2.47%2C1.55c-4.16%2C2.23-8.35%2C4.79-11.35%2C8.48a16.7%2C16.7%2C0%2C0%2C0-4%2C10.57c-.53-1.37-1.1-2.72-1.71-4a69.41%2C69.41%2C0%2C0%2C0-4.59-8.38%2C70.61%2C70.61%2C0%2C0%2C0-13.87-15.92l-3.11-3c-6-5.83-13-13.07-14.4-24.71.4%2C2.49%2C3.32%2C13.41%2C24.66%2C30.82%2C5.2%2C4.25%2C9%2C11.24%2C9%2C11.24%2C2.12-4.86%2C4.14-10.24%2C4.29-15.27A29.79%2C29.79%2C0%2C0%2C0%2C163.75%2C38c-2.75-5.32-7.51-9.31-12.51-12.61s-10.35-6.07-15.09-9.73-8.92-8.42-10.42-14.22C121.14%2C11%2C117.06%2C21%2C116.4%2C31.5S119%2C53.28%2C127%2C60.14c8.42%2C7.2%2C22.07%2C4.41%2C28.22%2C8.34a16.44%2C16.44%2C0%2C0%2C1%2C5%2C5.61c.8%2C1.56%2C1.54%2C3.16%2C2.22%2C4.78a70.85%2C70.85%2C0%2C0%2C1%2C3%2C8.73A70.89%2C70.89%2C0%2C0%2C1%2C168%2C105.83V107c0%2C.19%2C0%2C.38%2C0%2C.57l0%2C.58v.57c0%2C.2%2C0%2C.39%2C0%2C.58l-.06%2C1.15c0%2C.38%2C0%2C.76-.08%2C1.14s-.05.77-.08%2C1.15l-.12%2C1.14-.06.58-.07.57-.14%2C1.14-.17%2C1.13-.09.57-.1.57-.2%2C1.13-.22%2C1.12-.11.57-.13.56-.25%2C1.11L165.8%2C124l-.14.55-.15.56-.31%2C1.1-.34%2C1.1-.16.54-.18.55-.37%2C1.09-.39%2C1.08-.19.53-.21.54-.41%2C1.07-.44%2C1.06-.22.52-.23.53-.47%2C1-.49%2C1c-.08.17-.16.35-.25.52l-.26.51c-.17.34-.34.68-.52%2C1-.36.67-.71%2C1.35-1.09%2C2a70.61%2C70.61%2C0%2C0%2C1-25.29%2C25.91l-1%2C.58-1%2C.56-.5.28-.5.27-1%2C.53c-.68.34-1.36.69-2%2C1-.35.16-.69.33-1%2C.48l-1%2C.46c-.34.16-.7.3-1%2C.45l-1.06.43c-.71.27-1.42.55-2.14.8-1.44.52-2.89%2C1-4.36%2C1.39A70%2C70%2C0%2C0%2C1%2C108%2C176c-1.51.24-3%2C.39-4.55.52l-1.15.08-.57%2C0-.57%2C0-1.14.05-1.15%2C0A70%2C70%2C0%2C0%2C1%2C72%2C171.9c-1.43-.55-2.83-1.17-4.22-1.81-.69-.34-1.38-.66-2.06-1l-.51-.26-.51-.27-1-.55c-1.34-.75-2.67-1.53-4-2.36-.66-.41-1.29-.85-1.93-1.28l-.94-.66-.47-.33-.46-.34-.93-.69-.91-.71-.45-.36-.45-.37-.89-.73-.87-.75c-.3-.25-.58-.51-.87-.77l-.85-.77-.84-.8c-1.11-1.07-2.2-2.16-3.23-3.3-.53-.57-1-1.15-1.54-1.73l-.74-.89-.38-.44-.36-.45-.72-.91-.7-.92-.35-.46-.34-.47-.68-.94-.65-1-.33-.48-.32-.49-.63-1-.61-1a71.35%2C71.35%2C0%2C0%2C1-7.55-17%2C73.92%2C73.92%2C0%2C0%2C1-2.08-9.12l-.05-.29%2C0-.29-.08-.58-.09-.58c0-.19-.05-.39-.07-.58-.1-.78-.2-1.55-.27-2.33%2C0-.39-.07-.78-.1-1.17l-.09-1.18c0-.19%2C0-.39%2C0-.58l0-.59-.05-1.18C26.67%2C108.8%2C26.64%2C110.37%2C26.7%2C112ZM197.14%2C47.16c0-.11.07-.22.11-.34S197.22%2C46.94%2C197.14%2C47.16Z%22%2F%3E%3Cpath%20class%3D%22m5%22%20d%3D%22M110.65%2C22.37a90.47%2C90.47%2C0%2C0%2C0-29.87%2C0%2C92%2C92%2C0%2C0%2C0-28.44%2C9.82c-2.23%2C1.2-4.39%2C2.51-6.51%2C3.89s-4.19%2C2.85-6.19%2C4.4-3.94%2C3.19-5.81%2C4.91l-.7.64-.69.65-1.37%2C1.33-1.33%2C1.36c-.45.45-.87.92-1.31%2C1.38q-2.59%2C2.79-5%2C5.79c-1.57%2C2-3%2C4.07-4.46%2C6.19s-2.73%2C4.3-4%2C6.53-2.36%2C4.52-3.4%2C6.85A94.21%2C94.21%2C0%2C0%2C0%2C6.6%2C90.58c-.66%2C2.47-1.2%2C5-1.64%2C7.48%2C0%2C.32-.12.63-.16%2C1l-.15.94c-.1.64-.2%2C1.27-.28%2C1.9l-.24%2C1.9-.2%2C1.91A93.8%2C93.8%2C0%2C0%2C0%2C6%2C136.17q.88%2C3.74%2C2.07%2C7.4c.79%2C2.44%2C1.69%2C4.84%2C2.68%2C7.21a94.27%2C94.27%2C0%2C0%2C0%2C7.06%2C13.65c1.35%2C2.18%2C2.82%2C4.29%2C4.35%2C6.35s3.14%2C4.06%2C4.83%2C6%2C3.48%2C3.78%2C5.32%2C5.57c.46.44.92.89%2C1.39%2C1.32l1.42%2C1.3%2C1.46%2C1.27.73.62.74.61a94.28%2C94.28%2C0%2C0%2C0%2C26.55%2C15.34%2C95.38%2C95.38%2C0%2C0%2C0%2C30%2C6c2.56.08%2C5.12.08%2C7.68%2C0s5.12-.35%2C7.66-.67l1.9-.26%2C1.89-.31c.64-.09%2C1.26-.22%2C1.89-.34l1-.18.93-.2c2.51-.54%2C5-1.17%2C7.44-1.91A94%2C94%2C0%2C0%2C0%2C174%2C170c1.49-2.06%2C2.9-4.17%2C4.21-6.34s2.54-4.4%2C3.67-6.67%2C2.16-4.58%2C3.1-6.93l.35-.88.33-.89.33-.89c.11-.3.22-.59.32-.89l.62-1.8.57-1.81q1.1-3.63%2C1.91-7.32t1.31-7.45l.23-1.87.19-1.88.09-.94.07-.94.12-1.89.08-1.88%2C0-.94v-.94c0-.63%2C0-1.26%2C0-1.89l-.05-1.88a89.67%2C89.67%2C0%2C0%2C0-5.8-29.3%2C94.28%2C94.28%2C0%2C0%2C1%2C4.18%2C29.31l0%2C1.85c0%2C.61-.07%2C1.23-.1%2C1.84l-.05.93-.07.92-.15%2C1.84-.2%2C1.83-.11.92-.13.92-.25%2C1.82-.31%2C1.82c-.44%2C2.42-.95%2C4.82-1.56%2C7.2s-1.33%2C4.72-2.13%2C7-1.7%2C4.59-2.68%2C6.83-2.05%2C4.45-3.22%2C6.59-2.4%2C4.25-3.72%2C6.3-2.74%2C4-4.22%2C6a92.23%2C92.23%2C0%2C0%2C1-9.78%2C10.83c-1.76%2C1.67-3.61%2C3.26-5.5%2C4.78s-3.84%2C3-5.85%2C4.33a88.6%2C88.6%2C0%2C0%2C1-12.64%2C7.18c-2.19%2C1-4.42%2C2-6.69%2C2.82s-4.57%2C1.6-6.9%2C2.26-4.68%2C1.23-7%2C1.69-4.75.86-7.15%2C1.13-4.81.46-7.23.55-4.83.06-7.24-.05a91.12%2C91.12%2C0%2C0%2C1-28.22-5.85c-2.26-.86-4.47-1.81-6.65-2.85l-.81-.39-.81-.4L56.79%2C193l-1.58-.87c-.27-.14-.53-.29-.79-.44l-.78-.45c-2.09-1.21-4.12-2.5-6.11-3.87s-3.89-2.84-5.76-4.37l-.69-.57c-.24-.19-.47-.38-.69-.58L39%2C180.61l-1.34-1.22c-.44-.4-.87-.82-1.31-1.24-1.73-1.67-3.4-3.42-5-5.22s-3.11-3.68-4.56-5.61-2.82-3.91-4.11-5.95-2.49-4.12-3.62-6.26l-.83-1.6-.79-1.63c-.26-.54-.5-1.1-.76-1.64s-.48-1.11-.72-1.66c-1-2.22-1.82-4.47-2.58-6.76s-1.44-4.61-2-6.95A89.82%2C89.82%2C0%2C0%2C1%2C9%2C106.1l.15-1.81.2-1.8c.07-.6.16-1.2.24-1.8l.12-.9c0-.3.1-.6.15-.9.1-.59.19-1.19.3-1.79l.34-1.78c.11-.6.25-1.19.38-1.78s.26-1.18.4-1.77A89.66%2C89.66%2C0%2C0%2C1%2C22.55%2C65.05C23.84%2C63%2C25.21%2C61%2C26.66%2C59s3-3.85%2C4.6-5.68c.4-.45.8-.92%2C1.21-1.36l1.25-1.35L35%2C49.32c.21-.22.43-.43.65-.64l.65-.64q2.63-2.55%2C5.45-4.9c1.88-1.56%2C3.83-3%2C5.83-4.45s4.06-2.74%2C6.17-4S58%2C32.3%2C60.21%2C31.22s4.46-2%2C6.75-2.95A92.31%2C92.31%2C0%2C0%2C1%2C81.08%2C24%2C94.9%2C94.9%2C0%2C0%2C1%2C110.65%2C22.37Z%22%2F%3E%3C%2Fsvg%3E" x="25" y="11" width="56" height="58" opacity=".9"/></a>
|
|
<line x1="700" x2="700" y1="8" y2="92" stroke="var(--chain)" stroke-width="2"/>
|
|
<g id="newblock" class="fade" opacity="0" transform="translate(-170,0)">
|
|
<rect x="882" y="20" width="60" height="60" fill="var(--panel)" stroke="var(--chain)" stroke-width="4"/>
|
|
<text id="nbNum" class="blk-n" x="912" y="45" text-anchor="middle">868180</text>
|
|
<circle cx="912" cy="62" r="7" fill="var(--orange)"/>
|
|
<circle cx="940" cy="22" r="13" fill="var(--ok)"/><path d="M933 22 l5 5 l9 -10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<text x="20" y="110" style="font:700 17px var(--body);fill:var(--chain)" data-k="chain">Blockchain di Bitcoin</text>
|
|
|
|
<text id="nbTag" class="fade" x="742" y="95" text-anchor="middle" opacity="0" style="font:700 14px var(--body);fill:var(--ok)" data-k="accepted">accettata</text>
|
|
|
|
<!-- the three will-executors, in a row -->
|
|
<!-- separators between the actors: me | will-executors | heirs -->
|
|
<line x1="270" x2="270" y1="104" y2="400" stroke="var(--chain)" stroke-width="2"/>
|
|
<line x1="754" x2="754" y1="104" y2="400" stroke="var(--chain)" stroke-width="2"/>
|
|
<g id="racks"></g>
|
|
<text id="offTag1" class="fade" x="356" y="249" text-anchor="end" opacity="0" style="font:700 16px var(--body);fill:var(--danger)" data-k="off">spento</text>
|
|
<text id="offTag" class="fade" x="356" y="159" text-anchor="end" opacity="0" style="font:700 16px var(--body);fill:var(--danger)" data-k="off">spento</text>
|
|
<g id="rejTag" class="fade" opacity="0">
|
|
<text x="745" y="198" text-anchor="end" style="font:700 18px var(--body);fill:var(--danger)" data-k="refused">copie scartate</text>
|
|
<text class="sub" x="745" y="217" text-anchor="end" data-k="spent">quei bitcoin sono già spesi</text>
|
|
</g>
|
|
|
|
<g transform="translate(0,-140)">
|
|
<!-- timeline -->
|
|
<g>
|
|
<line x1="60" y1="606" x2="990" y2="606" stroke="var(--line)" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="96" y1="600" x2="96" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="0" x="96" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="216" y1="600" x2="216" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="1" x="216" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="336" y1="600" x2="336" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="2" x="336" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="456" y1="600" x2="456" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="3" x="456" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="576" y1="600" x2="576" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="4" x="576" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="696" y1="600" x2="696" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="5" x="696" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="816" y1="600" x2="816" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="6" x="816" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<line x1="936" y1="600" x2="936" y2="612" stroke="var(--muted)" stroke-width="1.5"/><text class="yr" data-i="7" x="936" y="634" text-anchor="middle" style="font:600 14px var(--body);fill:var(--muted)"></text>
|
|
<g id="today" class="mv">
|
|
<circle cx="0" cy="606" r="10" fill="var(--teal)"/><circle cx="0" cy="606" r="16" fill="none" stroke="var(--teal)" stroke-width="2" opacity=".35"/>
|
|
<text id="todayLbl" class="sub fade" x="-16" y="594" text-anchor="end" data-k="today">oggi</text>
|
|
</g>
|
|
<g id="due" class="mv">
|
|
<g filter="url(#sh)">
|
|
<rect x="-24" y="556" width="48" height="42" rx="4" fill="var(--panel)" stroke="var(--line)"/>
|
|
<rect x="-24" y="556" width="48" height="13" rx="4" fill="var(--orange)"/><rect x="-24" y="563" width="48" height="6" fill="var(--orange)"/>
|
|
</g>
|
|
<text id="dueText" x="0" y="591" text-anchor="middle" style="font:700 17px var(--display);fill:var(--ink)"></text>
|
|
<text class="sub" x="-32" y="588" text-anchor="end" data-k="delivery">consegna</text>
|
|
<g id="dueX" class="fade" opacity="0"><path d="M-21 559 L21 595 M21 559 L-21 595" stroke="#C62828" stroke-width="5" stroke-linecap="round"/></g>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- the transaction: from your address to the heirs' address -->
|
|
<path id="tx" class="tx fade" opacity="0" d="M226 512 C 430 556, 590 540, 796 465" marker-end="url(#arrowTx)"/>
|
|
|
|
<!-- you: the wallet with the keys, and your address -->
|
|
<g filter="url(#sh)">
|
|
<rect x="31" y="291" width="170" height="110" rx="5" fill="var(--panel)" stroke="var(--srv-line)" stroke-width="2.5"/>
|
|
<rect x="40" y="300" width="152" height="92" rx="2" fill="url(#gScreen)"/>
|
|
<path d="M116 402 V420" stroke="var(--srv-line)" stroke-width="2.5"/>
|
|
<path d="M80 421 H152" stroke="var(--srv-line)" stroke-width="2.5" stroke-linecap="round"/>
|
|
</g>
|
|
<g id="beat" class="beat fade" opacity="0">
|
|
<path d="M50 346 H90 L100 326 L112 368 L124 334 L132 346 H182" fill="none" stroke="#fff" stroke-width="3.5" stroke-linejoin="round" stroke-linecap="round"/>
|
|
<text x="116" y="384" text-anchor="middle" style="font:700 13px var(--body);fill:#fff" data-k="alive">ci sei</text>
|
|
</g>
|
|
<!-- step 1: the will written on your screen, with a quill -->
|
|
<g id="write" class="fade" opacity="0">
|
|
<rect x="62" y="303" width="88" height="88" rx="3" fill="#FFFBF0" stroke="#E6D8B8"/>
|
|
<text x="106" y="320" text-anchor="middle" style="font:italic 600 11px Georgia, 'Times New Roman', serif;fill:#1F2A44" data-k="sheet">Testamento</text>
|
|
<path id="w1" class="ink" pathLength="1" d="M70 333 H140"/>
|
|
<path id="w2" class="ink" pathLength="1" d="M70 345 H132"/>
|
|
<path id="w3" class="ink" pathLength="1" d="M70 357 H138"/>
|
|
<path id="w4" class="ink" pathLength="1" d="M70 369 H118"/>
|
|
<path id="w5" class="ink" pathLength="1" d="M104 383 C110 374 114 390 120 380 C125 372 130 388 136 379 L142 380"/>
|
|
<g id="quill">
|
|
<path d="M0 0 L26 -36" stroke="#5B4636" stroke-width="1.6" stroke-linecap="round"/>
|
|
<path d="M6 -8 C10 -26 24 -44 40 -54 C36 -38 26 -20 10 -6 Z" fill="#FFFFFF" stroke="#8A7A66" stroke-width="1"/>
|
|
<path d="M9 -10 C16 -24 26 -36 36 -48" fill="none" stroke="#C9BBA6" stroke-width="1"/>
|
|
</g>
|
|
</g>
|
|
<g id="wifi" class="fade">
|
|
<path d="M89 342 Q116 316 143 342" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round"/>
|
|
<path d="M100 354 Q116 340 132 354" fill="none" stroke="#fff" stroke-width="7" stroke-linecap="round"/>
|
|
<circle cx="116" cy="366" r="6" fill="#fff"/>
|
|
</g>
|
|
<!-- the screen of the computer, one picture per step -->
|
|
<g id="signed" class="fade" opacity="0">
|
|
<circle cx="146" cy="308" r="11" fill="#2B86C5" stroke="#fff" stroke-width="2"/>
|
|
<path d="M140 308 l4 4 l7 -8" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<g id="scCopies" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
|
|
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text><circle cx="164" cy="323" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 323 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text><circle cx="164" cy="350" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 350 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text><circle cx="164" cy="377" r="9" fill="#2B86C5" stroke="#fff" stroke-width="1.6"/><path d="M159 377 l3.5 3.5 l6 -7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</g>
|
|
<g id="scInval" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
|
|
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text><circle cx="164" cy="323" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 319 l8 8 M168 319 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
|
|
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text><circle cx="164" cy="350" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 346 l8 8 M168 346 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
|
|
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text><circle cx="164" cy="377" r="9" fill="#C62828" stroke="#fff" stroke-width="1.6"/><path d="M160 373 l8 8 M168 373 l-8 8" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
|
|
</g>
|
|
<g id="scTips" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
|
|
<rect x="56" y="312" width="18" height="22" rx="2"/><text x="82" y="328" data-k="copy1">copia 1</text>
|
|
<circle cx="164" cy="323" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="327" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
|
|
<rect x="56" y="339" width="18" height="22" rx="2"/><text x="82" y="355" data-k="copy2">copia 2</text>
|
|
<circle cx="164" cy="350" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="354" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
|
|
<rect x="56" y="366" width="18" height="22" rx="2"/><text x="82" y="382" data-k="copy3">copia 3</text>
|
|
<circle cx="164" cy="377" r="10" fill="#FFF4DC" stroke="#D97706" stroke-width="1.6"/><text x="164" y="381" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
|
|
</g>
|
|
<g id="scAmount" class="fade" opacity="0" style="font:700 14px var(--body);fill:#fff">
|
|
<text x="116" y="327" text-anchor="middle" data-k="amount">importo del wallet</text>
|
|
<rect x="58" y="340" width="116" height="14" rx="7" opacity=".3"/>
|
|
<rect id="amtBar" x="58" y="340" width="116" height="14" rx="7" style="transform:scaleX(.45)"/>
|
|
<g id="amtNew" class="fade" opacity="0"><rect x="66" y="366" width="14" height="18" rx="2"/><text x="88" y="380" style="font:700 13px var(--body)" data-k="newCopy">copia nuova</text></g>
|
|
</g>
|
|
<g id="scHeirs" class="fade" opacity="0" style="color:#fff;font:700 14px var(--body);fill:#fff">
|
|
<text x="116" y="327" text-anchor="middle" data-k="heirsS">eredi</text>
|
|
<use href="#person" x="72" y="334" width="26" height="38"/>
|
|
<use href="#person" x="102" y="336" width="26" height="36" style="opacity:.85"/>
|
|
<g id="heirB" class="fade" opacity="0"><use id="heirBuse" href="#person" x="132" y="336" width="26" height="36" style="opacity:.85"/></g>
|
|
<g id="heirNew" class="fade" opacity="0"><rect x="66" y="374" width="14" height="16" rx="2"/><text x="88" y="387" style="font:700 13px var(--body)" data-k="newCopy">copia nuova</text></g>
|
|
</g>
|
|
<g id="scCal" class="fade" opacity="0" style="font:700 12px var(--body);fill:#fff">
|
|
<rect x="86" y="310" width="60" height="62" rx="5"/>
|
|
<rect x="86" y="310" width="60" height="16" rx="5" fill="#D97706"/><rect x="86" y="319" width="60" height="7" fill="#D97706"/>
|
|
<text id="calYear" x="116" y="354" text-anchor="middle" style="font:700 20px var(--display);fill:#0A0F1C"></text>
|
|
<text x="116" y="388" text-anchor="middle" data-k="dueDate">data di consegna</text>
|
|
</g>
|
|
<g id="scFlat" class="fade" opacity="0" style="font:700 13px var(--body);fill:#fff">
|
|
<path d="M52 346 H180" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
|
|
<text x="116" y="378" text-anchor="middle" data-k="noBeat">nessun battito</text>
|
|
</g>
|
|
<text class="lbl" x="116" y="452" text-anchor="middle" data-k="you">Tu</text>
|
|
<g filter="url(#sh)"><rect x="20" y="476" width="206" height="68" rx="6" fill="var(--panel)" stroke="var(--teal)" stroke-width="1.5"/></g>
|
|
<text class="sub" x="36" y="502" data-k="yourAddr">il tuo indirizzo</text>
|
|
<text class="addr" x="36" y="528">bc1qk3rn…7m7h</text>
|
|
|
|
<!-- heirs and their address -->
|
|
<use href="#person" x="840" y="306" width="40" height="60" style="color:var(--heir)"/>
|
|
<use href="#person" x="884" y="312" width="34" height="52" style="color:var(--heir);opacity:.8"/>
|
|
<g id="heirC" class="fade" opacity="0"><use id="heirCuse" href="#person" x="922" y="308" width="36" height="56" style="color:var(--heir);opacity:.9"/></g>
|
|
<text class="lbl" x="899" y="386" text-anchor="middle" data-k="heirs">Eredi</text>
|
|
<g filter="url(#sh)"><rect x="796" y="396" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
|
|
<text class="sub" x="812" y="413" data-k="heir1">indirizzo erede 1</text>
|
|
<text class="addr" x="812" y="431">bc1qv9ef…3nks</text>
|
|
<g filter="url(#sh)"><rect x="796" y="444" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
|
|
<text class="sub" x="812" y="461" data-k="heir2">indirizzo erede 2</text>
|
|
<text class="addr" x="812" y="479">bc1qm5ht…9xk4</text>
|
|
<g id="heir3g" class="fade" opacity="0">
|
|
<g filter="url(#sh)"><rect id="heir3Box" x="796" y="492" width="206" height="42" rx="6" fill="var(--panel)" stroke="var(--heir)" stroke-width="1.5"/></g>
|
|
<text id="heir3Sub" class="sub" x="812" y="509" data-k="heir3">indirizzo erede 3</text>
|
|
<text id="heir3Addr" class="addr" x="812" y="527">bc1qe2yd…4wd7</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- torn envelopes, envelopes, the funds -->
|
|
<g id="tears"></g>
|
|
<g id="envs"></g>
|
|
<g id="coins" class="mv">
|
|
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
|
|
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
|
|
</g>
|
|
<g id="coins3" class="mv" opacity="0">
|
|
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
|
|
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
|
|
</g>
|
|
<g id="coins2" class="mv">
|
|
<circle cx="0" cy="0" r="17" fill="url(#gCoin)" stroke="#D97706" stroke-width="2"/>
|
|
<text x="0" y="6" text-anchor="middle" style="font:700 17px var(--display);fill:#6B4500">₿</text>
|
|
</g>
|
|
<!-- the fee: the will-executor whose copy entered the block earns it -->
|
|
<g id="fee" class="mv" opacity="0">
|
|
<circle cx="0" cy="0" r="10" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.8"/>
|
|
<text x="0" y="4" text-anchor="middle" style="font:700 11px var(--display);fill:#6B4500">₿</text>
|
|
</g>
|
|
<!-- joy marks: gold stars over the heirs and a medal on the will-executor that earned the tip -->
|
|
<g id="joyHeir" class="fade joy" opacity="0">
|
|
<g transform="translate(860,152)"><g class="bob"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
|
|
<g transform="translate(901,138) scale(1.25)"><g class="bob b2"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
|
|
<g transform="translate(942,154)"><g class="bob b3"><polygon points="0,-11 3.2,-3.6 11,-3.4 4.9,1.6 7,9.4 0,5 -7,9.4 -4.9,1.6 -11,-3.4 -3.2,-3.6" fill="#FBBF24" stroke="#D97706" stroke-width="1.6" stroke-linejoin="round"/></g></g>
|
|
</g>
|
|
<g id="joyWE" class="fade joy" opacity="0">
|
|
<g class="bob"><circle cx="0" cy="0" r="14" fill="#FBBF24" stroke="#D97706" stroke-width="2"/>
|
|
<path d="M-6 0 l4.5 4.5 l8 -9" fill="none" stroke="#6B4500" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g>
|
|
</g>
|
|
<!-- order of sending (slide 11): 1st, 2nd and 3rd will-executor to send its copy -->
|
|
<g id="ord0" class="fade" opacity="0">
|
|
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
|
|
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
|
|
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
|
|
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
|
|
</g>
|
|
<g id="ord1" class="fade" opacity="0">
|
|
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
|
|
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
|
|
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
|
|
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
|
|
</g>
|
|
<g id="ord2" class="fade" opacity="0">
|
|
<path d="M-9 -22 L-2 -22 L5 -3 L-2 -3 Z M9 -22 L2 -22 L-5 -3 L2 -3 Z" fill="var(--teal)"/>
|
|
<circle class="disc" cx="0" cy="6" r="15" fill="#F5B323" stroke="#D97706" stroke-width="2"/>
|
|
<circle cx="0" cy="6" r="10.5" fill="none" stroke="#fff" stroke-width="1.6" opacity=".75"/>
|
|
<text x="0" y="13" text-anchor="middle" style="font:800 20px var(--display);fill:#3A2A12">1</text>
|
|
</g>
|
|
<g id="feeTag" class="fade" opacity="0">
|
|
<text x="0" y="5" text-anchor="middle" style="font:700 17px var(--body);fill:var(--ok)" data-k="tip">+ mancia</text>
|
|
</g>
|
|
<g id="tipTag" class="fade" opacity="0">
|
|
<text x="608" y="172" style="font:700 14px var(--body);fill:var(--teal)" data-k="tipNote1" data-wrap="14">ogni copia ha la sua mancia</text>
|
|
<text class="sub" x="608" y="232" style="font-size:13px" data-k="tipNote2" data-wrap="15">si paga solo alla consegna</text>
|
|
</g>
|
|
<g id="ageTag" class="fade" opacity="0">
|
|
|
|
</g>
|
|
<text id="chgTag" class="fade" x="116" y="138" text-anchor="middle" opacity="0" style="font:700 16px var(--body);fill:var(--teal)" data-k="amountChg">l'importo cambia</text>
|
|
<text id="dayTag" class="fade" x="451" y="406" text-anchor="middle" opacity="0" style="font:700 15px var(--body);fill:var(--teal)" data-k="dayBefore">un giorno prima</text>
|
|
<text id="invTag" class="fade" x="660" y="206" text-anchor="middle" opacity="0" style="font:700 18px var(--body);fill:var(--danger)" data-k="invalid">copie invalidate</text>
|
|
</svg>
|
|
<div class="qslide" id="qslide" aria-hidden="true" data-k="question">E se la maggior parte dei WILL-EXECUTOR sparisce, cosa succede?</div>
|
|
</div>
|
|
|
|
<section class="card" aria-live="polite">
|
|
<div class="eyebrowrow"><div class="eyebrow" id="eyebrow"></div><h1 class="brand" data-k="title">Come funziona BAL PROTOCOL</h1></div>
|
|
<h2 id="cap-t"></h2>
|
|
<p id="cap-d"></p>
|
|
<p id="cap-n" class="note"></p>
|
|
</section>
|
|
|
|
<div class="bar">
|
|
<div class="btns">
|
|
<button class="ctl" id="prev" type="button" data-t="prev">←</button>
|
|
<button class="ctl" id="next" type="button" data-t="next">→</button>
|
|
<button class="ctl primary" id="play" type="button" data-t="play">▶</button>
|
|
<button class="ctl" id="restart" type="button" data-t="restart">↺</button>
|
|
</div>
|
|
<div class="dots" id="dots" role="tablist" aria-label="Passi"></div>
|
|
<div class="right">
|
|
<div class="langs" role="group" aria-label="Language"><button type="button" data-lang="en">EN</button><button type="button" data-lang="it">IT</button><button type="button" data-lang="es">ES</button></div>
|
|
<span class="sndhint" id="sndhint" data-k="tapSound" hidden>tocca per il suono</span>
|
|
<button class="snd" id="mus" type="button" data-t="music" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M9 17V5l11-2v12" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><circle cx="6.5" cy="17.5" r="2.8" fill="currentColor"/><circle cx="17.5" cy="15.5" r="2.8" fill="currentColor"/><path class="mute" d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></button>
|
|
<button class="snd" id="thm" type="button" title="Light / dark" aria-label="Light / dark" onclick="var r=document.documentElement;r.setAttribute('data-theme',r.getAttribute('data-theme')==='dark'?'light':'dark')"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
|
|
<button class="snd" id="snd" type="button" data-t="sound" aria-pressed="true"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M4 9h4l5-4v14l-5-4H4z" fill="currentColor"/><path class="wave" d="M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path class="mute" d="M16 9l5 6M21 9l-5 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
(function(){
|
|
const NS="http://www.w3.org/2000/svg";
|
|
// today's year; the delivery is 3 years later and is postponed to 7 years later: every new year everything moves by one year
|
|
const Y0=new Date().getFullYear(), Y1=Y0+3, Y2=Y0+7;
|
|
document.querySelectorAll(".yr").forEach(e=>{e.textContent=Y0+ +e.dataset.i});
|
|
|
|
const STEPS_L={it:[
|
|
["Scrivi il testamento: scegli gli eredi e la data","Nel software scrivi chi eredita i tuoi bitcoin e da quale data. I bitcoin sono registrati nella blockchain, sul tuo indirizzo, e restano tuoi."],
|
|
["Copie firmate oggi, valide solo dalla data che hai scelto","Il software prepara una transazione firmata per ogni will-executor scelto: sposta i bitcoin sull'indirizzo degli eredi, ma solo dalla data di consegna (locktime). Prima di quella data la rete Bitcoin la rifiuta."],
|
|
["I will-executor custodiscono le copie, senza le tue chiavi","Ogni will-executor riceve e custodisce la sua copia. Non ha le tue chiavi: non può modificarla né spendere i tuoi bitcoin."],
|
|
["Ogni copia contiene la mancia del suo will-executor","Le copie non sono tutte uguali: ognuna contiene una piccola mancia per il suo will-executor, che è il suo compenso. La mancia viene detratta dall'eredità solo il giorno della consegna, quando la copia viene accettata dalla rete."],
|
|
["Finché ci sei tu, non parte niente e i bitcoin restano tuoi","I bitcoin restano sul tuo indirizzo e li usi come sempre. Finché la data di consegna non arriva, i will-executor non inviano niente e non esce nessun bitcoin dal tuo indirizzo."],
|
|
["Se cambia l'importo del wallet, il software prepara copie nuove","Quando cambia l'importo del wallet, il software prepara una copia nuova per ogni will-executor, con la data di consegna anticipata di un giorno rispetto alla data di eredità, in quanto la vecchia eredità non è più valida. Questo meccanismo, inventato da Bitcoin After Life, permette di risparmiare costose commissioni di rete bitcoin a ogni modifica."],
|
|
["Se aggiungi un erede, il software prepara una copia nuova","Come quando cambia l'importo: un'altra copia, con la data di consegna anticipata di un altro giorno, si aggiunge a destra. Le vecchie restano dove sono, ma non verranno usate: alla consegna parte solo la più recente."],
|
|
["Posticipare la data: si invalidano le copie vecchie","Per spostare la consegna più avanti, il software invalida le copie vecchie con una piccola transazione sulla blockchain (paghi solo la commissione di rete). Le copie vecchie restano dove sono, ma non valgono più: le segniamo in rosso."],
|
|
["Copie nuove con la data posticipata","Il software prepara le copie con la data nuova, il {Y2}, e le manda ai will-executor. Ora conta solo la più recente, quella più a destra."],
|
|
["Arriva la data di eredità: solo l'ultima copia è ancora valida","Siamo nel {Y2}. Da oggi la rete Bitcoin accetta la copia più recente; quelle segnate in rosso non valgono più."],
|
|
["Il giorno della consegna, le copie partono","Ogni will-executor invia alla rete Bitcoin la sua copia più recente, quella più a destra."],
|
|
["Il blocco accetta una sola copia: quella inviata per prima","Le copie spendono gli stessi bitcoin, quindi il nuovo blocco ne accetta una sola, di solito quella inviata per prima. Le altre due restano in fila sotto il blocco, in attesa."],
|
|
["Bitcoin agli eredi, mancia al will-executor; poi le altre invalidate","Appena la copia è accettata, i bitcoin passano dal tuo indirizzo a quello degli eredi, come stabilito nel testamento, e una piccola mancia va al will-executor della copia accettata. Solo dopo le altre due copie vengono invalidate, perché quei bitcoin sono già stati spesi."],
|
|
["E se quasi tutti i will-executor spariscono?","Cosa succede se quasi tutti i will-executor smettono di funzionare? Lo vediamo nel prossimo passo."],
|
|
["Basta un solo will-executor attivo","Anche se due will-executor sono spenti o spariti, ne basta uno che funziona: invia la sua copia, la rete la accetta, gli eredi ricevono i bitcoin e quel will-executor incassa la mancia. Per questo il software ne usa più di uno.","Note: per casi estremi si può salvare la transazione per gli eredi senza l'utilizzo dei will-executor, disponibile in Advanced Mode."]
|
|
],
|
|
en:[
|
|
[
|
|
"Write your will: choose the heirs and the date",
|
|
"In the software you write who inherits your bitcoin and from which date. Your bitcoin are recorded on the blockchain, at your address, and they stay yours."
|
|
],
|
|
[
|
|
"Copies signed today, valid only from the date you chose",
|
|
"The software prepares one signed transaction for each will-executor you chose: it moves the bitcoin to your heirs' addresses, but only from the delivery date (locktime). Before that date the Bitcoin network refuses it."
|
|
],
|
|
[
|
|
"The will-executors keep the copies, without your keys",
|
|
"Each will-executor receives and keeps its copy. It does not have your keys: it can neither change the copy nor spend your bitcoin."
|
|
],
|
|
[
|
|
"Each copy includes a fee for its will-executor",
|
|
"The copies are not all the same: each one contains a small fee for its will-executor, which is its pay. The fee is taken from the inheritance only on the delivery day, when the copy is accepted by the network."
|
|
],
|
|
[
|
|
"While you are here, nothing is sent: the bitcoin stay yours",
|
|
"Your bitcoin stay at your address and you use them as always. Until the delivery date, the will-executors send nothing and no bitcoin leaves your address."
|
|
],
|
|
[
|
|
"If the wallet amount changes, the software makes new copies",
|
|
"When the wallet amount changes, the software prepares a new copy for each will-executor, with the delivery date one day earlier than the inheritance date, because the old inheritance is no longer valid. This mechanism, invented by Bitcoin After Life, saves costly Bitcoin network fees at every change."
|
|
],
|
|
[
|
|
"If you add an heir, the software makes a new copy",
|
|
"Just like when the amount changes: another copy, with the delivery date one more day earlier, is added on the right. The old ones stay where they are, but they will not be used: on delivery only the newest one is sent."
|
|
],
|
|
[
|
|
"Postponing the date: the old copies are invalidated",
|
|
"To move the delivery later, the software invalidates the old copies with a small transaction on the blockchain (you only pay the network fee). The old copies stay where they are, but they are no longer valid: we mark them in red."
|
|
],
|
|
[
|
|
"New copies with the postponed date",
|
|
"The software prepares the copies with the new date, {Y2}, and sends them to the will-executors. Now only the newest one, the one furthest right, counts."
|
|
],
|
|
[
|
|
"The inheritance date arrives: only the last copy is still valid",
|
|
"It is now {Y2}. From today the Bitcoin network accepts the newest copy; the ones marked in red are no longer valid."
|
|
],
|
|
[
|
|
"On the delivery day, the copies are sent",
|
|
"Each will-executor sends its newest copy, the one furthest right, to the Bitcoin network."
|
|
],
|
|
[
|
|
"The block accepts one copy only: the one sent first",
|
|
"The copies spend the same bitcoin, so the new block accepts only one of them, usually the one sent first. The other two wait in a row below the block."
|
|
],
|
|
[
|
|
"Bitcoin to the heirs, fee to the will-executor; then the others lapse",
|
|
"As soon as the copy is accepted, the bitcoin move from your address to your heirs' addresses, as set in the will, and a small fee goes to the will-executor whose copy was accepted. Only afterwards are the other two copies invalidated, because those bitcoin have already been spent."
|
|
],
|
|
[
|
|
"What if almost all the will-executors disappear?",
|
|
"What happens if almost all the will-executors stop working? We will see it in the next step."
|
|
],
|
|
[
|
|
"One single active will-executor is enough",
|
|
"Even if two will-executors are off or gone, one that works is enough: it sends its copy, the network accepts it, the heirs receive the bitcoin and that will-executor collects its fee. This is why the software uses more than one.",
|
|
"Note: for extreme cases you can save the transaction for the heirs without using will-executors, available in Advanced Mode."
|
|
]
|
|
],
|
|
es:[
|
|
[
|
|
"Escribe tu testamento: elige herederos y fecha",
|
|
"En el software escribes quién hereda tus bitcoin y desde qué fecha. Tus bitcoin están registrados en la blockchain, en tu dirección, y siguen siendo tuyos."
|
|
],
|
|
[
|
|
"Copias firmadas hoy, válidas solo desde la fecha que elegiste",
|
|
"El software prepara una transacción firmada para cada will-executor elegido: mueve los bitcoin a las direcciones de los herederos, pero solo a partir de la fecha de entrega (locktime). Antes de esa fecha la red Bitcoin la rechaza."
|
|
],
|
|
[
|
|
"Los will-executors guardan las copias, sin tus claves",
|
|
"Cada will-executor recibe y guarda su copia. No tiene tus claves: no puede modificarla ni gastar tus bitcoin."
|
|
],
|
|
[
|
|
"Cada copia incluye la comisión de su will-executor",
|
|
"Las copias no son todas iguales: cada una contiene una pequeña comisión para su will-executor, que es su pago. La comisión se descuenta de la herencia solo el día de la entrega, cuando la red acepta la copia."
|
|
],
|
|
[
|
|
"Mientras estés aquí, no se envía nada: tus bitcoin son tuyos",
|
|
"Tus bitcoin se quedan en tu dirección y los usas como siempre. Hasta que llega la fecha de entrega, los will-executors no envían nada y no sale ningún bitcoin de tu dirección."
|
|
],
|
|
[
|
|
"Si cambia el importe del wallet, el software crea copias nuevas",
|
|
"Cuando cambia el importe de la cartera, el software prepara una copia nueva para cada will-executor, con la fecha de entrega adelantada un día respecto a la fecha de la herencia, porque la herencia anterior ya no es válida. Este mecanismo, inventado por Bitcoin After Life, permite ahorrar costosas comisiones de la red Bitcoin en cada cambio."
|
|
],
|
|
[
|
|
"Si añades un heredero, el software crea una copia nueva",
|
|
"Igual que cuando cambia el importe: otra copia, con la fecha de entrega adelantada un día más, se añade a la derecha. Las viejas se quedan donde están, pero no se usarán: en la entrega solo sale la más reciente."
|
|
],
|
|
[
|
|
"Aplazar la fecha: se invalidan las copias viejas",
|
|
"Para mover la entrega más adelante, el software invalida las copias viejas con una pequeña transacción en la blockchain (solo pagas la comisión de la red). Las copias viejas se quedan donde están, pero ya no valen: las marcamos en rojo."
|
|
],
|
|
[
|
|
"Copias nuevas con la fecha aplazada",
|
|
"El software prepara las copias con la nueva fecha, {Y2}, y las envía a los will-executors. Ahora solo cuenta la más reciente, la que está más a la derecha."
|
|
],
|
|
[
|
|
"Llega la fecha de la herencia: solo la última copia sigue válida",
|
|
"Estamos en {Y2}. Desde hoy la red Bitcoin acepta la copia más reciente; las marcadas en rojo ya no valen."
|
|
],
|
|
[
|
|
"El día de la entrega, salen las copias",
|
|
"Cada will-executor envía a la red Bitcoin su copia más reciente, la que está más a la derecha."
|
|
],
|
|
[
|
|
"El bloque acepta una sola copia: la enviada primero",
|
|
"Las copias gastan los mismos bitcoin, así que el nuevo bloque acepta solo una, normalmente la que se envía primero. Las otras dos esperan en fila bajo el bloque."
|
|
],
|
|
[
|
|
"Bitcoin a los herederos, comisión al will-executor; luego las demás caducan",
|
|
"En cuanto se acepta la copia, los bitcoin pasan de tu dirección a las de los herederos, como se establece en el testamento, y una pequeña comisión va al will-executor de la copia aceptada. Solo después se invalidan las otras dos copias, porque esos bitcoin ya se han gastado."
|
|
],
|
|
[
|
|
"¿Y si casi todos los will-executors desaparecen?",
|
|
"¿Qué pasa si casi todos los will-executors dejan de funcionar? Lo vemos en el siguiente paso."
|
|
],
|
|
[
|
|
"Basta con un solo will-executor activo",
|
|
"Aunque dos will-executors estén apagados o hayan desaparecido, basta con uno que funcione: envía su copia, la red la acepta, los herederos reciben los bitcoin y ese will-executor cobra su comisión. Por eso el software usa más de uno.",
|
|
"Nota: para casos extremos se puede guardar la transacción para los herederos sin usar will-executors, disponible en el modo Advanced."
|
|
]
|
|
]};
|
|
const UI={"title": {"it": "Come funziona BAL PROTOCOL", "en": "How BAL PROTOCOL works", "es": "Cómo funciona BAL PROTOCOL"}, "subtitle": {"it": "Vedi come funzionano i WILL-EXECUTOR", "en": "See how WILL-EXECUTORS work", "es": "Mira cómo funcionan los WILL-EXECUTORS"}, "sceneT": {"it": "La blockchain, tre will-executor, il tuo indirizzo e quello degli eredi", "en": "The blockchain, three will-executors, your address and your heirs' addresses", "es": "La blockchain, tres will-executors, tu dirección y las de los herederos"}, "sceneD": {"it": "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.", "en": "The signed copies of the will go from your computer to the three will-executors. On the delivery date they all send their copy: the new block accepts only one, the other two are refused, and the bitcoin move from your address to your heirs' addresses.", "es": "Las copias firmadas del testamento van de tu ordenador a los tres will-executors. En la fecha de entrega los tres envían su copia: el nuevo bloque acepta solo una, las otras dos se rechazan, y los bitcoin pasan de tu dirección a las de los herederos."}, "chain": {"it": "Blockchain di Bitcoin", "en": "Bitcoin blockchain", "es": "Blockchain de Bitcoin"}, "accepted": {"it": "accettata", "en": "accepted", "es": "aceptada"}, "off": {"it": "spento", "en": "off", "es": "apagado"}, "refused": {"it": "copie scartate", "en": "copies refused", "es": "copias rechazadas"}, "spent": {"it": "quei bitcoin sono già spesi", "en": "those bitcoin are already spent", "es": "esos bitcoin ya están gastados"}, "todayNote": {"it": "31 ottobre 2024 · nasce BAL", "en": "31 October 2024 · BAL is born", "es": "31 de octubre de 2024 · nace BAL"}, "today": {"it": "oggi", "en": "today", "es": "hoy"}, "delivery": {"it": "consegna", "en": "delivery", "es": "entrega"}, "alive": {"it": "ci sei", "en": "you are here", "es": "estás aquí"}, "sheet": {"it": "Testamento", "en": "Will", "es": "Testamento"}, "copy1": {"it": "copia 1", "en": "copy 1", "es": "copia 1"}, "copy2": {"it": "copia 2", "en": "copy 2", "es": "copia 2"}, "copy3": {"it": "copia 3", "en": "copy 3", "es": "copia 3"}, "amount": {"it": "importo del wallet", "en": "wallet amount", "es": "importe de la cartera"}, "newCopy": {"it": "copia nuova", "en": "new copy", "es": "copia nueva"}, "heirsS": {"it": "eredi", "en": "heirs", "es": "herederos"}, "dueDate": {"it": "data di consegna", "en": "delivery date", "es": "fecha de entrega"}, "noBeat": {"it": "nessun battito", "en": "no heartbeat", "es": "sin latido"}, "you": {"it": "Tu", "en": "You", "es": "Tú"}, "yourAddr": {"it": "il tuo indirizzo", "en": "your address", "es": "tu dirección"}, "heirs": {"it": "Eredi", "en": "Heirs", "es": "Herederos"}, "heir1": {"it": "indirizzo erede 1", "en": "heir 1 address", "es": "dirección heredero 1"}, "heir2": {"it": "indirizzo erede 2", "en": "heir 2 address", "es": "dirección heredero 2"}, "heir3": {"it": "indirizzo erede 3", "en": "heir 3 address", "es": "dirección heredero 3"}, "tip": {"it": "+ mancia", "en": "+ fee", "es": "+ comisión"}, "tipNote1": {"it": "ogni copia ha la sua mancia", "en": "each copy carries its fee", "es": "cada copia lleva su comisión"}, "tipNote2": {"it": "si paga solo alla consegna", "en": "paid only on delivery", "es": "se paga solo en la entrega"}, "amountChg": {"it": "l'importo cambia", "en": "the amount changes", "es": "el importe cambia"}, "heirsChg": {"it": "si aggiunge un erede", "en": "a heir is added", "es": "se añade un heredero"}, "dayBefore": {"it": "un giorno prima", "en": "one day earlier", "es": "un día antes"}, "dayBefore2": {"it": "un altro giorno prima", "en": "another day earlier", "es": "otro día antes"}, "invalid": {"it": "copie invalidate", "en": "copies invalidated", "es": "copias invalidadas"}, "question": {"it": "E se la maggior parte dei WILL-EXECUTOR sparisce, cosa succede?", "en": "What if most of the WILL-EXECUTORS disappear?", "es": "¿Y si la mayoría de los WILL-EXECUTORS desaparece, qué pasa?"}, "prev": {"it": "← Indietro", "en": "← Back", "es": "← Atrás"}, "next": {"it": "Avanti →", "en": "Next →", "es": "Siguiente →"}, "play": {"it": "▶ Riproduci", "en": "▶ Play", "es": "▶ Reproducir"}, "restart": {"it": "↺ Dall'inizio", "en": "↺ From the start", "es": "↺ Desde el inicio"}, "pause": {"it": "❚❚ Pausa", "en": "❚❚ Pause", "es": "❚❚ Pausa"}, "sound": {"it": "Suono acceso / spento", "en": "Sound on / off", "es": "Sonido sí / no"}, "music": {"it": "Musica accesa / spenta", "en": "Music on / off", "es": "Música sí / no"}, "tapSound": {"it": "tocca per il suono", "en": "tap for sound", "es": "toca para el sonido"}, "stepOf": {"it": "Passo {n} di {m}", "en": "Step {n} of {m}", "es": "Paso {n} de {m}"}};
|
|
// the language: ?lang=, then the last one chosen, then the browser's (Italian or Spanish), else English
|
|
let LANG=(()=>{const q=new URLSearchParams(location.search).get("lang");return q&&STEPS_L[q]?q:"en"})(); // international page: English first
|
|
for(const l in STEPS_L)STEPS_L[l].forEach(st=>{for(let i=0;i<st.length;i++)st[i]=st[i].replace(/\{Y2\}/g,Y2)});
|
|
let STEPS=STEPS_L[LANG];
|
|
const T=k=>UI[k][LANG];
|
|
const $=id=>document.getElementById(id);
|
|
const SX=370, RYI=i=>140+i*90; // the will-executors, one above the other: x of the server, y of row i
|
|
const HOME=i=>[210,160+i*40], SLOT=i=>[SX+174,RYI(i)-4]; // the pile of copies is at the right of its server
|
|
const BLOCK=[718,33]; // the envelope inside the next block
|
|
const NEAR=[[718,104],[718,140]]; // where a refused copy stops: in a column right under the accepted one, below the block
|
|
const COIN_YOU=[184,376], COIN_HEIR=[[965,277],[965,325],[965,373]], COIN3_YOU=[COIN_YOU[0]-10,COIN_YOU[1]+14], FEE_START=[COIN_YOU[0]+11,COIN_YOU[1]+20]; // the tip starts from your address, with the heirs' coins
|
|
const STK=38; // each newer copy lies further right: the oldest is on the left, the newest on the right
|
|
const PILE=(i,k)=>[SLOT(i)[0]+STK*k,SLOT(i)[1]]; // place k of the row of copies of server i: 0 = oldest (left) ... 2 = newest (right, on top)
|
|
const TODAY=96, DUE=[456,936];
|
|
|
|
// the blockchain
|
|
const chain=$("chain");
|
|
// one block more per step: the chain slides from right to left, the next-block place stays on the right
|
|
// block numbers: the tip was 971998 on 2026-10-18 13:04 UTC (read from mempool.space); about 144 new blocks a day since then.
|
|
// It is an estimate (the real number differs by a few blocks per day at most): the strip shows the 8 latest blocks and the next one.
|
|
const TIP0=971998, T0=1792328640, TIP=TIP0+Math.max(0,Math.floor(144*(Date.now()/1000-T0)/86400));
|
|
const K=8, X0=40, BLK0=TIP-7, BLK=84, LAST=K+STEPS.length-1+3, blocks=[], slots=[], links=[];
|
|
for(let i=0;i<=LAST;i++){
|
|
// block i: mined (numbered), the next block (dashed) or a future block (dashed, no number)
|
|
const x=X0+i*BLK, g=document.createElementNS(NS,"g");
|
|
g.innerHTML=`<g class="bk"><rect class="blk" x="${x}" y="20" width="60" height="60"/>
|
|
<text class="blk-n" x="${x+30}" y="52" text-anchor="middle">${BLK0+i}</text>
|
|
<g class="lnk"><rect class="link" x="${x+52}" y="64" width="18" height="10" rx="5"/><rect class="link" x="${x+64}" y="66" width="18" height="10" rx="5"/></g></g>
|
|
<rect class="slot" x="${x}" y="20" width="60" height="60"/>`;
|
|
chain.appendChild(g); blocks.push(g.firstElementChild); slots.push(g.lastElementChild); links.push(g.querySelector(".lnk"));
|
|
}
|
|
function slide(n){
|
|
// the chain slides one block to the left at each step; the divider stays where it is.
|
|
// Left of it: mined blocks (the last one has no link to the divider). Right of it: the next block and three future blocks, without number.
|
|
const nb=K+n;
|
|
blocks.forEach((b,i)=>b.style.display=(i<nb&&i>n)?"":"none"); // light blue: the first place holds the BAL logo
|
|
links.forEach((l,i)=>l.style.display=i<nb-1?"":"none");
|
|
slots.forEach((t,i)=>{t.style.display=(i>=nb&&i<=nb+3)?"":"none";t.style.opacity=i===nb?1:.45});
|
|
mv("chain",-BLK*n,0);
|
|
}
|
|
// racks
|
|
const racks=$("racks");
|
|
[0,1,2].forEach(i=>{
|
|
const g=document.createElementNS(NS,"g"); g.id="rack"+i; g.setAttribute("class","fade");
|
|
// a will-executor is one server unit: a row of drive bays and a status light
|
|
const x=SX, y=RYI(i);
|
|
g.innerHTML=`<rect x="${x}" y="${y}" width="150" height="27" rx="3" fill="var(--panel)" stroke="var(--srv-line)" stroke-width="2"/>
|
|
${[0,1,2,3,4].map(k=>`<line x1="${x+16+k*9}" y1="${y+7}" x2="${x+16+k*9}" y2="${y+20}" stroke="var(--srv-line)" stroke-width="2.2" stroke-linecap="round" opacity=".55"/>`).join("")}
|
|
<text x="${x+88}" y="${y+18.5}" text-anchor="middle" style="font:700 14px var(--body);fill:var(--srv-line)">${i===2?"Umbrel":"Server"}</text>
|
|
<circle class="led" cx="${x+128}" cy="${y+13.5}" r="4" fill="var(--led)"/>
|
|
<rect x="${x-4}" y="${y+33}" width="158" height="28" rx="6" fill="var(--panel)"/>
|
|
<text class="lbl" x="${x+75}" y="${y+53}" text-anchor="middle" style="font-size:16.5px">Will-executor ${i+1}</text>`;
|
|
racks.appendChild(g);
|
|
});
|
|
// envelopes and their torn copies
|
|
const envs=$("envs"), tears=$("tears");
|
|
for(let i=0;i<12;i++){
|
|
const e=document.createElementNS(NS,"g"); e.id="env"+i; e.setAttribute("class","mv");
|
|
e.innerHTML=`<g filter="url(#sh)"><use href="#env" width="48" height="34"/></g><g class="tip"><circle cx="43" cy="5" r="8" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.6"/><text x="43" y="9" text-anchor="middle" style="font:700 10px var(--display);fill:#6B4500">₿</text></g><g class="bad"><rect x="1" y="1" width="46" height="32" rx="3" fill="#E5484D" opacity=".3"/><rect x="1" y="1" width="46" height="32" rx="3" fill="none" stroke="#C62828" stroke-width="2"/><circle cx="6" cy="6" r="7" fill="#C62828"/><path d="M3 3 l6 6 M9 3 l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></g>`; if(i<3||i>=9)envs.appendChild(e);
|
|
const t=document.createElementNS(NS,"g"); t.id="tear"+i; t.setAttribute("opacity","0");
|
|
t.innerHTML=`<polygon class="half" points="1,1 24,1 20,9 27,17 20,25 24,33 1,33" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.8"/>
|
|
<polygon class="half" points="24,1 47,1 47,33 24,33 20,25 27,17 20,9" fill="url(#gEnv)" stroke="#D97706" stroke-width="1.5"/>
|
|
<g class="half"><circle cx="24" cy="17" r="11" fill="var(--danger)"/><path d="M19 12 l10 10 M29 12 l-10 10" stroke="#fff" stroke-width="3" stroke-linecap="round"/></g>`;
|
|
tears.appendChild(t);
|
|
}
|
|
// the older copies of a pile (env3-5 one layer down, env6-8 two down): drawn first, so the newest copy (env0-2) always lies on top
|
|
for(let i=3;i<9;i++){
|
|
const e=document.createElementNS(NS,"g"); e.id="env"+i; e.setAttribute("class","mv"); e.style.opacity=0;
|
|
e.innerHTML=`<g filter="url(#sh)"><use href="#env" width="48" height="34"/></g><g class="tip"><circle cx="43" cy="5" r="8" fill="url(#gCoin)" stroke="#D97706" stroke-width="1.6"/><text x="43" y="9" text-anchor="middle" style="font:700 10px var(--display);fill:#6B4500">₿</text></g><g class="bad"><rect x="1" y="1" width="46" height="32" rx="3" fill="#E5484D" opacity=".3"/><rect x="1" y="1" width="46" height="32" rx="3" fill="none" stroke="#C62828" stroke-width="2"/><circle cx="6" cy="6" r="7" fill="#C62828"/><path d="M3 3 l6 6 M9 3 l-6 6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></g>`; envs.insertBefore(e,envs.firstChild);
|
|
}
|
|
// controls
|
|
const dots=$("dots");
|
|
STEPS.forEach((s,i)=>{const b=document.createElement("button");b.className="dot";b.type="button";b.id="dot"+i;
|
|
b.textContent=i+1;b.setAttribute("aria-label",(i+1)+". "+s[0]);b.onclick=()=>{stop();show(i)};dots.appendChild(b)});
|
|
|
|
const mv=(id,x,y)=>{$(id).style.transform=`translate(${x}px,${y}px)`};
|
|
const op=(id,o)=>{$(id).style.opacity=o};
|
|
function jump(id,x,y,o){const el=$(id);el.style.transition="none";mv(id,x,y);if(o!==undefined)el.style.opacity=o;el.getBoundingClientRect();el.style.transition=""}
|
|
let step=0,timer=null,subs=[];
|
|
const later=(f,ms)=>subs.push(setTimeout(f,ms));
|
|
|
|
// ---- sounds: made with the Web Audio API (no audio files). On by default; browsers let a page play
|
|
// sound only after the first click / tap / key on it, so the engine starts at the first gesture.
|
|
let AC=null,OUT=null,soundOn=true;
|
|
try{const v=localStorage.getItem("bal-explainer-sound");if(v!==null)soundOn=v==="1"}catch(e){}
|
|
function audio(){
|
|
if(!AC){const C=window.AudioContext||window.webkitAudioContext;if(!C)return null;
|
|
AC=new C();OUT=AC.createGain();OUT.gain.value=.32;OUT.connect(AC.destination);AC.onstatechange=sndHint}
|
|
if(AC.state==="suspended")AC.resume().then(sndHint).catch(()=>{});
|
|
sndHint();
|
|
return AC;
|
|
}
|
|
["pointerdown","keydown"].forEach(ev=>document.addEventListener(ev,()=>{if(soundOn)audio()},{passive:true}));
|
|
function tone(f,t,d,o={}){
|
|
// one note: frequency f (sliding to o.to), start t, length d, wave o.type, loudness o.v
|
|
const c=AC,g=c.createGain(),s=c.createOscillator();s.type=o.type||"sine";
|
|
s.frequency.setValueAtTime(f,t);if(o.to)s.frequency.exponentialRampToValueAtTime(o.to,t+d);
|
|
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(o.v||.4,t+(o.a||.008));g.gain.exponentialRampToValueAtTime(.0005,t+d);
|
|
s.connect(g);g.connect(OUT);s.start(t);s.stop(t+d+.05);
|
|
}
|
|
function hiss(t,d,o={}){
|
|
// filtered noise: o.f filter frequency (sliding to o.to), o.q, o.ft filter type, o.v loudness
|
|
const c=AC,n=Math.ceil(c.sampleRate*d),b=c.createBuffer(1,n,c.sampleRate),x=b.getChannelData(0);
|
|
for(let i=0;i<n;i++)x[i]=Math.random()*2-1;
|
|
const src=c.createBufferSource(),fl=c.createBiquadFilter(),g=c.createGain();src.buffer=b;
|
|
fl.type=o.ft||"bandpass";fl.Q.value=o.q||1;fl.frequency.setValueAtTime(o.f||1000,t);if(o.to)fl.frequency.exponentialRampToValueAtTime(o.to,t+d);
|
|
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(o.v||.3,t+(o.a||.02));g.gain.exponentialRampToValueAtTime(.0005,t+d);
|
|
src.connect(fl);fl.connect(g);g.connect(OUT);src.start(t);src.stop(t+d+.05);
|
|
}
|
|
const SFX={
|
|
pop:t=>tone(520,t,.12,{to:880,v:.25}), // a copy is born
|
|
whoosh:t=>hiss(t,.55,{f:350,to:2400,q:.8,v:.6,a:.2}), // envelopes flying
|
|
tin:t=>{tone(2093,t,.35,{type:"triangle",v:.18});tone(3136,t+.02,.25,{v:.08})}, // little coin on a copy
|
|
beat:t=>{tone(70,t,.16,{to:42,v:.5});tone(62,t+.2,.14,{to:40,v:.35})}, // heart: lub-dub
|
|
ding:t=>{tone(880,t,.9,{v:.28});tone(1320,t,.6,{v:.08})}, // something new (coin, heir)
|
|
error:t=>{tone(110,t,.45,{to:50,v:.45});tone(196,t+.25,.14,{type:"square",v:.08});tone(185,t+.42,.18,{type:"square",v:.08})},
|
|
bell:t=>{[523,1046,1568,2093].forEach((f,i)=>tone(f,t,2.2-i*.3,{v:[.3,.16,.08,.05][i]}))}, // the date arrives
|
|
medal:(t,k)=>{const f=[784,988,1175][k];tone(f,t,.5,{type:"triangle",v:.25});tone(f*2,t+.03,.3,{v:.06})}, // 1st, 2nd, 3rd: rising notes
|
|
stamp:t=>{hiss(t,.12,{f:300,ft:"lowpass",v:.6,a:.004});tone(130,t,.18,{to:70,v:.5});
|
|
[523,659,784].forEach(f=>tone(f,t+.12,.9,{type:"triangle",v:.12}))}, // block accepts the copy
|
|
coins:t=>{for(let i=0;i<7;i++){const u=t+i*.09+Math.random()*.03;tone(1976+Math.random()*400,u,.22,{type:"triangle",v:.2})}},
|
|
fanfare:t=>{[523,659,784,1046].forEach((f,i)=>tone(f,t+i*.09,i<3?.18:.8,{type:"triangle",v:.16}))},
|
|
tear:t=>{for(let i=0;i<9;i++)hiss(t+i*.035,.05,{f:1800+Math.random()*1500,q:1.5,v:.5,a:.004})}, // paper torn
|
|
powerdown:t=>{tone(520,t,.9,{to:60,type:"sawtooth",v:.07});tone(260,t,.9,{to:40,v:.2})},
|
|
};
|
|
function sndHint(){
|
|
// while the sound is on but the browser still holds it back (no click / tap yet), the speaker
|
|
// button pulses and says "tap for sound"; it stops as soon as the sound can really play
|
|
const wait=soundOn&&!(AC&&AC.state==="running");
|
|
if(!wait&&soundOn){musicStart();voiceKick()}
|
|
$("snd").classList.toggle("wait",wait);$("sndhint").hidden=!wait;
|
|
}
|
|
function sfx(name,arg){
|
|
// plays a sound now, only when the sound is on and the browser already allows it
|
|
if(!soundOn||!AC||AC.state!=="running")return;
|
|
try{duck();SFX[name](AC.currentTime+.01,arg)}catch(e){}
|
|
}
|
|
const snd=(name,ms,arg)=>later(()=>sfx(name,arg),ms); // a sound at a time of the step, cancelled with the step
|
|
|
|
// ---- narration (voice version only): one recorded MP3 per step and language (ElevenLabs, 2026-10-23):
|
|
// Italian "Luca" (voce-det/), English "Ian" (voce-det-en/), Spanish "Nico" (voce-det-es/).
|
|
// VO_LEN: length of each clip in seconds (ffprobe). The step lasts the clip plus VO_GAP. VT (set by show) says whether
|
|
// the step is narrated; then the drawing uses the voice times, placed on the phrases of the voice (ffmpeg silencedetect).
|
|
const VO_LEN={it:[12.88,16.32,12.56,17.44,14.96,24.72,17.04,17.84,10.64,10.24,8.48,14.88,21.68,9.04,16.8],
|
|
en:[12.64,16.4,12.32,15.92,13.84,23.28,16.64,17.84,11.76,11.12,8.4,13.84,22.16,9.2,18.0],
|
|
es:[13.52,17.04,11.76,16.32,15.12,24.32,17.04,17.84,11.68,10.16,8.8,14.32,22.16,9.12,18.24]};
|
|
const VX=(it,en,es)=>LANG==="en"?en:LANG==="es"?es:it; // a time of the drawing on the voice of the language
|
|
const VO_V="dc51d14509"; // version of the clips (hash), added to their address against stale browser caches
|
|
const VO_GAP=1200;
|
|
let VO=null,VT=false,voReady=false;
|
|
const voiceOn=()=>soundOn; // a recorded voice in all three languages
|
|
function voiceStop(){if(VO){VO.onended=null;VO.pause();VO=null}voiceDuck(false)}
|
|
function voiceStart(i){
|
|
// the clip of step i from the start; only once the browser lets the page play sound (first click / tap)
|
|
voiceStop();
|
|
if(!VT||!AC||AC.state!=="running")return;
|
|
const a=new Audio(({it:"voice-full-it/",en:"voice-full-en/",es:"voice-full-es/"}[LANG])+"passo-"+(i+1)+".mp3?v="+VO_V);VO=a;
|
|
a.onended=()=>{if(VO===a)voiceDuck(false)};
|
|
a.play().then(()=>{if(VO===a)voiceDuck(true)}).catch(()=>{if(VO===a)VO=null});
|
|
}
|
|
function voiceKick(){
|
|
// the first click / tap that unlocks the sound: the step on screen starts again, this time with its voice
|
|
if(voReady||!AC||AC.state!=="running")return;
|
|
voReady=true;
|
|
if(voiceOn()){const playing=!!timer;show(step);if(playing){clearTimeout(timer);auto()}}
|
|
}
|
|
|
|
// ---- background music: a calm ambient pad (long soft chords), made in the page. Very low; it ducks for a
|
|
// moment under every sound effect. Own button (note), on by default, remembered in the browser.
|
|
let musicOn=true,MUS=null,musTimer=null,musStep=0;
|
|
try{const v=localStorage.getItem("bal-explainer-music");if(v!==null)musicOn=v==="1"}catch(e){}
|
|
// "Alba ricca" (owner's choice, 2026-10-20): Cmaj7 - Am7 - Fmaj7 - G6, 5.5 s per chord; soft bass, three layers
|
|
// per note spread in stereo, high shimmer, slow arpeggio of bell notes, two echoes and a slowly breathing filter
|
|
const PRESETS=[
|
|
{name:"Alba ricca",len:5.5,att:2,cut:1000,dt:.42,fb:.38,rich:true,
|
|
ch:[[130.81,196,246.94,329.63],[110,164.81,261.63,329.63],[87.31,174.61,220,329.63],[98,146.83,246.94,293.66]]}];
|
|
const PRE=0;
|
|
function musicBus(){
|
|
// the music has its own volume, a soft low-pass filter and an echo for space (from the preset)
|
|
if(MUS||!AC)return;const P=PRESETS[PRE];
|
|
const g=AC.createGain(),f=AC.createBiquadFilter(),d=AC.createDelay(1),fb=AC.createGain(),wet=AC.createGain();
|
|
g.gain.value=0;f.type="lowpass";f.frequency.value=P.cut;d.delayTime.value=P.dt;fb.gain.value=P.fb;wet.gain.value=.5;
|
|
f.connect(g);f.connect(d);d.connect(fb);fb.connect(d);d.connect(wet);wet.connect(g);g.connect(OUT);
|
|
if(P.rich){
|
|
// a second, longer echo for more space, and a very slow wave on the filter: the sound "breathes"
|
|
const d2=AC.createDelay(1.5),fb2=AC.createGain(),w2=AC.createGain();d2.delayTime.value=.71;fb2.gain.value=.3;w2.gain.value=.35;
|
|
f.connect(d2);d2.connect(fb2);fb2.connect(d2);d2.connect(w2);w2.connect(g);
|
|
const lfo=AC.createOscillator(),depth=AC.createGain();lfo.frequency.value=.07;depth.gain.value=350;
|
|
lfo.connect(depth);depth.connect(f.frequency);lfo.start();
|
|
}
|
|
MUS={g,f,level:.55};
|
|
}
|
|
function note(fr,t,len,o){
|
|
// one soft note of the pad: wave o.type, loudness o.v, fade-in o.att, stereo position o.pan (-1 .. 1)
|
|
const s=AC.createOscillator(),v=AC.createGain();s.type=o.type||"sine";s.frequency.value=fr;
|
|
let out=v;if(AC.createStereoPanner&&o.pan){const p=AC.createStereoPanner();p.pan.value=o.pan;v.connect(p);out=p}
|
|
const end=t+len+(o.rel||2.5);
|
|
v.gain.setValueAtTime(0,t);v.gain.linearRampToValueAtTime(o.v,t+(o.att||2));v.gain.setValueAtTime(o.v,t+len);v.gain.linearRampToValueAtTime(0,end);
|
|
s.connect(v);out.connect(MUS.f);s.start(t);s.stop(end+.1);
|
|
}
|
|
function bell(fr,t,v,pan){
|
|
// a short soft bell note (for the arpeggio)
|
|
const s=AC.createOscillator(),g=AC.createGain();s.type="sine";s.frequency.value=fr;
|
|
let out=g;if(AC.createStereoPanner){const p=AC.createStereoPanner();p.pan.value=pan||0;g.connect(p);out=p}
|
|
g.gain.setValueAtTime(0,t);g.gain.linearRampToValueAtTime(v,t+.02);g.gain.exponentialRampToValueAtTime(.0005,t+2.8);
|
|
s.connect(g);out.connect(MUS.f);s.start(t);s.stop(t+2.9);
|
|
}
|
|
function padChord(t){
|
|
// one chord: every note fades in slowly, stays, and fades out while the next chord comes
|
|
const P=PRESETS[PRE],ch=P.ch[musStep%P.ch.length];musStep++;
|
|
if(P.rich){
|
|
// the four notes spread left / right, three layers each (sine, triangle, a very quiet filtered saw)
|
|
ch.forEach((fr,i)=>{const pan=[-.5,-.15,.2,.5][i];
|
|
note(fr,t,P.len,{type:"sine",v:.08/(1+i*.25),pan});
|
|
note(fr*1.004,t,P.len,{type:"triangle",v:.04/(1+i*.25),pan:-pan});
|
|
note(fr*.997,t,P.len,{type:"sawtooth",v:.012,pan,att:2.6})});
|
|
note(ch[0]/2,t,P.len,{type:"sine",v:.09,att:1.5}); // soft bass: the root, an octave lower
|
|
note(ch[2]*2,t+.8,P.len-.8,{type:"sine",v:.018,pan:.3,att:2.5}); // high shimmer
|
|
note(ch[3]*2,t+1.2,P.len-1.2,{type:"sine",v:.012,pan:-.3,att:2.5});
|
|
[ch[1]*2,ch[2]*2,ch[3]*2].forEach((fr,j)=>bell(fr,t+1+j*1.3,.03,[-.4,0,.4][j])); // slow arpeggio of bell notes
|
|
return;
|
|
}
|
|
ch.forEach((fr,i)=>P.voices.forEach((type,k)=>{
|
|
const o=AC.createOscillator(),v=AC.createGain();o.type=type;
|
|
o.frequency.value=fr*(k?1.003:1); // two slightly detuned voices: a soft, moving sound
|
|
const peak=(k?.05:.09)/(1+i*.25)*(type==="triangle"&&P.sparkle?.8:1),end=t+P.len+2.5;
|
|
v.gain.setValueAtTime(0,t);v.gain.linearRampToValueAtTime(peak,t+P.att);v.gain.setValueAtTime(peak,t+P.len);v.gain.linearRampToValueAtTime(0,end);
|
|
o.connect(v);v.connect(MUS.f);o.start(t);o.stop(end+.1);
|
|
}));
|
|
if(P.sparkle){ // a soft high bell note on every chord
|
|
const o=AC.createOscillator(),v=AC.createGain(),u=t+1.5;o.type="sine";o.frequency.value=ch[3]*2;
|
|
v.gain.setValueAtTime(0,u);v.gain.linearRampToValueAtTime(.035,u+.02);v.gain.exponentialRampToValueAtTime(.0005,u+2.5);
|
|
o.connect(v);v.connect(MUS.f);o.start(u);o.stop(u+2.6);
|
|
}
|
|
}
|
|
function musicTick(){
|
|
// keeps one chord ahead; runs only while the music is on and the sound is allowed
|
|
if(!musicOn||!soundOn||!AC||AC.state!=="running"){musTimer=null;return}
|
|
musicBus();
|
|
const now=AC.currentTime;
|
|
if(!MUS.next||MUS.next<now+.5){MUS.next=Math.max(now+.1,MUS.next||0);padChord(MUS.next);MUS.next+=PRESETS[PRE].len}
|
|
musTimer=setTimeout(musicTick,1000);
|
|
}
|
|
function musicStart(){
|
|
if(!musicOn||!soundOn||!AC||AC.state!=="running")return;
|
|
musicBus();const t=AC.currentTime;MUS.g.gain.cancelScheduledValues(t);MUS.g.gain.setValueAtTime(MUS.g.gain.value,t);MUS.g.gain.linearRampToValueAtTime(MUS.level,t+2.5);
|
|
if(!musTimer)musicTick();
|
|
}
|
|
function musicStop(){
|
|
if(MUS&&AC){const t=AC.currentTime;MUS.g.gain.cancelScheduledValues(t);MUS.g.gain.setValueAtTime(MUS.g.gain.value,t);MUS.g.gain.linearRampToValueAtTime(0,t+1)}
|
|
clearTimeout(musTimer);musTimer=null;if(MUS)MUS.next=0;
|
|
}
|
|
function duck(){
|
|
// the music steps back for a moment under a sound effect
|
|
if(!MUS||!musicOn)return;const t=AC.currentTime,g=MUS.g.gain;
|
|
g.cancelScheduledValues(t);g.setValueAtTime(g.value,t);g.linearRampToValueAtTime(MUS.level*.35,t+.08);g.linearRampToValueAtTime(MUS.level*(VO&&!VO.paused?.4:1),t+1.6);
|
|
}
|
|
function voiceDuck(on){
|
|
// the music goes down while the voice speaks, and back up when it ends
|
|
if(!MUS||!AC||!musicOn)return;const t=AC.currentTime,g=MUS.g.gain;
|
|
g.cancelScheduledValues(t);g.setValueAtTime(g.value,t);g.linearRampToValueAtTime(MUS.level*(on?.4:1),t+.6);
|
|
}
|
|
function halves(i,torn){const h=$("tear"+i).querySelectorAll(".half");
|
|
h[0].style.transform=torn?"translate(-22px,34px) rotate(-38deg)":"";h[1].style.transform=torn?"translate(22px,34px) rotate(38deg)":"";
|
|
h[0].style.opacity=h[1].style.opacity=torn?0:1; h[2].style.opacity=torn?0:1}
|
|
function tear(i,x,y){
|
|
// the envelope is replaced by its two halves (and a red cross), which fall apart
|
|
jump("env"+i,x,y,0);const t=$("tear"+i);t.setAttribute("transform",`translate(${x},${y})`);t.setAttribute("opacity","1");
|
|
later(()=>halves(i,true),700);
|
|
}
|
|
function reset(){
|
|
subs.forEach(clearTimeout);subs=[];
|
|
for(let i=0;i<3;i++){
|
|
op("rack"+i,1);
|
|
$("rack"+i).querySelectorAll(".led").forEach(l=>l.setAttribute("fill","var(--led)"));
|
|
}
|
|
for(let i=0;i<12;i++){const t=$("tear"+i);t.setAttribute("opacity","0");
|
|
t.querySelectorAll(".half").forEach(h=>h.style.transition="none");halves(i,false);t.getBoundingClientRect();
|
|
t.querySelectorAll(".half").forEach(h=>h.style.transition="")}
|
|
["newblock","nbTag","rejTag","offTag","offTag1","invTag","tx","beat","feeTag","ord0","ord1","ord2","joyHeir","joyWE","write","dayTag","chgTag","ageTag","tipTag","wifi","signed","scCopies","scTips","scAmount","amtNew","scHeirs","heirB","heirC","heir3g","heirNew","scInval","scCal","scFlat","dueX"].forEach(id=>{const e=$(id);e.style.transition="none";e.style.opacity=0;e.getBoundingClientRect();e.style.transition=""});
|
|
jump("coins",...COIN_YOU,1);jump("coins2",COIN_YOU[0]+22,COIN_YOU[1]+8,1);jump("coins3",...COIN3_YOU,0);
|
|
jump("fee",...FEE_START,0);
|
|
}
|
|
const svgRoot=document.querySelector(".stage svg");
|
|
function show1(id){const e=$(id);e.style.transition="none";e.style.opacity=1;e.getBoundingClientRect();e.style.transition=""}
|
|
// the copies of a will-executor: layer 0 is the first one (left), layer 3 the newest (right)
|
|
const LAY=[[6,7,8],[3,4,5],[0,1,2],[9,10,11]];
|
|
const E=(k,i)=>"env"+LAY[k][i];
|
|
function markBad(id){const el=$(id),b=el.querySelector(".bad");b.style.transition="none";el.classList.add("isbad");b.getBoundingClientRect();b.style.transition=""}
|
|
function hideEnvs(){for(let k=0;k<4;k++)for(let i=0;i<3;i++){jump(E(k,i),...HOME(i),0);
|
|
// the red mark goes away at once, so going back to an earlier step never shows it fading
|
|
const el=$(E(k,i)),b=el.querySelector(".bad");b.style.transition="none";el.classList.remove("isbad");b.getBoundingClientRect();b.style.transition=""}}
|
|
function placeAll(maxK,bad){
|
|
// layers 0..maxK in place; the first three layers are red when they were invalidated
|
|
for(let k=0;k<=maxK;k++)for(let i=0;i<3;i++){jump(E(k,i),...PILE(i,k),1);if(bad&&k<3)markBad(E(k,i))}
|
|
}
|
|
function arrive(k,delay){
|
|
// new copies come out of the computer and take their place at the right of the others
|
|
for(let i=0;i<3;i++){jump(E(k,i),...HOME(i),0)}
|
|
later(()=>{for(let i=0;i<3;i++)op(E(k,i),1)},delay);
|
|
later(()=>{for(let i=0;i<3;i++)mv(E(k,i),...PILE(i,k))},delay+300);
|
|
}
|
|
const RANK_COL=[["#F5B323","#D97706"],["#B6C2D1","#7C8BA0"],["#D9954F","#9A5F25"]]; // gold, silver, bronze: [fill, outline]
|
|
function setRank(i,k){
|
|
// puts the medal number k+1 (gold, silver, bronze) next to the server of will-executor i
|
|
const g=$("ord"+i);g.setAttribute("transform",`translate(${SX-26},${RYI(i)+12})`);
|
|
const d=g.querySelector(".disc");d.setAttribute("fill",RANK_COL[k][0]);d.setAttribute("stroke",RANK_COL[k][1]);g.querySelector("text").textContent=k+1;
|
|
}
|
|
function showRank(i,k,delay){
|
|
// a medal 1 / 2 / 3 on the will-executor, in the order in which its copy reaches the network (shown on arrival)
|
|
later(()=>{setRank(i,k);op("ord"+i,1)},delay);
|
|
}
|
|
function sendNewest(senders){
|
|
senders.forEach((i,k)=>{later(()=>mv(E(3,i),...(k===0?BLOCK:NEAR[k-1])),800+k*900);snd("whoosh",800+k*900);showRank(i,k,800+k*900+1560);snd("medal",800+k*900+1560,k)}); // 0.9 s apart: the first to send is the first to arrive
|
|
}
|
|
function atBlock(senders){
|
|
senders.forEach((i,k)=>jump(E(3,i),...(k===0?BLOCK:NEAR[k-1]),1));
|
|
}
|
|
function joy(win,delay){
|
|
// heirs and the will-executor that earned the tip are happy: gold stars over the heirs, a gold medal on the server
|
|
later(()=>{$("joyWE").setAttribute("transform",`translate(${SX+150},${RYI(win)-2})`);op("joyHeir",1);op("joyWE",1)},delay);
|
|
}
|
|
function deliver(senders){
|
|
// the whole delivery in one go (last step): sending, acceptance, refusals, funds and tip
|
|
const [win,...lost]=senders;
|
|
senders.forEach((i,k)=>later(()=>mv(E(3,i),...(k===0?BLOCK:NEAR[k-1])),780+k*260));
|
|
later(()=>{op("newblock",1);op("nbTag",1)},2600);
|
|
snd("whoosh",780);snd("stamp",2600);snd("coins",5000);snd("coins",6000);snd("fanfare",6300);
|
|
later(()=>{if(lost.length)op("rejTag",1);lost.forEach((i,k)=>tear(LAY[3][i],...NEAR[k]))},3300);
|
|
later(()=>{op("tx",1)},4300);
|
|
later(()=>{mv("coins",...COIN_HEIR[0]);mv("coins2",...COIN_HEIR[1]);mv("coins3",...COIN_HEIR[2])},4900);
|
|
const cy=RYI(win)+13;
|
|
later(()=>{op("fee",1)},4500);
|
|
later(()=>{mv("fee",SX+75,cy)},4900);
|
|
later(()=>{$("feeTag").setAttribute("transform",`translate(${SX+75},${cy-21})`);op("feeTag",1)},6300);
|
|
joy(win,6300);
|
|
}
|
|
function show(n){
|
|
// the strip of blocks slides one block only in the steps where time really passes (steps 5, 6, 7, 9, 10 and 12);
|
|
// it stays still in the others, so the accepted block keeps one number from step 12 on
|
|
const sl=[4,5,6,8,9,11].filter(i=>i<=n).length;
|
|
step=n;VT=voiceOn();reset();slide(sl);$("nbNum").textContent=BLK0+K+sl;
|
|
svgRoot.classList.toggle("tips",n>=3);
|
|
// the third heir (person, address box, coin) is there from step 7 on
|
|
if(n>=6)jump("coins3",...COIN3_YOU,1); // the third coin arrives when the wallet amount grows (step 6)
|
|
if(n>=7){show1("heirC");show1("heir3g")}
|
|
// the new (third) heir is highlighted in orange while it is added (step 7), on the monitor and on the right
|
|
$("heirBuse").style.color=n===6?"#FBBF24":"";$("heirBuse").style.opacity=n===6?1:.85;
|
|
$("heir3Sub").style.fill=$("heir3Addr").style.fill=n===6?"var(--orange)":"";
|
|
$("heirCuse").style.color=n===6?"var(--orange)":"var(--heir)";$("heirCuse").style.opacity=n===6?1:.9;
|
|
hideEnvs();
|
|
// the delivery date: 2029, one day earlier at every new copy, postponed to 2033 at step 9; "today" reaches it at step 10
|
|
const due=n>=9?DUE[1]:n===6?DUE[0]-5:(n===7||n===8)?DUE[0]-10:DUE[0];
|
|
mv("due",due,0);$("dueText").textContent=n>=9?Y2:Y1;
|
|
mv("today",n>=9?due:TODAY,0);op("todayLbl",n>=9?0:1);
|
|
if(n===0){op("write",1);
|
|
// write the sheet again from the start, once
|
|
["w1","w2","w3","w4","w5","quill"].forEach(id=>{const e=$(id);e.style.animation="none";e.getBoundingClientRect();e.style.animation=""});
|
|
snd("ding",5400)} // the last line is written at 5.3 s: the will is done
|
|
if(n===1){op("scCopies",1);for(let i=0;i<3;i++){const t=VT?VX(4130,3990,4170)+i*800:500+i*400;later(()=>op(E(0,i),1),t);snd("pop",t)}}
|
|
if(n===2){op("wifi",1);for(let i=0;i<3;i++)jump(E(0,i),...HOME(i),1);
|
|
const fl=VT?VX(2980,4000,4330):800;later(()=>{for(let i=0;i<3;i++)mv(E(0,i),...PILE(i,0))},fl);snd("whoosh",fl)}
|
|
if(n===3){op("scTips",1);placeAll(0);later(()=>op("tipTag",1),VT?VX(5980,5510,5890):900);for(let i=0;i<3;i++)snd("tin",150+i*220)}
|
|
if(n===4){op("beat",1);placeAll(0);for(let i=0;i<(VT&&LANG!=="en"?10:9);i++)snd("beat",300+i*1600)} // in time with the heartbeat line (1.6 s)
|
|
if(n===5){
|
|
// the amount changes: new copies, dated one day earlier, arrive to the right of the old ones
|
|
op("scAmount",1);placeAll(0);
|
|
const bar=$("amtBar");bar.style.transition="none";bar.style.transform="scaleX(.45)";bar.getBoundingClientRect();bar.style.transition="";
|
|
$("chgTag").textContent=T("amountChg");
|
|
later(()=>op("chgTag",1),700);
|
|
// first the amount grows (third coin), only then the new copies are sent
|
|
const ar=VT?VX(6350,6000,6390):3200,dy=VT?VX(9900,9620,10070):3900,of=VT?VX(14220,13450,14130):7000;arrive(1,ar);
|
|
later(()=>{bar.style.transform="scaleX(.85)";op("coins3",1)},1000);snd("ding",1000);snd("whoosh",ar+300);
|
|
later(()=>op("amtNew",1),ar);
|
|
later(()=>{mv("due",DUE[0]-5,0);$("dayTag").textContent=T("dayBefore");op("dayTag",1)},dy);
|
|
later(()=>{op("chgTag",0);op("dayTag",0)},of);
|
|
}
|
|
if(n===6){
|
|
// the heirs change: one more copy, one more day earlier, further right
|
|
op("scHeirs",1);placeAll(1);
|
|
$("chgTag").textContent=T("heirsChg");
|
|
// a third heir is added first (new person, new address box, slow fade, no coloured outline);
|
|
// only afterwards the new copies are sent. The third coin is already there since step 6.
|
|
later(()=>op("chgTag",1),600);
|
|
later(()=>{op("heirB",1);op("heirC",1);op("heir3g",1)},1200);snd("ding",1200);snd("whoosh",(VT?VX(5580,5680,5930):4600)+300);
|
|
arrive(2,VT?VX(5580,5680,5930):4600);
|
|
later(()=>{op("heirNew",1);mv("due",DUE[0]-10,0);$("dayTag").textContent=T("dayBefore2");op("dayTag",1)},VT?VX(6670,6590,6800):5800);
|
|
later(()=>{op("chgTag",0);op("dayTag",0)},VT?VX(10940,10630,11010):8200);
|
|
}
|
|
if(n===7){
|
|
// postponing, first part: the old copies are invalidated on the blockchain; they stay where they are, in red
|
|
op("scInval",1);placeAll(2);
|
|
later(()=>{op("invTag",1);op("dueX",1);for(let k=0;k<3;k++)for(let i=0;i<3;i++)markBad(E(k,i))},VT?VX(5900,5970,5840):900);snd("error",VT?VX(5900,5970,5840):900);
|
|
}
|
|
if(n===8){
|
|
// postponing, second part: the new date and the new copies
|
|
op("scCal",1);$("calYear").textContent=Y1;placeAll(2,true);
|
|
arrive(3,VT?VX(2720,2760,2640):1000);snd("whoosh",(VT?VX(2720,2760,2640):1000)+300);
|
|
// the delivery date moves to the new one, on the timeline and on the screen
|
|
later(()=>{mv("due",DUE[1],0);$("dueText").textContent=Y2;$("calYear").textContent=Y2},VT?VX(4350,4200,4330):1200);
|
|
}
|
|
if(n>=9)op("scFlat",1);
|
|
if(n===9)snd("bell",1500); // "today" reaches the delivery date
|
|
if(n>=9&&n<=12)placeAll(n>=12?2:3,true);
|
|
if(n===14)for(let i=0;i<3;i++)jump(E(3,i),...PILE(i,0),1); // after the delivery only the copy that is sent is left, next to its server
|
|
// the copy of will-executor 2 is the one the block accepts (the winner is not simply the nearest one)
|
|
if(n===10)sendNewest([1,0,2]);
|
|
// the medals of slide 11 stay on in slides 12 and 13
|
|
if(n===11||n===12)[1,0,2].forEach((i,k)=>{setRank(i,k);show1("ord"+i)});
|
|
if(n===11){
|
|
// slide 12: the block accepts the copy of will-executor 2; the other two wait in a column under the block
|
|
atBlock([1,0,2]);
|
|
later(()=>{op("newblock",1);op("nbTag",1)},VT?VX(7000,6800,7000):900);snd("stamp",VT?VX(7000,6800,7000):900);
|
|
}
|
|
if(n===12){
|
|
// slide 13: once the copy is accepted the funds go to the heirs (one coin each) and the tip to the will-executor,
|
|
// at the same moment; only afterwards the other two copies are invalidated (their coins are already spent)
|
|
show1("newblock");show1("nbTag");
|
|
jump(E(3,1),...BLOCK,1);jump(E(3,0),...NEAR[0],1);jump(E(3,2),...NEAR[1],1);
|
|
const tx=VT?VX(5720,5560,6030):600,go=VT?VX(7478,7510,7740):1200,tip=VT?VX(12592,12130,12940):1000,glad=VT?VX(13800,13330,14140):2800,
|
|
torn=VT?VX(16502,16520,17080):5200,gone=VT?VX(19392,19900,20100):7500;
|
|
later(()=>op("tx",1),tx);
|
|
later(()=>{mv("coins",...COIN_HEIR[0]);mv("coins2",...COIN_HEIR[1]);mv("coins3",...COIN_HEIR[2])},go);
|
|
snd("coins",go+100);snd("coins",go+1300);snd("fanfare",glad);snd("tear",torn);
|
|
{const cy=RYI(1)+13;
|
|
later(()=>op("fee",1),tip);
|
|
later(()=>mv("fee",SX+75,cy),tip+200);
|
|
later(()=>{$("feeTag").setAttribute("transform",`translate(${SX+75},${cy-21})`);op("feeTag",1)},glad);joy(1,glad)}
|
|
later(()=>{op("rejTag",1);tear(LAY[3][0],...NEAR[0]);tear(LAY[3][2],...NEAR[1])},torn);
|
|
// the delivery is done: the old, invalidated copies go away
|
|
later(()=>{for(let k=0;k<3;k++)for(let i=0;i<3;i++)op(E(k,i),0)},gone);
|
|
}
|
|
$("qslide").parentNode.classList.toggle("ask",n===13);
|
|
voiceStart(n);
|
|
if(n===14){
|
|
// two of the three will-executors are off: the one that is left is enough
|
|
const off=()=>[0,1].forEach(r=>{op("rack"+r,.35);op(r?"offTag1":"offTag",1);$("rack"+r).querySelectorAll(".led").forEach(l=>l.setAttribute("fill","var(--led-off)"));
|
|
op(E(3,r),.25)});if(VT)later(off,VX(3000,3340,2890));else off();
|
|
snd("powerdown",VT?VX(3000,3340,2890):200);
|
|
if(VT)later(()=>deliver([2]),VX(6940,7670,7840));else deliver([2]);
|
|
}
|
|
$("eyebrow").textContent=T("stepOf").replace("{n}",n+1).replace("{m}",STEPS.length);
|
|
$("cap-t").textContent=STEPS[n][0];$("cap-d").textContent=STEPS[n][1];
|
|
$("cap-n").textContent=STEPS[n][2]||"";
|
|
for(let i=0;i<STEPS.length;i++){const d=$("dot"+i);d.classList.toggle("done",i<n);
|
|
if(i===n)d.setAttribute("aria-current","step");else d.removeAttribute("aria-current")}
|
|
}
|
|
const lbl=k=>T(k).replace(/^[^\p{L}]+/u,"");
|
|
function setPlay(on){$("play").textContent=on?"❚❚":"▶";$("play").title=lbl(on?"pause":"play");$("play").setAttribute("aria-label",lbl(on?"pause":"play"))}
|
|
function stop(){clearTimeout(timer);timer=null;setPlay(false);voiceStop()}
|
|
$("next").onclick=()=>{stop();show((step+1)%STEPS.length)};
|
|
$("prev").onclick=()=>{stop();show((step+STEPS.length-1)%STEPS.length)};
|
|
// time on each step: attentive reading (about 3 words a second, note included) plus 2.5 s to see the drawing; never under 9 s (the longest animation), the question slide 6 s
|
|
// PACE: owner decision 2026-10-19, all the times halved (1 = the reading times above)
|
|
const PACE=.5;
|
|
const dwell=n=>Math.round(PACE*Math.max(n===13?6000:9000,Math.round((STEPS[n][0]+" "+STEPS[n][1]+" "+(STEPS[n][2]||"")).split(/\s+/).length/3*1000)+2500));
|
|
// voice version: a narrated step lasts its clip plus VO_GAP; otherwise the reading time above
|
|
const dwellV=n=>voiceOn()?Math.round(VO_LEN[LANG][n]*1000)+VO_GAP:dwell(n);
|
|
function auto(){timer=setTimeout(()=>{if(step===STEPS.length-1){stop();return}show(step+1);auto()},dwellV(step))}
|
|
$("play").onclick=()=>{if(timer){stop();return}setPlay(true);show(step);auto()};
|
|
$("restart").onclick=()=>{stop();setPlay(true);show(0);auto()};
|
|
document.addEventListener("keydown",e=>{if(e.key==="ArrowRight")$("next").click();if(e.key==="ArrowLeft")$("prev").click()});
|
|
function applyLang(l){
|
|
// every text of the page and of the drawing in the chosen language; the step shown is drawn again
|
|
LANG=l;STEPS=STEPS_L[l];document.documentElement.lang=l;document.title=T("title");
|
|
document.querySelectorAll("[data-k]").forEach(e=>{e.textContent=T(e.dataset.k)});
|
|
// short notes inside the drawing are broken into lines of at most N characters
|
|
document.querySelectorAll("[data-wrap]").forEach(e=>{
|
|
const x=e.getAttribute("x"),max=+e.dataset.wrap,lines=[];let cur="";
|
|
e.textContent.split(" ").forEach(w=>{if(cur&&(cur+" "+w).length>max){lines.push(cur);cur=w}else cur=cur?cur+" "+w:w});
|
|
lines.push(cur);e.textContent="";
|
|
lines.forEach((l,i)=>{const t=document.createElementNS(NS,"tspan");t.setAttribute("x",x);t.setAttribute("dy",i?"16":"0");t.textContent=l;e.appendChild(t)})});
|
|
document.querySelectorAll("[data-t]").forEach(e=>{const t=T(e.dataset.t).replace(/^[^\p{L}]+/u,"");e.title=t;e.setAttribute("aria-label",t)});
|
|
document.querySelectorAll(".langs button").forEach(b=>b.setAttribute("aria-pressed",b.dataset.lang===l));
|
|
STEPS.forEach((st,i)=>$("dot"+i).setAttribute("aria-label",(i+1)+". "+st[0]));
|
|
try{localStorage.setItem("bal-explainer-lang",l)}catch(e){}
|
|
stop();show(step);
|
|
}
|
|
document.querySelectorAll(".langs button").forEach(b=>b.onclick=()=>applyLang(b.dataset.lang));
|
|
// sound button: on / off, remembered in the browser
|
|
function setSound(on){soundOn=on;$("snd").setAttribute("aria-pressed",on);try{localStorage.setItem("bal-explainer-sound",on?"1":"0")}catch(e){}
|
|
if(on)audio();else{voiceStop();musicStop();if(AC)AC.suspend().catch(()=>{})}sndHint()}
|
|
function setMusic(on){musicOn=on;$("mus").setAttribute("aria-pressed",on);try{localStorage.setItem("bal-explainer-music",on?"1":"0")}catch(e){}
|
|
if(on){audio();musicStart()}else musicStop()}
|
|
$("mus").setAttribute("aria-pressed",musicOn);
|
|
$("mus").onclick=()=>setMusic(!musicOn);
|
|
$("snd").setAttribute("aria-pressed",soundOn);sndHint();
|
|
$("snd").onclick=()=>setSound(!soundOn);
|
|
applyLang(LANG);
|
|
// the text card keeps the height of its tallest step (in every language), so the controls below never move
|
|
function fitCard(){
|
|
const card=document.querySelector(".card"),ids=["cap-t","cap-d","cap-n"];
|
|
const keep=ids.map(id=>$(id).textContent);
|
|
card.style.minHeight="";
|
|
let max=0;
|
|
Object.values(STEPS_L).forEach(L=>L.forEach(st=>{
|
|
ids.forEach((id,i)=>{$(id).textContent=st[i]||""});
|
|
max=Math.max(max,card.offsetHeight)}));
|
|
ids.forEach((id,i)=>{$(id).textContent=keep[i]});
|
|
card.style.minHeight=max+"px";
|
|
}
|
|
fitCard();
|
|
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(fitCard);
|
|
let fitT;window.addEventListener("resize",()=>{clearTimeout(fitT);fitT=setTimeout(fitCard,150)});
|
|
// the animation starts by itself, as if play had been pressed (not when the viewer asked the system for reduced motion)
|
|
{setPlay(true);auto()} // always plays, also with "reduce motion" on (owner, 2026-10-23)
|
|
})();
|
|
</script>
|