Spaces:

broadfield-dev
/

KeyLock-JS

Running

App Files Files Community

broadfield-dev commited on Jun 14

Commit

055da99

verified ·

1 Parent(s): 8af987e

Update index.html

Browse files

Files changed (1) hide show

index.html +265 -19

index.html CHANGED Viewed

@@ -1,19 +1,265 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>