Skip to content

Commit cfda7ee

Browse files
wKich-octrawKich-octra
authored
Merge pull request #4 from octra-labs/design-fix
design fix
2 parents 8dfc059 + ce44fed commit cfda7ee

File tree

2 files changed

+69
-50
lines changed

2 files changed

+69
-50
lines changed

‎assets/icon-warning.svg

Lines changed: 5 additions & 0 deletions
Loading

‎index.html

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
--gray-60: #313131;
4343
--gray-70: #222222;
4444
--gray-80: #181818;
45-
45+
4646
--orange-10: #ffeec2;
4747
--orange-20: #fcb73e;
4848
--orange-30: #ef8b17;
@@ -56,7 +56,7 @@
5656
--border-color-500: #15151566;
5757

5858
/* Legacy variables for compatibility */
59-
--background-default-color: #0a0a0a;
59+
--background-default-color: #181818;
6060
--background-primary-color: var(--blue-50-base);
6161
--text-primary-color: var(--button-primary-text);
6262
--text-inverted-color: var(--button-primary-text);
@@ -82,7 +82,7 @@
8282
}
8383

8484
.container {
85-
max-width: 900px;
85+
max-width: 1024px;
8686
width: 100%;
8787
padding: 20px;
8888
}
@@ -102,6 +102,7 @@
102102
font-size: 36px;
103103
line-height: 42px;
104104
font-weight: 700;
105+
margin-bottom: 16px;
105106
}
106107

107108
h5 {
@@ -201,14 +202,17 @@
201202
outline-offset: -2px;
202203
border: 1px solid var(--gray-0);
203204
}
205+
206+
.button.fullwidth {
207+
width: 100%;
208+
}
204209

205210
.status {
206-
margin: 40px 0;
211+
margin: 40px 0 16px;
207212
padding: 20px;
208213
background-color: rgba(255, 255, 255, 0.05);
209214
border: 1px solid var(--border-color);
210-
border-radius: 4px;
211-
min-height: 300px;
215+
min-height: 104px;
212216
white-space: pre-wrap;
213217
overflow-y: auto;
214218
max-height: 400px;
@@ -227,45 +231,52 @@
227231

228232
.wallet-field {
229233
margin: 20px 0;
230-
padding: 20px;
231-
background-color: rgba(255, 255, 255, 0.05);
232-
border: 1px solid var(--border-color);
233-
border-radius: 4px;
234-
word-break: break-all;
234+
display: flex;
235+
flex-direction: row;
236+
box-sizing: border-box;
237+
gap: 24px;
235238
}
236239

237240
.field-label {
238241
font-family: 'National', sans-serif;
239-
font-size: 14px;
242+
font-size: 16px;
240243
line-height: 20px;
241244
font-weight: 400;
242-
color: var(--text-inverted-color);
243-
margin-bottom: 10px;
244-
text-transform: uppercase;
245-
letter-spacing: 0.05em;
245+
flex-basis: 200px;
246246
}
247247

248248
.field-value {
249249
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
250250
font-size: 14px;
251251
line-height: 18px;
252252
font-weight: 400;
253+
word-break: break-all;
254+
width: 100%;
255+
}
256+
257+
.field-value.inputs {
258+
margin-top: -12px;
253259
}
254260

255261
.warning {
256-
background-color: var(--orange-10);
257-
color: var(--orange-80);
258-
padding: 20px;
259-
border: 1px solid var(--orange-30);
260-
border-radius: 0;
262+
background-color: var(--gray-60);
263+
color: var(--text-inverted-color);
264+
padding: 12px 16px 12px 36px;
261265
margin: 20px 0;
262-
text-align: center;
263266
font-family: 'National', sans-serif;
264-
font-size: 14px;
267+
position: relative;
268+
font-size: 16px;
265269
line-height: 20px;
266-
font-weight: 400;
267-
text-transform: uppercase;
268-
letter-spacing: 0.05em;
270+
}
271+
272+
.warning::before {
273+
content: '';
274+
position: absolute;
275+
background: url('assets/icon-warning.svg') 0 0 no-repeat;
276+
width: 16px;
277+
height: 16px;
278+
left: 12px;
279+
top: 14px;
269280
}
270281

271282
.address-info {
@@ -303,7 +314,7 @@
303314
padding: 6px 12px;
304315
font-size: 16px;
305316
line-height: 24px;
306-
margin-left: 10px;
317+
margin-left: 4px;
307318
min-height: 36px;
308319
}
309320

@@ -374,56 +385,58 @@
374385
#derivedAddress {
375386
margin-top: 15px;
376387
padding: 10px;
377-
background-color: rgba(0, 51, 255, 0.1);
378-
border: 1px solid var(--background-primary-color);
379-
border-radius: 4px;
388+
background-color: var(--gray-60);
389+
width: 100%;
380390
}
381391
</style>
382392
</head>
383393
<body>
384394
<div class="container">
385-
<h1>OCTRA WALLET GENERATOR</h1>
386-
387-
<div style="text-align: center;">
388-
<button id="generateBtn" class="button" onclick="generateWallet()">GENERATE NEW WALLET</button>
389-
</div>
390-
391-
<div class="status" id="status">Ready to generate wallet...</div>
395+
<h1>octra wallet generation</h1>
396+
397+
<div class="main">
398+
<div>
399+
<div class="status" id="status">Ready to generate wallet...</div>
400+
401+
<div style="text-align: center;">
402+
<button id="generateBtn" class="button size-large fullwidth" onclick="generateWallet()">generate new wallet</button>
403+
</div>
404+
</div>
392405

