Spaces:

droplyvictor89
/

DROPLY

Sleeping

App Files Files Community

droplyvictor89 commited on Feb 8

Commit

76ed3d6

verified ·

1 Parent(s): 82731f2

Upload 5 files

Browse files

Files changed (2) hide show

Dockerfile +19 -10
index.html +1194 -1007

Dockerfile CHANGED Viewed

@@ -1,14 +1,23 @@
-FROM python:3.9
-# Setăm folderul de lucru
-WORKDIR /code
-# Copiem lista de librării și le instalăm
-COPY ./requirements.txt /code/requirements.txt
-RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
-# Copiem restul fișierelor (app.py, credentials.json, etc.)
-COPY . .
-# Pornim serverul pe portul 7860
-CMD ["python", "app.py"]

+FROM python:3.10-slim
+WORKDIR /app
+# Copiem fișierele
+COPY requirements.txt .
+COPY app.py .
+COPY index.html .
+COPY sw.js .
+COPY logo.png .
+COPY notification.mp3 .
+# Instalăm dependențele
+RUN pip install --no-cache-dir -r requirements.txt
+# Creăm directorul pentru uploads
+RUN mkdir -p uploads
+# Expunem portul 7860 (standard HuggingFace)
+EXPOSE 7860
+# Rulăm aplicația
+CMD ["python", "app.py"]

index.html CHANGED Viewed

@@ -1,280 +1,432 @@
 <!DOCTYPE html>
-<html lang="ro">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/logo.png">
-    <title>DROPLY! v2.1</title>
     <style>
-        /* --- DESIGN SISTEMIC --- */
-        :root {
-            --bg: #000;
-            --card: #0a0a0a;
-            --accent: #fff;
-            --border: #1a1a1a;
-            --text-muted: #666;
-            --danger: #ff4444;
-            --terminal: #00ff41;
-            --success: #00ff00;
         }
-        * { box-sizing: border-box; }
         body {
-            background-color: var(--bg);
-            color: var(--accent);
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            margin: 0;
             display: flex;
             height: 100vh;
             overflow: hidden;
         }
-        /* --- SIDEBAR --- */
         nav {
-            width: 240px;
-            background: #050505;
-            border-right: 1px solid var(--border);
             display: none;
             flex-direction: column;
-            padding: 20px 0;
-            flex-shrink: 0;
         }
-        .nav-logo {
-            padding: 0 25px 30px;
-            font-size: 20px;
-            font-weight: 900;
-            letter-spacing: 2px;
         }
         .nav-version {
-            padding: 0 25px 10px;
-            font-size: 9px;
-            color: var(--terminal);
-            font-family: monospace;
         }
         .nav-item {
-            padding: 15px 25px;
             cursor: pointer;
-            color: var(--text-muted);
             text-transform: uppercase;
-            font-size: 11px;
-            font-weight: bold;
-            transition: 0.3s;
-            border-left: 3px solid transparent;
         }
-        .nav-item:hover, .nav-item.active {
-            color: #fff;
-            background: #111;
-            border-left-color: #fff;
         }
-        /* --- ZONA PRINCIPALĂ --- */
         main {
-            flex-grow: 1;
             overflow-y: auto;
-            padding: 40px;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
-        .section {
-            width: 100%;
-            max-width: 600px;
-            display: none;
-            animation: fadeIn 0.4s ease;
         }
-        .section.active { display: block; }
-        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        /* --- CARDURI & INPUTS --- */
-        .card {
-            background: var(--card);
-            border: 1px solid var(--border);
-            padding: 25px;
-            border-radius: 4px;
-            margin-bottom: 20px;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
         }
-        h2 {
-            font-size: 16px;
-            margin-bottom: 20px;
-            text-transform: uppercase;
-            border-left: 3px solid #fff;
-            padding-left: 10px;
         }
-        label {
-            display: block;
-            font-size: 10px;
-            color: var(--text-muted);
-            margin-bottom: 8px;
-            text-transform: uppercase;
         }
         input, textarea, select {
-            width: 100%;
-            background: #000;
-            border: 1px solid var(--border);
-            color: #fff;
-            padding: 12px;
-            margin-bottom: 15px;
-            border-radius: 2px;
-            font-size: 14px;
-            box-sizing: border-box;
             outline: none;
             font-family: inherit;
         }
-        input:focus, textarea:focus, select:focus { border-color: var(--terminal); }
         button {
-            background: #fff;
-            color: #000;
-            border: none;
-            padding: 15px;
-            font-weight: bold;
-            text-transform: uppercase;
-            cursor: pointer;
-            width: 100%;
-            transition: 0.2s;
-            font-size: 12px;
         }
-        button:hover { background: #ccc; }
         .btn-secondary {
-            background: transparent;
-            color: #fff;
-            border: 1px solid #333;
         }
-        .btn-secondary:hover { background: #111; }
         .btn-danger {
-            background: var(--danger);
-            color: #fff;
         }
-        .btn-danger:hover { background: #cc0000; }
-        .btn-small {
-            width: auto;
-            padding: 5px 10px;
-            font-size: 10px;
-            margin-left: 5px;
         }
-        /* --- TERMINAL LOGS --- */
         #terminalBox {
-            background: #000;
-            border: 1px solid #111;
-            color: var(--terminal);
             font-family: 'Courier New', monospace;
-            font-size: 11px;
-            padding: 15px;
-            height: 150px;
             overflow-y: auto;
-            margin-top: 15px;
-            border-radius: 4px;
-            line-height: 1.5;
-        }
-        /* --- MESAJE & GRUP --- */
-        .msg-card, .group-msg {
-            border-bottom: 1px solid #111;
-            padding: 10px 0;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            word-break: break-word;
-            position: relative;
         }
         .msg-actions {
             position: absolute;
-            top: 10px;
             right: 0;
         }
-        .group-header {
-            font-size: 10px;
-            color: var(--terminal);
-            margin-bottom: 2px;
         }
-        .group-time {
-            font-size: 9px;
-            color: #444;
         }
-        /* --- CONTACTE & LISTE --- */
-        .item-list {
-            border-bottom: 1px solid #111;
-            padding: 10px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
         }
-        .item-info { font-size: 13px; }
-        /* --- BADGES --- */
         .badge {
-            background: #111;
-            border: 1px solid var(--terminal);
-            color: var(--terminal);
-            padding: 5px 10px;
-            font-size: 10px;
-            display: inline-block;
-            margin-bottom: 15px;
             cursor: pointer;
         }
-        .badge.active { background: var(--terminal); color: #000; }
         .admin-badge {
-            background: #ff0000;
-            color: #fff;
-            border: none;
         }
-        /* --- NOTIFICĂRI --- */
         #notify {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: #fff;
-            color: #000;
-            padding: 10px 20px;
-            font-weight: bold;
-            z-index: 1000;
             display: none;
-            border-radius: 4px;
-            box-shadow: 0 4px 12px rgba(255,255,255,0.2);
         }
-        /* Warning Banner */
         #warningBanner {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
-            background: #ff0000;
-            color: #fff;
-            padding: 15px;
             text-align: center;
-            font-weight: bold;
             z-index: 2000;
             display: none;
-            animation: pulse 1s infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
         }
-        /* --- MODAL POPUP --- */
         .modal {
             display: none;
             position: fixed;
@@ -282,66 +434,132 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0,0,0,0.9);
             z-index: 1500;
             align-items: center;
             justify-content: center;
         }
-        .modal.active { display: flex; }
         .modal-content {
-            background: var(--card);
-            border: 1px solid var(--border);
-            padding: 30px;
-            max-width: 500px;
             width: 90%;
             max-height: 80vh;
             overflow-y: auto;
             position: relative;
-            border-radius: 4px;
         }
         .modal-close {
             position: absolute;
-            top: 15px;
-            right: 15px;
-            font-size: 24px;
             cursor: pointer;
-            color: var(--text-muted);
         }
-        .modal-close:hover { color: #fff; }
-        /* --- PING INDICATOR --- */
-        .ping-indicator {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--success);
-            margin-right: 5px;
-            animation: blink 2s infinite;
         }
-        @keyframes blink {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.3; }
         }
-        /* --- RESPONSIVE --- */
         @media (max-width: 768px) {
-            body { flex-direction: column; }
-            nav {
-                width: 100%;
-                height: auto;
-                flex-direction: row;
-                overflow-x: auto;
-                border-right: none;
-                border-bottom: 1px solid var(--border);
             }
-            .nav-logo, .nav-version { display: none; }
-            main { padding: 20px; }
-            .section { max-width: 100%; }
         }
     </style>
 </head>
@@ -349,206 +567,254 @@
 <audio id="notifSound" src="/notification.mp3" preload="auto"></audio>
-<div id="notify">ACȚIUNE REUȘITĂ</div>
-<div id="warningBanner">
-    ⚠️ ATENȚIE! Serverul DROPLY! intră în mentenanță. Ne cerem scuze pentru inconvenient! ⚠️
-</div>
-<!-- MODAL pentru vizualizare mesaj inbox -->
 <div id="messageModal" class="modal">
     <div class="modal-content">
-        <span class="modal-close" onclick="closeMessageModal()">&times;</span>
-        <h2 id="modalFrom">De la:</h2>
-        <div id="modalTime" style="font-size: 11px; color: #666; margin-bottom: 15px;"></div>
-        <div id="modalContent" style="margin-bottom: 15px; white-space: pre-wrap;"></div>
         <div id="modalFile"></div>
     </div>
 </div>
 <nav id="sidebar">
-    <div class="nav-logo">DROPLY!</div>
-    <div class="nav-version">v2.1 STABLE</div>
-    <div class="nav-item active" onclick="showSection('home')">Dashboard</div>
-    <div class="nav-item" onclick="showSection('inbox')">Inbox</div>
-    <div class="nav-item" onclick="showSection('group')">Grup</div>
-    <div class="nav-item" onclick="showSection('send')">Trimite</div>
-    <div class="nav-item" onclick="showSection('contacts')">Agendă</div>
-    <div class="nav-item" onclick="showSection('settings')">Setări</div>
-    <div class="nav-item" id="adminNavItem" style="display:none; color: #ff0000;" onclick="showSection('admin')">Admin Panel</div>
-    <div class="nav-item" style="margin-top: auto; color: var(--danger);" onclick="logout()">Ieșire</div>
 </nav>
-<main>    <!-- SECȚIUNE LOGIN -->
     <div id="authSection" class="section active">
         <div class="card">
-            <h2>Acces DROPLY! v2.1</h2>
-            <label>Email</label>
-            <input type="text" id="loginEmail" placeholder="Ex: user@droply.md">
-            <label>Parolă</label>
             <input type="password" id="loginPass">
-            <button onclick="login()">Conectare</button>
         </div>
         <div class="card">
