| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Beru.BA - Secure Encrypted Chat</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://unpkg.com/@chatscope/chat-ui-kit-styles/dist/default/styles.min.css" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| beruGreen: { |
| 100: '#d1fae5', |
| 200: '#a7f3d0', |
| 300: '#6ee7b7', |
| 400: '#10b981', |
| 500: '#059669', |
| 600: '#047857', |
| 700: '#065f46', |
| }, |
| beruDark: { |
| 100: '#1a202c', |
| 200: '#171923', |
| 300: '#12171f', |
| 400: '#0d1219', |
| 500: '#090c11', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/@chatscope/chat-ui-kit-core/dist/chat-ui-kit-core.umd.js"></script> |
| <style> |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: #090c11; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: #065f46; |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: #047857; |
| } |
| |
| .custom-backdrop { |
| background: radial-gradient( |
| circle at center, |
| rgba(15, 25, 40, 0.9) 0%, |
| rgba(9, 15, 27, 0.95) 100% |
| ); |
| } |
| |
| .status-indicator { |
| position: absolute; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| bottom: 0; |
| right: 0; |
| border: 2px solid #090c11; |
| } |
| |
| .presence-online { |
| background-color: #10b981; |
| } |
| |
| .presence-offline { |
| background-color: #6b7280; |
| } |
| |
| .presence-away { |
| background-color: #f59e0b; |
| } |
| |
| .presence-dnd { |
| background-color: #ef4444; |
| } |
| |
| .chat-bubble-sent { |
| background-color: #065f46; |
| border-top-right-radius: 0; |
| border-bottom-left-radius: 12px; |
| } |
| |
| .chat-bubble-received { |
| background-color: #12171f; |
| border-top-left-radius: 0; |
| border-bottom-right-radius: 12px; |
| } |
| |
| .encrypted-indicator { |
| position: absolute; |
| bottom: 8px; |
| right: 10px; |
| font-size: 10px; |
| color: #a7f3d0; |
| opacity: 0.7; |
| } |
| |
| .gradient-bottom { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 50px; |
| background: linear-gradient(transparent 0%, rgba(9,12,17,0.8) 40%, #090c11 100%); |
| } |
| |
| .connection-status::after { |
| content: ''; |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| margin-left: 8px; |
| } |
| |
| .status-connected::after { |
| background-color: #10b981; |
| } |
| |
| .status-encrypting::after { |
| background-color: #f59e0b; |
| animation: pulse 1.5s infinite; |
| } |
| |
| .status-disconnected::after { |
| background-color: #ef4444; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| @keyframes connectionPulse { |
| 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } |
| } |
| </style> |
| </head> |
| <body class="bg-beruDark-500 text-beruGreen-400 min-h-screen font-mono overflow-hidden"> |
| |
| <div class="flex flex-col h-screen max-w-7xl mx-auto custom-backdrop"> |
| |
| <header class="bg-beruGreen-700/10 backdrop-blur border-b border-beruDark-300"> |
| <div class="flex justify-between items-center px-4 py-3 sm:px-6"> |
| <div class="flex items-center"> |
| <div class="bg-beruGreen-500 text-beruDark-500 h-10 w-10 rounded-full flex items-center justify-center mr-3 relative"> |
| <i class="fas fa-lock text-lg"></i> |
| <div class="status-indicator presence-online"></div> |
| </div> |
| <div> |
| <h1 class="text-xl sm:text-2xl font-bold tracking-wider">BERU<span class="text-beruGreen-300">.BA</span></h1> |
| <div class="flex items-center"> |
| <div id="connectionStatus" class="connection-status status-connected text-xs text-beruGreen-500 flex items-center"> |
| <span>Secure Connection: Established</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex space-x-3"> |
| <button class="bg-beruDark-400 rounded-full h-10 w-10 flex items-center justify-center hover:bg-beruGreen-500 hover:text-beruDark-500 transition"> |
| <i class="fas fa-sliders-h"></i> |
| </button> |
| <button class="flex items-center justify-center bg-beruGreen-500 text-beruDark-500 py-2 px-4 rounded-full hover:bg-beruGreen-400 transition text-sm font-medium"> |
| <i class="fas fa-sign-out-alt mr-1 transform rotate-180"></i> |
| Logout |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div class="w-full sm:w-72 lg:w-80 bg-beruDark-400/30 flex flex-col border-r border-beruDark-300"> |
| |
| <div class="p-3"> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> |
| <i class="fas fa-search text-beruGreen-600"></i> |
| </div> |
| <input |
| type="text" |
| placeholder="Search contacts..." |
| class="w-full bg-beruDark-300 border border-beruDark-200 rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-beruGreen-500 placeholder-beruGreen-600" |
| > |
| </div> |
| </div> |
| |
| |
| <div class="px-3"> |
| <button class="w-full bg-beruGreen-600/20 hover:bg-beruGreen-500/30 border border-beruGreen-500/30 py-2 px-4 rounded-lg text-sm transition duration-150"> |
| <i class="fas fa-user-plus mr-2"></i> |
| Start New Conversation |
| </button> |
| </div> |
| |
| |
| <div class="px-3 py-2 mt-4 flex justify-between items-center"> |
| <h2 class="text-xs uppercase tracking-widest text-beruGreen-600">Contacts</h2> |
| <span class="text-xs bg-beruDark-300 px-2 py-0.5 rounded">32</span> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto py-1"> |
| <div class="contact-item hover:bg-beruDark-400/50 px-3 py-2 cursor-pointer border-l border-transparent hover:border-beruGreen-600 transition"> |
| <div class="flex items-center"> |
| <div class="relative mr-3"> |
| <div class="bg-beruDark-200 h-10 w-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-user text-beruGreen-500"></i> |
| </div> |
| <div class="status-indicator presence-online"></div> |
| </div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span class="font-medium text-sm">Alex Johnson</span> |
| <span class="text-xs text-beruGreen-600">12:45 PM</span> |
| </div> |
| <p class="text-xs text-beruGreen-600 truncate">Sent you the secure file...</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="contact-item hover:bg-beruDark-400/50 px-3 py-2 cursor-pointer border-l border-transparent hover:border-beruGreen-600 transition"> |
| <div class="flex items-center"> |
| <div class="relative mr-3"> |
| <div class="bg-beruDark-200 h-10 w-10 rounded-full flex items-center justify-center"> |
| <span class="text-beruGreen-500 font-bold">SI</span> |
| </div> |
| <div class="status-indicator presence-away"></div> |
| </div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span class="font-medium text-sm">Project Sigma</span> |
| <span class="text-xs text-beruGreen-600">11:22 AM</span> |
| </div> |
| <p class="text-xs text-beruGreen-600 truncate">Latest data has been encrypted...</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="contact-item hover:bg-beruDark-400/50 px-3 py-2 cursor-pointer border-l border-transparent hover:border-beruGreen-600 transition"> |
| <div class="flex items-center"> |
| <div class="relative mr-3"> |
| <div class="bg-beruDark-200 h-10 w-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-user-shield text-beruGreen-500"></i> |
| </div> |
| <div class="status-indicator presence-dnd"></div> |
| </div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span class="font-medium text-sm">Maya Rodriguez</span> |
| <span class="text-xs text-beruGreen-600">10:15 AM</span> |
| </div> |
| <p class="text-xs text-beruGreen-600 truncate">Are we still meeting at 2 PM?</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="contact-item hover:bg-beruDark-400/50 px-3 py-2 cursor-pointer border-l border-transparent hover:border-beruGreen-600 transition"> |
| <div class="flex items-center"> |
| <div class="relative mr-3"> |
| <div class="bg-beruDark-200 h-10 w-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-user-secret text-beruGreen-500"></i> |
| </div> |
| <div class="status-indicator presence-online"></div> |
| </div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span class="font-medium text-sm">Security Team</span> |
| <span class="text-xs text-beruGreen-600">09:47 AM</span> |
| </div> |
| <p class="text-xs text-beruGreen-600 truncate">Security audit requested...</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="contact-item hover:bg-beruDark-400/50 px-3 py-2 cursor-pointer border-l border-transparent hover:border-beruGreen-600 transition"> |
| <div class="flex items-center"> |
| <div class="relative mr-3"> |
| <div class="bg-beruDark-200 h-10 w-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-user-astronaut text-beruGreen-500"></i> |
| </div> |
| <div class="status-indicator presence-offline"></div> |
| </div> |
| <div class="flex-1"> |
| <div class="flex justify-between"> |
| <span class="font-medium text-sm">Robert Chen</span> |
| <span class="text-xs text-beruGreen-600">Yesterday</span> |
| </div> |
| <p class="text-xs text-beruGreen-600 truncate">Will send the documents tomorrow</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col justify-between hidden sm:flex"> |
| |
| <div class="bg-beruDark-400/10 backdrop-blur border-b border-beruDark-300 py-3 px-6 flex items-center"> |
| <div class="relative"> |
| <div class="bg-beruDark-200 h-12 w-12 rounded-full flex items-center justify-center mr-3"> |
| <i class="fas fa-user-shield text-xl text-beruGreen-500"></i> |
| </div> |
| <div class="status-indicator presence-online"></div> |
| </div> |
| <div> |
| <h3 class="font-bold text-lg">Maya Rodriguez</h3> |
| <div class="flex items-center"> |
| <span class="text-xs text-beruGreen-500">Online</span> |
| <span class="text-xs px-2 text-beruGreen-400"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| XMPP over HTTPS |
| </span> |
| <span class="text-xs px-2 bg-beruDark-300 rounded-full"> |
| <i class="fas fa-key mr-1"></i> |
| End-to-end encryption |
| </span> |
| </div> |
| </div> |
| <div class="ml-auto flex items-center space-x-3"> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-phone-alt"></i> |
| </button> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-video"></i> |
| </button> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto py-4 px-6"> |
| <div class="text-center"> |
| <span class="text-xs bg-beruDark-300 px-3 py-1 rounded-full"> |
| <i class="fas fa-lock"></i> |
| Today |
| </span> |
| </div> |
| |
| |
| <div class="mt-5 flex items-start"> |
| <div class="bg-beruDark-300 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-user-shield text-sm"></i> |
| </div> |
| <div class="mr-10 max-w-2xl"> |
| <div class="chat-bubble-received rounded-xl py-3 px-4 relative"> |
| <p class="text-sm">All communications on this channel are encrypted using AES-256. I have sent the protocol documentation for the operation.</p> |
| <div class="encrypted-indicator"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| Encrypted |
| </div> |
| </div> |
| <div class="mt-2 pl-1"> |
| <span class="text-xs text-beruGreen-600">12:45 PM</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5 flex flex-row-reverse items-start"> |
| <div class="bg-beruGreen-600 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center ml-3"> |
| <i class="fas fa-user text-sm text-beruDark-500"></i> |
| </div> |
| <div class="ml-10 max-w-2xl"> |
| <div class="chat-bubble-sent rounded-xl py-3 px-4 relative"> |
| <p class="text-sm">Received. I've set up OTR encryption for additional security. Please confirm the identity verification code: <code class="bg-beruGreen-700/30 px-1 py-0.5 rounded">172937AB5B</code></p> |
| <div class="encrypted-indicator"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| Encrypted |
| </div> |
| </div> |
| <div class="mt-2 pr-1 text-right"> |
| <span class="text-xs text-beruGreen-600">12:47 PM</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5 flex items-start"> |
| <div class="bg-beruDark-300 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-user-shield text-sm"></i> |
| </div> |
| <div class="mr-10 max-w-2xl"> |
| <div class="chat-bubble-received rounded-xl py-3 px-4 relative"> |
| <p class="text-sm">Code verified. Identity confirmed. This session is now protected with perfect forward secrecy. Can we discuss Phase 3 deployment?</p> |
| <div class="encrypted-indicator"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| Encrypted |
| </div> |
| </div> |
| <div class="mt-2 pl-1"> |
| <span class="text-xs text-beruGreen-600">12:48 PM</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5 flex items-start"> |
| <div class="bg-beruDark-300 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center mr-3"> |
| <i class="fas fa-user-shield text-sm"></i> |
| </div> |
| <div class="mr-10 max-w-2xl"> |
| <div class="bg-beruDark-300 border border-beruDark-200 rounded-xl py-2 px-3"> |
| <div class="flex items-center"> |
| <div class="bg-beruGreen-900/20 p-3 rounded-lg"> |
| <i class="fas fa-file-pdf text-beruGreen-500 text-2xl"></i> |
| </div> |
| <div class="ml-3 flex-1 min-w-0"> |
| <div class="flex justify-between"> |
| <span class="font-medium truncate">Phase3-Deployment-Protocol.pdf</span> |
| </div> |
| <div class="flex items-center justify-between mt-1"> |
| <span class="text-xs text-beruGreen-600">2.3 MB • PDF</span> |
| <div class="flex space-x-2"> |
| <button class="text-beruGreen-400 hover:text-beruGreen-300"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="text-xs py-1 pl-1 text-beruGreen-600"> |
| <i class="fas fa-lock mr-1"></i> |
| File encrypted with AES-256-CBC |
| </div> |
| <div class="mt-1 pl-1"> |
| <span class="text-xs text-beruGreen-600">12:49 PM</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-5 flex flex-row-reverse items-start"> |
| <div class="bg-beruGreen-600 rounded-full h-8 w-8 flex-shrink-0 flex items-center justify-center ml-3"> |
| <i class="fas fa-user text-sm text-beruDark-500"></i> |
| </div> |
| <div class="ml-10 max-w-2xl"> |
| <div class="chat-bubble-sent rounded-xl py-3 px-4 relative"> |
| <p class="text-sm">I've reviewed the protocol document. The encryption settings are fully compliant with our security standards. We can proceed with the deployment as planned.</p> |
| <div class="encrypted-indicator"> |
| <i class="fas fa-shield-alt mr-1"></i> |
| Encrypted |
| </div> |
| </div> |
| <div class="mt-2 pr-1 text-right"> |
| <span class="text-xs text-beruGreen-600">12:53 PM</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-beruDark-400/10 backdrop-blur border-t border-beruDark-300 pt-3 px-6 pb-5"> |
| |
| <div class="mb-2 text-xs"> |
| <div class="flex items-center justify-between mb-1"> |
| <div class="text-beruGreen-400"> |
| <i class="fas fa-lock mr-1"></i> |
| Encrypting file... (3.2 MB) |
| </div> |
| <div>32%</div> |
| </div> |
| <div class="w-full bg-beruDark-300 rounded-full h-2"> |
| <div class="bg-beruGreen-600 h-2 rounded-full" style="width: 32%"></div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="flex space-x-2 mr-3"> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-paperclip"></i> |
| </button> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-image"></i> |
| </button> |
| <button class="bg-beruDark-300 hover:bg-beruGreen-500 hover:text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-lock"></i> |
| </button> |
| </div> |
| |
| <div class="flex-1"> |
| <div class="relative"> |
| <textarea |
| id="messageInput" |
| placeholder="Type a secure message..." |
| class="w-full bg-beruDark-300 border border-beruDark-200 rounded-xl py-3 pl-4 pr-12 focus:outline-none focus:border-beruGreen-500 resize-none placeholder-beruGreen-700" |
| rows="1" |
| ></textarea> |
| |
| <div class="absolute right-3 bottom-3"> |
| <button class="bg-beruGreen-500 hover:bg-beruGreen-400 text-beruDark-500 rounded-full h-10 w-10 flex items-center justify-center transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="pt-2 flex items-center"> |
| <div class="text-xs flex space-x-2"> |
| <div class="flex items-center"> |
| <span class="block h-2 w-2 rounded-full bg-beruGreen-500 mr-1"></span> |
| <span>Connection Secure</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-shield-alt mr-1 text-beruGreen-500"></i> |
| <span>End-to-end encrypted</span> |
| </div> |
| </div> |
| <div class="ml-auto"> |
| <div class="flex items-center text-xs"> |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23059E5A' d='M10 17l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8m0-5H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E" |
| alt="XMPP" |
| class="h-4 w-4 mr-1" |
| > |
| <span>XMPP</span> |
| <div class="w-1 h-1 rounded-full bg-beruGreen-500 mx-2"></div> |
| <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23059E5A' d='M18 9h-2V7c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-2h2c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zm-4 10H8V7h6v12zm4-5v-1h-4v-1h4v-1h-4V9h4V8l3 3-3 3z'/%3E%3C/svg%3E" |
| alt="HTTPS" |
| class="h-4 w-4 mr-1 ml-2" |
| > |
| <span>HTTPS</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hidden flex-1 items-center justify-center sm:hidden"> |
| <div class="text-center px-4"> |
| <div class="bg-beruDark-300 h-20 w-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-lock text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-medium mb-2">Secure Encrypted Chats</h3> |
| <p class="text-beruGreen-600 mb-6">Select a conversation to start messaging securely</p> |
| <button class="bg-beruGreen-600 hover:bg-beruGreen-500 text-beruDark-500 py-2 px-6 rounded-full font-medium"> |
| Start New Conversation |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const textarea = document.getElementById('messageInput'); |
| textarea.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| }); |
| |
| |
| const statusEl = document.getElementById('connectionStatus'); |
| let animationTimeout; |
| |
| function simulateConnection() { |
| |
| statusEl.className = 'connection-status status-encrypting text-beruGreen-400 flex items-center'; |
| statusEl.innerHTML = '<span>Encrypting Channel: Connecting...</span>'; |
| |
| |
| animationTimeout = setTimeout(() => { |
| statusEl.className = 'connection-status status-connected text-beruGreen-500 flex items-center'; |
| statusEl.innerHTML = '<span>Secure Connection: Established</span>'; |
| |
| statusEl.classList.add('animate-pulse'); |
| |
| |
| setTimeout(() => { |
| statusEl.classList.remove('animate-pulse'); |
| }, 3000); |
| }, 2000); |
| } |
| |
| |
| simulateConnection(); |
| |
| |
| setInterval(() => { |
| |
| const statuses = ['connected', 'encrypting']; |
| const status = statuses[Math.floor(Math.random() * statuses.length)]; |
| |
| if (status === 'connected') { |
| clearTimeout(animationTimeout); |
| statusEl.className = 'connection-status status-connected text-beruGreen-500 flex items-center'; |
| statusEl.innerHTML = '<span>Secure Connection: Established</span>'; |
| statusEl.classList.add('animate-pulse'); |
| |
| |
| setTimeout(() => { |
| statusEl.classList.remove('animate-pulse'); |
| }, 3000); |
| } else if (status === 'encrypting') { |
| statusEl.className = 'connection-status status-encrypting text-beruGreen-400 flex items-center'; |
| statusEl.innerHTML = '<span>Re-negotiating: Encrypting...</span>'; |
| } |
| }, 10000); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=D110/beru-ba" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
