108 lines
6.5 KiB
HTML
108 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ByteChat</title>
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
<meta http-equiv="X-Frame-Options" content="DENY">
|
|
<link rel="stylesheet" href="./stylesheet.css">
|
|
<link rel="icon" type="image/png" href="./assets/favicon.ico">
|
|
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
|
|
<script src="./main.js"></script>
|
|
<script src="./frontend.js"></script>
|
|
</head>
|
|
<body style="overflow-y: auto;">
|
|
<div class="chat-container">
|
|
<div class="chat-header" style="padding: 0.75rem 1rem;">
|
|
<div class="header-content" style="flex-wrap: wrap; gap: 0.5rem;">
|
|
<div class="logo" style="font-size: clamp(1.25rem, 4vw, 1.5rem);">
|
|
<a href="/" style="text-decoration: none; font-weight: inherit; font-style: inherit; color: inherit;">
|
|
ByteChat
|
|
</a>
|
|
</div>
|
|
<div class="encryption-badge" id="encryptionBadge" style="font-size: clamp(0.75rem, 3vw, 0.85rem); padding: 0.4rem 0.8rem;">
|
|
E2E Encrypted
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="welcomeScreen" class="welcome-screen" style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; flex: 1; min-height: 0;">
|
|
<h1 class="welcome-title" style="font-size: clamp(1.75rem, 8vw, 3rem); margin-bottom: 0.75rem;">ByteChat</h1>
|
|
<div class="room-section" style="width: 100%; max-width: 500px;">
|
|
<div class="room-input-container" style="flex-direction: column; gap: 0.75rem; width: 100%;">
|
|
<input type="text"
|
|
class="room-input"
|
|
id="roomInput"
|
|
placeholder="Enter room ID"
|
|
maxlength="32"
|
|
pattern="[a-zA-Z0-9\-_]+"
|
|
title="Only letters, numbers, hyphens and underscores allowed"
|
|
style="width: 100%; min-width: unset; font-size: clamp(0.9rem, 4vw, 1rem);">
|
|
<input type="password"
|
|
class="room-input"
|
|
id="roomPasswordInput"
|
|
placeholder="Optional: Channel Password"
|
|
maxlength="128"
|
|
autocomplete="new-password"
|
|
style="width: 100%; min-width: unset; max-width: none; font-size: clamp(0.9rem, 4vw, 1rem); overflow: hidden; text-overflow: ellipsis;">
|
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
<button class="btn" id="joinRoomBtn" aria-label="Join existing room" style="flex: 1; min-width: 120px; font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1rem;">Join Room</button>
|
|
<button class="btn btn-secondary" id="createRoomBtn" aria-label="Create new room" style="flex: 1; min-width: 120px; font-size: clamp(0.85rem, 3.5vw, 1rem); padding: 0.6rem 1rem;">Create New Room</button>
|
|
</div>
|
|
</div>
|
|
<div class="status-text" id="statusText" style="font-size: clamp(0.8rem, 3vw, 0.9rem);">
|
|
<div class="loading-message">
|
|
<div class="loading-spinner"></div>
|
|
<span aria-live="polite">Initializing encryption keys...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Screen -->
|
|
<div id="chatScreen" style="display: none;" class="chat-screen">
|
|
<div class="room-info" id="roomInfo" style="display: none; padding: 0.6rem 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
|
|
<div class="room-details" style="min-width: auto; flex: 1;">
|
|
<span style="font-size: clamp(0.75rem, 3vw, 0.85rem);">Room: <strong id="currentRoomId"></strong></span>
|
|
<span id="messageCounter" style="font-size: clamp(0.75rem, 3vw, 0.85rem);">Messages: 0/256</span>
|
|
</div>
|
|
<div class="room-details" style="min-width: auto; flex: 1;">
|
|
<span id="userCounter" style="font-size: clamp(0.75rem, 3vw, 0.85rem);">Users: 0</span>
|
|
<span id="encryptionStatus" style="font-size: clamp(0.75rem, 3vw, 0.85rem);">🔐 Encrypted</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- wrapper for scroll -->
|
|
<div class="messages-wrapper" id="messagesWrapper" style="padding: 0.75rem; padding-bottom: 80px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;">
|
|
<div class="messages-container" id="messagesContainer" role="log" aria-live="polite" aria-label="Chat messages">
|
|
<!-- Messages will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-section" id="inputSection" style="display: none; padding: 0.6rem 0.75rem; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); border-top: 1px solid #333; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);">
|
|
<div class="input-container" style="gap: 0.4rem; max-width: 100%;">
|
|
<label for="messageInput" class="visually-hidden">Type your message</label>
|
|
<textarea
|
|
class="message-input"
|
|
id="messageInput"
|
|
placeholder="Send a Message…"
|
|
rows="1"
|
|
disabled
|
|
maxlength="4000"
|
|
aria-label="Type your message"
|
|
style="font-size: clamp(0.9rem, 4vw, 1rem); padding: 0.6rem 0.8rem; border-radius: 10px; resize: none; max-height: 120px; min-height: 44px; font-size: 16px; -webkit-appearance: none;"
|
|
autocomplete="off"
|
|
autocapitalize="sentences"
|
|
spellcheck="true"
|
|
></textarea>
|
|
<button class="send-button" id="sendButton" disabled aria-label="Send message" style="width: 40px; height: 40px; flex-shrink: 0; -webkit-tap-highlight-color: transparent;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="m22 2-7 20-4-9-9-4 20-7z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |