hd-wallet-ui 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +5 -3
- package/src/address-derivation.js +50 -12
- package/src/app.js +2215 -440
- package/src/blockchain-trust.js +81 -28
- package/src/template.js +342 -206
- package/styles/main.css +1265 -43
package/src/template.js
CHANGED
|
@@ -3,89 +3,261 @@ export function getModalHTML() {
|
|
|
3
3
|
<!-- Keys Modal -->
|
|
4
4
|
<div id="keys-modal" class="modal">
|
|
5
5
|
<div class="modal-glass modal-wide">
|
|
6
|
-
<div class="modal-header"><div class="account-header-info"><div class="account-header-top"><h3>Account</h3><h3 class="account-total-value" id="account-total-value"></h3></div><div class="account-address-row"><
|
|
6
|
+
<div class="modal-header"><div class="account-header-info"><div class="account-header-top"><h3>Account</h3><h3 class="account-total-value" id="account-total-value"></h3></div><div class="account-address-row"><span class="account-address-label">xpub</span><code class="account-address-display" id="account-address-display"></code><button class="account-address-copy" id="account-address-copy" title="Copy xpub"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div></div><button class="modal-close">×</button></div>
|
|
7
7
|
<div class="modal-tabs">
|
|
8
8
|
<button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
|
|
9
|
-
<button class="modal-tab" data-modal-tab="keys-tab-content">Keys</button>
|
|
10
9
|
<button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
|
|
11
|
-
<button class="modal-tab" data-modal-tab="
|
|
12
|
-
<button class="modal-tab" data-modal-tab="
|
|
13
|
-
<button class="modal-tab" data-modal-tab="decrypt-tab-content">Decrypt</button>
|
|
10
|
+
<button class="modal-tab" data-modal-tab="messaging-tab-content">Messaging</button>
|
|
11
|
+
<button class="modal-tab" data-modal-tab="wallet-tab-content">Wallet</button>
|
|
14
12
|
</div>
|
|
15
13
|
<div class="modal-body">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
<div class="
|
|
14
|
+
<!-- Wallet Tab -->
|
|
15
|
+
<div id="wallet-tab-content" class="modal-tab-content">
|
|
16
|
+
<!-- Main Wallet View -->
|
|
17
|
+
<div id="wallet-main-view">
|
|
18
|
+
<!-- Portfolio Value (Phantom-style hero) -->
|
|
19
|
+
<div class="ph-portfolio">
|
|
20
|
+
<div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div>
|
|
21
|
+
<div class="ph-portfolio-label">Total Balance</div>
|
|
22
|
+
<div class="ph-portfolio-xpub">
|
|
23
|
+
<code id="wallet-tab-xpub" class="ph-xpub-text truncate"></code>
|
|
24
|
+
<button class="ph-xpub-copy copy-key-btn" data-copy="wallet-tab-xpub" title="Copy xPub"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div class="wallet-selector-row">
|
|
29
|
+
<div class="wallet-selector-control">
|
|
30
|
+
<select id="wallet-active-select" class="glass-input compact wallet-selector-input"></select>
|
|
31
|
+
<button id="wallet-manage-btn" class="glass-btn small">Manage</button>
|
|
32
|
+
</div>
|
|
23
33
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<button class="
|
|
34
|
+
|
|
35
|
+
<!-- Action Buttons Row -->
|
|
36
|
+
<div class="ph-actions">
|
|
37
|
+
<button class="ph-action-btn" id="wallet-scan-btn">
|
|
38
|
+
<div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></div>
|
|
39
|
+
<span>Scan</span>
|
|
40
|
+
</button>
|
|
41
|
+
<div class="ph-action-wrap" id="wallet-send-action">
|
|
42
|
+
<button class="ph-action-btn" id="wallet-send-btn">
|
|
43
|
+
<div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></div>
|
|
44
|
+
<span>Send</span>
|
|
45
|
+
</button>
|
|
46
|
+
<div class="ph-action-menu" id="wallet-send-menu">
|
|
47
|
+
<button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
|
|
48
|
+
<button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
|
|
49
|
+
<button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="ph-action-wrap" id="wallet-receive-action">
|
|
53
|
+
<button class="ph-action-btn" id="wallet-receive-btn-main">
|
|
54
|
+
<div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg></div>
|
|
55
|
+
<span>Receive</span>
|
|
56
|
+
</button>
|
|
57
|
+
<div class="ph-action-menu" id="wallet-receive-menu">
|
|
58
|
+
<button class="ph-action-menu-item" type="button" data-chain="BTC">Bitcoin (BTC)</button>
|
|
59
|
+
<button class="ph-action-menu-item" type="button" data-chain="ETH">Ethereum (ETH)</button>
|
|
60
|
+
<button class="ph-action-menu-item" type="button" data-chain="SOL">Solana (SOL)</button>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<button class="ph-action-btn" id="wallet-export-btn-main">
|
|
64
|
+
<div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div>
|
|
65
|
+
<span>Export</span>
|
|
66
|
+
</button>
|
|
67
|
+
<button class="ph-action-btn" id="wallet-advanced-btn-main">
|
|
68
|
+
<div class="ph-action-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg></div>
|
|
69
|
+
<span>Advanced</span>
|
|
70
|
+
</button>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<!-- Scan Status -->
|
|
74
|
+
<div id="wallet-scan-status" class="ph-scan-status" style="display:none;">
|
|
75
|
+
<div class="wallet-scan-spinner"></div>
|
|
76
|
+
<span id="wallet-scan-label">Scanning derivation paths...</span>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Token List -->
|
|
80
|
+
<div id="wallet-accounts-list" class="ph-token-list">
|
|
81
|
+
<div class="ph-token-empty" id="wallet-accounts-empty">
|
|
82
|
+
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.25">
|
|
83
|
+
<rect x="2" y="6" width="20" height="12" rx="2"/><line x1="2" y1="12" x2="22" y2="12"/>
|
|
84
|
+
</svg>
|
|
85
|
+
<p>No tokens yet</p>
|
|
86
|
+
<p class="ph-token-empty-sub">Log in and tap Scan to discover your accounts</p>
|
|
87
|
+
</div>
|
|
28
88
|
</div>
|
|
29
89
|
</div>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<option value="501" data-symbol="SOL" data-name="Solana">Solana</option>
|
|
38
|
-
<!-- Commented out — BTC/ETH/SOL only for now
|
|
39
|
-
<option value="2" data-symbol="LTC" data-name="Litecoin">Litecoin</option>
|
|
40
|
-
<option value="145" data-symbol="BCH" data-name="Bitcoin Cash">Bitcoin Cash</option>
|
|
41
|
-
<option value="3" data-symbol="DOGE" data-name="Dogecoin">Dogecoin</option>
|
|
42
|
-
<option value="118" data-symbol="ATOM" data-name="Cosmos">Cosmos</option>
|
|
43
|
-
<option value="330" data-symbol="ALGO" data-name="Algorand">Algorand</option>
|
|
44
|
-
<option value="354" data-symbol="DOT" data-name="Polkadot">Polkadot</option>
|
|
45
|
-
<option value="1815" data-symbol="ADA" data-name="Cardano">Cardano</option>
|
|
46
|
-
<option value="144" data-symbol="XRP" data-name="Ripple">Ripple (XRP)</option>
|
|
47
|
-
-->
|
|
48
|
-
</select>
|
|
90
|
+
|
|
91
|
+
<!-- Wallets View (replaces main view) -->
|
|
92
|
+
<div id="wallet-wallets-view" class="wallet-overlay-view" style="display:none;">
|
|
93
|
+
<div class="wallet-overlay-header wallet-wallets-header">
|
|
94
|
+
<div class="wallet-overlay-title-row">
|
|
95
|
+
<button id="wallet-wallets-back" class="wallet-back-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
96
|
+
<h4>Wallets</h4>
|
|
49
97
|
</div>
|
|
50
|
-
<
|
|
51
|
-
<div class="hd-control-group"><label>Index</label><input type="number" id="hd-index" class="glass-input compact hd-num-input" value="0" min="0" step="1"></div>
|
|
98
|
+
<button id="wallet-new-btn" class="glass-btn small">+ New Wallet</button>
|
|
52
99
|
</div>
|
|
53
|
-
<div
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
100
|
+
<div class="wallet-overlay-body">
|
|
101
|
+
<div class="wallet-manage-tabs" role="tablist" aria-label="Wallet status">
|
|
102
|
+
<button id="wallet-manage-tab-active" class="wallet-manage-tab active" type="button">Active</button>
|
|
103
|
+
<button id="wallet-manage-tab-inactive" class="wallet-manage-tab" type="button">Inactive</button>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="settings-group">
|
|
106
|
+
<div id="wallet-list" class="wallet-name-list"></div>
|
|
107
|
+
</div>
|
|
58
108
|
</div>
|
|
59
109
|
</div>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
<div class="export-section"><div class="export-dropdown"><button class="glass-btn small export-btn" id="export-wallet-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Export Wallet</button><div class="export-menu" id="export-menu"><button class="export-option" data-format="mnemonic"><span class="export-label">BIP39 Mnemonic</span></button><button class="export-option" data-format="xpub"><span class="export-label">Extended Public Key</span></button><button class="export-option" data-format="xprv"><span class="export-label">Extended Private Key</span></button></div></div></div>
|
|
110
|
+
|
|
111
|
+
<!-- Export View (replaces main view) -->
|
|
112
|
+
<div id="wallet-export-view" class="wallet-overlay-view" style="display:none;">
|
|
113
|
+
<div class="wallet-overlay-header">
|
|
114
|
+
<button id="wallet-export-back" class="wallet-back-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
115
|
+
<h4>Export Wallet</h4>
|
|
67
116
|
</div>
|
|
68
|
-
|
|
117
|
+
<div class="wallet-overlay-body wallet-export-body">
|
|
118
|
+
<div class="settings-group">
|
|
119
|
+
<span class="settings-group-label">HD Wallet Root</span>
|
|
120
|
+
<div class="key-item"><label>Master Public Key (xpub)</label><div class="key-value-row"><code id="wallet-xpub" class="key-value truncate"></code><button class="copy-key-btn" data-copy="wallet-xpub" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div></div>
|
|
121
|
+
<div class="key-item sensitive"><label>Master Private Key (xprv)</label><div class="key-value-row"><code id="wallet-xprv" class="key-value truncate blurred" data-revealed="false"></code><button class="reveal-key-btn" data-target="wallet-xprv" title="Reveal"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button><button class="copy-key-btn" data-copy="wallet-xprv" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div></div>
|
|
122
|
+
<div class="key-item sensitive"><label>Seed Phrase (BIP39)</label><div class="key-value-row"><code id="wallet-seed-phrase" class="key-value seed-phrase blurred" data-revealed="false"></code><button class="reveal-key-btn" data-target="wallet-seed-phrase" title="Reveal"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button><button class="copy-key-btn" data-copy="wallet-seed-phrase" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button></div></div>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="settings-group">
|
|
125
|
+
<span class="settings-group-label">Export Format</span>
|
|
126
|
+
<div class="wallet-export-options">
|
|
127
|
+
<button class="export-option export-option-card" data-format="mnemonic"><span class="export-label">BIP39 Mnemonic</span><span class="export-desc">12/24 word recovery phrase</span></button>
|
|
128
|
+
<button class="export-option export-option-card" data-format="xpub"><span class="export-label">Extended Public Key</span><span class="export-desc">Shareable watch-only root</span></button>
|
|
129
|
+
<button class="export-option export-option-card" data-format="xprv"><span class="export-label">Extended Private Key</span><span class="export-desc">Full access master private key</span></button>
|
|
130
|
+
<button class="export-option export-option-card" data-format="hex"><span class="export-label">Raw Seed (Hex)</span><span class="export-desc">Binary seed in hexadecimal</span></button>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<!-- Advanced View (replaces main view) -->
|
|
137
|
+
<div id="wallet-advanced-view" class="wallet-overlay-view" style="display:none;">
|
|
138
|
+
<div class="wallet-overlay-header">
|
|
139
|
+
<button id="wallet-advanced-back" class="wallet-back-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
140
|
+
<h4>Advanced</h4>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="wallet-overlay-body">
|
|
143
|
+
<div class="settings-group">
|
|
144
|
+
<span class="settings-group-label">Advanced</span>
|
|
145
|
+
<div class="settings-custom-path">
|
|
146
|
+
<label>Wallet</label>
|
|
147
|
+
<div class="wallet-selected-path" id="custom-path-wallet-label"></div>
|
|
148
|
+
<label>Chain</label>
|
|
149
|
+
<select id="custom-path-chain" class="glass-input compact"><option value="0">BTC</option><option value="60">ETH</option><option value="501">SOL</option></select>
|
|
150
|
+
<label>Custom Derivation Path</label>
|
|
151
|
+
<div class="custom-path-row">
|
|
152
|
+
<input id="custom-path-input" class="glass-input compact" placeholder="m/44'/0'/0'/0/0">
|
|
153
|
+
<button id="custom-path-add" class="glass-btn small">Add</button>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<!-- Send View (replaces main view) -->
|
|
161
|
+
<div id="wallet-send-view" class="wallet-overlay-view" style="display:none;">
|
|
162
|
+
<div class="wallet-overlay-header">
|
|
163
|
+
<button id="wallet-send-back" class="wallet-back-btn"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
164
|
+
<h4>Send</h4>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="wallet-overlay-body">
|
|
167
|
+
<div id="send-compose-step">
|
|
168
|
+
<div class="send-field-group">
|
|
169
|
+
<label class="send-label">From</label>
|
|
170
|
+
<select id="send-from-account" class="glass-input"></select>
|
|
171
|
+
<div class="send-balance-display">Balance: <span id="send-available-balance">--</span></div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="send-field-group">
|
|
174
|
+
<label class="send-label">To Address</label>
|
|
175
|
+
<input id="send-to-address" class="glass-input" placeholder="Recipient address" autocomplete="off">
|
|
176
|
+
</div>
|
|
177
|
+
<div class="send-field-group">
|
|
178
|
+
<label class="send-label">Amount</label>
|
|
179
|
+
<div class="send-amount-row">
|
|
180
|
+
<input id="send-amount" class="glass-input" type="number" step="any" min="0" placeholder="0.00">
|
|
181
|
+
<span class="send-currency-label" id="send-currency-label">BTC</span>
|
|
182
|
+
<button id="send-max-btn" class="glass-btn small">Max</button>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="send-fiat-estimate" id="send-fiat-estimate"></div>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="send-fee-display" id="send-fee-section" style="display:none;">
|
|
187
|
+
<span class="send-label">Estimated Fee</span>
|
|
188
|
+
<span id="send-fee-estimate">--</span>
|
|
189
|
+
</div>
|
|
190
|
+
<button id="send-review-btn" class="glass-btn primary full-width" disabled>Review Transaction</button>
|
|
191
|
+
</div>
|
|
192
|
+
<div id="send-review-step" style="display:none;">
|
|
193
|
+
<div class="send-review-card">
|
|
194
|
+
<div class="send-review-row"><span>To</span><code id="send-review-to" class="truncate"></code></div>
|
|
195
|
+
<div class="send-review-row"><span>Amount</span><span id="send-review-amount"></span></div>
|
|
196
|
+
<div class="send-review-row"><span>Network Fee</span><span id="send-review-fee"></span></div>
|
|
197
|
+
<div class="send-review-row send-review-total"><span>Total</span><span id="send-review-total"></span></div>
|
|
198
|
+
</div>
|
|
199
|
+
<button id="send-confirm-btn" class="glass-btn primary full-width">Confirm & Send</button>
|
|
200
|
+
<button id="send-edit-btn" class="glass-btn full-width">Edit</button>
|
|
201
|
+
<div id="send-status" class="send-status" style="display:none;"></div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
69
205
|
</div>
|
|
70
206
|
<div id="vcard-tab-content" class="modal-tab-content active">
|
|
71
207
|
<div id="vcard-form-view">
|
|
72
|
-
<div class="
|
|
73
|
-
<div class="
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
208
|
+
<div class="identity-card">
|
|
209
|
+
<div class="identity-card-photo">
|
|
210
|
+
<div class="photo-preview" id="vcard-photo-preview">
|
|
211
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="photo-placeholder-icon">
|
|
212
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
|
213
|
+
</svg>
|
|
214
|
+
<video id="vcard-camera-video" autoplay playsinline style="display:none;width:100%;height:100%;object-fit:contain;"></video>
|
|
215
|
+
<div id="vcard-photo-actions" class="photo-actions">
|
|
216
|
+
<label class="glass-btn small" for="vcard-photo-input">Upload</label>
|
|
217
|
+
<button id="vcard-camera-btn" class="glass-btn small" style="display:none;">Take Photo</button>
|
|
218
|
+
<button id="vcard-camera-capture" class="glass-btn small primary" style="display:none;">Capture</button>
|
|
219
|
+
<button id="vcard-camera-cancel" class="glass-btn small" style="display:none;">Cancel</button>
|
|
220
|
+
<button id="vcard-photo-remove" class="glass-btn small" style="display:none;">Remove</button>
|
|
221
|
+
</div>
|
|
222
|
+
<button type="button" id="vcard-photo-edit-btn" class="photo-edit-overlay" title="Edit Photo">
|
|
223
|
+
<svg class="photo-edit-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
224
|
+
<svg class="photo-close-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
225
|
+
</button>
|
|
226
|
+
</div>
|
|
81
227
|
<input type="file" id="vcard-photo-input" accept="image/*" hidden>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<button
|
|
85
|
-
|
|
228
|
+
</div>
|
|
229
|
+
<div class="identity-card-info" id="identity-card-info">
|
|
230
|
+
<button class="identity-edit-btn" id="identity-edit-btn" title="Edit Identity">
|
|
231
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
232
|
+
</button>
|
|
233
|
+
<div class="identity-card-name" id="identity-card-name">--</div>
|
|
234
|
+
<div class="identity-card-detail" id="identity-card-title"></div>
|
|
235
|
+
<div class="identity-card-detail" id="identity-card-org"></div>
|
|
236
|
+
<div class="identity-card-detail" id="identity-card-email"></div>
|
|
237
|
+
<div class="identity-card-detail" id="identity-card-phone"></div>
|
|
86
238
|
</div>
|
|
87
239
|
</div>
|
|
88
240
|
|
|
241
|
+
<div class="vcard-actions-footer">
|
|
242
|
+
<div class="vcard-split-btn-group">
|
|
243
|
+
<button id="generate-vcard" class="glass-btn vcard-split-btn vcard-split-export">Export vCard</button>
|
|
244
|
+
<label class="glass-btn vcard-split-btn vcard-split-import" for="vcf-import-input">Import vCard</label>
|
|
245
|
+
<input type="file" id="vcf-import-input" accept=".vcf,text/vcard" hidden>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<div id="vcf-import-result" class="vcf-import-result" style="display: none;">
|
|
250
|
+
<h4 class="section-label">Imported Contact</h4>
|
|
251
|
+
<div class="vcf-import-card">
|
|
252
|
+
<div class="vcf-import-photo" id="vcf-import-photo"></div>
|
|
253
|
+
<div class="vcf-import-fields" id="vcf-import-fields"></div>
|
|
254
|
+
</div>
|
|
255
|
+
<div id="vcf-import-sig-status" class="vcard-sig-badge" style="display:none;"></div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div id="vcard-edit-view" class="identity-edit-view" style="display: none;">
|
|
260
|
+
<div class="identity-edit-scroll">
|
|
89
261
|
<div class="identity-form">
|
|
90
262
|
<div class="vcard-form-stack">
|
|
91
263
|
<div class="vcard-form-row name-row">
|
|
@@ -112,6 +284,10 @@ export function getModalHTML() {
|
|
|
112
284
|
<input type="text" id="vcard-suffix" class="vcard-input" placeholder="Jr.">
|
|
113
285
|
</div>
|
|
114
286
|
</div>
|
|
287
|
+
<div class="vcard-input-group">
|
|
288
|
+
<label>Nickname</label>
|
|
289
|
+
<input type="text" id="vcard-nickname" class="vcard-input" placeholder="e.g., Johnny, Ace">
|
|
290
|
+
</div>
|
|
115
291
|
<div class="vcard-form-row">
|
|
116
292
|
<div class="vcard-input-group">
|
|
117
293
|
<label>Email</label>
|
|
@@ -156,46 +332,34 @@ export function getModalHTML() {
|
|
|
156
332
|
</div>
|
|
157
333
|
</div>
|
|
158
334
|
</div>
|
|
159
|
-
|
|
160
|
-
<div class="keys-display-section">
|
|
161
|
-
<h4 class="section-label">Cryptographic Keys <span class="readonly-badge">Read Only</span></h4>
|
|
162
|
-
<p class="keys-display-info">These keys are derived from your HD wallet master seed and cannot be edited.</p>
|
|
163
|
-
|
|
164
|
-
<div class="keys-display-grid" id="vcard-keys-display">
|
|
165
|
-
<!-- Keys will be populated here -->
|
|
166
|
-
</div>
|
|
167
335
|
</div>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
<
|
|
171
|
-
<div class="vcf-import-card">
|
|
172
|
-
<div class="vcf-import-photo" id="vcf-import-photo"></div>
|
|
173
|
-
<div class="vcf-import-fields" id="vcf-import-fields"></div>
|
|
174
|
-
</div>
|
|
336
|
+
<div class="identity-edit-actions">
|
|
337
|
+
<button id="identity-save-btn" class="glass-btn primary">Save</button>
|
|
338
|
+
<button id="identity-back-btn" class="glass-btn">Back</button>
|
|
175
339
|
</div>
|
|
176
340
|
</div>
|
|
177
341
|
|
|
178
342
|
<div id="vcard-result-view" style="display: none;">
|
|
343
|
+
<div class="vcard-view-toggle">
|
|
344
|
+
<button id="vcard-toggle-qr" class="vcard-toggle-btn active">QR</button>
|
|
345
|
+
<button id="vcard-toggle-raw" class="vcard-toggle-btn">Raw</button>
|
|
346
|
+
</div>
|
|
179
347
|
<div class="qr-container"><canvas id="qr-code"></canvas></div>
|
|
348
|
+
<pre id="vcard-raw-view" class="vcard-raw-view" style="display:none;"></pre>
|
|
349
|
+
<div id="vcard-sig-badge" class="vcard-sig-badge sig-verified" style="display:none;">
|
|
350
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
|
351
|
+
Signed with Ed25519
|
|
352
|
+
</div>
|
|
180
353
|
<div class="vcard-result-actions">
|
|
181
354
|
<button id="download-vcard" class="glass-btn primary">Download .vcf</button>
|
|
182
355
|
<button id="copy-vcard" class="glass-btn">Copy</button>
|
|
183
356
|
</div>
|
|
184
|
-
<details class="vcard-details">
|
|
185
|
-
<summary>View Raw vCard</summary>
|
|
186
|
-
<pre id="vcard-preview"></pre>
|
|
187
|
-
</details>
|
|
188
357
|
<button id="vcard-back-btn" class="glass-btn vcard-back-btn">
|
|
189
358
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
|
|
190
359
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
191
360
|
</svg> Back to Editor
|
|
192
361
|
</button>
|
|
193
362
|
</div>
|
|
194
|
-
<div class="vcard-actions-footer">
|
|
195
|
-
<button id="generate-vcard" class="glass-btn vcard-export-btn">Export vCard</button>
|
|
196
|
-
<label class="glass-btn vcard-import-btn" for="vcf-import-input">Import vCard</label>
|
|
197
|
-
<input type="file" id="vcf-import-input" accept=".vcf,text/vcard" hidden>
|
|
198
|
-
</div>
|
|
199
363
|
</div>
|
|
200
364
|
<!-- Trust Map Tab -->
|
|
201
365
|
<div id="trust-tab-content" class="modal-tab-content">
|
|
@@ -245,139 +409,111 @@ export function getModalHTML() {
|
|
|
245
409
|
</div>
|
|
246
410
|
</div>
|
|
247
411
|
|
|
248
|
-
<!--
|
|
249
|
-
<div id="
|
|
250
|
-
<div class="
|
|
251
|
-
<
|
|
252
|
-
<
|
|
253
|
-
</div>
|
|
254
|
-
<div class="bond-networks-grid">
|
|
255
|
-
<div class="bond-network-card" id="bond-btc-card">
|
|
256
|
-
<div class="bond-net-header"><span class="bond-net-name">Bitcoin</span><span class="bond-net-balance" id="bond-btc-balance">--</span></div>
|
|
257
|
-
<a href="#" id="bond-btc-explorer" class="bond-net-address" target="_blank" rel="noopener"><code id="bond-btc-address">--</code></a>
|
|
258
|
-
</div>
|
|
259
|
-
<div class="bond-network-card" id="bond-eth-card">
|
|
260
|
-
<div class="bond-net-header"><span class="bond-net-name">Ethereum</span><span class="bond-net-balance" id="bond-eth-balance">--</span></div>
|
|
261
|
-
<a href="#" id="bond-eth-explorer" class="bond-net-address" target="_blank" rel="noopener"><code id="bond-eth-address">--</code></a>
|
|
262
|
-
</div>
|
|
263
|
-
<div class="bond-network-card" id="bond-sol-card">
|
|
264
|
-
<div class="bond-net-header"><span class="bond-net-name">Solana</span><span class="bond-net-balance" id="bond-sol-balance">--</span></div>
|
|
265
|
-
<a href="#" id="bond-sol-explorer" class="bond-net-address" target="_blank" rel="noopener"><code id="bond-sol-address">--</code></a>
|
|
266
|
-
</div>
|
|
267
|
-
<!-- Commented out — BTC/ETH/SOL only for now
|
|
268
|
-
<div class="bond-network-card" id="bond-sui-card">...</div>
|
|
269
|
-
<div class="bond-network-card" id="bond-monad-card">...</div>
|
|
270
|
-
<div class="bond-network-card" id="bond-ada-card">...</div>
|
|
271
|
-
<div class="bond-network-card" id="bond-xrp-card">...</div>
|
|
272
|
-
-->
|
|
412
|
+
<!-- Messaging Tab (Encrypt + Decrypt) -->
|
|
413
|
+
<div id="messaging-tab-content" class="modal-tab-content">
|
|
414
|
+
<div class="messaging-sub-tabs">
|
|
415
|
+
<button class="messaging-sub-tab active" data-messaging-sub="encrypt-sub">Encrypt</button>
|
|
416
|
+
<button class="messaging-sub-tab" data-messaging-sub="decrypt-sub">Decrypt</button>
|
|
273
417
|
</div>
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
<
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
<div class="encrypt-key-detail">
|
|
296
|
-
<label>Derivation Path</label>
|
|
297
|
-
<code id="encrypt-sender-path">--</code>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
<div class="encrypt-key-card glass-card">
|
|
301
|
-
<div class="encrypt-key-header">
|
|
302
|
-
<span class="encrypt-role-badge recipient">Recipient</span>
|
|
418
|
+
<div id="encrypt-sub" class="messaging-sub-content active">
|
|
419
|
+
<!-- Encrypt Step 1: Compose -->
|
|
420
|
+
<div id="encrypt-step-compose" class="encrypt-step">
|
|
421
|
+
<div class="encrypt-tab-intro">
|
|
422
|
+
<h4 class="section-label">Encrypt a Message</h4>
|
|
423
|
+
<p>ECDH key agreement + HKDF + AES-256-GCM (ECIES)</p>
|
|
424
|
+
</div>
|
|
425
|
+
<div class="encrypt-keys-section">
|
|
426
|
+
<div class="encrypt-key-row">
|
|
427
|
+
<div class="encrypt-key-card glass-card">
|
|
428
|
+
<div class="encrypt-key-header">
|
|
429
|
+
<span class="encrypt-role-badge sender">Sender (You)</span>
|
|
430
|
+
</div>
|
|
431
|
+
<div class="encrypt-key-detail">
|
|
432
|
+
<label>Encryption Public Key</label>
|
|
433
|
+
<code id="encrypt-sender-pubkey" class="truncate">--</code>
|
|
434
|
+
</div>
|
|
435
|
+
<div class="encrypt-key-detail">
|
|
436
|
+
<label>Derivation Path</label>
|
|
437
|
+
<code id="encrypt-sender-path">--</code>
|
|
438
|
+
</div>
|
|
303
439
|
</div>
|
|
304
|
-
<div class="encrypt-key-
|
|
305
|
-
<
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
440
|
+
<div class="encrypt-key-card glass-card">
|
|
441
|
+
<div class="encrypt-key-header">
|
|
442
|
+
<span class="encrypt-role-badge recipient">Recipient</span>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="encrypt-key-detail">
|
|
445
|
+
<label>Recipient Public Key (hex)</label>
|
|
446
|
+
<div class="encrypt-recipient-input-row">
|
|
447
|
+
<input type="text" id="encrypt-recipient-pubkey" class="glass-input compact" placeholder="Paste recipient's secp256k1 public key (hex)">
|
|
448
|
+
<button id="encrypt-use-self" class="glass-btn small" title="Use your own key (for testing)">Self</button>
|
|
449
|
+
</div>
|
|
309
450
|
</div>
|
|
310
451
|
</div>
|
|
311
452
|
</div>
|
|
312
453
|
</div>
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
<
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
<button id="encrypt-btn" class="glass-btn primary" disabled>Encrypt</button>
|
|
454
|
+
<div class="encrypt-message-section">
|
|
455
|
+
<div class="encrypt-input-group">
|
|
456
|
+
<label class="section-label">Message</label>
|
|
457
|
+
<textarea id="encrypt-plaintext" class="glass-input glass-textarea" rows="3" placeholder="Enter a message to encrypt..."></textarea>
|
|
458
|
+
</div>
|
|
459
|
+
<div class="encrypt-actions">
|
|
460
|
+
<button id="encrypt-btn" class="glass-btn primary" disabled>Encrypt</button>
|
|
461
|
+
</div>
|
|
322
462
|
</div>
|
|
323
463
|
</div>
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
<button id="encrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
330
|
-
<h4 class="section-label">Encrypted Payload</h4>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="encrypt-output-fields">
|
|
333
|
-
<div class="encrypt-field"><label>Ciphertext</label><code id="encrypt-out-ciphertext" class="encrypt-out-value truncate"></code><button class="copy-btn" data-copy="encrypt-out-ciphertext" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></div>
|
|
334
|
-
<div class="encrypt-field"><label>Auth Tag</label><code id="encrypt-out-tag" class="encrypt-out-value truncate"></code></div>
|
|
335
|
-
<div class="encrypt-field"><label>IV (nonce)</label><code id="encrypt-out-iv" class="encrypt-out-value truncate"></code></div>
|
|
336
|
-
<div class="encrypt-field"><label>HKDF Salt</label><code id="encrypt-out-salt" class="encrypt-out-value truncate"></code></div>
|
|
337
|
-
<div class="encrypt-field"><label>Sender Public Key</label><code id="encrypt-out-sender-pub" class="encrypt-out-value truncate"></code></div>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="encrypt-bundle-group">
|
|
340
|
-
<div class="encrypt-format-toggle">
|
|
341
|
-
<label class="section-label">Payload Bundle</label>
|
|
342
|
-
<div class="encrypt-format-btns">
|
|
343
|
-
<button class="glass-btn small encrypt-fmt-btn active" data-format="json">JSON</button>
|
|
344
|
-
<button class="glass-btn small encrypt-fmt-btn" data-format="flatbuffer">FlatBuffer</button>
|
|
345
|
-
</div>
|
|
464
|
+
<!-- Encrypt Step 2: Result -->
|
|
465
|
+
<div id="encrypt-step-result" class="encrypt-step" style="display:none;">
|
|
466
|
+
<div class="encrypt-step-header">
|
|
467
|
+
<button id="encrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
468
|
+
<h4 class="section-label">Encrypted Payload</h4>
|
|
346
469
|
</div>
|
|
347
|
-
<div class="encrypt-
|
|
348
|
-
<
|
|
470
|
+
<div class="encrypt-output-fields">
|
|
471
|
+
<div class="encrypt-field"><label>Ciphertext</label><code id="encrypt-out-ciphertext" class="encrypt-out-value truncate"></code><button class="copy-btn" data-copy="encrypt-out-ciphertext" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></div>
|
|
472
|
+
<div class="encrypt-field"><label>Auth Tag</label><code id="encrypt-out-tag" class="encrypt-out-value truncate"></code></div>
|
|
473
|
+
<div class="encrypt-field"><label>IV (nonce)</label><code id="encrypt-out-iv" class="encrypt-out-value truncate"></code></div>
|
|
474
|
+
<div class="encrypt-field"><label>HKDF Salt</label><code id="encrypt-out-salt" class="encrypt-out-value truncate"></code></div>
|
|
475
|
+
<div class="encrypt-field"><label>Sender Public Key</label><code id="encrypt-out-sender-pub" class="encrypt-out-value truncate"></code></div>
|
|
349
476
|
</div>
|
|
350
|
-
<
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
477
|
+
<div class="encrypt-bundle-group">
|
|
478
|
+
<div class="encrypt-format-toggle">
|
|
479
|
+
<label class="section-label">Payload Bundle</label>
|
|
480
|
+
<div class="encrypt-format-btns">
|
|
481
|
+
<button class="glass-btn small encrypt-fmt-btn active" data-format="json">JSON</button>
|
|
482
|
+
<button class="glass-btn small encrypt-fmt-btn" data-format="flatbuffer">FlatBuffer</button>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="encrypt-format-info">
|
|
486
|
+
<span id="encrypt-format-label" class="encrypt-format-label">EME (Encrypted Message Envelope) — SpaceDataStandards.org</span>
|
|
487
|
+
</div>
|
|
488
|
+
<textarea id="encrypt-bundle" class="glass-input glass-textarea" rows="4" readonly></textarea>
|
|
489
|
+
<div class="encrypt-bundle-actions">
|
|
490
|
+
<button class="glass-btn small" id="encrypt-copy-bundle">Copy</button>
|
|
491
|
+
<button class="glass-btn small" id="encrypt-download-bundle">Download</button>
|
|
492
|
+
</div>
|
|
354
493
|
</div>
|
|
355
494
|
</div>
|
|
356
495
|
</div>
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
<
|
|
365
|
-
<
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
<div class="encrypt-actions">
|
|
369
|
-
<button id="decrypt-btn" class="glass-btn primary" disabled>Decrypt</button>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
|
|
373
|
-
<!-- Step 2: Result (replaces input) -->
|
|
374
|
-
<div id="decrypt-step-result" class="encrypt-step" style="display:none;">
|
|
375
|
-
<div class="encrypt-step-header">
|
|
376
|
-
<button id="decrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
377
|
-
<h4 class="section-label">Decrypted Message</h4>
|
|
496
|
+
<div id="decrypt-sub" class="messaging-sub-content">
|
|
497
|
+
<!-- Decrypt Step 1: Input -->
|
|
498
|
+
<div id="decrypt-step-input" class="encrypt-step">
|
|
499
|
+
<div class="encrypt-tab-intro">
|
|
500
|
+
<h4 class="section-label">Decrypt a Message</h4>
|
|
501
|
+
<p>Paste an EME payload (JSON or base64 FlatBuffer) to decrypt with your key.</p>
|
|
502
|
+
</div>
|
|
503
|
+
<textarea id="decrypt-payload" class="glass-input glass-textarea" rows="6" placeholder='Paste EME JSON or base64 FlatBuffer here...'></textarea>
|
|
504
|
+
<div class="encrypt-actions">
|
|
505
|
+
<button id="decrypt-btn" class="glass-btn primary" disabled>Decrypt</button>
|
|
506
|
+
</div>
|
|
378
507
|
</div>
|
|
379
|
-
|
|
380
|
-
|
|
508
|
+
<!-- Decrypt Step 2: Result -->
|
|
509
|
+
<div id="decrypt-step-result" class="encrypt-step" style="display:none;">
|
|
510
|
+
<div class="encrypt-step-header">
|
|
511
|
+
<button id="decrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
|
|
512
|
+
<h4 class="section-label">Decrypted Message</h4>
|
|
513
|
+
</div>
|
|
514
|
+
<div class="decrypt-result">
|
|
515
|
+
<div class="decrypt-result-value" id="decrypt-result-value"></div>
|
|
516
|
+
</div>
|
|
381
517
|
</div>
|
|
382
518
|
</div>
|
|
383
519
|
</div>
|