sal-modular/crypto_vault_extension/popup.html
2025-05-27 17:15:53 +03:00

138 lines
4.6 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="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>