Christian Nennemann
2d56824834
Create sdks/web/ with a vanilla TypeScript web client: - IndexedDB local store for conversations, messages, and identity - WebSocket transport connecting to the server bridge - Service Worker with cache-first strategy for offline support - PWA manifest for installable web app - Dark-themed responsive UI with sidebar, messages, and input bar - Connection status badge and MLS epoch indicator in header - Unread message count badges on conversations
55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="theme-color" content="#58a6ff" />
|
|
<title>quicproquo</title>
|
|
<link rel="manifest" href="manifest.json" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Login screen -->
|
|
<div id="login-screen" class="screen">
|
|
<h1>quicproquo</h1>
|
|
<p class="subtitle">End-to-end encrypted messenger</p>
|
|
<form id="login-form">
|
|
<input id="server-input" type="text" placeholder="Server (ws://host:port)" value="ws://127.0.0.1:9000" />
|
|
<input id="username-input" type="text" placeholder="Username" autocomplete="username" />
|
|
<input id="password-input" type="password" placeholder="Password" autocomplete="current-password" />
|
|
<button type="submit" id="login-btn">Connect & Login</button>
|
|
<button type="button" id="register-btn">Register</button>
|
|
</form>
|
|
<p id="login-error" class="error" hidden></p>
|
|
</div>
|
|
|
|
<!-- Chat screen -->
|
|
<div id="chat-screen" class="screen" hidden>
|
|
<aside id="sidebar">
|
|
<div id="sidebar-header">
|
|
<span id="user-display"></span>
|
|
<button id="logout-btn" title="Logout">Logout</button>
|
|
</div>
|
|
<ul id="conversation-list"></ul>
|
|
<button id="new-dm-btn">+ New DM</button>
|
|
</aside>
|
|
<main id="chat-main">
|
|
<header id="chat-header">
|
|
<span id="chat-title">Select a conversation</span>
|
|
<span id="epoch-badge" title="MLS epoch">epoch --</span>
|
|
<span id="conn-badge" class="offline">Offline</span>
|
|
</header>
|
|
<div id="messages"></div>
|
|
<form id="send-form">
|
|
<input id="msg-input" type="text" placeholder="Type a message..." autocomplete="off" />
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|