-            <h2>Creează Cont DROPLY!</h2>
             <input type="text" id="regUser" placeholder="Username">
-            <input type="password" id="regPass" placeholder="Parolă">
-            <button class="btn-secondary" onclick="register()">Generează Cont</button>
         </div>
     </div>
     <!-- DASHBOARD -->
     <div id="home" class="section">
         <div class="card">
-            <h2 id="userDisplay">Salut!</h2>
-            <div id="idBadge" style="font-family: monospace; color: #555;">ID: 0670...</div>
-            <div id="adminBadgeDisplay" style="display:none; margin-top: 10px;">
                 <span class="badge admin-badge">ADMIN ACCESS</span>
             </div>
-            <h2 style="margin-top: 30px; border-left: 3px solid var(--terminal);">
-                <span class="ping-indicator"></span>Live System Logs
-            </h2>
             <div id="terminalBox">
-                [SYSTEM] Waiting for authentication...
             </div>
-            <button style="margin-top: 20px;" onclick="showAbout()">📋 About v2.1</button>
         </div>
     </div>
     <!-- INBOX -->
     <div id="inbox" class="section">
         <div class="card">
-            <h2>Inbox & AI</h2>
-            <div id="saraToggle" class="badge" onclick="toggleSara()">SARA AI: OFF</div>
-            <div id="inboxList" style="max-height: 400px; overflow-y: auto;">
-                Inbox gol. ┐('～` )┌
             </div>
         </div>
     </div>
-    <!-- GRUP GLOBAL -->
     <div id="group" class="section">
         <div class="card">
-            <h2>Grup Global DROPLY!</h2>
-            <div id="groupAccessInfo" style="margin-bottom: 15px; padding: 10px; background: #111; border-left: 3px solid var(--terminal);">
-                <div id="groupMemberText" style="display:none;">
-                    ✅ Ai acces la grup
                 </div>
-                <div id="groupNonMemberText" style="display:none;">
-                    ⚠️ Nu ai acces la grup. Poți vizualiza mesajele dar nu poți trimite.
-                    <button style="margin-top: 10px;" onclick="requestGroupInvite()">Cere Invitație</button>
                 </div>
             </div>
-            <div id="groupList" style="max-height: 300px; overflow-y: auto; margin-bottom: 15px;"></div>
             <div id="groupInputSection">
-                <textarea id="groupMsgInput" placeholder="Scrie mesaj..." style="height: 80px;"></textarea>
-                <button onclick="sendGroup()">Trimite în Grup</button>
             </div>
         </div>
     </div>
-    <!-- TRIMITE MESAJ PRIVAT -->
     <div id="send" class="section">
         <div class="card">
-            <h2>Trimite Mesaj Privat</h2>
-            <label>ID Destinatar</label>
-            <input type="text" id="targetDest" placeholder="Ex: a1b2c3d4e5f6">
-            <label>Mesaj</label>
-            <textarea id="targetMsg" placeholder="Scrie mesajul..." style="height: 100px;"></textarea>
-            <label>Fișier Atașat (Opțional)</label>
             <input type="file" id="targetFile">
-            <button onclick="sendMail()">📤 Trimite</button>
-            <button class="btn-secondary" style="margin-top: 15px;" onclick="reportBug()">
-                🐛 Raportare Bug
             </button>
         </div>
     </div>
-    <!-- AGENDĂ CONTACTE -->
     <div id="contacts" class="section">
         <div class="card">
-            <h2>Agendă Contacte</h2>
-            <input type="text" id="cName" placeholder="Nume contact">
-            <input type="text" id="cId" placeholder="ID utilizator">
-            <button onclick="saveContact()">Salvează Contact</button>
-            <h2 style="margin-top: 30px;">Lista Contacte</h2>
             <div id="contactList"></div>
         </div>
     </div>
-    <!-- SETĂRI -->
     <div id="settings" class="section">
         <div class="card">
-            <h2>Setări Cont</h2>
-            <label>Vizibilitate Profil</label>
             <select id="setVis">
                 <option value="public">Public</option>
-                <option value="private">Privat</option>
             </select>
-            <label>Cod Secret (pentru profil privat)</label>
-            <input type="text" id="setSecret" placeholder="Ex: ABC123">
-            <label>Notificări Push</label>
             <select id="setNotif">
-                <option value="1">Activate</option>
-                <option value="0">Dezactivate</option>
             </select>
-            <button onclick="updateSettings()">💾 Salvează Setări</button>
         </div>
         <div class="card">
-            <h2>Resetare Parolă</h2>
-            <label>Parolă Veche</label>
-            <input type="password" id="oldPass" placeholder="Parolă actuală">
-            <label>Parolă Nouă</label>
-            <input type="password" id="newPass" placeholder="Parolă nouă">
-            <button onclick="changePassword()">🔒 Schimbă Parola</button>
         </div>
         <div class="card">
-            <h2>Server Status</h2>
-            <div style="display: flex; align-items: center; margin-bottom: 15px;">
-                <span class="ping-indicator"></span>
-                <span id="serverPing">Checking...</span>
             </div>
-            <button onclick="checkPing()">🔄 Verifică Ping</button>
         </div>
     </div>
-    <!-- ADMIN PANEL -->
     <div id="admin" class="section">
         <div class="card">
-            <h2 style="color: #ff0000;">🔐 Admin Panel</h2>
-            <h2 style="margin-top: 20px;">Utilizatori Conectați</h2>
-            <div id="adminUsersList" style="max-height: 200px; overflow-y: auto;"></div>
-            <button onclick="loadAdminData()" style="margin-top: 15px;">🔄 Refresh Date</button>
         </div>
         <div class="card">
-            <h2>Cereri Invitații Grup</h2>
-            <div id="adminInvitesList" style="max-height: 200px; overflow-y: auto;"></div>
         </div>
         <div class="card">
-            <h2 style="color: #ff0000;">⚠️ Maintenance Mode</h2>
-            <p style="font-size: 12px; color: #666; margin-bottom: 15px;">
-                Această acțiune va trimite un warning către TOȚI utilizatorii și va închide serverul în 60 de secunde.
             </p>
             <button class="btn-danger" onclick="triggerMaintenance()">
-                🚨 ACTIVEAZĂ MENTENANȚĂ
             </button>
         </div>
     </div>
@@ -556,787 +822,708 @@
 </main>
 <script>
-    let lastMsgCount = 0;
-    let isUserLogged = false;
-    let saraEnabled = false;
-    let currentUserData = null;
-    let serviceWorkerRegistration = null;
-    // ===== SERVICE WORKER & NOTIFICĂRI ÎMBUNĂTĂȚITE =====
-    if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('/sw.js')
-            .then(registration => {
-                console.log('✅ Service Worker înregistrat:', registration);
-                serviceWorkerRegistration = registration;
-                addLog('SYSTEM: Service Worker active');
-                // Cere permisiune pentru notificări
-                requestNotificationPermission();
-                // Ascultă mesaje de la Service Worker
-                navigator.serviceWorker.addEventListener('message', event => {
-                    console.log('📩 Message from SW:', event.data);
-                    if (event.data.type === 'PLAY_SOUND') {
-                        playNotificationSound();
-                    }
-                    if (event.data.type === 'CHECK_INBOX') {
-                        refreshInbox();
-                    }
-                });
-            })
-            .catch(err => {
-                console.error('❌ Service Worker eșuat:', err);
-                addLog('ERROR: Service Worker failed');
-            });
-    }
-    // Funcție pentru cerere permisiune notificări
-    async function requestNotificationPermission() {
-        if (!('Notification' in window)) {
-            console.log('Browser-ul nu suportă notificări');
-            addLog('WARNING: Browser does not support notifications');
-            return false;
-        }
-        if (Notification.permission === 'granted') {
-            console.log('✅ Notificări deja permise');
-            addLog('SYSTEM: Notifications enabled');
-            return true;
-        }
-        if (Notification.permission !== 'denied') {
-            const permission = await Notification.requestPermission();
-            if (permission === 'granted') {
-                console.log('✅ Permisiune notificări acordată');
-                addLog('SYSTEM: Notifications enabled');
-                // Test notificare
-                new Notification('DROPLY! v2.1', {
-                    body: 'Notificările funcționează! 🎉',
-                    icon: '/logo.png',
-                    tag: 'test-notification'
-                });
-                return true;
             } else {
-                console.log('❌ Permisiune notificări refuzată');
-                addLog('WARNING: Notification permission denied');
-                return false;
             }
         }
         return false;
     }
-    // Funcție pentru redare sunet notificare
-    function playNotificationSound() {
-        try {
-            const audio = document.getElementById('notifSound');
-            if (audio) {
-                audio.currentTime = 0;
-                audio.play().catch(e => {
-                    console.log('Autoplay blocat:', e);
-                });
-            }
-        } catch (e) {
-            console.error('Eroare sunet:', e);
-        }
     }
-    // Funcție pentru trimitere notificare către Service Worker
-    function sendNotificationToSW(from, content) {
-        if (serviceWorkerRegistration && serviceWorkerRegistration.active) {
-            serviceWorkerRegistration.active.postMessage({
-                type: 'NEW_MESSAGE',
-                from: from,
-                content: content
             });
         }
     }
-    // Auto-login
-    window.addEventListener('DOMContentLoaded', async () => {
-        const sessionToken = localStorage.getItem('droply_session_token');
-        if (sessionToken) {
-            addLog('SYSTEM: Checking saved session...');
-            try {
-                const response = await fetch('/api/check_session', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({session_token: sessionToken})
-                });
-                const data = await response.json();
-                if (data.success) {
-                    performLogin(data);
-                } else {
-                    localStorage.removeItem('droply_session_token');
-                    addLog('SYSTEM: Session expired, please login.');
-                }
-            } catch(e) {
-                addLog('ERROR: Failed to check session');
-            }
-        } else {
-            addLog('SYSTEM: Waiting for authentication...');
         }
-        // Check pentru shutdown warning
-        setInterval(checkShutdown, 5000);
-    });
-    // ===== FUNCȚII UTILITARE =====
-    function showSection(id) {
-        document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
-        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
-        document.getElementById(id).classList.add('active');
-        const items = document.querySelectorAll('.nav-item');
-        items.forEach(item => {
-            if(item.innerText.toLowerCase().includes(id) ||
-               (id === 'home' && item.innerText.includes('Dashboard')) ||
-               (id === 'admin' && item.innerText.includes('Admin'))) {
-                item.classList.add('active');
             }
-        });
-        addLog(`Navigated to: ${id.toUpperCase()}`);
-        // Dacă e admin panel, încarcă datele
-        if(id === 'admin' && currentUserData && currentUserData.is_admin) {
-            loadAdminData();
         }
     }
