From d9ee6031852528df0b4b708e996dada22d2c93d5 Mon Sep 17 00:00:00 2001 From: Gab <24553253+gabrix73@users.noreply.github.com> Date: Fri, 13 Jun 2025 13:50:29 +0200 Subject: Update index.html --- index.html | 530 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 498 insertions(+), 32 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index a54d15b..b228aaf 100644 --- a/index.html +++ b/index.html @@ -256,23 +256,34 @@ #keyboardTooltip { position: absolute; - width: 280px; + width: 320px; background-color: #2a2a2a; color: #fff; border: 2px solid #444; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - padding: 10px; + padding: 12px; z-index: 1000; display: none; - font-size: 14px; - line-height: 1.5; + font-size: 13px; + line-height: 1.4; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; } + #keyboardTooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #444 transparent transparent transparent; + } + #showKeyboardButton { padding: 12px 24px; font-size: 16px; @@ -338,6 +349,192 @@ 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"); } + + /* Mainstream Chat Links Styles */ + .mainstream-section { + margin: 2rem 0; + padding: 1.5rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + .mainstream-title { + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 1rem; + text-align: center; + color: #ffffff; + background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .chat-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 1rem; + margin-top: 1rem; + } + + .chat-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1rem 0.5rem; + background: rgba(255, 255, 255, 0.08); + border-radius: 10px; + text-decoration: none; + color: #ffffff; + transition: all 0.3s ease; + border: 1px solid rgba(255, 255, 255, 0.15); + position: relative; + overflow: hidden; + } + + .chat-link::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: all 0.4s ease; + } + + .chat-link:hover::before { + left: 100%; + } + + .chat-link:hover { + transform: translateY(-3px); + background: rgba(255, 255, 255, 0.15); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + } + + .chat-icon { + width: 32px; + height: 32px; + margin-bottom: 0.5rem; + transition: all 0.3s ease; + } + + .chat-link:hover .chat-icon { + transform: scale(1.1); + } + + .chat-name { + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 0.25rem; + text-align: center; + } + + .chat-description { + font-size: 0.7rem; + opacity: 0.7; + text-align: center; + } + + /* Colori brandizzati per gli hover */ + .messenger:hover { background: rgba(0, 132, 255, 0.15); } + .whatsapp:hover { background: rgba(37, 211, 102, 0.15); } + .instagram:hover { background: rgba(225, 48, 108, 0.15); } + .twitter:hover { background: rgba(29, 161, 242, 0.15); } + .teams:hover { background: rgba(106, 90, 205, 0.15); } + .skype:hover { background: rgba(0, 175, 240, 0.15); } + .google-chat:hover { background: rgba(52, 168, 83, 0.15); } + .discord:hover { background: rgba(114, 137, 218, 0.15); } + + /* Readme and Challenge button styles */ + .nav-buttons { + text-align: center; + margin: 1.5rem 0; + } + + .nav-btn { + position: relative; + display: inline-block; + padding: 0.6rem 1.2rem; + background-color: rgba(255, 255, 255, 0.1); + color: #ffffff; + text-decoration: none; + border-radius: 8px; + font-size: 0.9rem; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + margin: 0 0.5rem; + } + + .nav-btn:hover { + background-color: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + } + + .challenge-btn { + background-color: rgba(255, 100, 100, 0.2); + border-color: rgba(255, 100, 100, 0.4); + } + + .challenge-btn:hover { + background-color: rgba(255, 100, 100, 0.3); + } + + /* Tooltip styles */ + .nav-tooltip { + position: absolute; + width: 240px; + background-color: #2a2a2a; + color: #fff; + border: 2px solid #444; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + padding: 10px; + z-index: 1000; + display: none; + font-size: 12px; + line-height: 1.4; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + margin-bottom: 8px; + } + + .nav-tooltip::after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #444 transparent transparent transparent; + } + + #challengeTooltip { + width: 260px; + } + + @media (max-width: 768px) { + .chat-grid { + grid-template-columns: repeat(4, 1fr); + } + + .nav-btn { + display: block; + margin: 0.5rem 0; + } + } + + @media (max-width: 480px) { + .chat-grid { + grid-template-columns: repeat(3, 1fr); + } + } @@ -349,24 +546,119 @@
-

Nofuture Buddy Web Interface - Memguard GO Powered

+

Nofuture Web Interface - Memguard Post Quantum Powered

-

-

-

- -

Readme

+ +
+

๐Ÿ”— Quick Access to Mainstream Chats

