sal-modular/crypto_vault_extension/popup.html
2025-05-28 11:39:25 +03:00

189 lines
7.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>