-    function addLog(text) {
-        const terminal = document.getElementById('terminalBox');
-        const time = new Date().toLocaleTimeString();
-        terminal.innerHTML += `<div>[${time}] ${text}</div>`;
-        terminal.scrollTop = terminal.scrollHeight;
-    }
-    function showNotify(text) {
-        const n = document.getElementById('notify');
-        n.innerText = text;
-        n.style.display = 'block';
-        setTimeout(() => n.style.display = 'none', 3000);
     }
-    function logout() {
-        localStorage.removeItem('droply_session_token');
-        location.reload();
     }
-    // ===== LOGIN & REGISTER =====
-    async function login() {
-        const email = document.getElementById('loginEmail').value;
-        const pass = document.getElementById('loginPass').value;
-        const r = await fetch('/api/login', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({email: email, password: pass})
-        });
-        const d = await r.json();
-        if(d.success) {
-            localStorage.setItem('droply_session_token', d.session_token);
-            performLogin(d);
-        } else {
-            addLog(`FAILED: Login attempt for ${email}`);
-            alert("Eroare la logare!");
-        }
     }
-    function performLogin(data) {
-        isUserLogged = true;
-        currentUserData = data.user;
-        document.getElementById('authSection').classList.remove('active');
-        document.getElementById('sidebar').style.display = 'flex';
-        document.getElementById('home').classList.add('active');
-        document.getElementById('userDisplay').innerText = data.email;
-        document.getElementById('idBadge').innerText = "ID: " + data.user.id;
-        document.getElementById('setVis').value = data.user.visibility;
-        document.getElementById('setSecret').value = data.user.secret_code;
-        document.getElementById('setNotif').value = data.user.notif_enabled;
-        // Sara AI
-        if(data.user.sara_ai) {
-            saraEnabled = true;
-            document.getElementById('saraToggle').classList.add('active');
-            document.getElementById('saraToggle').innerText = "SARA AI: ONLINE";
-        }
-        // Admin access
-        if(data.user.is_admin) {
-            document.getElementById('adminNavItem').style.display = 'block';
-            document.getElementById('adminBadgeDisplay').style.display = 'block';
-            addLog('ADMIN: Full access granted');
-        }
-        // Group access
-        if(data.user.is_group_member) {
-            document.getElementById('groupMemberText').style.display = 'block';
-            document.getElementById('groupNonMemberText').style.display = 'none';
-        } else {
-            document.getElementById('groupMemberText').style.display = 'none';
-            document.getElementById('groupNonMemberText').style.display = 'block';
-            document.getElementById('groupInputSection').style.display = 'none';
-        }
-        addLog(`SUCCESS: Session started for ${data.email}`);
-        addLog(`UID IDENTIFIED: ${data.user.id}`);
-        // Auto-refresh
-        setInterval(() => {
-            refreshInbox();
-            refreshGroup();
-        }, 500);
-        refreshInbox();
-        loadContacts();
-        checkPing();
     }
-    async function register() {
-        const r = await fetch('/api/register', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                username: document.getElementById('regUser').value,
-                password: document.getElementById('regPass').value
-            })
-        });
-        const d = await r.json();
-        if(d.success) {
-            alert("Cont creat! Email: " + d.email + " | ID: " + d.uid);
-            addLog(`IDENTITY GENERATED: ${d.uid}`);
-        } else {
-            alert("Eroare: " + d.error);
-        }
     }
-    // ===== SARA AI =====
-    function toggleSara() {
-        saraEnabled = !saraEnabled;
-        const btn = document.getElementById('saraToggle');
-        if(saraEnabled) {
-            btn.classList.add('active');
-            btn.innerText = "SARA AI: ONLINE";
-            addLog("SARA AI: Activated auto-responder.");
-            updateSettings();
-        } else {
-            btn.classList.remove('active');
-            btn.innerText = "SARA AI: OFF";
-            addLog("SARA AI: Deactivated.");
-            updateSettings();
-        }
     }
-    // ===== INBOX =====
-    async function refreshInbox() {
-        if(!isUserLogged) return;
-        try {
-            const r = await fetch('/api/get_inbox');
-            const list = await r.json();
-            // Verificare mesaje noi
-            if(list.length > lastMsgCount) {
-                if(lastMsgCount !== 0 && currentUserData && currentUserData.notif_enabled) {
-                    const lastMessage = list[list.length-1];
-                    // Redăm sunetul
-                    playNotificationSound();
-                    // Arătăm banner-ul
-                    showNotify("MESAJ NOU!");
-                    // Log în terminal
-                    addLog(`INCOMING: New message from ${lastMessage.from}`);
-                    // Browser notification (funcționează și când tab-ul e în fundal)
-                    if('Notification' in window && Notification.permission === 'granted') {
-                        // Verificăm dacă documentul e vizibil
-                        if (document.hidden) {
-                            // Tab-ul e în fundal, folosim Service Worker
-                            sendNotificationToSW(lastMessage.from, lastMessage.content);
-                        } else {
-                            // Tab-ul e activ, notificare directă
-                            new Notification('DROPLY! - Mesaj Nou', {
-                                body: `De la: ${lastMessage.from}\n${lastMessage.content.substring(0, 50)}${lastMessage.content.length > 50 ? '...' : ''}`,
-                                icon: '/logo.png',
-                                badge: '/logo.png',
-                                vibrate: [200, 100, 200],
-                                tag: 'new-message-' + Date.now(),
-                                requireInteraction: false
-                            });
-                        }
                     }
                 }
-                lastMsgCount = list.length;
             }
-            const container = document.getElementById('inboxList');
-            container.innerHTML = list.length ? "" : "Inbox gol. ┐('～` )┌";
-            list.reverse().forEach(m => {
-                const div = document.createElement('div');
-                div.className = "msg-card";
-                div.innerHTML = `
-                    <div class="msg-actions">
-                        <button class="btn-small btn-danger" onclick="deleteMessage(${m.id})">🗑️</button>
-                    </div>
-                    <small style="cursor: pointer;" onclick="openMessageModal(${m.id}, '${m.from}', '${m.timestamp}', \`${m.content.replace(/`/g, '\\`')}\`, '${m.file || ''}')">
-                        ${m.from} | ${m.timestamp}
-                    </small><br>
-                    <div style="cursor: pointer; margin-top: 5px;" onclick="openMessageModal(${m.id}, '${m.from}', '${m.timestamp}', \`${m.content.replace(/`/g, '\\`')}\`, '${m.file || ''}')">
-                        ${m.content.substring(0, 50)}${m.content.length > 50 ? '...' : ''}
-                    </div>
-                `;
-                container.appendChild(div);
-            });
-        } catch (e) {
-            console.error("Refresh inbox error:", e);
         }
-    }
-    function openMessageModal(id, from, time, content, file) {
-        document.getElementById('modalFrom').innerText = `De la: ${from}`;
-        document.getElementById('modalTime').innerText = time;
-        document.getElementById('modalContent').innerText = content;
-        if(file) {
-            document.getElementById('modalFile').innerHTML = `
-                <a href="/download/${file}" target="_blank" download style="color:#fff; background:#222; padding:8px; text-decoration:none; display:inline-block; border-radius:2px;">
-                    📎 Descarcă: ${file}
-                </a>
             `;
-        } else {
-            document.getElementById('modalFile').innerHTML = '';
-        }
-        document.getElementById('messageModal').classList.add('active');
     }
-    function closeMessageModal() {
-        document.getElementById('messageModal').classList.remove('active');
     }
-    async function deleteMessage(msgId) {
-        if(!confirm('Ștergi acest mesaj?')) return;
-        await fetch('/api/delete_message', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({message_id: msgId})
-        });
-        showNotify("MESAJ ȘTERS");
-        refreshInbox();
-    }
-    // ===== SEND MAIL =====
-    async function sendMail() {
-        const fd = new FormData();
-        const dest = document.getElementById('targetDest').value;
-        fd.append('destinatar', dest);
-        fd.append('mesaj', document.getElementById('targetMsg').value);
-        const file = document.getElementById('targetFile').files[0];
-        if(file) fd.append('fisier', file);
-        addLog(`SENDING: Data packet to ${dest}...`);
-        const r = await fetch('/api/send_mail', { method: 'POST', body: fd });
-        const d = await r.json();
-        if(d.success) {
-            showNotify("TRIMIS!");
-            document.getElementById('targetMsg').value = "";
-            document.getElementById('targetFile').value = "";
-            addLog(`SUCCESS: Packet delivered to ${dest}`);
-        } else {
-            addLog(`ERROR: ${d.error}`);
-            alert("Eroare: " + d.error);
-        }
     }