+
+ + + + + +
M3ss4nger
+
Fac3b00k
+ + + + + + + +
Wh4tsApp
+
Web
+ + + + + + + +
1nst4gr4m
+
Direct
+ + + + + + + + + + +
T34ms
+
M1cr0s0ft
+ + + + + + + +
Skyp3
+
Video
+ + + + + + + +
G00gl3 Ch4t
+
Workspace
+ + + + + + + +
D1sc0rd
+
Voice & Text
+ +
+
+ +
+

How to use NoFuture:

+
    +
  1. Start Session - Both users generate secure key pairs on our server protected with memguard. Each user gets a unique Session ID visible in the placeholder that will be used for pairing
    2. +
  2. Pair Sessions - Exchange Session IDs with your contact (even through insecure mainstream channels). Once exchanged, the Session IDs automatically pair together enabling secure communication
    3. +
  3. Encrypt & Send - After successful pairing, you can encrypt/decrypt messages between the two users. Type your message, encrypt it, then send the encrypted text through any mainstream chat platform
    4. +
  4. End Session - Terminates the secure session by permanently destroying all cryptographic keys, wiping Session IDs, and clearing all encrypted/decrypted content from memory. This makes any future decryption impossible, ensuring your conversation remains truly ephemeral
    5. +
+
+ + +
+
+ ๐Ÿ“– Readme + +
+ +
+ ๐Ÿ›ก๏ธ Security Challenge + +
+
+
Your Session ID: @@ -379,7 +671,7 @@
- +
@@ -401,7 +693,8 @@
-

Our Virtual Keyboard helps avoid hardware keyloggers. Right-click for secondary characters.

