Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KeyLock.js - JavaScript Steganography & Crypto Plugin</title> | |
| <style> | |
| :root { | |
| --bg-color: #0d1117; | |
| --border-color: #30363d; | |
| --text-color: #c9d1d9; | |
| --accent-color: #58a6ff; | |
| --error-color: #f85149; | |
| --success-color: #3fb950; | |
| --card-bg: #161b22; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 2rem; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| main { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| max-width: 1200px; | |
| width: 100%; | |
| } | |
| .card { | |
| background-color: var(--card-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| } | |
| h1, h2 { | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 0.5rem; | |
| margin-top: 0; | |
| } | |
| textarea, input[type="text"] { | |
| width: 100%; | |
| box-sizing: border-box; | |
| background-color: var(--bg-color); | |
| border: 1px solid var(--border-color); | |
| color: var(--text-color); | |
| padding: 8px; | |
| border-radius: 6px; | |
| font-family: monospace; | |
| } | |
| textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| button { | |
| background-color: var(--accent-color); | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: background-color 0.2s; | |
| } | |
| button:hover { | |
| background-color: #79b8ff; | |
| } | |
| .key-pair { display: flex; gap: 1rem; } | |
| .key-pair > div { flex: 1; } | |
| #image-upload-box { | |
| border: 2px dashed var(--border-color); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| text-align: center; | |
| cursor: pointer; | |
| min-height: 150px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: border-color 0.2s; | |
| } | |
| #image-upload-box:hover { border-color: var(--accent-color); } | |
| #generated-image-preview { | |
| max-width: 100%; | |
| border-radius: 6px; | |
| margin-top: 1rem; | |
| border: 1px solid var(--border-color); | |
| } | |
| #status-display { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 6px; | |
| min-height: 50px; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .status-success { color: var(--success-color); } | |
| .status-error { color: var(--error-color); } | |
| .hidden { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <div class="card"> | |
| <h2>Encoder</h2> | |
| <p>Generate a new RSA key pair, then use the public key to encrypt a payload into an image.</p> | |
| <button id="generate-keys-btn">1. Generate New Key Pair</button> | |
| <div class="key-pair"> | |
| <div> | |
| <label for="public-key">Public Key (for Encryption)</label> | |
| <textarea id="public-key" rows="7"></textarea> | |
| </div> | |
| <div> | |
| <label for="private-key">Private Key (for Decryption)</label> | |
| <textarea id="private-key" rows="7"></textarea> | |
| </div> | |
| </div> | |
| <hr style="border-color: var(--border-color); margin: 1.5rem 0;"> | |
| <label for="payload-input">Data to Encrypt (Key=Value format)</label> | |
| <textarea id="payload-input" placeholder="USER=demo-user | |
| PASS:super_secret_password | |
| "API_KEY" = "..."">USER = "TestUser" | |
| PASS: TestPass | |
| "GROQ_API_KEY" = "ALKSDFJASHFKSFH"</textarea> | |
| <button id="generate-image-btn" style="margin-top: 1rem;">2. Generate Encrypted Image</button> | |
| <img id="generated-image-preview" class="hidden" alt="Generated Encrypted Image"> | |
| <a id="download-link" class="hidden" style="display: block; margin-top: 0.5rem;">Download PNG</a> | |
| </div> | |
| <div class="card"> | |
| <h2>Decoder</h2> | |
| <p>Upload an image generated by the encoder and use the corresponding private key to decode the hidden payload.</p> | |
| <label for="private-key-input">Private Key for Decryption</label> | |
| <textarea id="private-key-input" rows="7" placeholder="Paste the private key here..."></textarea> | |
| <input type="file" id="image-upload-input" accept="image/png" class="hidden"> | |
| <div id="image-upload-box" onclick="document.getElementById('image-upload-input').click();"> | |
| Click or Drop KeyLock PNG here | |
| </div> | |
| <div id="status-display">Awaiting KeyLock image...</div> | |
| </div> | |
| </main> | |
| <script src="keylock.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const keylock = new KeyLock(); | |
| // --- UI Elements --- | |
| const generateKeysBtn = document.getElementById('generate-keys-btn'); | |
| const publicKeyText = document.getElementById('public-key'); | |
| const privateKeyText = document.getElementById('private-key'); | |
| const privateKeyInput = document.getElementById('private-key-input'); | |
| const payloadInput = document.getElementById('payload-input'); | |
| const generateImageBtn = document.getElementById('generate-image-btn'); | |
| const imagePreview = document.getElementById('generated-image-preview'); | |
| const downloadLink = document.getElementById('download-link'); | |
| const imageUploadInput = document.getElementById('image-upload-input'); | |
| const statusDisplay = document.getElementById('status-display'); | |
| // --- Event Listeners --- | |
| // Key Generation | |
| generateKeysBtn.addEventListener('click', async () => { | |
| try { | |
| const { privateKeyPem, publicKeyPem } = await keylock.generatePemKeys(); | |
| publicKeyText.value = publicKeyPem; | |
| privateKeyText.value = privateKeyPem; | |
| privateKeyInput.value = privateKeyPem; // Auto-fill for convenience | |
| } catch (e) { | |
| alert(`Key generation failed: ${e.message}`); | |
| } | |
| }); | |
| // Image Generation (Encoding) | |
| generateImageBtn.addEventListener('click', async () => { | |
| const payload = payloadInput.value; | |
| const pubKey = publicKeyText.value; | |
| if (!pubKey || !payload) { | |
| alert('Please generate a key pair and provide a payload first.'); | |
| return; | |
| } | |
| try { | |
| generateImageBtn.textContent = 'Generating...'; | |
| generateImageBtn.disabled = true; | |
| const imageDataUrl = await keylock.generateEncryptedImage(payload, pubKey); | |
| imagePreview.src = imageDataUrl; | |
| imagePreview.classList.remove('hidden'); | |
| downloadLink.href = imageDataUrl; | |
| downloadLink.download = `keylock_${Date.now()}.png`; | |
| downloadLink.classList.remove('hidden'); | |
| } catch (e) { | |
| alert(`Image generation failed: ${e.message}`); | |
| } finally { | |
| generateImageBtn.textContent = '2. Generate Encrypted Image'; | |
| generateImageBtn.disabled = false; | |
| } | |
| }); | |
| // Image Upload (Decoding) | |
| imageUploadInput.addEventListener('change', async (event) => { | |
| const file = event.target.files[0]; | |
| const privKey = privateKeyInput.value; | |
| if (!file) return; | |
| if (!privKey) { | |
| statusDisplay.textContent = 'Error: Please provide the private key for decryption.'; | |
| statusDisplay.className = 'status-display status-error'; | |
| return; | |
| } | |
| statusDisplay.textContent = 'Decoding...'; | |
| statusDisplay.className = 'status-display'; | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| const img = new Image(); | |
| img.onload = async () => { | |
| const result = await keylock.decodePayload(img, privKey); | |
| if (result.status === 'Success') { | |
| let output = '✅ Success! Decoded Payload:\n\n'; | |
| for(const [key, value] of Object.entries(result.payload)) { | |
| const valueDisplay = key.toLowerCase().includes('pass') ? '•'.repeat(String(value).length) : value; | |
| output += `${key}: ${valueDisplay}\n`; | |
| } | |
| statusDisplay.textContent = output; | |
| statusDisplay.className = 'status-display status-success'; | |
| } else { | |
| statusDisplay.textContent = `❌ Error: ${result.message}`; | |
| statusDisplay.className = 'status-display status-error'; | |
| } | |
| }; | |
| img.onerror = () => { | |
| statusDisplay.textContent = 'Error: Could not load the selected file as an image.'; | |
| statusDisplay.className = 'status-display status-error'; | |
| }; | |
| img.src = e.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| // Auto-generate keys on load for quick demo | |
| generateKeysBtn.click(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |