Repository navigation
Expand file tree
/
Copy pathprodotti.html
More file actions
768 lines (697 loc) · 34.6 KB
/
Copy pathprodotti.html
File metadata and controls
768 lines (697 loc) · 34.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- La pagina si chiama "prodotti" perche' un domani ne ospitera' piu' di
uno, ma oggi il prodotto e' uno solo: quindi il titolo qui sotto, che e'
quello che si vede nella scheda del browser e quando qualcuno condivide
il link, parla di PRISMA. Quando aggiungerai un secondo prodotto,
cambia questo titolo (e anche description e og:title poco sotto). -->
<title>PRISMA, ultima parola BIP39 e passphrase — Final Step Bitcoin</title>
<meta name="description" content="Il tuo calcolatore offline: l'ultima parola della tua mnemonica BIP39 e la passphrase dai dadi. Senza Wi-Fi, senza Bluetooth, senza memoria.">
<meta property="og:title" content="PRISMA — il tuo calcolatore offline">
<meta property="og:description" content="L'ultima parola della tua mnemonica e la conversione dei dadi per la passphrase. Tutto senza un computer e senza internet.">
<meta property="og:type" content="product">
<!-- L'immagine che compare quando qualcuno incolla il link su Telegram, X o
WhatsApp. L'indirizzo DEVE essere scritto per esteso, con https e dominio:
quei siti leggono la pagina da fuori e un indirizzo accorciato tipo
"img/..." per loro non esiste. Il file e' un JPG e non il WebP usato sulla
pagina, perche' non tutti i social digeriscono il WebP.
ATTENZIONE: l'anteprima funziona solo a sito pubblicato; da localhost non
si puo' provare. Se cambi la foto, cambia anche il nome del file (es.
prisma-anteprima-2.jpg): i social tengono in memoria la vecchia per
settimane. -->
<meta property="og:image" content="https://finalstepbitcoin.com/img/prisma-anteprima.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="800">
<meta property="og:image:alt" content="I due modelli del dispositivo PRISMA, in plastica gialla con i tasti arancioni.">
<meta name="twitter:card" content="summary_large_image">
<meta name="theme-color" content="#0A0908">
<link rel="canonical" href="https://finalstepbitcoin.com/prodotti.html">
<link rel="icon" href="img/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link href="font/caratteri.css" rel="stylesheet">
<link rel="stylesheet" href="stile.css">
<!-- GRAFICA SOLO DI QUESTA PAGINA.
Sta qui dentro e NON in stile.css apposta: stile.css e' condiviso con la
home e con risorse.html, quindi ogni riga scritta li' cambia anche loro.
Tutto quello che serve solo a PRISMA vive qui, cosi' finche' la pagina
e' una prova non puo' rovinare niente del sito gia' online. -->
<style>
/* ── Quanto sono larghi i testi ──
Nel foglio generale i titoli di sezione sono tagliati a 20 caratteri
per riga e i paragrafi a 60: su un portatile restavano quasi 500 px
vuoti a destra e i titoli lunghi finivano su cinque righe.
Qui li allarghiamo SOLO per questa pagina.
La misura "ch" vuol dire "larghezza di un carattere", e si comporta
da sola sui due tipi di schermo: e' un TETTO, non una larghezza fissa.
Sul telefono lo schermo e' piu' stretto del tetto, quindi non cambia
niente e il testo riempie la riga come prima; sul computer, dove lo
spazio c'e', il testo arriva fino al tetto e smette di crescere.
Oltre i ~75 caratteri per riga l'occhio fatica a ritrovare l'inizio
della riga dopo: e' il motivo per cui non li allarghiamo di piu'. */
.titolo-due{max-width:30ch}
.lede{max-width:72ch}
/* ── Testata della pagina ── */
.sin-hero{text-align:center;padding-top:clamp(10px,2vw,26px)}
.sin-marchio{
width:min(420px,74vw);height:auto;display:block;margin:0 auto clamp(18px,2.4vw,26px);
/* IL MARCHIO SI CENTRA DA SOLO. Col vecchio nome servivano due fulmini
ai lati, le cui code sbilanciavano la parola verso destra e andavano
compensate. PRISMA ha un fulmine solo, al centro, al posto della S.
MISURATO sui pixel di PRISMA@3x.png (870x456): nella fascia delle
lettere (righe 128-276) l'inchiostro va da 42 a 827, cioe' 42 px di
vuoto a sinistra e 42 a destra. Il centro delle lettere cade a mezzo
pixel dal centro dell'immagine: nessuna correzione da fare. */
}
/* Il sottotitolo grande sotto il marchio. E' una riga sola e corta: il
max-width serve solo a farla andare a capo su schermo stretto, non a
spezzarla sul desktop. Se un domani ci rimetti una frase lunga,
riabbassalo a 19ch. */
.sin-claim{
font-family:var(--display);font-weight:600;
font-size:clamp(24px,3.6vw,40px);line-height:1.12;letter-spacing:.01em;
color:var(--bone);max-width:30ch;margin:0 auto;
}
.sin-claim em{
font-style:normal;
background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sin-sotto{max-width:62ch;margin:clamp(16px,2vw,22px) auto 0}
/* ── La prima parola di ogni titolo di sezione ──
Prende lo stesso gradiente giallo-arancio di "offline" nel sottotitolo.
"Scheda tecnica" e' esclusa di proposito: li' la prima riga e' anche
l'unica, quindi si colorerebbe il titolo intero invece della sola
parola d'apertura, e non sarebbe piu' lo stesso effetto degli altri.
Il "color" prima del gradiente non e' un doppione: e' la rete di
sicurezza per i browser che non sanno ritagliare uno sfondo dentro le
lettere, che altrimenti mostrerebbero il testo trasparente. */
.sec:not(#scheda-tecnica) .titolo-due .t-su{
color:var(--yellow);
background:var(--grad);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
/* ── La foto del dispositivo ──
Il file e' img/prisma-foto.webp (1536x1024, WebP): e' la risoluzione
piena dell'originale, che sta in FILE DA INSERIRE NEL SITO.
NIENTE max-width: la foto arriva larga quanto il contenitore, come le
schede e i riquadri del resto della pagina. Con un tetto piu' basso
restava una fascia vuota ai lati che nelle altre pagine del sito non
c'e'. Se un domani la cambi: stesse proporzioni 3:2, e aggiorna i
numeri width/height nel tag <img>, che servono al browser per tenere
lo spazio prima ancora di aver scaricato la foto. */
.sin-foto-vera{width:100%;height:auto;display:block;margin:clamp(26px,3.4vw,40px) auto 0;border-radius:var(--r)}
/* ── Lo spazio del video tutorial (sezione "Cosa fa") ──
Oggi e' un riquadro vuoto tratteggiato. Le istruzioni per riempirlo,
col codice gia' pronto da incollare, stanno nel commento accanto al
riquadro stesso, piu' in basso nel testo della pagina. */
.sin-video{margin-top:clamp(30px,3.8vw,46px)}
.sin-video-tit{
font-family:var(--mono);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:var(--mute-2);
margin:0 0 12px;text-align:center;font-weight:400;
}
.sin-video-box{
aspect-ratio:16/9;border:1px dashed var(--line-2);border-radius:var(--r);
background:var(--ink-2);
display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
}
.sin-video-box span{
font-family:var(--mono);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:var(--mute-2);
}
/* ── Come sara' il video una volta inserito ──
Questi stili sono gia' pronti e non fanno niente finche' il riquadro
resta vuoto: servono al blocco da incollare, descritto piu' sotto. */
.sin-video-vero{
position:relative;display:block;aspect-ratio:16/9;width:100%;
border-radius:var(--r);overflow:hidden;background:#000;
border:1px solid var(--line);
}
.sin-video-vero img{width:100%;height:100%;object-fit:cover;display:block}
/* Il triangolo del "play": senza, la miniatura sembra una foto qualsiasi */
.sin-video-play{
position:absolute;inset:0;margin:auto;width:74px;height:74px;
display:flex;align-items:center;justify-content:center;
background:rgba(19,17,16,.72);border:1px solid var(--line-2);border-radius:50%;
transition:transform .18s ease,background .18s ease;
}
.sin-video-play svg{width:30px;height:30px;fill:var(--bone);margin-left:4px}
.sin-video-vero:hover .sin-video-play{transform:scale(1.08);background:rgba(19,17,16,.85)}
/* ── Il bottone sotto la foto ──
Si centra da solo perche' tutta la testata (.sin-hero) e' centrata.
Porta alla sezione "Averlo" in fondo alla pagina: lo scorrimento
morbido e la fermata sotto la barra in alto arrivano gia' da
stile.css, qui non serve aggiungere niente. */
.sin-cta{margin:clamp(24px,3vw,32px) 0 0}
/* ── Elenco a passi, per i tre livelli di verifica ── */
.sin-passi{list-style:none;display:grid;gap:13px;counter-reset:passo}
.sin-passo{
display:flex;gap:clamp(14px,2vw,20px);align-items:flex-start;
padding:clamp(18px,2.2vw,24px);
background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
}
.sin-passo-n{
flex:none;width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:600;
background:var(--grad);
}
.sin-passo h3{font-size:clamp(16px,1.7vw,19px);margin:0 0 6px;color:var(--bone)}
.sin-passo p{margin:0;color:var(--mute);font-size:clamp(14.5px,1.5vw,16px);line-height:1.62}
/* ── Riquadro "cosa NON fa": stesso stile delle schede, bordo spento ── */
.sin-limiti{list-style:none;display:grid;gap:11px;margin:0}
.sin-limiti li{
display:flex;gap:13px;align-items:flex-start;
color:var(--mute);font-size:clamp(14.5px,1.5vw,16px);line-height:1.6;
}
.sin-limiti b{color:var(--bone);font-weight:600}
.sin-no{
flex:none;font-family:var(--mono);color:var(--orange);
font-size:15px;line-height:1.6;
}
/* ── Scheda tecnica: due righe da quattro su schermo grande ── */
/* ── I DUE BLOCCHI DELL'ULTIMA SEZIONE ──
Affiancati sopra i 760 px, uno sopra l'altro sotto. "align-items:
stretch" (che e' il valore normale della griglia) tiene i due riquadri
ALTI UGUALI anche se il testo dentro e' diverso: se lo togli, quello
piu' corto resta a mezz'aria. */
.sin-vie{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.sin-via{
display:flex;flex-direction:column;
background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(22px,2.6vw,30px);
transition:border-color .18s;
}
.sin-via:hover{border-color:var(--line-2)}
/* Il blocco di destra ha la fascia gialla in cima, come il riquadro delle
consulenze in home: quindi niente riquadro interno con l'imbottitura,
che sta nel suo .sin-via-in. */
.sin-via--caldo{padding:0;overflow:hidden;border-color:var(--line-2)}
.sin-via-in{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;height:100%}
.sin-via-tag{
align-self:flex-start;
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--mute-2);border:1px solid var(--line-2);border-radius:30px;padding:5px 12px;
margin-bottom:16px;
}
.sin-via-tag--caldo{background:var(--grad);border-color:transparent;color:#1A0E00;font-weight:600}
.sin-via-tit{
font-family:var(--display);font-weight:600;
font-size:clamp(19px,2.2vw,25px);line-height:1.15;color:var(--bone);
margin:0 0 14px;
}
.sin-via-txt{
margin:0 0 14px;color:var(--mute);
font-size:clamp(14.5px,1.5vw,16px);line-height:1.62;
}
.sin-via-txt strong{color:var(--bone)}
/* "margin-top:auto" spinge il fondo del riquadro in basso: cosi' i link e
i pulsanti dei due blocchi restano allineati fra loro. */
.sin-via-fondo{margin-top:auto;padding-top:8px}
.sin-bottoni{
margin-top:auto;padding-top:8px;
display:flex;flex-wrap:wrap;gap:10px;
}
.sin-bottoni .btn{white-space:nowrap}
/* ── Il prezzo, con sotto la parola "donazione" ──
La parola resta in minuscolo, al contrario delle altre scritte piccole
del sito che vanno tutte in maiuscolo: in maiuscolo le virgolette si
perdono e sembra una targhetta qualsiasi. */
.sin-prezzo{
font-family:var(--mono);font-size:clamp(30px,4vw,42px);font-weight:500;line-height:1;
background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
font-variant-numeric:tabular-nums;margin:0 0 7px;
}
.sin-prezzo-nota{
font-family:var(--mono);font-size:13px;letter-spacing:.04em;
color:var(--mute-2);margin:0 0 16px;
}
/* Le targhette arancioni tratteggiate sono PROMEMORIA DI LAVORO: segnano i
pezzi ancora da collegare. Vanno tolte tutte prima di pubblicare -
cercale con "sin-da-decidere". "align-self:flex-start" serve perche'
dentro i riquadri, che sono in colonna, altrimenti si allargherebbero
per tutta la riga. */
.sin-da-decidere{
display:inline-block;align-self:flex-start;
margin-top:14px;padding:4px 12px;border-radius:30px;
border:1px dashed var(--orange);color:var(--orange);
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
}
/* La notina sotto il pulsante: nella home sta stretta accanto al bottone
del modulo, qui invece e' da sola e va lasciata respirare. */
#ordina .privacy{max-width:58ch}
/* ── Note di licenza in fondo ── */
.sin-note{
margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);
border-top:1px solid var(--line);
color:var(--mute-2);font-size:13.5px;line-height:1.7;
}
.sin-note a{color:var(--mute)}
@media(max-width:760px){
.sin-passo{flex-direction:row}
.sin-claim{max-width:100%}
/* I due blocchi si mettono uno sopra l'altro: resta primo quello
gratuito, cioe' quello scritto prima nel testo. */
.sin-vie{grid-template-columns:1fr}
/* Su schermo stretto i due pulsanti vanno larghi tutta la riga, uno
sotto l'altro: affiancati diventerebbero due francobolli. */
.sin-bottoni{flex-direction:column;align-items:stretch}
.sin-bottoni .btn{text-align:center}
}
</style>
</head>
<body>
<!-- gli strati dello sfondo: stanno dietro a tutto e non sono cliccabili -->
<div class="sfondo" aria-hidden="true">
<span class="fulmini"></span>
<span class="aurora aurora--1"></span>
<span class="aurora aurora--2"></span>
<span class="grana"></span>
</div>
<!-- ══════════ NAV ══════════
Identica a quella di risorse.html, con in piu' la voce "Prodotti" prima
di "Risorse": qui accesa (class="on"), in index.html e risorse.html no.
Le tre nav vanno tenute allineate a mano. -->
<div class="nav-shell">
<nav>
<a href="index.html" class="brand">
<img class="marchio" src="img/logo.webp" width="34" height="34" alt="">
<img class="scritta" src="img/scritta.webp?v=3" width="1219" height="275" alt="Final Step Bitcoin">
</a>
<div class="nav-links" id="navlinks">
<a href="index.html#home">Home</a>
<a href="index.html#chi-sono">Chi sono</a>
<a href="index.html#video">Video</a>
<a href="index.html#podcast">Podcast</a>
<a href="index.html#articoli">Articoli</a>
<a href="index.html#supportami">Supportami</a>
<a href="index.html#consulenze">Consulenze</a>
<a href="index.html#contatti">Contatti</a>
<a href="prodotti.html" class="on">Prodotti</a>
<a href="risorse.html">Risorse</a>
</div>
<button class="burger" id="burger" aria-label="Apri il menu" aria-expanded="false" aria-controls="navlinks">☰</button>
</nav>
<div class="hazard" aria-hidden="true"></div>
</div>
<!-- ══════════ TESTATA ══════════ -->
<main class="sec sec--pagina" id="prisma">
<div class="wrap">
<a class="torna" href="index.html">← Torna alla home</a>
<div class="sin-hero rise">
<h1 class="titolo-pagina" style="margin:0">
<img class="sin-marchio" src="img/prisma-marchio.png?v=2" width="870" height="456" alt="PRISMA">
</h1>
<p class="sin-claim">Il tuo calcolatore <em>offline</em></p>
<p class="lede sin-sotto">
L'ultima parola della tua mnemonica, la conversione dei dadi per la tua
passphrase. Tutto senza un computer e senza internet. Un dispositivo
piccolo, senza Wi-Fi, Bluetooth e memoria, che fa due cose: completa la
tua mnemonica BIP39 e ti aiuta a costruire la passphrase coi dadi. Poi
lo scolleghi e lui non salva niente.
</p>
<img class="sin-foto-vera" src="img/prisma-foto.webp" width="1536" height="1024"
alt="I due modelli del dispositivo PRISMA, in plastica gialla con i tasti arancioni: uno in piedi visto di fronte, l'altro appoggiato di tre quarti.">
<div class="sin-cta">
<a class="btn btn--fill" href="#ordina">Come averlo</a>
</div>
</div>
</div>
</main>
<hr class="rule">
<!-- ══════════ 01 · IL PROBLEMA ══════════ -->
<section class="sec" id="problema">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">La difficoltà</span>
Generare in autonomia l'ultima parola BIP39 e la passphrase
</h2>
</div>
<p class="lede rise">
Se generi la tua mnemonica a mano — coi dadi o con altri strumenti —
arrivi a <strong>11 o 23 parole</strong>, poi ti fermi. L'ultima contiene
il <em>checksum</em>, un codice di controllo che permette di accorgersi se
una parola è stata trascritta male o cambiata.
</p>
<p class="lede rise">
Per calcolarla serve un computer. Ma l'obiettivo è non averne bisogno.
<strong>PRISMA si occupa di calcolare il checksum</strong>, su un
dispositivo completamente isolato.
</p>
<p class="lede rise">
Inoltre ti aiuta anche a generare la tua passphrase, traducendo il lancio
dei dadi in parole, senza impazzire nella ricerca, sullo stesso
dispositivo scollegato.
</p>
</div>
</section>
<hr class="rule">
<!-- ══════════ 02 · COSA FA ══════════
Riuso le schede della pagina Risorse (.risorse / .risorsa): stessa
grafica, zero righe di CSS nuove. -->
<section class="sec sec--alt" id="cosa-fa">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">Cosa fa</span>
Ultima parola BIP39 e passphrase, due sessioni separate
</h2>
</div>
<p class="lede rise" style="margin-bottom:clamp(28px,3.5vw,40px)">
<strong>Staccando il cavo in mezzo</strong>, anche la memoria temporanea
viene resettata: non rimangono mai nel dispositivo tutte e due le
informazioni contemporaneamente.
</p>
<div class="risorse rise">
<article class="risorsa">
<div class="ris-head">
<span class="ris-code">01</span>
<span class="ris-tag ris-tag--nostra">Checksum BIP39</span>
</div>
<h3 class="ris-name">Completa la mnemonica</h3>
<p class="ris-desc">
Inserisci le prime 11 parole e il dispositivo ti mostra le
<strong>128 candidate</strong> valide; con 23 parole restano
<strong>8 candidate</strong>. A quel punto
inserisci i bit di entropia che ti sono avanzati — 7 per la frase da 12
parole, 3 per quella da 24 — e la parola giusta è una sola.
</p>
<p class="ris-desc">
Quei bit sono <strong>entropia che hai generato tu coi dadi</strong> e che
non hai ancora usato. Scegliere una parola a caso significa buttare via
entropia.
</p>
</article>
<article class="risorsa">
<div class="ris-head">
<span class="ris-code">02</span>
<span class="ris-tag ris-tag--nostra">Passphrase Diceware</span>
</div>
<h3 class="ris-name">Costruisci la passphrase coi dadi</h3>
<p class="ris-desc">
Cinque dadi per ogni parola, fino a dieci parole, con la lista inglese di
<strong>Arnold Reinhold</strong> o quella italiana di
<strong>Tarin Gamberini</strong>. Il dispositivo ti mostra sia l'elenco
numerato sia la passphrase intera: confrontandoli scopri un errore di
trascrizione, che per una passphrase è l'unica rete di sicurezza esistente.
</p>
<p class="ris-desc">
Perché la passphrase, a differenza della frase di recupero,
<strong>non ha nessun checksum</strong>: se la scrivi sbagliata non
ricevi nessun errore, entri semplicemente in un altro portafoglio, vuoto.
</p>
</article>
</div>
<!-- ══ IL VIDEO TUTORIAL ══
SCELTA FATTA: miniatura che porta a YouTube, come nella home. Il
video NON parte dentro la pagina, e finche' nessuno clicca YouTube
non sa che quella persona e' passata di qui: nessun cookie, niente
da aggiungere all'avviso sui cookie.
Video: https://youtu.be/CFRjoe49_qk (ID: CFRjoe49_qk)
Lo stesso indirizzo e' stampato nel QR in fondo alla guida di
carta, quindi NON si cancella e non si ricarica quel video: se un
giorno va rifatto, si sostituisce il contenuto tenendo lo stesso
video, altrimenti YouTube assegna un ID nuovo e i fogli gia'
stampati portano nel vuoto.
SE LA MINIATURA RESTA NERA: finche' il video e' privato o
programmato, YouTube non pubblica la sua immagine e il riquadro
resta vuoto: e' normale, si riempie da solo quando il video
diventa pubblico. Se resta nera anche dopo, quel video non ha la
versione grande dell'immagine: cambia maxresdefault.jpg in
hqdefault.jpg, che esiste sempre. -->
<div class="sin-video rise">
<p class="sin-video-tit">Il video tutorial</p>
<a class="sin-video-vero" href="https://youtu.be/CFRjoe49_qk" target="_blank" rel="noopener">
<img src="https://img.youtube.com/vi/CFRjoe49_qk/maxresdefault.jpg" alt="Il video tutorial di PRISMA" loading="lazy">
<span class="sin-video-play" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></span>
</a>
</div>
</div>
</section>
<hr class="rule">
<!-- ══════════ 03 · COM'E' FATTO ══════════ -->
<section class="sec" id="com-e-fatto">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">Com'è fatto</span>
Offline by design
</h2>
</div>
<ul class="sin-limiti rise" style="gap:15px;max-width:80ch">
<li><span class="sin-no">✕</span><span><b>Nessun trasmettitore a bordo.</b> Non sono presenti né Wi-Fi né Bluetooth da disattivare: il processore scelto non li ha proprio. Non è un'impostazione che qualcuno può cambiare.</span></li>
<li><span class="sin-no">✕</span><span><b>Non scrive niente nella memoria permanente.</b> Quando stacchi il cavo, quello che hai inserito sparisce. È anche ciò che rende il firmware verificabile: la memoria resta identica a com'era.</span></li>
<li><span class="sin-no">✕</span><span><b>Non deriva chiavi né indirizzi.</b> Per scelta non sa fare i conti che portano dalla mnemonica al portafoglio: anche volendo, non può sapere a quale portafoglio appartiene ciò che gli hai scritto.</span></li>
<li><span class="sin-no">✕</span><span><b>Non si collega al computer per funzionare.</b> Si alimenta da un normale caricatore da telefono. Schermo, joystick e quattro tasti: tutto il resto non serve.</span></li>
</ul>
<p class="lede rise" style="margin-top:clamp(24px,3vw,32px)">
Alla fine di ogni operazione il dispositivo ti porta a una schermata da cui
non si torna indietro: l'unico modo di uscire è <strong>staccare il
cavo</strong>. Non è una dimenticanza, è fatto apposta. In questo modo sei
sicuro che venga cancellato tutto.
</p>
</div>
</section>
<hr class="rule">
<!-- ══════════ 04 · PERCHE' FIDARSI ══════════
ORDINE VOLUTO: prima il riflash, poi picotool, per ultima l'impronta.
Il riflash e' insieme la strada piu' semplice e la piu' sicura, quindi
va per prima. L'impronta e' comoda ma non e' una prova, e la pagina lo
dice apertamente: se un domani riscrivi questa sezione, non
promuoverla al primo posto. -->
<section class="sec sec--alt" id="fiducia">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">Non fidarti</span>
Verifica
</h2>
</div>
<p class="lede rise" style="margin-bottom:clamp(28px,3.5vw,40px)">
Il codice è open source e ci sono tre modalità di verifica del dispositivo,
in ordine di difficoltà.
</p>
<ol class="sin-passi rise">
<li class="sin-passo">
<span class="sin-passo-n">1</span>
<div>
<h3>Riscrivilo tu</h3>
<p>
Scarichi il firmware ufficiale, lo trascini sul dispositivo, trenta
secondi. Non devi installare niente: da quel momento sopra c'è
quello che hai messo tu. È la strada più
semplice ed è anche la più sicura.
</p>
</div>
</li>
<li class="sin-passo">
<span class="sin-passo-n">2</span>
<div>
<h3>Fatti leggere la memoria dal dispositivo spento</h3>
<p>
Avviandolo in modalità di recupero risponde il programma di avvio
inciso nel chip, con il firmware fermo: puoi copiare la memoria e
confrontarla con quella pubblicata. È la verifica vera, perché a
rispondere non è il programma sotto esame.
</p>
</div>
</li>
<li class="sin-passo">
<span class="sin-passo-n">3</span>
<div>
<h3>Le tre parole all'avvio</h3>
<p>
A ogni accensione il dispositivo mostra la propria impronta come tre
parole BIP39: se corrispondono a quelle pubblicate, nessuno l'ha
toccato in viaggio. Comodo, immediato — ma va detto chiaramente che
<strong>non è una prova</strong>: è il firmware che attesta sé stesso.
Per la prova servono i due punti sopra.
</p>
</div>
</li>
</ol>
</div>
</section>
<hr class="rule">
<!-- ══════════ 05 · COME AVERLO ══════════
DUE BLOCCHI AFFIANCATI: a sinistra la strada gratuita (te lo costruisci),
a destra quella comoda (te lo mando io). Sotto i 760 px di larghezza si
mettono uno sopra l'altro da soli, con quello di destra che resta
secondo: chi legge da telefono vede prima la strada gratuita.
Questa sezione viene PRIMA della scheda tecnica, e non e' un caso: la
scheda tecnica non convince nessuno, si consulta dopo aver deciso.
L'invito ad agire arriva quindi subito dopo "Perche' fidarsi".
Tutti i collegamenti sono attivi: GitHub (repository pubblico,
verificato il 29/08/2026), Telegram (https://t.me/plakbtc) e Barattolo,
collegato il 01/09/2026 all'annuncio "PRISMA | Il tuo calcolatore
offline": barattolo.store/annuncio/339-prisma-il-tuo-calcolatore-offline
E' un link normale, NON il widget da incorporare che Barattolo propone:
cosi' barattolo.store non sa chi passa di qui finche' non ci clicca,
esattamente come si e' fatto col video di YouTube. -->
<section class="sec" id="ordina">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">Come averlo</span>
Costruiscilo o ricevilo
</h2>
</div>
<div class="sin-vie rise">
<!-- ── A SINISTRA · TE LO FAI DA SOLO ── -->
<article class="sin-via">
<span class="sin-via-tag">Gratis</span>
<h3 class="sin-via-tit">Costruisciti il dispositivo in autonomia!</h3>
<p class="sin-via-txt">
Il progetto è open source: schema dei collegamenti, firmware, dizionari
e istruzioni sono tutti su GitHub. Le parti costano una ventina di euro
e si trovano ovunque, non serve saldare niente e il firmware si carica
trascinando un file. Se te lo fai da solo hai maggiore controllo sul
firmware.
</p>
<div class="sin-via-fondo">
<a class="ris-via" href="https://github.com/Finalstepbitcoin/prisma" target="_blank" rel="noopener">
<span class="ris-ic">
<svg viewBox="0 0 24 24" fill="none" stroke="#FA9D07" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>
</span>
<span class="ris-txt">
<span class="ris-lbl">Il progetto, per intero</span>
<span class="ris-val">github.com/Finalstepbitcoin/prisma</span>
</span>
<span class="ris-x" aria-hidden="true">↗</span>
</a>
</div>
</article>
<!-- ── A DESTRA · TE LO MANDO IO ──
Questo e' il blocco "caldo": ha la fascia gialla in cima, come il
riquadro delle consulenze in home. -->
<article class="sin-via sin-via--caldo">
<div class="hazard" aria-hidden="true"></div>
<div class="sin-via-in">
<span class="sin-via-tag sin-via-tag--caldo">Assemblato</span>
<h3 class="sin-via-tit">Ricevilo assemblato!</h3>
<p class="sin-prezzo">35,00 €</p>
<!-- Le virgolette sono volute: non e' un prezzo, e' una donazione,
e le virgolette lo dicono senza doverlo spiegare. NON
toglierle pensando che sia un refuso. -->
<p class="sin-prezzo-nota">“donazione”</p>
<p class="sin-via-txt">
Fai una donazione di almeno <strong>35,00 €</strong> e riceverai il
dispositivo completo di case, un cavo di alimentazione e la guida
pratica. <strong>Spedizione inclusa.</strong>
</p>
<p class="sin-via-txt">
Arriva già pronto: firmware caricato e impronta a tre parole
verificata e stampata sul foglio dentro la scatola, insieme alle
istruzioni per riscriverlo da solo se preferisci non fidarti.
</p>
<div class="sin-bottoni">
<a class="btn btn--fill" href="https://t.me/plakbtc" target="_blank" rel="noopener">Scrivimi su Telegram</a>
<a class="btn btn--fill" href="https://barattolo.store/annuncio/339-prisma-il-tuo-calcolatore-offline" target="_blank" rel="noopener">Compralo su Barattolo</a>
</div>
</div>
</article>
</div>
<p class="privacy rise" style="margin-top:clamp(20px,2.4vw,26px)">
Il dispositivo non è un portafoglio e non custodisce nulla: è uno
strumento di calcolo. Nessun contenuto di questo sito è consulenza
finanziaria.
</p>
<div class="sin-note">
<p style="margin:0 0 10px">
<strong>Attribuzioni.</strong> Dizionario BIP39 dal repository ufficiale
delle BIP. Lista Diceware inglese di Arnold Reinhold (CC-BY 4.0), lista
italiana di Tarin Gamberini (GPL-3.0-or-later). Il motore dei calcoli
deriva da <em>embit</em> (licenza MIT), la stessa libreria usata da
SeedSigner e Krux.
</p>
<p style="margin:0">
Il codice del progetto è MIT; il firmware assemblato, contenendo la lista
italiana, esce sotto GPL-3.0. Le liste e le schede da stampare che uso nei
video sono e restano gratuite: le trovi in <a href="risorse.html">Risorse</a>.
</p>
</div>
</div>
</section>
<hr class="rule">
<!-- ══════════ 06 · SCHEDA TECNICA ══════════ -->
<section class="sec sec--alt" id="scheda-tecnica">
<div class="wrap">
<div class="sec-head rise">
<h2 class="titolo-due">
<span class="t-su">Scheda tecnica</span>
</h2>
</div>
<div class="pills rise">
<span class="pill">Raspberry Pi Pico 2 · RP2350</span>
<span class="pill">Schermo 240×240</span>
<span class="pill">Joystick + 4 tasti</span>
<span class="pill">Alimentazione micro-USB</span>
<span class="pill">Case in stampa 3D</span>
<span class="pill">MicroPython</span>
<span class="pill">Motore derivato da embit</span>
<span class="pill">Codice aperto</span>
<span class="pill">Riprogrammabile dall'acquirente</span>
</div>
</div>
</section>
<!-- ══════════ FOOTER ══════════ -->
<footer>
<div class="hazard" aria-hidden="true"></div>
<div class="wrap foot">
<a href="index.html" class="brand">
<img class="marchio" src="img/logo.webp" width="34" height="34" alt="" loading="lazy">
<img class="scritta" src="img/scritta.webp?v=3" width="1219" height="275" alt="Final Step Bitcoin" loading="lazy">
</a>
<p class="foot-note">
© <span id="year">2026</span> Final Step Bitcoin · <a href="mailto:info@finalstepbitcoin.com">info@finalstepbitcoin.com</a>
· <a href="privacy.html">Privacy</a>
· <a href="termini.html">Termini</a>
· Nessun contenuto è consulenza finanziaria
</p>
</div>
</footer>
<!-- Come in risorse.html: serve solo il menu del telefono, la comparsa in
scorrimento e l'anno nel piede. -->
<script>
(function(){
'use strict';
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ── Menu mobile ── */
var burger = document.getElementById('burger');
var links = document.getElementById('navlinks');
burger.addEventListener('click', function(){
var open = links.classList.toggle('open');
burger.setAttribute('aria-expanded', open ? 'true' : 'false');
});
Array.prototype.forEach.call(links.querySelectorAll('a'), function(a){
a.addEventListener('click', function(){
links.classList.remove('open');
burger.setAttribute('aria-expanded','false');
});
});
/* ── Comparsa in scorrimento ── */
var risers = document.querySelectorAll('.rise');
if (reduce || !('IntersectionObserver' in window)) {
Array.prototype.forEach.call(risers, function(el){ el.classList.add('in'); });
} else {
var ro = new IntersectionObserver(function(en){
en.forEach(function(e){
if (!e.isIntersecting) return;
e.target.classList.add('in');
ro.unobserve(e.target);
});
}, {threshold:0.1, rootMargin:'0px 0px -6% 0px'});
Array.prototype.forEach.call(risers, function(el){ ro.observe(el); });
}
/* ── Anno nel piede ── */
var y = document.getElementById('year');
if (y) y.textContent = new Date().getFullYear();
})();
</script>
<!-- Statistiche del sito, come sulle altre due pagine. -->
<script src="counter.js" data-id="f5f23bd3-c357-4ac5-91c8-a65ffc2fc1d1" data-utcoffset="2"></script>
</body>
</html>