+ ๐Ÿ›ก๏ธ Virtual Keyboard Protection
+ This virtual keyboard helps protect against keyloggers and malware. Each time you open it, the keys are randomly arranged to prevent pattern recognition by spyware. Use it to safely type sensitive messages without worrying about keyboard monitoring software.
@@ -418,6 +711,21 @@ let currentSessionId = null; let isNightMode = true; + // Check clipboard API support + const clipboardSupported = !!(navigator.clipboard && navigator.clipboard.writeText && navigator.clipboard.readText); + const isSecureContext = window.isSecureContext || location.protocol === 'https:' || location.hostname === 'localhost'; + + console.log('Clipboard API supported:', clipboardSupported); + console.log('Secure context:', isSecureContext); + + if (!clipboardSupported) { + console.warn('Clipboard API not supported - using fallback methods'); + } + + if (!isSecureContext) { + console.warn('Non-secure context - clipboard access may be limited'); + } + // Use relative URLs for API endpoints const API_START = "/api/start_session"; const API_END = "/api/end_session"; @@ -425,7 +733,7 @@ const API_BUDDY_ENCRYPT = "/api/buddy_encrypt"; const API_BUDDY_DECRYPT = "/api/buddy_decrypt"; - // DOM Elements + // DOM Elements - with null checks const sessionIdContainer = document.getElementById('sessionIdContainer'); const sessionIdValue = document.getElementById('sessionIdValue'); const copySessionIdBtn = document.getElementById('copySessionIdBtn'); @@ -442,10 +750,18 @@ const statusText = document.getElementById('statusText'); const copyPasteBtn = document.getElementById('copyPasteBtn'); + // Check if all required elements exist + if (!sessionIdContainer || !sessionIdValue || !copySessionIdBtn || !startSessionBtn || + !endSessionBtn || !buddySessionIdInput || !pairSessionsBtn || !textInput || + !buddyEncryptBtn || !buddyDecryptBtn || !statusMessage || !themeToggle || + !statusIndicator || !statusText || !copyPasteBtn) { + console.error('Some DOM elements are missing!'); + showStatus('Interface loading error - please refresh page', true); + } + let hasClipboardContent = false; let clipboardContent = ''; - function showStatus(message, isError = false) { statusMessage.textContent = message; statusMessage.className = `status-message ${isError ? 'status-error' : 'status-success'}`; @@ -526,11 +842,35 @@ } }); - copySessionIdBtn.addEventListener('click', () => { - if (!currentSessionId) return; - navigator.clipboard.writeText(currentSessionId) - .then(() => showStatus('Session ID copied to clipboard')) - .catch(error => showStatus('Failed to copy session ID', true)); + copySessionIdBtn.addEventListener('click', async () => { + if (!currentSessionId) { + showStatus('No session ID to copy', true); + return; + } + + try { + // Try modern clipboard API first + if (navigator.clipboard && navigator.clipboard.writeText) { + await navigator.clipboard.writeText(currentSessionId); + showStatus('Session ID copied to clipboard'); + } else { + // Fallback for older browsers + fallbackCopyToClipboard(currentSessionId); + showStatus('Session ID copied to clipboard'); + } + } catch (error) { + console.error('Copy failed:', error); + // Try fallback method + try { + fallbackCopyToClipboard(currentSessionId); + showStatus('Session ID copied to clipboard'); + } catch (fallbackError) { + console.error('Fallback copy failed:', fallbackError); + showStatus('Failed to copy session ID - please copy manually', true); + // Show session ID for manual copy + prompt('Copy this Session ID manually:', currentSessionId); + } + } }); pairSessionsBtn.addEventListener('click', async () => { @@ -734,6 +1074,46 @@ createKeyboard(); // Create new random layout each time }); + // Keyboard tooltip functionality + const showKeyboardButton = document.getElementById('showKeyboardButton'); + const keyboardTooltip = document.getElementById('keyboardTooltip'); + + showKeyboardButton.addEventListener('mouseenter', () => { + keyboardTooltip.style.display = 'block'; + }); + + showKeyboardButton.addEventListener('mouseleave', () => { + keyboardTooltip.style.display = 'none'; + }); + + // Readme tooltip functionality + const readmeBtn = document.querySelector('a[href="leggimi.html"]'); + const readmeTooltip = document.getElementById('readmeTooltip'); + + if (readmeBtn && readmeTooltip) { + readmeBtn.addEventListener('mouseenter', () => { + readmeTooltip.style.display = 'block'; + }); + + readmeBtn.addEventListener('mouseleave', () => { + readmeTooltip.style.display = 'none'; + }); + } + + // Challenge tooltip functionality + const challengeBtn = document.querySelector('a[href="challenge.html"]'); + const challengeTooltip = document.getElementById('challengeTooltip'); + + if (challengeBtn && challengeTooltip) { + challengeBtn.addEventListener('mouseenter', () => { + challengeTooltip.style.display = 'block'; + }); + + challengeBtn.addEventListener('mouseleave', () => { + challengeTooltip.style.display = 'none'; + }); + } + document.getElementById('closeKeyboardButton').addEventListener('click', () => { document.getElementById('keyboardContainer').style.display = 'none'; }); @@ -797,32 +1177,118 @@ return; } try { - await navigator.clipboard.writeText(text); + // Try modern clipboard API first + if (navigator.clipboard && navigator.clipboard.writeText) { + await navigator.clipboard.writeText(text); + } else { + // Fallback for older browsers + fallbackCopyToClipboard(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); + console.error('Copy failed:', error); + try { + fallbackCopyToClipboard(text); + clipboardContent = text; + hasClipboardContent = true; + copyPasteBtn.textContent = 'Paste/Copy'; + copyPasteBtn.classList.add('paste-mode'); + showStatus('Message copied to clipboard'); + } catch (fallbackError) { + console.error('Fallback copy failed:', fallbackError); + showStatus('Failed to copy message - please copy manually', true); + // Show text for manual copy + prompt('Copy this message manually:', text); + } } } else { // Modalitร  Paste try { - const text = await navigator.clipboard.readText(); - textInput.value = text; - showStatus('Message pasted from clipboard'); + let text = ''; + + // Try modern clipboard API first + if (navigator.clipboard && navigator.clipboard.readText) { + text = await navigator.clipboard.readText(); + } else { + // Fallback - prompt user to paste + text = prompt('Please paste your message here:') || ''; + } + + if (text) { + textInput.value = text; + showStatus('Message pasted from clipboard'); + } else { + showStatus('No text to paste', true); + } + hasClipboardContent = false; copyPasteBtn.textContent = 'Copy/Paste'; copyPasteBtn.classList.remove('paste-mode'); } catch (error) { - showStatus('Failed to paste message', true); + console.error('Paste failed:', error); + // Fallback - prompt user + const text = prompt('Clipboard access failed. Please paste your message here:') || ''; + if (text) { + textInput.value = text; + showStatus('Message pasted manually'); + } else { + showStatus('Failed to paste message', true); + } hasClipboardContent = false; copyPasteBtn.textContent = 'Copy/Paste'; copyPasteBtn.classList.remove('paste-mode'); } } }); + + // Fallback copy function for older browsers + function fallbackCopyToClipboard(text) { + const textArea = document.createElement('textarea'); + textArea.value = text; + textArea.style.position = 'fixed'; + textArea.style.left = '-999999px'; + textArea.style.top = '-999999px'; + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + const successful = document.execCommand('copy'); + if (!successful) { + throw new Error('Copy command failed'); + } + } finally { + document.body.removeChild(textArea); + } + } + + + + + -- cgit v1.2.3