Skip to content

design fix #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 25, 2025
Merged

design fix #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2e4467
design fixes
Jun 24, 2025
87d1c83
fix warning message
Jun 24, 2025
ce44fed
fix labels
Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/icon-warning.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 64 additions & 50 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
--gray-60: #313131;
--gray-70: #222222;
--gray-80: #181818;

--orange-10: #ffeec2;
--orange-20: #fcb73e;
--orange-30: #ef8b17;
Expand All @@ -56,7 +56,7 @@
--border-color-500: #15151566;

/* Legacy variables for compatibility */
--background-default-color: #0a0a0a;
--background-default-color: #181818;
--background-primary-color: var(--blue-50-base);
--text-primary-color: var(--button-primary-text);
--text-inverted-color: var(--button-primary-text);
Expand All @@ -82,7 +82,7 @@
}

.container {
max-width: 900px;
max-width: 1024px;
width: 100%;
padding: 20px;
}
Expand All @@ -102,6 +102,7 @@
font-size: 36px;
line-height: 42px;
font-weight: 700;
margin-bottom: 16px;
}

h5 {
Expand Down Expand Up @@ -201,14 +202,17 @@
outline-offset: -2px;
border: 1px solid var(--gray-0);
}

.button.fullwidth {
width: 100%;
}

.status {
margin: 40px 0;
margin: 40px 0 16px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 4px;
min-height: 300px;
min-height: 104px;
white-space: pre-wrap;
overflow-y: auto;
max-height: 400px;
Expand All @@ -227,45 +231,52 @@

.wallet-field {
margin: 20px 0;
padding: 20px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color);
border-radius: 4px;
word-break: break-all;
display: flex;
flex-direction: row;
box-sizing: border-box;
gap: 24px;
}

.field-label {
font-family: 'National', sans-serif;
font-size: 14px;
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: var(--text-inverted-color);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
flex-basis: 200px;
}

.field-value {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 14px;
line-height: 18px;
font-weight: 400;
word-break: break-all;
width: 100%;
}

.field-value.inputs {
margin-top: -12px;
}

.warning {
background-color: var(--orange-10);
color: var(--orange-80);
padding: 20px;
border: 1px solid var(--orange-30);
border-radius: 0;
background-color: var(--gray-60);
color: var(--text-inverted-color);
padding: 12px 16px 12px 36px;
margin: 20px 0;
text-align: center;
font-family: 'National', sans-serif;
font-size: 14px;
position: relative;
font-size: 16px;
line-height: 20px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.warning::before {
content: '';
position: absolute;
background: url('assets/icon-warning.svg') 0 0 no-repeat;
width: 16px;
height: 16px;
left: 12px;
top: 14px;
}

.address-info {
Expand Down Expand Up @@ -303,7 +314,7 @@
padding: 6px 12px;
font-size: 16px;
line-height: 24px;
margin-left: 10px;
margin-left: 4px;
min-height: 36px;
}

Expand Down Expand Up @@ -374,56 +385,58 @@
#derivedAddress {
margin-top: 15px;
padding: 10px;
background-color: rgba(0, 51, 255, 0.1);
border: 1px solid var(--background-primary-color);
border-radius: 4px;
background-color: var(--gray-60);
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>OCTRA WALLET GENERATOR</h1>

<div style="text-align: center;">
<button id="generateBtn" class="button" onclick="generateWallet()">GENERATE NEW WALLET</button>
</div>

<div class="status" id="status">Ready to generate wallet...</div>
<h1>octra wallet generation</h1>

<div class="main">
<div>
<div class="status" id="status">Ready to generate wallet...</div>

<div style="text-align: center;">
<button id="generateBtn" class="button size-large fullwidth" onclick="generateWallet()">generate new wallet</button>
</div>
</div>

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

<div class="wallet-field">
<div class="field-label">MNEMONIC (12 WORDS)</div>
<div class="field-label">mnemonic (12 words)</div>
<div class="field-value" id="mnemonic"></div>
</div>

<div class="wallet-field">
<div class="field-label">PRIVATE KEY</div>
<div class="field-label">private key</div>
<div class="field-value">
Raw: <span id="privateKeyRaw"></span><br>
B64: <span id="privateKeyB64"></span>
</div>
</div>

<div class="wallet-field">
<div class="field-label">PUBLIC KEY</div>
<div class="field-label">public key</div>
<div class="field-value">
Raw: <span id="publicKeyRaw"></span><br>
B64: <span id="publicKeyB64"></span>
</div>
</div>

<div class="wallet-field">
<div class="field-label">OCTRA ADDRESS</div>
<div class="field-label">octra addres</div>
<div class="field-value" id="address"></div>
</div>

<div class="wallet-field">
<div class="field-label">TECHNICAL INFORMATION</div>
<div class="field-label">technical information</div>
<div class="field-value">
Entropy: <span id="entropy"></span><br>
Seed: <span id="seed"></span><br>
Expand All @@ -432,7 +445,7 @@ <h1>OCTRA WALLET GENERATOR</h1>
</div>

<div class="wallet-field">
<div class="field-label">SIGNATURE TEST</div>
<div class="field-label">signature test</div>
<div class="field-value">
Message: <span id="testMessage"></span><br>
Signature: <span id="testSignature"></span><br>
Expand All @@ -441,8 +454,8 @@ <h1>OCTRA WALLET GENERATOR</h1>
</div>

<div class="wallet-field">
<div class="field-label">HD DERIVATION</div>
<div class="field-value">
<div class="field-label">HD derivation</div>
<div class="field-value inputs">
<label>Network Type:
<select id="networkType">
<option value="0">MainCoin</option>
Expand All @@ -455,7 +468,7 @@ <h1>OCTRA WALLET GENERATOR</h1>
<label style="margin-left: 10px;">Index:
<input type="number" id="derivationIndex" value="0" min="0" max="100" style="width: 60px;">
</label>
<button class="button derive-button" onclick="derivePath()">DERIVE</button>
<button class="button derive-button" onclick="derivePath()">derive</button>
<div id="derivedAddress" style="display: none;">
Derived Address: <span id="derivedAddressValue"></span><br>
Path: <span id="derivedPath"></span>
Expand All @@ -464,13 +477,14 @@ <h1>OCTRA WALLET GENERATOR</h1>
</div>

<div class="wallet-field" id="saveInfo" style="display: none;">
<div class="field-label">FILE SAVED</div>
<div class="field-label">file saved</div>
<div class="field-value">
Filename: <span id="savedFilename"></span><br>
Location: In the same directory as this script
</div>
</div>
</div>
</div>
</div>

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

document.getElementById('savedFilename').textContent = result.filename;
document.getElementById('saveInfo').style.display = 'block';
document.getElementById('saveInfo').style.display = 'flex';
} else {
updateStatus('ERROR: Failed to save wallet');
}
Expand Down