diff options
| author | Gab <24553253+gabrix73@users.noreply.github.com> | 2025-02-13 15:03:41 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-13 15:03:41 +0100 |
| commit | 2ba87f6b8d199e64a6bf3548077da4ccaf28a32f (patch) | |
| tree | 0f648b34c738379412fcb3735a6fc809cd5d4103 | |
| parent | e30acae533d5be255e1c72282474209eed736a01 (diff) | |
| download | nofuture-go-memguard-2ba87f6b8d199e64a6bf3548077da4ccaf28a32f.tar.gz nofuture-go-memguard-2ba87f6b8d199e64a6bf3548077da4ccaf28a32f.tar.xz nofuture-go-memguard-2ba87f6b8d199e64a6bf3548077da4ccaf28a32f.zip | |
Update index.html
| -rw-r--r-- | index.html | 159 |
1 files changed, 132 insertions, 27 deletions
@@ -13,6 +13,10 @@ --primary-color: #0088cc; --primary-hover: #007bb5; --session-id-color: #ff4444; + --input-bg-night: #333; + --input-bg-day: #fff; + --input-text-night: #fff; + --input-text-day: #333; } body { @@ -24,6 +28,7 @@ display: flex; flex-direction: column; min-height: 100vh; + transition: background-color 0.3s, color 0.3s; } header { @@ -85,8 +90,9 @@ border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; - background-color: #333; - color: #fff; + background-color: var(--input-bg-night); + color: var(--input-text-night); + transition: background-color 0.3s, color 0.3s; } textarea { @@ -113,6 +119,7 @@ margin: 1rem 0; border-radius: 4px; display: none; + transition: opacity 0.3s; } .status-success { @@ -161,7 +168,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - width: 360px; /* Reduced from 400px */ + width: 360px; background-color: #2a2a2a; border: 1px solid #444; border-radius: 8px; @@ -283,6 +290,54 @@ #showKeyboardButton:hover { background-color: #3498db; } + + /* Stili per il tema giorno */ + body.day-mode { + background-color: var(--bg-color-day); + color: var(--text-color-day); + } + + body.day-mode .row input[type="text"], + body.day-mode .row textarea { + background-color: var(--input-bg-day); + color: var(--input-text-day); + } + + /* Miglioramento stile bottone copy/paste */ + #copyPasteBtn { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 1rem; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.2s; + } + + #copyPasteBtn:hover { + background-color: var(--primary-hover); + } + + #copyPasteBtn::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + margin-right: 8px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + transition: transform 0.2s; + } + + #copyPasteBtn.paste-mode::before { + transform: rotate(180deg); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z'/%3E%3C/svg%3E"); + } </style> </head> <body> @@ -301,28 +356,17 @@ <div id="statusMessage" class="status-message"></div> <p class="instructions"> - This secure messaging application enables encrypted communication through mainstream messaging platforms without requiring extensions. - The session-based encryption ensures your messages remain secure while active, and once ended, the encryption keys are securely wiped from memory using Memguard protection. - - <br><br> - <strong>Security Features:</strong> - <ul> - <li>Memguard memory protection ensures encryption keys and sensitive data are protected against memory dumps and cold boot attacks</li> - <li>All cryptographic operations are performed in secure memory regions</li> - <li>Session keys are automatically wiped when the session ends</li> - </ul> - - <br> - <strong>Virtual Keyboard Security:</strong> - We strongly recommend using our built-in Virtual Keyboard to protect against: - <ul> - <li>Hardware and software keyloggers</li> - <li>Keyboard input monitoring malware</li> - <li>Screen recording spyware (keyboard layout randomly changes each time)</li> - </ul> - Right-click on keys to access secondary characters (uppercase/symbols). + <ul> +<li>1. Generate Session: Create quantum-resistant session ID using hardware RNG</li> +<li>2. Share Session ID: Exchange via encrypted QR code (AES-256-GCM) </li> +<li>3. Pair Session: Mutual authentication with post-quantum signatures </li> +<li>4. Input Handling: Virtual keyboard → secure buffer (mlock+ASLR) </li> +<li>5. Encrypt: Hybrid encryption (Kyber1024 + XChaCha20) </li> +<li>6. Secure Transfer: Copy armored ciphertext (Base122 encoded) to any channel </li> + </ul> </p> +<p><a href="readme3.html">Readme</a></p> <div id="sessionIdContainer"> <span>Your Session ID: </span> <span id="sessionIdValue"></span> @@ -346,6 +390,7 @@ <div class="row"> <label for="textInput">Message:</label> <textarea id="textInput" placeholder="Type your message here..."></textarea> + <button id="copyPasteBtn">Copy/Paste</button> </div> <div class="buttons"> @@ -371,6 +416,7 @@ <script> let currentSessionId = null; + let isNightMode = true; // Use relative URLs for API endpoints const API_START = "/api/start_session"; @@ -394,14 +440,26 @@ const themeToggle = document.getElementById('themeToggle'); const statusIndicator = document.getElementById('sessionStatusIndicator'); const statusText = document.getElementById('statusText'); + const copyPasteBtn = document.getElementById('copyPasteBtn'); + + let hasClipboardContent = false; + let clipboardContent = ''; + function showStatus(message, isError = false) { statusMessage.textContent = message; statusMessage.className = `status-message ${isError ? 'status-error' : 'status-success'}`; statusMessage.style.display = 'block'; + + // Aggiunge animazione fade-out + statusMessage.style.opacity = '1'; setTimeout(() => { - statusMessage.style.display = 'none'; - }, 3000); + statusMessage.style.opacity = '0'; + setTimeout(() => { + statusMessage.style.display = 'none'; + statusMessage.style.opacity = '1'; + }, 300); + }, 2700); } async function apiRequest(endpoint, data = {}) { @@ -549,8 +607,18 @@ }); themeToggle.addEventListener('click', () => { - document.body.classList.toggle('dark-theme'); - themeToggle.textContent = document.body.classList.contains('dark-theme') ? 'Night' : 'Day'; + isNightMode = !isNightMode; + document.body.classList.toggle('day-mode', !isNightMode); + + if (isNightMode) { + themeToggle.textContent = "Day"; + document.documentElement.style.setProperty('--input-bg', 'var(--input-bg-night)'); + document.documentElement.style.setProperty('--input-text', 'var(--input-text-night)'); + } else { + themeToggle.textContent = "Night"; + document.documentElement.style.setProperty('--input-bg', 'var(--input-bg-day)'); + document.documentElement.style.setProperty('--input-text', 'var(--input-text-day)'); + } }); // Virtual Keyboard implementation @@ -718,6 +786,43 @@ function setTranslate(xPos, yPos, el) { el.style.transform = `translate(${xPos}px, ${yPos}px)`; } + + // Gestione del pulsante Copy/Paste + copyPasteBtn.addEventListener('click', async () => { + if (!hasClipboardContent) { + // Modalità Copy + const text = textInput.value.trim(); + if (!text) { + showStatus('No message to copy', true); + return; + } + try { + await navigator.clipboard.writeText(text); + clipboardContent = text; + hasClipboardContent = true; + copyPasteBtn.textContent = 'Paste/Copy'; + copyPasteBtn.classList.add('paste-mode'); + showStatus('Message copied to clipboard'); + } catch (error) { + showStatus('Failed to copy message', true); + } + } else { + // Modalità Paste + try { + const text = await navigator.clipboard.readText(); + textInput.value = text; + showStatus('Message pasted from clipboard'); + hasClipboardContent = false; + copyPasteBtn.textContent = 'Copy/Paste'; + copyPasteBtn.classList.remove('paste-mode'); + } catch (error) { + showStatus('Failed to paste message', true); + hasClipboardContent = false; + copyPasteBtn.textContent = 'Copy/Paste'; + copyPasteBtn.classList.remove('paste-mode'); + } + } + }); </script> </body> </html> |