138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="styles/popup.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<div class="logo">
|
||
<div class="logo-icon">🔐</div>
|
||
<h1>CryptoVault</h1>
|
||
</div>
|
||
<div class="status-indicator" id="statusIndicator">
|
||
<div class="status-dot"></div>
|
||
<span id="statusText">Initializing...</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Create/Login Section -->
|
||
<section class="section" id="authSection">
|
||
<div class="card">
|
||
<h2>Access Your Vault</h2>
|
||
<div class="form-group">
|
||
<label for="keyspaceInput">Keyspace Name</label>
|
||
<input type="text" id="keyspaceInput" placeholder="Enter keyspace name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="passwordInput">Password</label>
|
||
<input type="password" id="passwordInput" placeholder="Enter password">
|
||
</div>
|
||
<div class="button-group">
|
||
<button id="createKeyspaceBtn" class="btn btn-secondary">Create New</button>
|
||
<button id="loginBtn" class="btn btn-primary">Unlock</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Main Vault Section -->
|
||
<section class="section hidden" id="vaultSection">
|
||
<div class="vault-header">
|
||
<h2>Your Keypairs</h2>
|
||
<button id="lockBtn" class="btn btn-ghost">🔒 Lock</button>
|
||
</div>
|
||
|
||
<!-- Add Keypair Toggle Button -->
|
||
<div class="add-keypair-toggle">
|
||
<button id="toggleAddKeypairBtn" class="btn btn-primary">
|
||
<span class="btn-icon">+</span>
|
||
Add Keypair
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Add Keypair Form (Hidden by default) -->
|
||
<div class="card add-keypair-form hidden" id="addKeypairCard">
|
||
<div class="form-header">
|
||
<h3>Add New Keypair</h3>
|
||
<button id="cancelAddKeypairBtn" class="btn-close" title="Close">×</button>
|
||
</div>
|
||
<div class="form-content">
|
||
<div class="form-group">
|
||
<label for="keyTypeSelect">Key Type</label>
|
||
<select id="keyTypeSelect" class="select">
|
||
<option value="Secp256k1">Secp256k1</option>
|
||
<option value="Ed25519">Ed25519</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="keyNameInput">Keypair Name</label>
|
||
<input type="text" id="keyNameInput" placeholder="Enter a name for your keypair">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button id="addKeypairBtn" class="btn btn-primary">Create Keypair</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Keypairs List -->
|
||
<div class="card">
|
||
<h3>Keypairs</h3>
|
||
<div id="keypairsList" class="keypairs-list">
|
||
<div class="loading">Loading keypairs...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Selected Keypair Info - Hidden from user -->
|
||
<div class="card hidden completely-hidden" id="selectedKeypairCard">
|
||
<h3>Selected Keypair</h3>
|
||
<div class="keypair-info">
|
||
<div class="info-row">
|
||
<label>Name:</label>
|
||
<span id="selectedName">-</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<label>Type:</label>
|
||
<span id="selectedType">-</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<label>Public Key:</label>
|
||
<div class="public-key-container">
|
||
<code id="selectedPublicKey">-</code>
|
||
<button id="copyPublicKeyBtn" class="btn-copy" title="Copy to clipboard">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sign Message -->
|
||
<div class="card">
|
||
<h3>Sign Message</h3>
|
||
<div class="form-group">
|
||
<label for="messageInput">Message (hex or text)</label>
|
||
<textarea id="messageInput" placeholder="Enter message to sign" rows="3"></textarea>
|
||
</div>
|
||
<button id="signBtn" class="btn btn-primary" disabled>Sign Message</button>
|
||
<div id="signatureResult" class="signature-result hidden">
|
||
<label>Signature:</label>
|
||
<div class="signature-container">
|
||
<code id="signatureValue"></code>
|
||
<button id="copySignatureBtn" class="btn-copy" title="Copy to clipboard">📋</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div class="loading-overlay hidden" id="loadingOverlay">
|
||
<div class="spinner"></div>
|
||
<p>Processing...</p>
|
||
</div>
|
||
|
||
<!-- Toast Notifications -->
|
||
<div id="toast" class="toast hidden"></div>
|
||
</div>
|
||
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html> |