717 lines
22 KiB
HTML
717 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Key Generator</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f1117;
|
|
--surface: #1a1d27;
|
|
--surface2: #22263a;
|
|
--border: #2e3250;
|
|
--accent: #6c63ff;
|
|
--accent-hover: #7c74ff;
|
|
--accent-dim: rgba(108, 99, 255, 0.15);
|
|
--success: #22c55e;
|
|
--success-dim: rgba(34, 197, 94, 0.12);
|
|
--text: #e2e8f0;
|
|
--text-muted: #8892a4;
|
|
--text-dim: #4a5568;
|
|
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40px 16px 80px;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
header h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
background: linear-gradient(135deg, #6c63ff, #a78bfa);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
header p {
|
|
margin-top: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Main card */
|
|
.card {
|
|
width: 100%;
|
|
max-width: 720px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
}
|
|
|
|
/* Section label */
|
|
.section-label {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Key type grid */
|
|
.type-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.type-btn {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 12px 14px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: all 0.15s;
|
|
color: var(--text);
|
|
}
|
|
.type-btn:hover {
|
|
border-color: var(--accent);
|
|
background: var(--accent-dim);
|
|
}
|
|
.type-btn.active {
|
|
border-color: var(--accent);
|
|
background: var(--accent-dim);
|
|
box-shadow: 0 0 0 1px var(--accent);
|
|
}
|
|
.type-btn .btn-label {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
.type-btn .btn-desc {
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
margin-top: 3px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Custom options */
|
|
.custom-options {
|
|
display: none;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 24px;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
.custom-options.visible {
|
|
display: flex;
|
|
}
|
|
.field-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
flex: 1;
|
|
min-width: 120px;
|
|
}
|
|
.field-group label {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
.field-group input,
|
|
.field-group select {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
padding: 8px 12px;
|
|
font-size: 0.85rem;
|
|
outline: none;
|
|
transition: border-color 0.15s;
|
|
}
|
|
.field-group input:focus,
|
|
.field-group select:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
.field-group select option {
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* Divider */
|
|
.divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 8px 0 24px;
|
|
}
|
|
|
|
/* Bulk toggle */
|
|
.bulk-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.bulk-row label {
|
|
font-size: 0.82rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.bulk-row input[type=number] {
|
|
width: 64px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
padding: 6px 10px;
|
|
font-size: 0.82rem;
|
|
outline: none;
|
|
text-align: center;
|
|
}
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 38px;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
}
|
|
.toggle-switch input { display: none; }
|
|
.toggle-track {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--border);
|
|
border-radius: 999px;
|
|
transition: background 0.2s;
|
|
}
|
|
.toggle-switch input:checked ~ .toggle-track { background: var(--accent); }
|
|
.toggle-thumb {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
top: 3px;
|
|
left: 3px;
|
|
transition: transform 0.2s;
|
|
}
|
|
.toggle-switch input:checked ~ .toggle-track .toggle-thumb {
|
|
transform: translateX(16px);
|
|
}
|
|
|
|
/* Generate button */
|
|
.generate-btn {
|
|
width: 100%;
|
|
padding: 14px;
|
|
background: var(--accent);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
letter-spacing: 0.02em;
|
|
transition: background 0.15s, transform 0.1s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
.generate-btn:hover { background: var(--accent-hover); }
|
|
.generate-btn:active { transform: scale(0.99); }
|
|
.generate-btn .spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
border-top-color: white;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
display: none;
|
|
}
|
|
.generate-btn.loading .spinner { display: block; }
|
|
.generate-btn.loading .btn-text { opacity: 0.7; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
/* Result area */
|
|
.result-area {
|
|
margin-top: 24px;
|
|
}
|
|
.result-single {
|
|
position: relative;
|
|
}
|
|
.key-display {
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 16px 16px 14px;
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
word-break: break-all;
|
|
color: #a5f3fc;
|
|
min-height: 56px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.key-meta {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.meta-tag {
|
|
font-size: 0.7rem;
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
.meta-tag.highlight {
|
|
background: var(--accent-dim);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Copy button */
|
|
.copy-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
}
|
|
.copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
padding: 7px 14px;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
font-weight: 500;
|
|
}
|
|
.copy-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: var(--accent-dim);
|
|
}
|
|
.copy-btn.copied {
|
|
border-color: var(--success);
|
|
color: var(--success);
|
|
background: var(--success-dim);
|
|
}
|
|
|
|
/* Bulk results */
|
|
.bulk-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.bulk-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
}
|
|
.bulk-index {
|
|
font-size: 0.7rem;
|
|
color: var(--text-dim);
|
|
font-family: var(--mono);
|
|
min-width: 20px;
|
|
}
|
|
.bulk-key {
|
|
flex: 1;
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
color: #a5f3fc;
|
|
word-break: break-all;
|
|
line-height: 1.5;
|
|
}
|
|
.bulk-copy {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
padding: 5px 10px;
|
|
font-size: 0.72rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
.bulk-copy:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.bulk-copy.copied {
|
|
border-color: var(--success);
|
|
color: var(--success);
|
|
}
|
|
.bulk-copy-all {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Keypair display */
|
|
.keypair-section { margin-bottom: 16px; }
|
|
.keypair-section:last-child { margin-bottom: 0; }
|
|
.keypair-section-label {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* Icon SVG */
|
|
svg { display: inline-block; vertical-align: middle; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#g)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:8px">
|
|
<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#6c63ff"/><stop offset="100%" stop-color="#a78bfa"/></linearGradient></defs>
|
|
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>
|
|
</svg>
|
|
Key Generator
|
|
</h1>
|
|
<p>JWT Secret · RS256 · ES256 · API Key · Operation Key · UUID · Random Hex</p>
|
|
</header>
|
|
|
|
<div class="card">
|
|
|
|
<!-- Key Type Selection -->
|
|
<div class="section-label">키 타입 선택</div>
|
|
<div class="type-grid" id="typeGrid">
|
|
{% for key, cfg in key_configs.items() %}
|
|
<button class="type-btn {% if key == 'jwt_hs256' %}active{% endif %}"
|
|
data-type="{{ key }}"
|
|
onclick="selectType('{{ key }}', this)">
|
|
<div class="btn-label">{{ cfg.label }}</div>
|
|
<div class="btn-desc">{{ cfg.description }}</div>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Custom Options (visible when custom is selected) -->
|
|
<div class="custom-options" id="customOptions">
|
|
<div class="field-group">
|
|
<label>바이트 수 (8 ~ 512)</label>
|
|
<input type="number" id="customBytes" value="32" min="8" max="512" />
|
|
</div>
|
|
<div class="field-group">
|
|
<label>출력 포맷</label>
|
|
<select id="customFormat">
|
|
<option value="hex">Hex</option>
|
|
<option value="base64url">Base64URL</option>
|
|
<option value="alphanumeric">Alphanumeric</option>
|
|
<option value="api_key">API Key (sk- prefix)</option>
|
|
<option value="op_key">Op Key (ops- prefix)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="divider" />
|
|
|
|
<!-- Bulk toggle -->
|
|
<div class="bulk-row">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="bulkToggle" onchange="toggleBulk()" />
|
|
<span class="toggle-track"><span class="toggle-thumb"></span></span>
|
|
</label>
|
|
<label for="bulkToggle" style="cursor:pointer">대량 생성</label>
|
|
<input type="number" id="bulkCount" value="5" min="1" max="20"
|
|
style="display:none" />
|
|
<label id="bulkCountLabel" style="display:none">개</label>
|
|
</div>
|
|
|
|
<!-- Generate Button -->
|
|
<button class="generate-btn" id="generateBtn" onclick="generate()">
|
|
<div class="spinner"></div>
|
|
<span class="btn-text">Generate</span>
|
|
</button>
|
|
|
|
<!-- Result -->
|
|
<div class="result-area" id="resultArea" style="display:none">
|
|
<div class="section-label" style="margin-bottom:12px">생성된 키</div>
|
|
|
|
<!-- Single result -->
|
|
<div class="result-single" id="resultSingle">
|
|
<div class="key-display" id="keyDisplay"></div>
|
|
<div class="key-meta" id="keyMeta"></div>
|
|
<div class="copy-row">
|
|
<button class="copy-btn" id="copyBtn" onclick="copyKey()">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Keypair result -->
|
|
<div id="resultKeypair" style="display:none">
|
|
<div class="keypair-section">
|
|
<div class="keypair-section-label">Private Key</div>
|
|
<div class="key-display" id="privateKeyDisplay" style="white-space:pre;font-size:0.75rem;"></div>
|
|
<div class="copy-row">
|
|
<button class="copy-btn" id="copyPrivateBtn" onclick="copyPrivateKey()">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
Copy Private Key
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="keypair-section">
|
|
<div class="keypair-section-label">Public Key</div>
|
|
<div class="key-display" id="publicKeyDisplay" style="white-space:pre;font-size:0.75rem;"></div>
|
|
<div class="copy-row">
|
|
<button class="copy-btn" id="copyPublicBtn" onclick="copyPublicKey()">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
Copy Public Key
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="key-meta" id="keyMetaKeypair"></div>
|
|
</div>
|
|
|
|
<!-- Bulk result -->
|
|
<div id="resultBulk" style="display:none">
|
|
<div class="bulk-list" id="bulkList"></div>
|
|
<div class="bulk-copy-all">
|
|
<button class="copy-btn" onclick="copyAll()">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<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>
|
|
Copy All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let selectedType = 'jwt_hs256';
|
|
let bulkMode = false;
|
|
let lastBulkKeys = [];
|
|
let lastBulkData = [];
|
|
let lastKeypair = null;
|
|
|
|
function selectType(type, el) {
|
|
selectedType = type;
|
|
document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('active'));
|
|
el.classList.add('active');
|
|
|
|
const customOpts = document.getElementById('customOptions');
|
|
if (type === 'custom') {
|
|
customOpts.classList.add('visible');
|
|
} else {
|
|
customOpts.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
function toggleBulk() {
|
|
bulkMode = document.getElementById('bulkToggle').checked;
|
|
const countInput = document.getElementById('bulkCount');
|
|
const countLabel = document.getElementById('bulkCountLabel');
|
|
countInput.style.display = bulkMode ? 'block' : 'none';
|
|
countLabel.style.display = bulkMode ? 'block' : 'none';
|
|
}
|
|
|
|
async function generate() {
|
|
const btn = document.getElementById('generateBtn');
|
|
btn.classList.add('loading');
|
|
|
|
const payload = {
|
|
type: selectedType,
|
|
custom_bytes: parseInt(document.getElementById('customBytes').value) || 32,
|
|
custom_format: document.getElementById('customFormat').value,
|
|
};
|
|
|
|
try {
|
|
if (bulkMode) {
|
|
const count = parseInt(document.getElementById('bulkCount').value) || 5;
|
|
const res = await fetch('/api/generate/bulk', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ...payload, count }),
|
|
});
|
|
const json = await res.json();
|
|
if (json.success) renderBulk(json.data);
|
|
} else {
|
|
const res = await fetch('/api/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const json = await res.json();
|
|
if (json.success) renderSingle(json.data);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
btn.classList.remove('loading');
|
|
}
|
|
}
|
|
|
|
const COPY_ICON = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><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>`;
|
|
const CHECK_ICON = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
|
|
|
|
function renderSingle(data) {
|
|
document.getElementById('resultArea').style.display = 'block';
|
|
document.getElementById('resultBulk').style.display = 'none';
|
|
|
|
if (data.keypair) {
|
|
lastKeypair = data;
|
|
document.getElementById('resultSingle').style.display = 'none';
|
|
document.getElementById('resultKeypair').style.display = 'block';
|
|
|
|
document.getElementById('privateKeyDisplay').textContent = data.key;
|
|
document.getElementById('publicKeyDisplay').textContent = data.public_key;
|
|
|
|
const meta = document.getElementById('keyMetaKeypair');
|
|
meta.innerHTML = `
|
|
<span class="meta-tag highlight">${data.label}</span>
|
|
<span class="meta-tag">${data.bits} bit</span>
|
|
<span class="meta-tag">${data.algorithm}</span>
|
|
`;
|
|
document.getElementById('copyPrivateBtn').classList.remove('copied');
|
|
document.getElementById('copyPublicBtn').classList.remove('copied');
|
|
document.getElementById('copyPrivateBtn').innerHTML = `${COPY_ICON} Copy Private Key`;
|
|
document.getElementById('copyPublicBtn').innerHTML = `${COPY_ICON} Copy Public Key`;
|
|
} else {
|
|
lastKeypair = null;
|
|
document.getElementById('resultSingle').style.display = 'block';
|
|
document.getElementById('resultKeypair').style.display = 'none';
|
|
|
|
document.getElementById('keyDisplay').textContent = data.key;
|
|
|
|
const meta = document.getElementById('keyMeta');
|
|
meta.innerHTML = `
|
|
<span class="meta-tag highlight">${data.label}</span>
|
|
<span class="meta-tag">${data.bits} bit</span>
|
|
<span class="meta-tag">${data.algorithm}</span>
|
|
<span class="meta-tag">${data.length} chars</span>
|
|
`;
|
|
|
|
const copyBtn = document.getElementById('copyBtn');
|
|
copyBtn.classList.remove('copied');
|
|
copyBtn.innerHTML = `${COPY_ICON} Copy`;
|
|
}
|
|
}
|
|
|
|
function renderBulk(items) {
|
|
lastBulkData = items;
|
|
lastBulkKeys = items.map(i => i.key);
|
|
document.getElementById('resultArea').style.display = 'block';
|
|
document.getElementById('resultSingle').style.display = 'none';
|
|
document.getElementById('resultKeypair').style.display = 'none';
|
|
document.getElementById('resultBulk').style.display = 'block';
|
|
|
|
const list = document.getElementById('bulkList');
|
|
list.innerHTML = items.map((item, idx) => {
|
|
const displayKey = item.keypair
|
|
? item.key.split('\n').slice(0, 2).join('\n') + '\n...'
|
|
: item.key;
|
|
return `
|
|
<div class="bulk-item">
|
|
<span class="bulk-index">#${idx + 1}</span>
|
|
<span class="bulk-key" style="${item.keypair ? 'white-space:pre;font-size:0.72rem;' : ''}">${escHtmlDisplay(displayKey)}</span>
|
|
<button class="bulk-copy" data-index="${idx}" onclick="copyBulkItem(this)">Copy</button>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function escHtmlDisplay(s) {
|
|
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
|
|
function flashCopied(btn, resetLabel) {
|
|
btn.classList.add('copied');
|
|
btn.innerHTML = `${CHECK_ICON} Copied!`;
|
|
setTimeout(() => {
|
|
btn.classList.remove('copied');
|
|
btn.innerHTML = `${COPY_ICON} ${resetLabel}`;
|
|
}, 2000);
|
|
}
|
|
|
|
function copyKey() {
|
|
const key = document.getElementById('keyDisplay').textContent;
|
|
navigator.clipboard.writeText(key).then(() => {
|
|
flashCopied(document.getElementById('copyBtn'), 'Copy');
|
|
});
|
|
}
|
|
|
|
function copyPrivateKey() {
|
|
if (!lastKeypair) return;
|
|
navigator.clipboard.writeText(lastKeypair.key).then(() => {
|
|
flashCopied(document.getElementById('copyPrivateBtn'), 'Copy Private Key');
|
|
});
|
|
}
|
|
|
|
function copyPublicKey() {
|
|
if (!lastKeypair) return;
|
|
navigator.clipboard.writeText(lastKeypair.public_key).then(() => {
|
|
flashCopied(document.getElementById('copyPublicBtn'), 'Copy Public Key');
|
|
});
|
|
}
|
|
|
|
function copyBulkItem(btn) {
|
|
const idx = parseInt(btn.dataset.index);
|
|
const key = lastBulkData[idx].key;
|
|
navigator.clipboard.writeText(key).then(() => {
|
|
btn.classList.add('copied');
|
|
btn.textContent = 'Copied!';
|
|
setTimeout(() => {
|
|
btn.classList.remove('copied');
|
|
btn.textContent = 'Copy';
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
function copyAll() {
|
|
const text = lastBulkKeys.join('\n');
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('전체 키가 클립보드에 복사되었습니다!');
|
|
});
|
|
}
|
|
|
|
// Enter key shortcut
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) generate();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|