189 lines
7.1 KiB
HTML
189 lines
7.1 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="header-actions">
|
||
<button id="themeToggle" class="btn-icon-only" title="Switch to dark mode">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||
</svg>
|
||
</button>
|
||
</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">
|
||
<!-- Status Section -->
|
||
<div class="vault-status" id="vaultStatus">
|
||
<div class="status-indicator" id="statusIndicator">
|
||
<div class="status-content">
|
||
<div class="status-dot"></div>
|
||
<span id="statusText">Initializing...</span>
|
||
</div>
|
||
<button id="lockBtn" class="btn btn-ghost btn-small hidden">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<circle cx="12" cy="16" r="1"></circle>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
Lock
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vault-header">
|
||
<h2>Your Keypairs</h2>
|
||
<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>
|
||
|
||
|
||
|
||
<!-- Crypto Operations -->
|
||
<div class="card">
|
||
<h3>Crypto Operations</h3>
|
||
|
||
<!-- Operation Tabs -->
|
||
<div class="operation-tabs">
|
||
<button class="tab-btn active" data-tab="encrypt">Encrypt</button>
|
||
<button class="tab-btn" data-tab="decrypt">Decrypt</button>
|
||
<button class="tab-btn" data-tab="sign">Sign</button>
|
||
<button class="tab-btn" data-tab="verify">Verify</button>
|
||
</div>
|
||
|
||
<!-- Encrypt Tab -->
|
||
<div class="tab-content active" id="encrypt-tab">
|
||
<div class="form-group">
|
||
<label for="encryptMessageInput">Message to Encrypt</label>
|
||
<textarea id="encryptMessageInput" placeholder="Enter message to encrypt..." rows="3"></textarea>
|
||
</div>
|
||
<button id="encryptBtn" class="btn btn-primary" disabled>Encrypt Message</button>
|
||
|
||
<div class="encrypt-result hidden" id="encryptResult">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Decrypt Tab -->
|
||
<div class="tab-content" id="decrypt-tab">
|
||
<div class="form-group">
|
||
<label for="encryptedMessageInput">Encrypted Message</label>
|
||
<textarea id="encryptedMessageInput" placeholder="Enter encrypted message..." rows="3"></textarea>
|
||
</div>
|
||
<button id="decryptBtn" class="btn btn-primary" disabled>Decrypt Message</button>
|
||
|
||
<div class="decrypt-result hidden" id="decryptResult">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sign Tab -->
|
||
<div class="tab-content" id="sign-tab">
|
||
<div class="form-group">
|
||
<label for="messageInput">Message to Sign</label>
|
||
<textarea id="messageInput" placeholder="Enter your message here..." rows="3"></textarea>
|
||
</div>
|
||
<button id="signBtn" class="btn btn-primary" disabled>Sign Message</button>
|
||
|
||
<div class="signature-result hidden" id="signatureResult">
|
||
<label>Signature:</label>
|
||
<div class="signature-container">
|
||
<code id="signatureValue">-</code>
|
||
<button id="copySignatureBtn" class="btn-copy" title="Copy to clipboard">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Verify Tab -->
|
||
<div class="tab-content" id="verify-tab">
|
||
<div class="form-group">
|
||
<label for="verifyMessageInput">Original Message</label>
|
||
<textarea id="verifyMessageInput" placeholder="Enter the original message..." rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="signatureToVerifyInput">Signature</label>
|
||
<input type="text" id="signatureToVerifyInput" placeholder="Enter signature to verify...">
|
||
</div>
|
||
<button id="verifyBtn" class="btn btn-primary" disabled>Verify Signature</button>
|
||
|
||
<div class="verify-result hidden" id="verifyResult">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Enhanced JavaScript modules -->
|
||
<script src="js/errorHandler.js"></script>
|
||
<script src="popup.js"></script>
|
||
</body>
|
||
</html> |