Skip to content

Commit 7230ecc

Browse files
hans-cryptohans-crypto
committed
ots: add three-stage explainer diagram above the drop-zone
You -> Calendar -> Bitcoin pipeline rendered as 3 colored boxes with hover tooltips explaining each stage in one sentence. Mobile collapses to vertical with rotated arrows. Pure presentation, no state. The visual sets up the user's mental model before they touch the drop- zone, so 'we'll watch the calendars for you' isn't magic later.
1 parent d55a659 commit 7230ecc

5 files changed

Lines changed: 149 additions & 0 deletions

File tree

‎frontend/src/app/components/_ordpool/ots-calendars/ots-calendars.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ <h1>OpenTimestamps Calendars</h1>
2828
</em>
2929
</p>
3030

31+
<app-ots-diagram class="d-block mt-4"></app-ots-diagram>
32+
3133
<app-ots-stamp-verify class="d-block mt-4"></app-ots-stamp-verify>
3234

3335
<h2 class="mt-4">Calendars</h2>

‎frontend/src/app/components/_ordpool/ots-diagram/ots-diagram.component.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<section class="ots-diagram">
2+
<div class="ots-diagram-grid">
3+
4+
<div class="ots-diagram-box ots-diagram-you"
5+
title="Your file never leaves this browser. We compute its 32-byte SHA-256 fingerprint locally.">
6+
<div class="ots-diagram-emoji" aria-hidden="true">📄</div>
7+
<div class="ots-diagram-label">Your file</div>
8+
<div class="ots-diagram-sublabel">stays in your browser</div>
9+
</div>
10+
11+
<div class="ots-diagram-arrow" aria-hidden="true">
12+
<span class="ots-diagram-arrow-text">SHA-256 hash</span>
13+
<span class="ots-diagram-arrow-line">→</span>
14+
</div>
15+
16+
<div class="ots-diagram-box ots-diagram-calendar"
17+
title="Public calendar servers (alice / bob / finney) accept your hash and batch it with thousands of other people's hashes into a Merkle tree.">
18+
<div class="ots-diagram-emoji" aria-hidden="true">📦</div>
19+
<div class="ots-diagram-label">Calendar</div>
20+
<div class="ots-diagram-sublabel">batches your hash<br>with thousands of others</div>
21+
</div>
22+
23+
<div class="ots-diagram-arrow" aria-hidden="true">
24+
<span class="ots-diagram-arrow-text">~10 min – few hours</span>
25+
<span class="ots-diagram-arrow-line">→</span>
26+
</div>
27+
28+
<div class="ots-diagram-box ots-diagram-bitcoin"
29+
title="The calendar publishes the Merkle root in a single Bitcoin OP_RETURN. Once mined, your timestamp is anchored on-chain forever.">
30+
<div class="ots-diagram-emoji" aria-hidden="true">⛓️</div>
31+
<div class="ots-diagram-label">Bitcoin</div>
32+
<div class="ots-diagram-sublabel">on-chain forever</div>
33+
</div>
34+
35+
</div>
36+
</section>