393406
<div class="wallet-info" id="walletInfo">
407+
<h3>your wallet</h3>
394408
<div class="warning">
395-
WARNING: DO NOT STORE THIS FILE ONLINE OR ON CLOUD SERVICES<br>
396-
KEEP YOUR PRIVATE KEY SECURE AND NEVER SHARE IT
409+
do not store this file online or on cloud services, keep your private key secure and never share it!
397410
</div>
398411

399412
<div class="wallet-field">
400-
<div class="field-label">MNEMONIC (12 WORDS)</div>
413+
<div class="field-label">mnemonic (12 words)</div>
401414
<div class="field-value" id="mnemonic"></div>
402415
</div>
403416

404417
<div class="wallet-field">
405-
<div class="field-label">PRIVATE KEY</div>
418+
<div class="field-label">private key</div>
406419
<div class="field-value">
407420
Raw: <span id="privateKeyRaw"></span><br>
408421
B64: <span id="privateKeyB64"></span>
409422
</div>
410423
</div>
411424

412425
<div class="wallet-field">
413-
<div class="field-label">PUBLIC KEY</div>
426+
<div class="field-label">public key</div>
414427
<div class="field-value">
415428
Raw: <span id="publicKeyRaw"></span><br>
416429
B64: <span id="publicKeyB64"></span>
417430
</div>
418431
</div>
419432

420433
<div class="wallet-field">
421-
<div class="field-label">OCTRA ADDRESS</div>
434+
<div class="field-label">octra addres</div>
422435
<div class="field-value" id="address"></div>
423436
</div>
424437

425438
<div class="wallet-field">
426-
<div class="field-label">TECHNICAL INFORMATION</div>
439+
<div class="field-label">technical information</div>
427440
<div class="field-value">
428441
Entropy: <span id="entropy"></span><br>
429442
Seed: <span id="seed"></span><br>
@@ -432,7 +445,7 @@ <h1>OCTRA WALLET GENERATOR</h1>
432445
</div>
433446

434447
<div class="wallet-field">
435-
<div class="field-label">SIGNATURE TEST</div>
448+
<div class="field-label">signature test</div>
436449
<div class="field-value">
437450
Message: <span id="testMessage"></span><br>
438451
Signature: <span id="testSignature"></span><br>
@@ -441,8 +454,8 @@ <h1>OCTRA WALLET GENERATOR</h1>
441454
</div>
442455

443456
<div class="wallet-field">
444-
<div class="field-label">HD DERIVATION</div>
445-
<div class="field-value">
457+
<div class="field-label">HD derivation</div>
458+
<div class="field-value inputs">
446459
<label>Network Type:
447460
<select id="networkType">
448461
<option value="0">MainCoin</option>
@@ -455,7 +468,7 @@ <h1>OCTRA WALLET GENERATOR</h1>
455468
<label style="margin-left: 10px;">Index:
456469
<input type="number" id="derivationIndex" value="0" min="0" max="100" style="width: 60px;">
457470
</label>
458-
<button class="button derive-button" onclick="derivePath()">DERIVE</button>
471+
<button class="button derive-button" onclick="derivePath()">derive</button>
459472
<div id="derivedAddress" style="display: none;">
460473
Derived Address: <span id="derivedAddressValue"></span><br>
461474
Path: <span id="derivedPath"></span>
@@ -464,13 +477,14 @@ <h1>OCTRA WALLET GENERATOR</h1>
464477
</div>
465478

466479
<div class="wallet-field" id="saveInfo" style="display: none;">
467-
<div class="field-label">FILE SAVED</div>
480+
<div class="field-label">file saved</div>
468481
<div class="field-value">
469482
Filename: <span id="savedFilename"></span><br>
470483
Location: In the same directory as this script
471484
</div>
472485
</div>
473486
</div>
487+
</div>
474488
</div>
475489

476490
<script>
@@ -603,7 +617,7 @@ <h1>OCTRA WALLET GENERATOR</h1>
603617
updateStatus('Wallet saved to: ' + result.filename);
604618

605619
document.getElementById('savedFilename').textContent = result.filename;
606-
document.getElementById('saveInfo').style.display = 'block';
620+
document.getElementById('saveInfo').style.display = 'flex';
607621
} else {
608622
updateStatus('ERROR: Failed to save wallet');
609623
}

0 commit comments

Comments
 (0)