|
|
<!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> |
