111 lines
5.4 KiB
HTML
111 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self';">
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
<meta name="referrer" content="strict-origin-when-cross-origin">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BenzCloud Chat</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2338bdf8'><path d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/></svg>">
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<span class="logo-icon">💬</span>
|
|
<span class="brand-title">BenzCloud Chat</span>
|
|
<span class="brand-badge" data-i18n="badge_realtime">Echtzeit Mesh-Chat</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="user-select-box">
|
|
<label for="usernameInput" data-i18n="label_user">Name:</label>
|
|
<input type="text" id="usernameInput" value="admin" maxlength="24" title="Benutzername">
|
|
</div>
|
|
<div class="lang-switcher">
|
|
<button id="btnDe" class="btn-lang active">DE</button>
|
|
<button id="btnEn" class="btn-lang">EN</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="chat-container">
|
|
<!-- Channel Sidebar -->
|
|
<aside class="sidebar-channels">
|
|
<div class="sidebar-section-header">
|
|
<span data-i18n="title_channels">KANÄLE</span>
|
|
<button id="btnNewChannel" class="btn-add" title="Neuen Kanal anlegen">+</button>
|
|
</div>
|
|
<div id="channelList" class="channel-list">
|
|
<!-- Channels injected dynamically -->
|
|
</div>
|
|
|
|
<div class="sidebar-section-header" style="margin-top: 1.5rem;">
|
|
<span data-i18n="title_online">ONLINE</span>
|
|
<span id="onlineCount" class="badge">1</span>
|
|
</div>
|
|
<div id="onlineUsersList" class="online-users-list">
|
|
<!-- Online users injected dynamically -->
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Chat Area -->
|
|
<main class="chat-main">
|
|
<div class="chat-header">
|
|
<div class="channel-info">
|
|
<h2 id="channelHeaderTitle">#general</h2>
|
|
<p id="channelHeaderTopic" class="channel-topic">Team-Diskussionen und Ankündigungen</p>
|
|
</div>
|
|
<div class="connection-status" id="wsStatus">
|
|
<span class="status-dot"></span>
|
|
<span class="status-label" data-i18n="status_connected">Verbunden</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="messageStream" class="message-stream">
|
|
<!-- Messages rendered here -->
|
|
</div>
|
|
|
|
<form id="chatForm" class="chat-input-container">
|
|
<input type="text" id="chatInput" placeholder="Nachricht an #general schreiben..." autocomplete="off" required>
|
|
<button type="submit" id="btnSend" class="btn btn-primary">
|
|
<span>➤</span>
|
|
<span data-i18n="btn_send">Senden</span>
|
|
</button>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Create Channel Modal -->
|
|
<div id="channelModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="modal_new_channel_title">Neuen Kanal erstellen</h3>
|
|
<button id="btnCloseModal" class="btn-close">×</button>
|
|
</div>
|
|
<form id="newChannelForm" class="modal-body">
|
|
<div class="form-group">
|
|
<label for="newChannelName" data-i18n="label_channel_name">Kanalname:</label>
|
|
<div class="input-with-prefix">
|
|
<span class="prefix">#</span>
|
|
<input type="text" id="newChannelName" required placeholder="z. B. marketing" pattern="[a-zA-Z0-9_-]+">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newChannelTopic" data-i18n="label_channel_topic">Thema / Beschreibung:</label>
|
|
<input type="text" id="newChannelTopic" placeholder="Worum geht es in diesem Kanal?">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btnCancelChannel" class="btn btn-secondary" data-i18n="btn_cancel">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary" data-i18n="btn_create">Erstellen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
<section class="cta-section" style="margin: 3rem 0; text-align: center; font-family: sans-serif;"><div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 12px; padding: 2rem; display: inline-block; max-width: 90%;"><h3 style="margin-top: 0; color: #f59e0b;">Zentrale App-Zentrale</h3><p style="margin-bottom: 1.5rem; opacity: 0.8;">Alle meine Apps und Projekte an einem Ort.</p><a class="btn-benzstore" href="https://benzjeremy.github.io/benzstore/" target="_blank" rel="noopener noreferrer" style="background: #f59e0b; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">🚀 BenzStore entdecken</a></div></section>
|
|
<div class="routing-notice" style="text-align: center; padding: 1rem; font-size: 0.75rem; opacity: 0.5; font-family: monospace;">2-Tier Routing: /benzcloud-plugin-chat/ (Landing) | /benzcloud-plugin-chat/app/ (Web-App)</div>
|
|
</body>
|
|
</html>
|