‎frontend/src/app/components/_ordpool/ots-diagram/ots-diagram.component.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
:host {
2+
display: block;
3+
}
4+
5+
.ots-diagram {
6+
background-color: #11132a;
7+
border: 1px solid #2d3250;
8+
border-radius: 8px;
9+
padding: 24px 16px;
10+
}
11+
12+
.ots-diagram-grid {
13+
display: grid;
14+
grid-template-columns: 1fr auto 1fr auto 1fr;
15+
align-items: center;
16+
gap: 8px;
17+
}
18+
19+
.ots-diagram-box {
20+
text-align: center;
21+
padding: 16px 12px;
22+
border-radius: 8px;
23+
border: 2px solid #2d3250;
24+
background-color: #181b2d;
25+
cursor: help;
26+
27+
.ots-diagram-emoji {
28+
font-size: 2rem;
29+
line-height: 1;
30+
margin-bottom: 8px;
31+
}
32+
33+
.ots-diagram-label {
34+
font-weight: 600;
35+
color: #fff;
36+
font-size: 1rem;
37+
margin-bottom: 4px;
38+
}
39+
40+
.ots-diagram-sublabel {
41+
font-size: 0.78rem;
42+
color: #9aa0c0;
43+
line-height: 1.3;
44+
}
45+
46+
// Phase tinting -- mirrors the queue states (queued/ready/anchored).
47+
&.ots-diagram-you { border-color: #4a5085; }
48+
&.ots-diagram-calendar { border-color: #d6a85a; }
49+
&.ots-diagram-bitcoin { border-color: #f7931a; }
50+
}
51+
52+
.ots-diagram-arrow {
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
color: #9aa0c0;
57+
font-size: 0.75rem;
58+
white-space: nowrap;
59+
padding: 0 4px;
60+
61+
.ots-diagram-arrow-text {
62+
margin-bottom: 2px;
63+
}
64+
65+
.ots-diagram-arrow-line {
66+
font-size: 1.4rem;
67+
line-height: 1;
68+
color: #4a5085;
69+
}
70+
}
71+
72+
@media (max-width: 720px) {
73+
.ots-diagram-grid {
74+
grid-template-columns: 1fr;
75+
}
76+
77+
.ots-diagram-arrow {
78+
.ots-diagram-arrow-line {
79+
transform: rotate(90deg);
80+
display: inline-block;
81+
}
82+
}
83+
}

‎frontend/src/app/components/_ordpool/ots-diagram/ots-diagram.component.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
3+
/*
4+
Test cases:
5+
- Live page: https://ordpool.space/ots/calendars
6+
- Renders three boxes (you / calendar / bitcoin) on desktop, stacks vertical on mobile.
7+
- Tooltips on each box explain the role in one sentence.
8+
*/
9+
10+
/**
11+
* Educational diagram for /ots/calendars: shows the three-stage pipeline
12+
* (your file -> public calendar -> Bitcoin) so the average visitor understands
13+
* what the drop-zone below is actually doing before they touch it.
14+
*
15+
* Pure presentation; no inputs, no state, no signals. The heavy lifting
16+
* happens in app-ots-stamp-verify.
17+
*/
18+
@Component({
19+
selector: 'app-ots-diagram',
20+
templateUrl: './ots-diagram.component.html',
21+
styleUrls: ['./ots-diagram.component.scss'],
22+
changeDetection: ChangeDetectionStrategy.OnPush,
23+
standalone: false,
24+
})
25+
export class OtsDiagramComponent { }

‎frontend/src/app/shared/shared.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ import { OtsViewerComponent } from '@components/_ordpool/digital-artifact-viewer
151151
import { BlockOtsSummaryComponent } from '@components/_ordpool/block-ots-summary/block-ots-summary.component';
152152
import { OtsCalendarsComponent } from '@components/_ordpool/ots-calendars/ots-calendars.component';
153153
import { OtsStampVerifyComponent } from '@components/_ordpool/ots-stamp-verify/ots-stamp-verify.component';
154+
import { OtsDiagramComponent } from '@components/_ordpool/ots-diagram/ots-diagram.component';
154155
import { RunestoneViewerComponent } from '@components/_ordpool/digital-artifact-viewer/runestone-viewer/runestone-viewer.component';
155156
import { RunestoneIdToLinkComponent } from '@components/_ordpool/digital-artifact-viewer/runestone-viewer/runestone-id-to-link.component';
156157
import { RunestoneIdToTextComponent } from '@components/_ordpool/digital-artifact-viewer/runestone-viewer/runestone-id-to-text.component';
@@ -308,6 +309,7 @@ import { HighlightModule } from 'ngx-highlightjs';
308309
BlockOtsSummaryComponent,
309310
OtsCalendarsComponent,
310311
OtsStampVerifyComponent,
312+
OtsDiagramComponent,
311313
RunestoneViewerComponent,
312314
RunestoneIdToLinkComponent,
313315
RunestoneIdToTextComponent,
@@ -494,6 +496,7 @@ import { HighlightModule } from 'ngx-highlightjs';
494496
BlockOtsSummaryComponent,
495497
OtsCalendarsComponent,
496498
OtsStampVerifyComponent,
499+
OtsDiagramComponent,
497500
FeesBoxClickableComponent,
498501
]
499502
})

0 commit comments

Comments
 (0)