-    function reportBug() {
-        const now = new Date();
-        const dateStr = `${now.getDate()}/${now.getMonth()+1}/${now.getFullYear()}`;
-        const timeStr = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`;
-        document.getElementById('targetDest').value = 'admin001';
-        document.getElementById('targetMsg').value = `Raportare Bug: [${dateStr} | Ora ${timeStr}]\n\n`;
-        showSection('send');
-        showNotify("Completează raportarea!");
-        addLog("BUG REPORT: Template loaded");
-    }
-    // ===== GRUP =====
-    async function sendGroup() {
-        const msg = document.getElementById('groupMsgInput').value;
-        if(!msg) return;
-        const r = await fetch('/api/group/send', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({content: msg})
-        });
-        const d = await r.json();
-        if(d.success) {
-            document.getElementById('groupMsgInput').value = "";
-            refreshGroup();
-        } else {
-            alert("Eroare: " + d.error);
-        }
     }
-    async function refreshGroup() {
-        if(!isUserLogged) return;
-        try {
-            const r = await fetch('/api/group/get');
-            const msgs = await r.json();
-            const box = document.getElementById('groupList');
-            box.innerHTML = msgs.map(m => `
-                <div class="group-msg">
-                    <div class="group-header">
-                        ${m.user} <span class="group-time">[${m.timestamp}]</span>
-                        ${currentUserData && currentUserData.is_admin ?
-                            `<button class="btn-small btn-danger" onclick="deleteGroupMessage(${m.id})" style="float:right;">🗑️</button>`
-                            : ''}
-                    </div>
-                    <div style="color:#fff;">${m.content}</div>
                 </div>
-            `).join('');
-        } catch (e) {
-            console.error("Group refresh error:", e);
-        }
-    }
-    async function deleteGroupMessage(msgId) {
-        if(!confirm('Ștergi acest mesaj din grup?')) return;
-        await fetch('/api/group/delete', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({message_id: msgId})
-        });
-        showNotify("MESAJ ȘTERS");
-        refreshGroup();
-    }
-    async function requestGroupInvite() {
-        const r = await fetch('/api/group/request_invite', { method: 'POST' });
-        const d = await r.json();
-        if(d.success) {
-            showNotify("CERERE TRIMISĂ!");
-            addLog("GROUP: Invitation request sent to admin");
-        } else {
-            alert("Eroare: " + d.error);
-        }
     }
-    // ===== CONTACTE =====
-    function saveContact() {
-        const name = document.getElementById('cName').value;
-        const id = document.getElementById('cId').value;
-        if(!name || !id) return;
-        let contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
-        contacts.push({name, id});
-        localStorage.setItem('droply_contacts', JSON.stringify(contacts));
-        document.getElementById('cName').value = "";
-        document.getElementById('cId').value = "";
-        loadContacts();
-        showNotify("CONTACT SALVAT");
-        addLog(`CONTACT SAVED: ${name} (${id})`);
-    }
-    function loadContacts() {
-        const contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
-        const container = document.getElementById('contactList');
-        container.innerHTML = "";
-        contacts.forEach((c, index) => {
-            const div = document.createElement('div');
-            div.className = "item-list";
-            div.innerHTML = `
-                <div class="item-info"><b>${c.name}</b><br><small>${c.id}</small></div>
-                <div>
-                    <button class="btn-small" onclick="useContact('${c.id}')">USE</button>
-                    <button class="btn-small btn-danger" onclick="delContact(${index})">X</button>
-                </div>
-            `;
-            container.appendChild(div);
-        });
     }
-    function useContact(id) {
-        document.getElementById('targetDest').value = id;
-        showSection('send');
     }
-    function delContact(i) {
-        let contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
-        contacts.splice(i, 1);
-        localStorage.setItem('droply_contacts', JSON.stringify(contacts));
-        loadContacts();
-        addLog(`CONTACT DELETED`);
     }
-    // ===== SETĂRI =====
-    async function updateSettings() {
-        const notif = parseInt(document.getElementById('setNotif').value);
-        await fetch('/api/update_settings', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                visibility: document.getElementById('setVis').value,
-                secret_code: document.getElementById('setSecret').value,
-                sara_ai: saraEnabled,
-                notif_enabled: notif
-            })
-        });
-        // Actualizăm currentUserData
-        if(currentUserData) {
-            currentUserData.notif_enabled = notif;
-        }
-        showNotify("SETĂRI SALVATE");
-        addLog(`SETTINGS: Profile updated. Sara AI: ${saraEnabled}, Notif: ${notif ? 'ON' : 'OFF'}`);
-    }
-    async function changePassword() {
-        const oldPass = document.getElementById('oldPass').value;
-        const newPass = document.getElementById('newPass').value;
-        if(!oldPass || !newPass) {
-            alert("Completează ambele câmpuri!");
-            return;
-        }
-        const r = await fetch('/api/change_password', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({old_password: oldPass, new_password: newPass})
         });
-        const d = await r.json();
-        if(d.success) {
-            showNotify("PAROLĂ SCHIMBATĂ!");
-            document.getElementById('oldPass').value = "";
-            document.getElementById('newPass').value = "";
-            addLog("SECURITY: Password changed successfully");
-        } else {
-            alert("Eroare: " + d.error);
-        }
-    }
-    async function checkPing() {
-        try {
-            const start = Date.now();
-            const r = await fetch('/api/server_ping');
-            const ping = Date.now() - start;
-            document.getElementById('serverPing').innerText = `Server Online - Ping: ${ping}ms`;
-            addLog(`PING: Server responded in ${ping}ms`);
-        } catch(e) {
-            document.getElementById('serverPing').innerText = 'Server Offline';
-            addLog('PING: Server not responding');
-        }
     }
-    // ===== ADMIN PANEL =====
-    async function loadAdminData() {
-        if(!currentUserData || !currentUserData.is_admin) return;
-        // Load users
-        const rUsers = await fetch('/api/admin/get_users');
-        const dUsers = await rUsers.json();
-        if(dUsers.success) {
-            const container = document.getElementById('adminUsersList');
-            container.innerHTML = '';
-            dUsers.users.forEach(u => {
                 const div = document.createElement('div');
                 div.className = 'item-list';
                 div.innerHTML = `
                     <div class="item-info">
-                        <b>${u.email}</b><br>
-                        <small>ID: ${u.id} | IP: ${u.ip}</small>
                     </div>
                 `;
                 container.appendChild(div);
             });
-            addLog(`ADMIN: Loaded ${dUsers.users.length} users`);
-        }
-        // Load group invitations
-        const rInvites = await fetch('/api/admin/get_invitations');
-        const dInvites = await rInvites.json();
-        if(dInvites.success) {
-            const container = document.getElementById('adminInvitesList');
-            container.innerHTML = '';
-            if(dInvites.invitations.length === 0) {
-                container.innerHTML = '<p style="color:#666; font-size:12px;">Nu există cereri pendinte</p>';
-            } else {
-                dInvites.invitations.forEach(inv => {
-                    const div = document.createElement('div');
-                    div.className = 'item-list';
-                    div.innerHTML = `
-                        <div class="item-info">
-                            <b>${inv.user_email}</b><br>
-                            <small>${inv.timestamp}</small>
-                        </div>
-                        <button class="btn-small" onclick="approveInvite(${inv.id})">✅ Aprobă</button>
-                    `;
-                    container.appendChild(div);
-                });
-            }
         }
     }
-    async function approveInvite(inviteId) {
-        const r = await fetch('/api/admin/approve_invitation', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({invitation_id: inviteId})
-        });
-        const d = await r.json();
-        if(d.success) {
-            showNotify("INVITAȚIE APROBATĂ!");
-            loadAdminData();
-            addLog("ADMIN: Group invitation approved");
-        }
     }
-    async function triggerMaintenance() {
-        if(!confirm('ATENȚIE! Această acțiune va închide serverul în 60 de secunde! Continui?')) {
-            return;
-        }
-        const r = await fetch('/api/admin/broadcast_warning', { method: 'POST' });
-        const d = await r.json();
-        if(d.success) {
-            showNotify("⚠️ MAINTENANCE ACTIVAT!");
-            addLog("ADMIN: Maintenance mode activated - shutdown in 60s");
-            // Arătăm banner-ul
-            document.getElementById('warningBanner').style.display = 'block';
-            // Countdown
-            let seconds = 60;
-            const countdown = setInterval(() => {
-                seconds--;
                 document.getElementById('warningBanner').innerText =
-                    `⚠️ ATENȚIE! Serverul se închide în ${seconds} secunde! ⚠️`;
-                if(seconds <= 0) {
-                    clearInterval(countdown);
-                    document.getElementById('warningBanner').innerText =
-                        '🔴 SERVER OFFLINE - Mentenanță în curs...';
-                }
-            }, 1000);
-        }
-    }
-    async function checkShutdown() {
-        try {
-            const r = await fetch('/api/check_shutdown');
-            const d = await r.json();
-            if(d.shutdown_scheduled && !document.getElementById('warningBanner').style.display) {
-                document.getElementById('warningBanner').style.display = 'block';
-                addLog("WARNING: Server shutdown scheduled!");
             }
-        } catch(e) {
-            // Server might be down
-        }
     }
-    // ===== ABOUT =====
-    function showAbout() {
-        alert(`
-╔════════════════════════════════════╗
-║      DROPLY! v2.1 - CHANGELOG      ║
-╚════════════════════════════════════╝
-✨ FUNCȚII NOI v2.1:
-🔐 SETĂRI:
-  ✅ Resetare parolă din setări
-  ✅ Activare/Dezactivare notificări push
-  ✅ Verificare ping server
-👥 GRUP:
-  ✅ Acces controlat de admin
-  ✅ Cerere invitație pentru grup
-  ✅ Ștergere mesaje (doar admin)
-  ✅ Vizualizare mesaje pentru non-membri
-📧 INBOX:
-  ✅ Pop-up detaliat pentru mesaje
-  ✅ Ștergere mesaje din inbox
-  ✅ Vizualizare fișiere atașate
-📤 TRIMITERE:
-  ✅ Simplificare (fără cod secret)
-  ✅ Buton raportare bug rapid
-🔧 ADMIN PANEL (doar admin):
-  ✅ Vizualizare utilizatori + IP
-  ✅ Aprobare invitații grup
-  ✅ Warning broadcast + shutdown
-🎯 ÎMBUNĂTĂȚIRI:
-  ✅ Auto-login persistent
-  ✅ Notificări browser
-  ✅ Service Worker pentru fundal
-  ✅ UI mai clean și responsive
-═══════════════════════════════════
-📝 Admin: victor89@admindroply.md
-🔑 Parolă: 122012
-        `);
-    }
 </script>
 </body>

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/logo.png">
+    <title>DROPLY! - Ultra Secure Messaging</title>
     <style>
+        /* ==================== ULTRA BOLD BLACK & WHITE DESIGN ==================== */
+        /* Inspired by D! logo - Minimalist, Bold, Premium */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
+        :root {
+            --black: #000000;
+            --white: #ffffff;
+            --gray-dark: #1a1a1a;
+            --gray-medium: #333333;
+            --gray-light: #666666;
+            --gray-lighter: #999999;
+        }
         body {
+            background: var(--black);
+            color: var(--white);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
             display: flex;
             height: 100vh;
             overflow: hidden;
+            font-weight: 500;
         }
+        /* ==================== SIDEBAR ==================== */
         nav {
+            width: 280px;
+            background: var(--black);
+            border-right: 2px solid var(--white);
             display: none;
             flex-direction: column;
+            position: relative;
         }
+        .nav-header {
+            padding: 48px 32px 32px;
+            border-bottom: 2px solid var(--white);
+        }
+        .nav-logo {
+            font-size: 48px;
+            font-weight: 900;
+            letter-spacing: -2px;
+            margin-bottom: 8px;
+            line-height: 1;
         }
         .nav-version {
+            font-size: 10px;
+            color: var(--gray-lighter);
+            font-weight: 700;
+            letter-spacing: 2px;
+        }
+        /* Language Toggle */
+        .lang-switch {
+            display: flex;
+            gap: 0;
+            margin-top: 24px;
+            border: 2px solid var(--white);
+        }
+        .lang-btn {
+            flex: 1;
+            padding: 12px;
+            background: transparent;
+            border: none;
+            color: var(--white);
+            font-size: 12px;
+            font-weight: 900;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .lang-btn:first-child {
+            border-right: 2px solid var(--white);
+        }
+        .lang-btn.active {
+            background: var(--white);
+            color: var(--black);
+        }
+        .lang-btn:hover:not(.active) {
+            background: var(--gray-dark);
+        }
+        /* Navigation Items */
+        .nav-items {
+            flex: 1;
+            padding: 24px 0;
+            overflow-y: auto;
         }
         .nav-item {
+            padding: 20px 32px;
             cursor: pointer;
+            color: var(--gray-lighter);
             text-transform: uppercase;
+            font-size: 12px;
+            font-weight: 900;
+            letter-spacing: 2px;
+            transition: all 0.2s;
+            border-left: 4px solid transparent;
+        }
+        .nav-item:hover {
+            color: var(--white);
+            background: var(--gray-dark);
+            border-left-color: var(--white);
         }
+        .nav-item.active {
+            color: var(--white);
+            background: var(--gray-dark);
+            border-left-color: var(--white);
         }
+        .nav-footer {
+            border-top: 2px solid var(--white);
+            padding: 24px 32px;
+        }
+        .nav-item.logout {
+            color: var(--gray-light);
+        }
+        .nav-item.logout:hover {
+            color: var(--white);
+            background: var(--gray-dark);
+        }
+        /* ==================== MAIN CONTENT ==================== */
         main {
+            flex: 1;
             overflow-y: auto;
+            padding: 80px;
             display: flex;
             flex-direction: column;
             align-items: center;
         }
+        .section {
+            width: 100%;
+            max-width: 700px;
+            display: none;
+            animation: slideIn 0.3s ease;
+        }
+        .section.active {
+            display: block;
         }
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        /* ==================== CARDS ==================== */
+        .card {
+            background: var(--black);
+            border: 2px solid var(--white);
+            padding: 40px;
+            margin-bottom: 32px;
+            transition: all 0.2s;
         }
+        .card:hover {
+            border-color: var(--gray-lighter);
         }
+        h2 {
+            font-size: 24px;
+            font-weight: 900;
+            margin-bottom: 32px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding-bottom: 16px;
+            border-bottom: 2px solid var(--white);
+        }
+        h3 {
+            font-size: 14px;
+            font-weight: 900;
+            margin: 24px 0 16px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--gray-lighter);
+        }
+        /* ==================== FORMS ==================== */
+        label {
+            display: block;
+            font-size: 11px;
+            color: var(--gray-lighter);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            font-weight: 700;
         }
         input, textarea, select {
+            width: 100%;
+            background: var(--black);
+            border: 2px solid var(--white);
+            color: var(--white);
+            padding: 16px 20px;
+            margin-bottom: 24px;
+            font-size: 16px;
+            font-family: inherit;
+            font-weight: 500;
             outline: none;
+            transition: all 0.2s;
+        }
+        input:focus, textarea:focus, select:focus {
+            border-color: var(--gray-lighter);
+        }
+        input::placeholder, textarea::placeholder {
+            color: var(--gray-light);
+        }
+        textarea {
+            resize: vertical;
+            min-height: 120px;
             font-family: inherit;
         }
+        /* ==================== BUTTONS ==================== */
         button {
+            background: var(--white);
+            color: var(--black);
+            border: 2px solid var(--white);
+            padding: 18px 32px;
+            font-weight: 900;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            cursor: pointer;
+            width: 100%;
+            transition: all 0.2s;
+            font-size: 13px;
         }
+        button:hover {
+            background: var(--black);
+            color: var(--white);
+        }
+        button:active {
+            transform: scale(0.98);
+        }
         .btn-secondary {
+            background: var(--black);
+            color: var(--white);
+            border: 2px solid var(--white);
         }
+        .btn-secondary:hover {
+            background: var(--white);
+            color: var(--black);
+        }
         .btn-danger {
+            background: var(--black);
+            color: var(--gray-lighter);
+            border: 2px solid var(--gray-lighter);
+        }
+        .btn-danger:hover {
+            background: var(--white);
+            color: var(--black);
+            border-color: var(--white);
         }
+        .btn-small {
+            width: auto;
+            padding: 8px 16px;
+            font-size: 10px;
+            margin-left: 12px;
         }
+        /* ==================== TERMINAL ==================== */
         #terminalBox {
+            background: var(--black);
+            border: 2px solid var(--white);
+            color: var(--gray-lighter);
             font-family: 'Courier New', monospace;
+            font-size: 12px;
+            padding: 24px;
+            height: 200px;
             overflow-y: auto;
+            margin-top: 24px;
+            line-height: 1.8;
+            font-weight: 500;
         }
+        /* ==================== LISTS ==================== */
+        .msg-card, .group-msg {
+            border-bottom: 2px solid var(--gray-dark);
+            padding: 20px 0;
+            position: relative;
+        }
+        .msg-card:hover, .group-msg:hover {
+            border-bottom-color: var(--gray-medium);
+        }
         .msg-actions {
             position: absolute;
+            top: 20px;
             right: 0;
         }
+        .item-list {
+            border-bottom: 2px solid var(--gray-dark);
+            padding: 20px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
+        .item-info {
+            font-size: 14px;
+            font-weight: 600;
         }
+        .item-info small {
+            color: var(--gray-light);
+            font-size: 12px;
+            font-weight: 500;
         }
+        /* ==================== BADGES ==================== */
         .badge {
+            background: var(--black);
+            border: 2px solid var(--white);
+            color: var(--white);
+            padding: 12px 20px;
+            font-size: 11px;
+            display: inline-block;
+            margin-bottom: 24px;
             cursor: pointer;
+            font-weight: 900;
+            letter-spacing: 2px;
+            transition: all 0.2s;
+            text-transform: uppercase;
         }
+        .badge:hover {
+            background: var(--white);
+            color: var(--black);
+        }
+        .badge.active {
+            background: var(--white);
+            color: var(--black);
+        }
         .admin-badge {
+            border-color: var(--white);
+            background: var(--white);
+            color: var(--black);
         }
+        /* ==================== NOTIFICATIONS ==================== */
         #notify {
+            position: fixed;
+            top: 40px;
+            right: 40px;
+            background: var(--white);
+            color: var(--black);
+            padding: 20px 32px;
+            font-weight: 900;
+            z-index: 1000;
             display: none;
+            font-size: 13px;
+            letter-spacing: 2px;
+            border: 2px solid var(--black);
         }
         #warningBanner {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
+            background: var(--white);
+            color: var(--black);
+            padding: 24px;
             text-align: center;
+            font-weight: 900;
             z-index: 2000;
             display: none;
+            font-size: 14px;
+            letter-spacing: 2px;
+            border-bottom: 2px solid var(--black);
         }
+        /* ==================== MODAL ==================== */
         .modal {
             display: none;
             position: fixed;
             left: 0;
             right: 0;
             bottom: 0;
+            background: rgba(0, 0, 0, 0.95);
             z-index: 1500;
             align-items: center;
             justify-content: center;
         }
+        .modal.active {
+            display: flex;
+        }
         .modal-content {
+            background: var(--black);
+            border: 2px solid var(--white);
+            padding: 48px;
+            max-width: 700px;
             width: 90%;
             max-height: 80vh;
             overflow-y: auto;
             position: relative;
         }
         .modal-close {
             position: absolute;
+            top: 24px;
+            right: 24px;
+            font-size: 32px;
             cursor: pointer;
+            color: var(--gray-lighter);
+            font-weight: 900;
+            line-height: 1;
+            transition: all 0.2s;
         }
+        .modal-close:hover {
+            color: var(--white);
         }
+        /* ==================== PING ==================== */
+        .ping {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            background: var(--white);
+            margin-right: 12px;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
             0%, 100% { opacity: 1; }
             50% { opacity: 0.3; }
         }
+        /* ==================== SCROLLBAR ==================== */
+        ::-webkit-scrollbar {
+            width: 12px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--black);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--gray-medium);
+            border: 2px solid var(--black);
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--gray-lighter);
+        }
+        /* ==================== RESPONSIVE ==================== */
         @media (max-width: 768px) {
+            body {
+                flex-direction: column;
+            }
+            nav {
+                width: 100%;
+                border-right: none;
+                border-bottom: 2px solid var(--white);
+            }
+            .nav-header {
+                padding: 24px;
+            }
+            .nav-logo {
+                font-size: 32px;
+            }
+            .nav-items {
+                display: flex;
+                overflow-x: auto;
+                padding: 0;
+            }
+            .nav-item {
+                flex-shrink: 0;
+                padding: 20px 24px;
+                border-left: none;
+                border-bottom: 4px solid transparent;
+            }
+            .nav-item.active {
+                border-left: none;
+                border-bottom-color: var(--white);
+            }
+            .nav-footer {
+                display: none;
+            }
+            main {
+                padding: 40px 24px;
+            }
+            .card {
+                padding: 32px 24px;
+            }
+            h2 {
+                font-size: 20px;
             }
         }
     </style>
 </head>
 <audio id="notifSound" src="/notification.mp3" preload="auto"></audio>
+<div id="notify">SUCCESS</div>
+<div id="warningBanner">⚠ SERVER MAINTENANCE - INCONVENIENCE REGRETTED</div>
+<!-- MESSAGE MODAL -->
 <div id="messageModal" class="modal">
     <div class="modal-content">
+        <span class="modal-close" onclick="closeMessageModal()">×</span>
+        <h2 id="modalFrom" class="lang" data-en="FROM:" data-ro="DE LA:">FROM:</h2>
+        <div id="modalTime" style="font-size: 12px; color: var(--gray-light); margin-bottom: 24px; font-weight: 500;"></div>
+        <div id="modalContent" style="margin-bottom: 24px; line-height: 1.8; font-weight: 500;"></div>
         <div id="modalFile"></div>
     </div>
 </div>
 <nav id="sidebar">
+    <div class="nav-header">
+        <div class="nav-logo">D!</div>
+        <div class="nav-version">v2.1 ULTRA</div>
+        <div class="lang-switch">
+            <button class="lang-btn active" onclick="switchLanguage('en')">EN</button>
+            <button class="lang-btn" onclick="switchLanguage('ro')">RO</button>
+        </div>
+    </div>
+    <div class="nav-items">
+        <div class="nav-item active" onclick="showSection('home')">
+            <span class="lang" data-en="DASHBOARD" data-ro="PANOU">DASHBOARD</span>
+        </div>
+        <div class="nav-item" onclick="showSection('inbox')">
+            <span class="lang" data-en="INBOX" data-ro="MESAJE">INBOX</span>
+        </div>
+        <div class="nav-item" onclick="showSection('group')">
+            <span class="lang" data-en="GROUP" data-ro="GRUP">GROUP</span>
+        </div>
+        <div class="nav-item" onclick="showSection('send')">
+            <span class="lang" data-en="SEND" data-ro="TRIMITE">SEND</span>
+        </div>
+        <div class="nav-item" onclick="showSection('contacts')">
+            <span class="lang" data-en="CONTACTS" data-ro="AGENDĂ">CONTACTS</span>
+        </div>
+        <div class="nav-item" onclick="showSection('settings')">
+            <span class="lang" data-en="SETTINGS" data-ro="SETĂRI">SETTINGS</span>
+        </div>
+        <div class="nav-item" id="adminNavItem" style="display:none;" onclick="showSection('admin')">
+            <span class="lang" data-en="ADMIN" data-ro="ADMIN">ADMIN</span>
+        </div>
+    </div>
+    <div class="nav-footer">
+        <div class="nav-item logout" onclick="logout()">
+            <span class="lang" data-en="LOGOUT" data-ro="IEȘIRE">LOGOUT</span>
+        </div>
+    </div>
 </nav>
+<main>
+    <!-- AUTH SECTION -->
     <div id="authSection" class="section active">
         <div class="card">
+            <h2 class="lang" data-en="ACCESS" data-ro="ACCES">ACCESS</h2>
+            <label class="lang" data-en="EMAIL" data-ro="EMAIL">EMAIL</label>
+            <input type="text" id="loginEmail" placeholder="user@droply.md">
+            <label class="lang" data-en="PASSWORD" data-ro="PAROLĂ">PASSWORD</label>
             <input type="password" id="loginPass">
+            <button onclick="login()">
+                <span class="lang" data-en="LOGIN" data-ro="CONECTARE">LOGIN</span>
+            </button>
         </div>
         <div class="card">
+            <h2 class="lang" data-en="CREATE ACCOUNT" data-ro="CREEAZĂ CONT">CREATE ACCOUNT</h2>
             <input type="text" id="regUser" placeholder="Username">
+            <input type="password" id="regPass" placeholder="Password">
+            <button class="btn-secondary" onclick="register()">
+                <span class="lang" data-en="GENERATE" data-ro="GENEREAZĂ">GENERATE</span>
+            </button>
         </div>
     </div>
     <!-- DASHBOARD -->
     <div id="home" class="section">
         <div class="card">
+            <h2 id="userDisplay">HELLO!</h2>
+            <div id="idBadge" style="font-family: monospace; color: var(--gray-light); font-size: 14px; font-weight: 700;">ID: 0670...</div>
+            <div id="adminBadgeDisplay" style="display:none; margin-top: 24px;">
                 <span class="badge admin-badge">ADMIN ACCESS</span>
             </div>
+            <h3 class="lang" data-en="LIVE SYSTEM LOGS" data-ro="JURNALE SISTEM LIVE">LIVE SYSTEM LOGS</h3>
             <div id="terminalBox">
+                <span class="ping"></span>[SYSTEM] Waiting for authentication...
             </div>
         </div>
     </div>
     <!-- INBOX -->
     <div id="inbox" class="section">
         <div class="card">
+            <h2 class="lang" data-en="INBOX & AI" data-ro="INBOX & AI">INBOX & AI</h2>
+            <div id="saraToggle" class="badge" onclick="toggleSara()">
+                <span class="lang" data-en="SARA AI: OFF" data-ro="SARA AI: OPRIT">SARA AI: OFF</span>
+            </div>
+            <div id="inboxList" style="max-height: 450px; overflow-y: auto;">
+                <span class="lang" data-en="Empty inbox." data-ro="Inbox gol.">Empty inbox.</span>
             </div>
         </div>
     </div>
+    <!-- GROUP -->
     <div id="group" class="section">
         <div class="card">
+            <h2 class="lang" data-en="GLOBAL GROUP" data-ro="GRUP GLOBAL">GLOBAL GROUP</h2>
+            <div id="groupAccessInfo" style="margin-bottom: 24px; padding: 20px; background: var(--gray-dark); border-left: 4px solid var(--white);">
+                <div id="groupMemberText" style="display:none; font-size: 13px; font-weight: 600;">
+                    <span class="lang" data-en="✓ GROUP ACCESS GRANTED" data-ro="✓ AI ACCES LA GRUP">✓ GROUP ACCESS GRANTED</span>
                 </div>
+                <div id="groupNonMemberText" style="display:none; color: var(--gray-lighter); font-size: 13px; font-weight: 600;">
+                    <span class="lang" data-en="⚠ NO ACCESS - VIEW ONLY" data-ro="⚠ FĂRĂ ACCES - DOAR VIZUALIZARE">⚠ NO ACCESS - VIEW ONLY</span>
+                    <button style="margin-top: 16px;" onclick="requestGroupInvite()">
+                        <span class="lang" data-en="REQUEST" data-ro="CERE">REQUEST</span>
+                    </button>
                 </div>
             </div>
+            <div id="groupList" style="max-height: 400px; overflow-y: auto; margin-bottom: 24px;"></div>
             <div id="groupInputSection">
+                <textarea id="groupMsgInput" placeholder="Type message..." style="height: 100px;"></textarea>
+                <button onclick="sendGroup()">
+                    <span class="lang" data-en="SEND" data-ro="TRIMITE">SEND</span>
+                </button>
             </div>
         </div>
     </div>
+    <!-- SEND -->
     <div id="send" class="section">
         <div class="card">
+            <h2 class="lang" data-en="SEND MESSAGE" data-ro="TRIMITE MESAJ">SEND MESSAGE</h2>
+            <label class="lang" data-en="RECIPIENT ID" data-ro="ID DESTINATAR">RECIPIENT ID</label>
+            <input type="text" id="targetDest" placeholder="a1b2c3d4e5f6">
+            <label class="lang" data-en="MESSAGE" data-ro="MESAJ">MESSAGE</label>
+            <textarea id="targetMsg" placeholder="Type your message..." style="height: 140px;"></textarea>
+            <label class="lang" data-en="ATTACHMENT (Optional)" data-ro="FIȘIER (Opțional)">ATTACHMENT (Optional)</label>
             <input type="file" id="targetFile">
+            <button onclick="sendMail()">
+                <span class="lang" data-en="SEND" data-ro="TRIMITE">SEND</span>
+            </button>
+            <button class="btn-secondary" style="margin-top: 20px;" onclick="reportBug()">
+                <span class="lang" data-en="REPORT BUG" data-ro="RAPORTARE BUG">REPORT BUG</span>
             </button>
         </div>
     </div>
+    <!-- CONTACTS -->
     <div id="contacts" class="section">
         <div class="card">
+            <h2 class="lang" data-en="CONTACTS" data-ro="CONTACTE">CONTACTS</h2>
+            <input type="text" id="cName" placeholder="Contact name">
+            <input type="text" id="cId" placeholder="User ID">
+            <button onclick="saveContact()">
+                <span class="lang" data-en="SAVE" data-ro="SALVEAZĂ">SAVE</span>
+            </button>
+            <h3 class="lang" data-en="CONTACT LIST" data-ro="LISTĂ CONTACTE">CONTACT LIST</h3>
             <div id="contactList"></div>
         </div>
     </div>
+    <!-- SETTINGS -->
     <div id="settings" class="section">
         <div class="card">
+            <h2 class="lang" data-en="SETTINGS" data-ro="SETĂRI">SETTINGS</h2>
+            <label class="lang" data-en="VISIBILITY" data-ro="VIZIBILITATE">VISIBILITY</label>
             <select id="setVis">
                 <option value="public">Public</option>
+                <option value="private">Private</option>
             </select>
+            <label class="lang" data-en="SECRET CODE" data-ro="COD SECRET">SECRET CODE</label>
+            <input type="text" id="setSecret" placeholder="ABC123">
+            <label class="lang" data-en="NOTIFICATIONS" data-ro="NOTIFICĂRI">NOTIFICATIONS</label>
             <select id="setNotif">
+                <option value="1" class="lang" data-en="Enabled" data-ro="Active">Enabled</option>
+                <option value="0" class="lang" data-en="Disabled" data-ro="Dezactivate">Disabled</option>
             </select>
+            <button onclick="updateSettings()">
+                <span class="lang" data-en="SAVE" data-ro="SALVEAZĂ">SAVE</span>
+            </button>
         </div>
         <div class="card">
+            <h2 class="lang" data-en="PASSWORD" data-ro="PAROLĂ">PASSWORD</h2>
+            <label class="lang" data-en="OLD PASSWORD" data-ro="PAROLĂ VECHE">OLD PASSWORD</label>
+            <input type="password" id="oldPass">
+            <label class="lang" data-en="NEW PASSWORD" data-ro="PAROLĂ NOUĂ">NEW PASSWORD</label>
+            <input type="password" id="newPass">
+            <button onclick="changePassword()">
+                <span class="lang" data-en="CHANGE" data-ro="SCHIMBĂ">CHANGE</span>
+            </button>
         </div>
         <div class="card">
+            <h2 class="lang" data-en="SERVER" data-ro="SERVER">SERVER</h2>
+            <div style="display: flex; align-items: center; margin-bottom: 24px; font-size: 14px; font-weight: 600;">
+                <span class="ping"></span>
+                <span id="serverPing" class="lang" data-en="Checking..." data-ro="Verificare...">Checking...</span>
             </div>
+            <button onclick="checkPing()">
+                <span class="lang" data-en="CHECK PING" data-ro="VERIFICĂ">CHECK PING</span>
+            </button>
         </div>
     </div>
+    <!-- ADMIN -->
     <div id="admin" class="section">
         <div class="card">
+            <h2 class="lang" data-en="ADMIN PANEL" data-ro="PANOU ADMIN">ADMIN PANEL</h2>
+            <h3 class="lang" data-en="USERS" data-ro="UTILIZATORI">USERS</h3>
+            <div id="adminUsersList" style="max-height: 300px; overflow-y: auto;"></div>
+            <button onclick="loadAdminData()" style="margin-top: 24px;">
+                <span class="lang" data-en="REFRESH" data-ro="REÎMPROSPĂTEAZĂ">REFRESH</span>
+            </button>
         </div>
         <div class="card">
+            <h2 class="lang" data-en="INVITATIONS" data-ro="INVITAȚII">INVITATIONS</h2>
+            <div id="adminInvitesList" style="max-height: 300px; overflow-y: auto;"></div>
         </div>
         <div class="card">
+            <h2 class="lang" data-en="MAINTENANCE" data-ro="MENTENANȚĂ">MAINTENANCE</h2>
+            <p style="font-size: 13px; color: var(--gray-lighter); margin-bottom: 24px; line-height: 1.6; font-weight: 500;" class="lang"
+               data-en="Warning: Server will shut down in 60 seconds."
+               data-ro="Atenție: Serverul se va închide în 60 secunde.">
+                Warning: Server will shut down in 60 seconds.
             </p>
             <button class="btn-danger" onclick="triggerMaintenance()">
+                <span class="lang" data-en="ACTIVATE" data-ro="ACTIVEAZĂ">ACTIVATE</span>
             </button>
         </div>
     </div>
 </main>
 <script>
+// DROPLY! v2.1 ULTRA - Complete JavaScript
+// Continue în următorul mesaj cu JavaScript complet...
+let lastMsgCount = 0;
+let isUserLogged = false;
+let saraEnabled = false;
+let currentUserData = null;
+let serviceWorkerRegistration = null;
+let currentLang = localStorage.getItem('droply_language') || 'en';
+// ==================== MULTI-LANGUAGE ====================
+function switchLanguage(lang) {
+    currentLang = lang;
+    localStorage.setItem('droply_language', lang);
+    document.querySelectorAll('.lang').forEach(el => {
+        const text = el.getAttribute(`data-${lang}`);
+        if (text) {
+            if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
+                const placeholder = el.getAttribute(`data-placeholder-${lang}`);
+                if (placeholder) el.placeholder = placeholder;
             } else {
+                el.textContent = text;
             }
         }
+    });
+    document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
+    document.querySelector(`.lang-btn[onclick*="${lang}"]`).classList.add('active');
+    addLog(`LANGUAGE: Switched to ${lang.toUpperCase()}`);
+}
+window.addEventListener('DOMContentLoaded', () => {
+    switchLanguage(currentLang);
+});
+// ==================== SERVICE WORKER ====================
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js')
+        .then(registration => {
+            serviceWorkerRegistration = registration;
+            addLog('SYSTEM: Service Worker active');
+            requestNotificationPermission();
+            navigator.serviceWorker.addEventListener('message', event => {
+                if (event.data.type === 'PLAY_SOUND') playNotificationSound();
+                if (event.data.type === 'CHECK_INBOX') refreshInbox();
+            });
+        })
+        .catch(err => addLog('ERROR: Service Worker failed'));
+}
+async function requestNotificationPermission() {
+    if (!('Notification' in window)) {
+        addLog('WARNING: Notifications not supported');
         return false;
     }
+    if (Notification.permission === 'granted') {
+        addLog('SYSTEM: Notifications enabled');
+        return true;
     }
+    if (Notification.permission !== 'denied') {
+        const permission = await Notification.requestPermission();
+        if (permission === 'granted') {
+            addLog('SYSTEM: Notifications enabled');
+            new Notification('DROPLY!', {
+                body: currentLang === 'en' ? 'Notifications working!' : 'Notificări active!',
+                icon: '/logo.png'
             });
+            return true;
         }
     }
+    return false;
+}
+function playNotificationSound() {
+    try {
+        const audio = document.getElementById('notifSound');
+        if (audio) {
+            audio.currentTime = 0;
+            audio.play().catch(e => console.log('Autoplay blocked'));
         }
+    } catch (e) {}
+}
+function sendNotificationToSW(from, content) {
+    if (serviceWorkerRegistration?.active) {
+        serviceWorkerRegistration.active.postMessage({
+            type: 'NEW_MESSAGE',
+            from: from,
+            content: content
+        });
+    }
+}
+// Auto-login
+window.addEventListener('DOMContentLoaded', async () => {
+    const sessionToken = localStorage.getItem('droply_session_token');
+    if (sessionToken) {
+        addLog('SYSTEM: Checking session...');
+        try {
+            const response = await fetch('/api/check_session', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({session_token: sessionToken})
+            });
+            const data = await response.json();
+            if (data.success) {
+                performLogin(data);
+            } else {
+                localStorage.removeItem('droply_session_token');
+                addLog('SYSTEM: Session expired');
             }
+        } catch(e) {
+            addLog('ERROR: Session check failed');
         }
     }
+    setInterval(checkShutdown, 5000);
+});
+// ==================== UTILITIES ====================
+function showSection(id) {
+    document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+    document.getElementById(id).classList.add('active');
+    document.querySelectorAll('.nav-item').forEach(item => {
+        if(item.onclick?.toString().includes(id)) {
+            item.classList.add('active');
+        }
+    });
+    addLog(`NAV: ${id.toUpperCase()}`);
+    if(id === 'admin' && currentUserData?.is_admin) {
+        loadAdminData();
     }
+}
+function addLog(text) {
+    const terminal = document.getElementById('terminalBox');
+    const time = new Date().toLocaleTimeString();
+    terminal.innerHTML += `<div>[${time}] ${text}</div>`;
+    terminal.scrollTop = terminal.scrollHeight;
+}
+function showNotify(text) {
+    const n = document.getElementById('notify');
+    n.innerText = text;
+    n.style.display = 'block';
+    setTimeout(() => n.style.display = 'none', 3000);
+}
+function logout() {
+    localStorage.removeItem('droply_session_token');
+    location.reload();
+}
+// ==================== AUTH ====================
+async function login() {
+    const email = document.getElementById('loginEmail').value;
+    const pass = document.getElementById('loginPass').value;
+    const r = await fetch('/api/login', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({email: email, password: pass})
+    });
+    const d = await r.json();
+    if(d.success) {
+        localStorage.setItem('droply_session_token', d.session_token);
+        performLogin(d);
+    } else {
+        addLog(`FAILED: Login`);
+        alert(currentLang === 'en' ? 'Login failed!' : 'Logare eșuată!');
     }
+}
+function performLogin(data) {
+    isUserLogged = true;
+    currentUserData = data.user;
+    document.getElementById('authSection').classList.remove('active');
+    document.getElementById('sidebar').style.display = 'flex';
+    document.getElementById('home').classList.add('active');
+    document.getElementById('userDisplay').innerText = data.email.toUpperCase();
+    document.getElementById('idBadge').innerText = "ID: " + data.user.id;
+    document.getElementById('setVis').value = data.user.visibility;
+    document.getElementById('setSecret').value = data.user.secret_code;
+    document.getElementById('setNotif').value = data.user.notif_enabled;
+    if(data.user.sara_ai) {
+        saraEnabled = true;
+        document.getElementById('saraToggle').classList.add('active');
+        document.getElementById('saraToggle').querySelector('.lang').textContent =
+            currentLang === 'en' ? 'SARA AI: ON' : 'SARA AI: ACTIV';
     }
+    if(data.user.is_admin) {
+        document.getElementById('adminNavItem').style.display = 'block';
+        document.getElementById('adminBadgeDisplay').style.display = 'block';
+        addLog('ADMIN: Access granted');
     }
+    if(data.user.is_group_member) {
+        document.getElementById('groupMemberText').style.display = 'block';
+        document.getElementById('groupNonMemberText').style.display = 'none';
+    } else {
+        document.getElementById('groupMemberText').style.display = 'none';
+        document.getElementById('groupNonMemberText').style.display = 'block';
+        document.getElementById('groupInputSection').style.display = 'none';
     }
+    addLog(`SUCCESS: ${data.email}`);
+    addLog(`UID: ${data.user.id}`);
+    setInterval(() => {
+        refreshInbox();
+        refreshGroup();
+    }, 500);
+    refreshInbox();
+    loadContacts();
+    checkPing();
+}
+async function register() {
+    const r = await fetch('/api/register', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            username: document.getElementById('regUser').value,
+            password: document.getElementById('regPass').value
+        })
+    });
+    const d = await r.json();
+    if(d.success) {
+        alert(`${currentLang === 'en' ? 'Account created!' : 'Cont creat!'}\nEmail: ${d.email}\nID: ${d.uid}`);
+        addLog(`CREATED: ${d.uid}`);
+    } else {
+        alert(currentLang === 'en' ? 'Error!' : 'Eroare!');
+    }
+}
+// ==================== SARA AI ====================
+function toggleSara() {
+    saraEnabled = !saraEnabled;
+    const btn = document.getElementById('saraToggle');
+    if(saraEnabled) {
+        btn.classList.add('active');
+        btn.querySelector('.lang').textContent = currentLang === 'en' ? 'SARA AI: ON' : 'SARA AI: ACTIV';
+        addLog("SARA: Activated");
+        updateSettings();
+    } else {
+        btn.classList.remove('active');
+        btn.querySelector('.lang').textContent = currentLang === 'en' ? 'SARA AI: OFF' : 'SARA AI: OPRIT';
+        addLog("SARA: Deactivated");
+        updateSettings();
     }
+}
+// ==================== INBOX ====================
+async function refreshInbox() {
+    if(!isUserLogged) return;
+    try {
+        const r = await fetch('/api/get_inbox');
+        const list = await r.json();
+        if(list.length > lastMsgCount) {
+            if(lastMsgCount !== 0 && currentUserData?.notif_enabled) {
+                const lastMessage = list[list.length-1];
+                playNotificationSound();
+                showNotify(currentLang === 'en' ? 'NEW MESSAGE!' : 'MESAJ NOU!');
+                addLog(`INCOMING: ${lastMessage.from}`);
+                if('Notification' in window && Notification.permission === 'granted') {
+                    if (document.hidden) {
+                        sendNotificationToSW(lastMessage.from, lastMessage.content);
+                    } else {
+                        new Notification('DROPLY!', {
+                            body: `${currentLang === 'en' ? 'From' : 'De la'}: ${lastMessage.from}\n${lastMessage.content.substring(0, 50)}`,
+                            icon: '/logo.png',
+                            vibrate: [200, 100, 200]
+                        });
                     }
                 }
             }
+            lastMsgCount = list.length;
         }
+        const container = document.getElementById('inboxList');
+        container.innerHTML = list.length ? "" : `<span class="lang" data-en="Empty inbox." data-ro="Inbox gol.">Empty inbox.</span>`;
+        list.reverse().forEach(m => {
+            const div = document.createElement('div');
+            div.className = "msg-card";
+            div.innerHTML = `
+                <div class="msg-actions">
+                    <button class="btn-small btn-danger" onclick="deleteMessage(${m.id})">×</button>
+                </div>
+                <div style="cursor: pointer; font-weight: 600;" onclick="openMessageModal(${m.id}, '${m.from}', '${m.timestamp}', \`${m.content.replace(/`/g, '\\`').replace(/\n/g, ' ')}\`, '${m.file || ''}')">
+                    <small style="color: var(--gray-lighter); font-size: 12px;">${m.from} | ${m.timestamp}</small><br>
+                    <div style="margin-top: 8px;">${m.content.substring(0, 100)}${m.content.length > 100 ? '...' : ''}</div>
+                </div>
             `;
+            container.appendChild(div);
+        });
+        // Re-apply translations
+        switchLanguage(currentLang);
+    } catch (e) {
+        console.error("Refresh inbox error:", e);
     }
+}
+function openMessageModal(id, from, time, content, file) {
+    document.getElementById('modalFrom').innerHTML = `<span class="lang" data-en="FROM:" data-ro="DE LA:">FROM:</span> ${from}`;
+    document.getElementById('modalTime').innerText = time;
+    document.getElementById('modalContent').innerText = content;
+    if(file) {
+        document.getElementById('modalFile').innerHTML = `
+            <button onclick="window.open('/download/${file}', '_blank')" style="margin-top: 16px;">
+                <span class="lang" data-en="DOWNLOAD FILE" data-ro="DESCARCĂ FIȘIER">DOWNLOAD FILE</span>
+            </button>
+        `;
+    } else {
+        document.getElementById('modalFile').innerHTML = '';
     }
+    document.getElementById('messageModal').classList.add('active');
+    switchLanguage(currentLang);
+}
+function closeMessageModal() {
+    document.getElementById('messageModal').classList.remove('active');
+}
+async function deleteMessage(msgId) {
+    if(!confirm(currentLang === 'en' ? 'Delete this message?' : 'Ștergi acest mesaj?')) return;
+    await fetch('/api/delete_message', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({message_id: msgId})
+    });
+    showNotify(currentLang === 'en' ? 'DELETED' : 'ȘTERS');
+    refreshInbox();
+}
+// ==================== SEND ====================
+async function sendMail() {
+    const fd = new FormData();
+    const dest = document.getElementById('targetDest').value;
+    fd.append('destinatar', dest);
+    fd.append('mesaj', document.getElementById('targetMsg').value);
+    const file = document.getElementById('targetFile').files[0];
+    if(file) fd.append('fisier', file);
+    addLog(`SENDING to ${dest}...`);
+    const r = await fetch('/api/send_mail', { method: 'POST', body: fd });
+    const d = await r.json();
+    if(d.success) {
+        showNotify(currentLang === 'en' ? 'SENT!' : 'TRIMIS!');
+        document.getElementById('targetMsg').value = "";
+        document.getElementById('targetFile').value = "";
+        addLog(`SUCCESS: Sent to ${dest}`);
+    } else {
+        addLog(`ERROR: ${d.error}`);
+        alert(currentLang === 'en' ? 'Error!' : 'Eroare!');
     }
+}
+function reportBug() {
+    const now = new Date();
+    const dateStr = `${now.getDate()}/${now.getMonth()+1}/${now.getFullYear()}`;
+    const timeStr = `${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`;
+    document.getElementById('targetDest').value = 'admin001';
+    document.getElementById('targetMsg').value = `Bug Report: [${dateStr} | ${timeStr}]\n\n`;
+    showSection('send');
+    showNotify(currentLang === 'en' ? 'FILL REPORT' : 'COMPLETEAZĂ');
+    addLog("BUG REPORT: Template loaded");
+}
+// ==================== GROUP ====================
+async function sendGroup() {
+    const msg = document.getElementById('groupMsgInput').value;
+    if(!msg) return;
+    const r = await fetch('/api/group/send', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({content: msg})
+    });
+    const d = await r.json();
+    if(d.success) {
+        document.getElementById('groupMsgInput').value = "";
+        refreshGroup();
+    } else {
+        alert(currentLang === 'en' ? 'No access!' : 'Fără acces!');
     }
+}
+async function refreshGroup() {
+    if(!isUserLogged) return;
+    try {
+        const r = await fetch('/api/group/get');
+        const msgs = await r.json();
+        const box = document.getElementById('groupList');
+        box.innerHTML = msgs.map(m => `
+            <div class="group-msg">
+                <div style="font-size: 12px; color: var(--gray-lighter); font-weight: 600; margin-bottom: 8px;">
+                    ${m.user} <span style="color: var(--gray-light); font-weight: 500;">[${m.timestamp}]</span>
+                    ${currentUserData?.is_admin ?
+                        `<button class="btn-small btn-danger" onclick="deleteGroupMessage(${m.id})" style="float:right;">×</button>`
+                        : ''}
                 </div>
+                <div style="font-weight: 500;">${m.content}</div>
+            </div>
+        `).join('');
+    } catch (e) {}
+}
+async function deleteGroupMessage(msgId) {
+    if(!confirm(currentLang === 'en' ? 'Delete?' : 'Ștergi?')) return;
+    await fetch('/api/group/delete', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({message_id: msgId})
+    });
+    showNotify(currentLang === 'en' ? 'DELETED' : 'ȘTERS');
+    refreshGroup();
+}
+async function requestGroupInvite() {
+    const r = await fetch('/api/group/request_invite', { method: 'POST' });
+    const d = await r.json();
+    if(d.success) {
+        showNotify(currentLang === 'en' ? 'REQUEST SENT!' : 'CERERE TRIMISĂ!');
+        addLog("GROUP: Invitation requested");
+    } else {
+        alert(d.error);
     }
+}
+// ==================== CONTACTS ====================
+function saveContact() {
+    const name = document.getElementById('cName').value;
+    const id = document.getElementById('cId').value;
+    if(!name || !id) return;
+    let contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
+    contacts.push({name, id});
+    localStorage.setItem('droply_contacts', JSON.stringify(contacts));
+    document.getElementById('cName').value = "";
+    document.getElementById('cId').value = "";
+    loadContacts();
+    showNotify(currentLang === 'en' ? 'SAVED' : 'SALVAT');
+    addLog(`CONTACT: ${name}`);
+}
+function loadContacts() {
+    const contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
+    const container = document.getElementById('contactList');
+    container.innerHTML = "";
+    contacts.forEach((c, index) => {
+        const div = document.createElement('div');
+        div.className = "item-list";
+        div.innerHTML = `
+            <div class="item-info"><strong>${c.name}</strong><br><small>${c.id}</small></div>
+            <div>
+                <button class="btn-small" onclick="useContact('${c.id}')">USE</button>
+                <button class="btn-small btn-danger" onclick="delContact(${index})">×</button>
+            </div>
+        `;
+        container.appendChild(div);
+    });
+}
+function useContact(id) {
+    document.getElementById('targetDest').value = id;
+    showSection('send');
+}
+function delContact(i) {
+    let contacts = JSON.parse(localStorage.getItem('droply_contacts') || '[]');
+    contacts.splice(i, 1);
+    localStorage.setItem('droply_contacts', JSON.stringify(contacts));
+    loadContacts();
+    addLog(`CONTACT: Deleted`);
+}
+// ==================== SETTINGS ====================
+async function updateSettings() {
+    const notif = parseInt(document.getElementById('setNotif').value);
+    await fetch('/api/update_settings', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({
+            visibility: document.getElementById('setVis').value,
+            secret_code: document.getElementById('setSecret').value,
+            sara_ai: saraEnabled,
+            notif_enabled: notif
+        })
+    });
+    if(currentUserData) {
+        currentUserData.notif_enabled = notif;
     }
+    showNotify(currentLang === 'en' ? 'SAVED' : 'SALVAT');
+    addLog(`SETTINGS: Updated`);
+}
+async function changePassword() {
+    const oldPass = document.getElementById('oldPass').value;
+    const newPass = document.getElementById('newPass').value;
+    if(!oldPass || !newPass) {
+        alert(currentLang === 'en' ? 'Fill all fields!' : 'Completează toate câmpurile!');
+        return;
     }
+    const r = await fetch('/api/change_password', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({old_password: oldPass, new_password: newPass})
+    });
+    const d = await r.json();
+    if(d.success) {
+        showNotify(currentLang === 'en' ? 'PASSWORD CHANGED!' : 'PAROLĂ SCHIMBATĂ!');
+        document.getElementById('oldPass').value = "";
+        document.getElementById('newPass').value = "";
+        addLog("SECURITY: Password changed");
+    } else {
+        alert(currentLang === 'en' ? 'Wrong password!' : 'Parolă greșită!');
+    }
+}
+async function checkPing() {
+    try {
+        const start = Date.now();
+        await fetch('/api/server_ping');
+        const ping = Date.now() - start;
+        document.getElementById('serverPing').innerText = `${currentLang === 'en' ? 'Online' : 'Online'} - ${ping}ms`;
+        addLog(`PING: ${ping}ms`);
+    } catch(e) {
+        document.getElementById('serverPing').innerText = currentLang === 'en' ? 'Offline' : 'Offline';
+        addLog('PING: Server offline');
     }
+}
+// ==================== ADMIN ====================
+async function loadAdminData() {
+    if(!currentUserData?.is_admin) return;
+    const rUsers = await fetch('/api/admin/get_users');
+    const dUsers = await rUsers.json();
+    if(dUsers.success) {
+        const container = document.getElementById('adminUsersList');
+        container.innerHTML = '';
+        dUsers.users.forEach(u => {
+            const div = document.createElement('div');
+            div.className = 'item-list';
+            div.innerHTML = `
+                <div class="item-info">
+                    <strong>${u.email}</strong><br>
+                    <small>ID: ${u.id} | IP: ${u.ip}</small>
+                </div>
+            `;
+            container.appendChild(div);
         });
+        addLog(`ADMIN: ${dUsers.users.length} users`);
     }
+    const rInvites = await fetch('/api/admin/get_invitations');
+    const dInvites = await rInvites.json();
+    if(dInvites.success) {
+        const container = document.getElementById('adminInvitesList');
+        container.innerHTML = '';
+        if(dInvites.invitations.length === 0) {
+            container.innerHTML = '<p style="color:var(--gray-light); font-size:13px; font-weight:500;">No pending requests</p>';
+        } else {
+            dInvites.invitations.forEach(inv => {
                 const div = document.createElement('div');
                 div.className = 'item-list';
                 div.innerHTML = `
                     <div class="item-info">
+                        <strong>${inv.user_email}</strong><br>
+                        <small>${inv.timestamp}</small>
                     </div>
+                    <button class="btn-small" onclick="approveInvite(${inv.id})">✓</button>
                 `;
                 container.appendChild(div);
             });
         }
     }
+}
+async function approveInvite(inviteId) {
+    const r = await fetch('/api/admin/approve_invitation', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({invitation_id: inviteId})
+    });
+    const d = await r.json();
+    if(d.success) {
+        showNotify(currentLang === 'en' ? 'APPROVED!' : 'APROBAT!');
+        loadAdminData();
+        addLog("ADMIN: Invitation approved");
     }
+}
+async function triggerMaintenance() {
+    if(!confirm(currentLang === 'en' ? 'Server will shut down in 60s!' : 'Serverul se închide în 60s!')) {
+        return;
+    }
+    const r = await fetch('/api/admin/broadcast_warning', { method: 'POST' });
+    const d = await r.json();
+    if(d.success) {
+        showNotify('⚠ MAINTENANCE!');
+        addLog("ADMIN: Maintenance activated");
+        document.getElementById('warningBanner').style.display = 'block';
+        let seconds = 60;
+        const countdown = setInterval(() => {
+            seconds--;
+            document.getElementById('warningBanner').innerText =
+                `⚠ ${currentLang === 'en' ? 'SHUTTING DOWN IN' : 'ÎNCHIDERE ÎN'} ${seconds}s`;
+            if(seconds <= 0) {
+                clearInterval(countdown);
                 document.getElementById('warningBanner').innerText =
+                    currentLang === 'en' ? '🔴 SERVER OFFLINE' : '🔴 SERVER OFFLINE';
             }
+        }, 1000);
     }
+}
+async function checkShutdown() {
+    try {
+        const r = await fetch('/api/check_shutdown');
+        const d = await r.json();
+        if(d.shutdown_scheduled && !document.getElementById('warningBanner').style.display) {
+            document.getElementById('warningBanner').style.display = 'block';
+            addLog("WARNING: Shutdown scheduled!");
+        }
+    } catch(e) {}
+}
 </script>
 </body>