| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NoahsChat</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
|
|
| |
| <div id="banned-screen"> |
| <div class="banned-icon">🚫</div> |
| <div class="banned-title">GEBANNT</div> |
| <div class="banned-sub" id="banned-sub">Du wurdest permanent von NoahsChat gebannt.</div> |
| </div> |
|
|
| |
| <div id="auth-screen"> |
| <div class="auth-box"> |
| <div class="auth-logo">Noahs<span>Chat</span></div> |
| <div class="auth-tagline">by NoahsAPP · v2.0</div> |
|
|
| <div class="auth-tabs"> |
| <button class="auth-tab active" onclick="switchTab('login')">Login</button> |
| <button class="auth-tab" onclick="switchTab('register')">Registrieren</button> |
| </div> |
|
|
| |
| <div id="tab-login"> |
| <div class="auth-field"> |
| <label>Username</label> |
| <input type="text" id="login-user" placeholder="dein username" autocomplete="off" onkeydown="if(event.key==='Enter')doLogin()"> |
| </div> |
| <div class="auth-field"> |
| <label>Passwort</label> |
| <input type="password" id="login-pass" placeholder="••••••••" onkeydown="if(event.key==='Enter')doLogin()"> |
| </div> |
| <div class="captcha-box"> |
| <div> |
| <div style="font-size:.6rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px">Anti-Bot</div> |
| <div class="captcha-question" id="login-q">? + ? = ?</div> |
| </div> |
| <input class="captcha-input" type="number" id="login-a" placeholder="?" onkeydown="if(event.key==='Enter')doLogin()"> |
| <button class="captcha-refresh" onclick="refreshCaptcha('login')" title="Neu">↺</button> |
| </div> |
| <button class="auth-btn" onclick="doLogin()">Einloggen ▶</button> |
| </div> |
|
|
| |
| <div id="tab-register" style="display:none"> |
| <div class="auth-field"> |
| <label>Username</label> |
| <input type="text" id="reg-user" placeholder="wähle einen username" autocomplete="off"> |
| </div> |
| <div class="auth-field"> |
| <label>Passwort</label> |
| <input type="password" id="reg-pass" placeholder="mindestens 4 Zeichen"> |
| </div> |
| <div class="auth-field"> |
| <label>Passwort bestätigen</label> |
| <input type="password" id="reg-pass2" placeholder="nochmal eingeben" onkeydown="if(event.key==='Enter')doRegister()"> |
| </div> |
| <div class="captcha-box"> |
| <div> |
| <div style="font-size:.6rem;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;margin-bottom:4px">Anti-Bot</div> |
| <div class="captcha-question" id="reg-q">? + ? = ?</div> |
| </div> |
| <input class="captcha-input" type="number" id="reg-a" placeholder="?" onkeydown="if(event.key==='Enter')doRegister()"> |
| <button class="captcha-refresh" onclick="refreshCaptcha('reg')" title="Neu">↺</button> |
| </div> |
| <button class="auth-btn" onclick="doRegister()">Account erstellen ▶</button> |
| </div> |
|
|
| <div class="auth-error" id="auth-error"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="app"> |
|
|
| |
| <div class="topbar"> |
| <a href="#" class="topbar-logo">Noahs<span>APP</span></a> |
| <div class="topbar-sep"></div> |
| <div class="topbar-channel"> |
| <span id="topbar-channel-name"># allgemein</span> |
| </div> |
| <div class="topbar-actions"> |
| <button class="icon-btn" onclick="openCreateTicket()" title="Ticket erstellen">🎫</button> |
| <button class="icon-btn" onclick="openSettings()" title="Einstellungen">⚙️</button> |
| <div class="topbar-sep"></div> |
| <div class="topbar-user"> |
| <div class="user-avatar-sm" id="topbar-avatar" onclick="openSettings()"></div> |
| <span id="topbar-username" style="font-weight:700"></span> |
| <span class="topbar-role-badge" id="topbar-role-badge"></span> |
| <button class="logout-btn" onclick="doLogout()">Logout</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="sidebar"> |
| <div class="sidebar-scroll"> |
|
|
| |
| <div class="sidebar-section"> |
| Channels |
| <span id="online-count" style="color:var(--green);font-family:'Orbitron',monospace">0</span> |
| </div> |
| <div id="channel-list"></div> |
|
|
| <div class="sidebar-divider"></div> |
|
|
| |
| <div class="sidebar-section">Direktnachrichten</div> |
| <div id="dm-list"></div> |
|
|
| <div class="sidebar-divider"></div> |
|
|
| |
| <div class="sidebar-section">Mitglieder</div> |
| <div id="user-list"></div> |
|
|
| </div> |
|
|
| |
| <div class="voice-panel" id="voice-panel"> |
| <div class="voice-status-bar"> |
| <div class="voice-active-dot"></div> |
| <div class="voice-name" id="voice-channel-name">🔊 Voice</div> |
| <div class="voice-controls"> |
| <button class="voice-ctrl" id="voice-mute-btn" onclick="toggleMute()">🎙 Stumm</button> |
| <button class="voice-ctrl" id="voice-deaf-btn" onclick="toggleDeafen()">🔔 Taub</button> |
| <button class="voice-ctrl" style="color:var(--danger)" onclick="leaveVoice()">✕</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="chat-area"> |
| <div class="chat-header"> |
| <div class="chat-header-info"> |
| <div class="chat-header-title" id="chat-title">💬 allgemein</div> |
| <div class="chat-header-sub" id="chat-sub">Allgemeiner Chat für alle</div> |
| </div> |
| <div class="chat-header-actions"> |
| <button class="icon-btn" id="search-btn" title="Suchen" onclick="openSearchModal()">🔍</button> |
| <button class="icon-btn" id="pins-btn" title="Angepinnte Nachrichten" onclick="openPinsModal()">📌</button> |
| </div> |
| </div> |
|
|
| <div class="messages" id="messages"> |
| <div class="empty-chat"> |
| <div class="empty-chat-icon">💬</div> |
| <p>Noch keine Nachrichten. Schreib was!</p> |
| </div> |
| </div> |
|
|
| <div id="timeout-bar" class="timeout-bar" style="display:none"> |
| ⏱ Du bist stummgeschaltet bis <span id="timeout-until"></span> |
| </div> |
|
|
| <div class="input-area"> |
| <textarea class="msg-input" id="msg-input" placeholder="Nachricht schreiben..." |
| rows="1" onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea> |
| <button class="send-btn" id="send-btn" onclick="sendMessage()">SEND</button> |
| </div> |
| </div> |
|
|
| </div> |
|
|
| |
| <div id="context-menu" style="display:none"></div> |
|
|
| |
| <div id="modal-container"></div> |
|
|
| <script> |
| |
| window.DEFAULT_CHANNELS = [ |
| { id: 'ankuendigungen', name: 'ankündigungen', icon: '📢', sub: 'Wichtige Ankündigungen', adminOnly: true, category: 'info' }, |
| { id: 'regeln', name: 'regeln', icon: '📋', sub: 'Serverregeln', readOnly: true, category: 'info' }, |
| { id: 'allgemein', name: 'allgemein', icon: '💬', sub: 'Allgemeiner Chat für alle', category: 'chat' }, |
| { id: 'gaming', name: 'gaming', icon: '🎮', sub: 'Alles rund ums Gaming', category: 'chat' }, |
| { id: 'roblox', name: 'roblox', icon: '🧱', sub: 'Roblox & NoahsHacks', category: 'chat' }, |
| { id: 'musik', name: 'musik', icon: '🎵', sub: 'Musik & Playlists', category: 'chat' }, |
| { id: 'memes', name: 'memes', icon: '😂', sub: 'Memes & Witze', category: 'fun' }, |
| { id: 'off-topic', name: 'off-topic', icon: '💭', sub: 'Alles andere', category: 'fun' }, |
| { id: 'kunst', name: 'kunst', icon: '🎨', sub: 'Kreative Werke', category: 'fun' }, |
| { id: 'technik', name: 'technik', icon: '💻', sub: 'Tech & Coding', category: 'fun' }, |
| { id: 'voicetext', name: 'voice-lounge', icon: '🔊', sub: 'Begleitchat für Voice', category: 'chat' }, |
| { id: 'moderators', name: 'mod-logs', icon: '🛡', sub: 'Moderationslog', modOnly: true, category: 'staff' }, |
| { id: 'admin', name: 'admin-bereich', icon: '⚙️', sub: 'Nur für Admins', adminOnly: true, category: 'staff' } |
| ]; |
| |
| window.DEFAULT_AUTOMOD = { |
| enabled: true, |
| maxMsgLength: 800, |
| spamThreshold: 5, |
| spamWindow: 10000, |
| bannedWords: ['scheiß', 'hurensohn', 'wichser', 'fick', 'arschloch'], |
| linkFilter: false, |
| capsFilter: true, |
| capsThreshold: 0.7 |
| }; |
| </script> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
