Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>SecureChat</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { font-family: 'Inter', sans-serif; } | |
| body { background: #0f0f13; color: #e4e4f0; } | |
| ::-webkit-scrollbar { width: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 4px; } | |
| .glass { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); } | |
| .glass-btn { background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); } | |
| .glass-btn:hover { background: rgba(255,255,255,0.12); } | |
| .glass-btn-active { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); } | |
| .msg-bubble { word-break: break-word; overflow-wrap: break-word; } | |
| .fade-in { animation: fadeIn 0.2s ease; } | |
| @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } | |
| .sidebar-item:hover { background: rgba(255,255,255,0.06); } | |
| .sidebar-item.active { background: rgba(255,255,255,0.08); border-left: 2px solid rgba(255,255,255,0.3); } | |
| .typing-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); animation: bounce 1.2s infinite; } | |
| .typing-dot:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-dot:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes bounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-6px); } } | |
| .unread-badge { background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.2); } | |
| #app { display:none; } | |
| #auth { display:flex; } | |
| #call-dropdown { bottom: 100%; margin-bottom: 0.5rem; } | |
| #call-dropdown.hidden { display: none; } | |
| </style> | |
| </head> | |
| <body class="h-screen overflow-hidden"> | |
| <!-- AUTH SCREEN --> | |
| <div id="auth" class="h-screen items-center justify-center bg-gradient-to-br from-[#0f0f13] via-[#13131f] to-[#0f0f13]"> | |
| <div class="w-full max-w-md px-4"> | |
| <div class="text-center mb-10"> | |
| <div class="inline-flex items-center gap-2 mb-3"> | |
| <div class="w-9 h-9 rounded-xl glass-btn flex items-center justify-center text-white font-bold text-lg">S</div> | |
| <span class="text-2xl font-semibold tracking-tight">SecureChat</span> | |
| </div> | |
| <p class="text-sm text-gray-400">End-to-end encrypted messaging</p> | |
| </div> | |
| <div class="glass rounded-2xl p-8 shadow-2xl"> | |
| <!-- Tabs --> | |
| <div id="auth-tabs" class="flex gap-1 mb-6 bg-white/5 p-1 rounded-xl"> | |
| <button onclick="showTab('login')" id="tab-login" class="flex-1 py-2 rounded-lg text-sm font-medium transition-all glass-btn-active text-white">Sign In</button> | |
| <button onclick="showTab('register')" id="tab-register" class="flex-1 py-2 rounded-lg text-sm font-medium transition-all text-gray-400">Create Account</button> | |
| </div> | |
| <!-- Login Form --> | |
| <div id="form-login"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label> | |
| <input id="login-username" type="text" placeholder="your_username" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Password</label> | |
| <input id="login-password" type="password" placeholder="••••••••" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <p id="login-error" class="text-red-400 text-xs hidden"></p> | |
| <button id="login-btn" onclick="doLogin()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Sign In</button> | |
| </div> | |
| <div class="relative my-5"> | |
| <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-white/10"></div></div> | |
| <div class="relative flex justify-center text-xs text-gray-500"><span class="bg-[#1a1a26] px-3">or continue with</span></div> | |
| </div> | |
| <button onclick="googleLogin()" class="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-white font-medium py-3 rounded-xl text-sm"> | |
| <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> | |
| Continue with Google | |
| </button> | |
| </div> | |
| <!-- Google Setup Form --> | |
| <div id="form-google-setup" class="hidden"> | |
| <div class="space-y-4"> | |
| <p class="text-sm text-gray-300 text-center">Complete your account</p> | |
| <p class="text-xs text-gray-500 text-center">Choose a username and display name to finish signing up with Google.</p> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label> | |
| <input id="gs-display" type="text" placeholder="John Doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label> | |
| <input id="gs-username" type="text" placeholder="john_doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <p id="gs-error" class="text-red-400 text-xs hidden"></p> | |
| <button id="gs-btn" onclick="completeGoogleSetup()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Create Account</button> | |
| </div> | |
| </div> | |
| <!-- Register Form --> | |
| <div id="form-register" class="hidden"> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label> | |
| <input id="reg-display" type="text" placeholder="John Doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label> | |
| <input id="reg-username" type="text" placeholder="john_doe" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Email (optional)</label> | |
| <input id="reg-email" type="email" placeholder="john@example.com" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Password</label> | |
| <input id="reg-password" type="password" placeholder="Min. 8 characters" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 transition-colors" /> | |
| </div> | |
| <p id="reg-error" class="text-red-400 text-xs hidden"></p> | |
| <button id="reg-btn" onclick="doRegister()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Create Account</button> | |
| </div> | |
| <div class="relative my-5"> | |
| <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-white/10"></div></div> | |
| <div class="relative flex justify-center text-xs text-gray-500"><span class="bg-[#1a1a26] px-3">or continue with</span></div> | |
| </div> | |
| <button onclick="googleLogin()" class="w-full flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-white font-medium py-3 rounded-xl text-sm"> | |
| <svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg> | |
| Continue with Google | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-center text-xs text-gray-600 mt-4">🔒 All messages are end-to-end encrypted. No one can read them, not even us.</p> | |
| </div> | |
| </div> | |
| <!-- MAIN APP --> | |
| <div id="app" class="h-screen flex bg-[#0f0f13]"> | |
| <!-- Sidebar --> | |
| <div class="w-72 flex flex-col glass border-r border-white/5 shrink-0"> | |
| <!-- Header --> | |
| <div class="p-4 border-b border-white/5"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 rounded-lg glass-btn flex items-center justify-center text-white font-bold text-sm">S</div> | |
| <span class="font-semibold text-sm">SecureChat</span> | |
| </div> | |
| <div class="flex gap-1"> | |
| <button onclick="showNewChat()" title="New DM" class="w-7 h-7 rounded-lg hover:bg-white/10 flex items-center justify-center text-gray-400 hover:text-white transition-colors text-lg">＋</button> | |
| <button onclick="showSettings()" title="Settings" class="w-7 h-7 rounded-lg hover:bg-white/10 flex items-center justify-center transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex gap-1 mx-3 mt-3"> | |
| <button onclick="setTab('dms')" id="tab-dms" class="flex-1 text-xs py-1.5 rounded-lg glass-btn-active text-white font-medium">DMs</button> | |
| <button onclick="setTab('groups')" id="tab-groups" class="flex-1 text-xs py-1.5 rounded-lg text-gray-400 hover:text-white transition-colors">Groups</button> | |
| </div> | |
| <!-- Search --> | |
| <div class="px-3 mt-3"> | |
| <input id="sidebar-search" oninput="filterChats()" type="text" placeholder="Search…" class="w-full bg-white/5 border border-white/8 rounded-lg px-3 py-2 text-xs focus:outline-none focus:border-white/30 transition-colors text-gray-300 placeholder-gray-600" /> | |
| </div> | |
| <!-- Chat list --> | |
| <div id="chat-list" class="flex-1 overflow-y-auto mt-2 px-2"></div> | |
| <!-- New Group button --> | |
| <div class="p-3 border-t border-white/5"> | |
| <button onclick="showNewGroup()" class="w-full text-xs text-gray-400 hover:text-white py-2 rounded-lg hover:bg-white/5 transition-colors flex items-center justify-center gap-2"> | |
| <span>+ New Group</span> | |
| </button> | |
| </div> | |
| <!-- Current user --> | |
| <div class="p-3 border-t border-white/5"> | |
| <div class="flex items-center gap-3"> | |
| <div id="my-avatar" class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"></div> | |
| <div class="flex-1 min-w-0"> | |
| <p id="my-display-name" class="text-sm font-medium truncate"></p> | |
| <p id="my-username" class="text-xs text-gray-500 truncate"></p> | |
| </div> | |
| <button onclick="logout()" class="text-gray-500 hover:text-red-400 transition-colors" title="Logout"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat area --> | |
| <div class="flex-1 flex flex-col min-w-0"> | |
| <!-- Empty state --> | |
| <div id="empty-state" class="flex-1 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 rounded-2xl glass-btn flex items-center justify-center mx-auto mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg> | |
| </div> | |
| <p class="text-gray-400 text-sm">Select a conversation or start a new one</p> | |
| <p class="text-gray-600 text-xs mt-1">All messages are end-to-end encrypted 🔒</p> | |
| </div> | |
| </div> | |
| <!-- Chat window --> | |
| <div id="chat-window" class="hidden flex-1 flex flex-col min-h-0"> | |
| <!-- Chat header --> | |
| <div class="px-6 py-4 border-b border-white/5 glass flex items-center gap-3"> | |
| <div id="chat-avatar" class="w-9 h-9 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"></div> | |
| <div class="flex-1 min-w-0"> | |
| <p id="chat-name" class="font-medium text-sm"></p> | |
| <p id="chat-sub" class="text-xs text-gray-500"></p> | |
| </div> | |
| <div class="flex items-center gap-1"> | |
| <div class="relative"> | |
| <button onclick="showCallDropdown()" id="call-btn" class="p-1.5 rounded-lg hover:bg-white/10 transition-colors hidden" title="Call"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> | |
| </button> | |
| <div id="call-dropdown" class="hidden absolute right-0 top-full mt-2 glass rounded-xl py-1 min-w-[140px] shadow-2xl z-50"> | |
| <button onclick="startCall('video')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors">📹 Video Call</button> | |
| <button onclick="startCall('audio')" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/5 transition-colors">📞 Audio Call</button> | |
| </div> | |
| </div> | |
| <span class="text-xs text-gray-600 flex items-center gap-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 text-green-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg> | |
| E2EE | |
| </span> | |
| <button id="group-settings-btn" onclick="showGroupSettings()" class="hidden p-1.5 rounded-lg hover:bg-white/10 transition-colors"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages --> | |
| <div id="messages" class="flex-1 overflow-y-auto p-6 space-y-2"></div> | |
| <!-- Typing indicator --> | |
| <div id="typing-indicator" class="hidden px-6 py-2"> | |
| <div class="flex items-center gap-2"> | |
| <div class="flex gap-1"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div> | |
| <span id="typing-text" class="text-xs text-gray-500"></span> | |
| </div> | |
| </div> | |
| <!-- Input --> | |
| <div class="p-4 border-t border-white/5"> | |
| <div class="flex items-end gap-3 glass rounded-2xl px-4 py-3"> | |
| <textarea id="msg-input" onkeydown="handleKey(event)" oninput="handleTyping()" rows="1" placeholder="Type a message…" class="flex-1 bg-transparent resize-none text-sm focus:outline-none text-gray-200 placeholder-gray-600 max-h-32" style="min-height:20px"></textarea> | |
| <button onclick="sendMessage()" class="w-8 h-8 rounded-full glass-btn flex items-center justify-center transition-colors shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MODALS --> | |
| <!-- New Chat Modal --> | |
| <div id="modal-new-chat" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"> | |
| <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl"> | |
| <h3 class="font-semibold mb-4">New Direct Message</h3> | |
| <input id="search-user-input" oninput="searchUsers()" type="text" placeholder="Search users by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30 mb-4" /> | |
| <div id="user-search-results" class="space-y-1 max-h-60 overflow-y-auto"></div> | |
| <button onclick="closeModal('modal-new-chat')" class="mt-4 w-full text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button> | |
| </div> | |
| </div> | |
| <!-- New Group Modal --> | |
| <div id="modal-new-group" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"> | |
| <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl"> | |
| <h3 class="font-semibold mb-4">Create Group</h3> | |
| <div class="space-y-3"> | |
| <input id="group-name-input" type="text" placeholder="Group name" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| <input id="group-desc-input" type="text" placeholder="Description (optional)" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| <input id="group-search-input" oninput="searchGroupUsers()" type="text" placeholder="Add members by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| <div id="group-search-results" class="space-y-1 max-h-40 overflow-y-auto"></div> | |
| <div id="group-members-list" class="flex flex-wrap gap-2"></div> | |
| </div> | |
| <div class="flex gap-3 mt-5"> | |
| <button onclick="closeModal('modal-new-group')" class="flex-1 text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button> | |
| <button onclick="createGroup()" class="flex-1 glass-btn text-white text-sm py-2 rounded-xl transition-colors font-medium">Create</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div id="modal-settings" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"> | |
| <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl"> | |
| <h3 class="font-semibold mb-6">Settings</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Display Name</label> | |
| <input id="settings-display-name" type="text" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-1 block">Username</label> | |
| <input type="text" id="settings-username" disabled class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm opacity-50 cursor-not-allowed" /> | |
| </div> | |
| <p id="settings-msg" class="text-xs text-green-400 hidden">✓ Saved</p> | |
| <div id="settings-password-section" class="hidden pt-4 border-t border-white/5"> | |
| <label class="text-xs text-gray-400 uppercase tracking-wider mb-3 block">Set Password</label> | |
| <div class="space-y-3"> | |
| <input id="settings-password" type="password" placeholder="New password (min. 8 chars)" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| <input id="settings-password-confirm" type="password" placeholder="Confirm password" class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-white/30" /> | |
| <p id="settings-pw-error" class="text-red-400 text-xs hidden"></p> | |
| <button id="settings-pw-btn" onclick="setPassword()" class="w-full glass-btn disabled:opacity-50 disabled:cursor-not-allowed transition-colors text-white font-medium py-3 rounded-xl text-sm">Set Password</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-3 mt-6"> | |
| <button onclick="closeModal('modal-settings')" class="flex-1 text-sm text-gray-500 hover:text-white py-2 transition-colors">Cancel</button> | |
| <button onclick="saveSettings()" class="flex-1 glass-btn text-white text-sm py-2 rounded-xl transition-colors font-medium">Save</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Group Settings Modal --> | |
| <div id="modal-group-settings" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50"> | |
| <div class="glass rounded-2xl p-6 w-full max-w-md mx-4 shadow-2xl"> | |
| <h3 class="font-semibold mb-4" id="gs-name"></h3> | |
| <div id="gs-members" class="space-y-2 max-h-60 overflow-y-auto mb-4"></div> | |
| <div id="gs-add-section"> | |
| <input id="gs-search-input" oninput="searchGsUsers()" type="text" placeholder="Add member by username…" class="w-full bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-sm focus:outline-none focus:border-white/30 mb-2" /> | |
| <div id="gs-search-results" class="space-y-1 max-h-32 overflow-y-auto"></div> | |
| </div> | |
| <button onclick="closeModal('modal-group-settings')" class="mt-4 w-full text-sm text-gray-500 hover:text-white py-2 transition-colors">Close</button> | |
| </div> | |
| </div> | |
| <!-- Incoming Call Modal --> | |
| <div id="incoming-call" class="hidden fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50"> | |
| <div class="glass rounded-3xl p-8 w-full max-w-sm mx-4 shadow-2xl text-center"> | |
| <div id="incoming-avatar" class="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl font-semibold mx-auto mb-4"></div> | |
| <p id="incoming-caller-name" class="text-lg font-semibold mb-1"></p> | |
| <p class="text-sm text-gray-400 mb-6"><span id="incoming-call-type-icon">📞</span> <span id="incoming-call-type">Audio Call</span></p> | |
| <div class="flex gap-4 justify-center"> | |
| <button onclick="rejectCall()" class="w-14 h-14 rounded-full bg-red-500/80 hover:bg-red-500 flex items-center justify-center text-white text-xl transition-colors shadow-lg">✕</button> | |
| <button onclick="acceptCall()" class="w-14 h-14 rounded-full bg-green-500/80 hover:bg-green-500 flex items-center justify-center text-white text-xl transition-colors shadow-lg">✓</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Call Modal --> | |
| <div id="modal-call" class="hidden fixed inset-0 bg-black/85 flex flex-col z-50"> | |
| <!-- Call header --> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div> | |
| <p id="call-peer-name" class="text-lg font-semibold text-white"></p> | |
| <p id="call-status" class="text-sm text-gray-400">Connecting…</p> | |
| </div> | |
| <div class="flex gap-3"> | |
| <button onclick="toggleMute()" id="call-mute-btn" class="px-3 py-1.5 rounded-xl glass-btn text-sm text-gray-300 hover:text-white transition-colors">🔊 Mute</button> | |
| <button onclick="toggleVideo()" id="call-video-btn" class="px-3 py-1.5 rounded-xl glass-btn text-sm text-gray-300 hover:text-white transition-colors hidden">📹 Video</button> | |
| <button onclick="endCall()" class="px-4 py-1.5 rounded-xl bg-red-500/80 hover:bg-red-500 text-white text-sm font-medium transition-colors">End Call</button> | |
| </div> | |
| </div> | |
| <!-- Video content (1-to-1) --> | |
| <div id="call-video-content" class="hidden flex-1 relative flex items-center justify-center p-4"> | |
| <div class="relative max-w-full max-h-full"> | |
| <video id="remote-video" autoplay playsinline class="max-w-full max-h-full rounded-2xl object-contain bg-black/40" style="max-height:70vh"></video> | |
| <div id="remote-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/60 rounded-2xl"> | |
| <div id="remote-video-avatar-inner" class="w-24 h-24 rounded-full flex items-center justify-center text-white text-4xl font-semibold"></div> | |
| </div> | |
| </div> | |
| <div class="absolute top-6 right-6 w-48 h-36 rounded-xl overflow-hidden shadow-2xl border-2 border-white/20"> | |
| <video id="local-video" autoplay playsinline muted class="w-full h-full object-cover"></video> | |
| <div id="local-video-avatar" class="hidden absolute inset-0 flex items-center justify-center bg-black/70"> | |
| <div id="local-video-avatar-inner" class="w-12 h-12 rounded-full flex items-center justify-center text-white text-xl font-semibold"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio content --> | |
| <div id="call-audio-content" class="hidden flex-1 flex flex-col items-center justify-center gap-4"> | |
| <div id="call-audio-avatar" class="w-28 h-28 rounded-full flex items-center justify-center text-white text-5xl font-semibold"></div> | |
| <p class="text-gray-400 text-sm">Audio call in progress</p> | |
| </div> | |
| </div> | |
| <script src="/static/crypto.js"></script> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> |