<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAGI Chat - Multi-User Chat Demo</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- Login Screen -->
<div id="login-screen" class="screen">
<div class="login-container">
<div class="login-header">
<h1>PAGI Chat</h1>
<p class="subtitle">Multi-User Chat Demo</p>
</div>
<form id="login-form">
<div class="form-group">
<label for="username">Choose a username</label>
<input type="text" id="username" name="username"
placeholder="Enter your name..."
maxlength="20"
autocomplete="off"
required>
</div>
<button type="submit" class="btn btn-primary">Join Chat</button>
</form>
<div class="pagi-info">
<p>Powered by <strong>PAGI</strong></p>
<p class="small">Perl Asynchronous Gateway Interface</p>
</div>
</div>
</div>
<!-- Main Chat Screen -->
<div id="chat-screen" class="screen hidden">
<div class="chat-layout">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<h2>PAGI Chat</h2>
<button id="theme-toggle" class="btn-icon" title="Toggle theme">
<span class="icon-sun">☀</span>
<span class="icon-moon hidden">☾</span>
</button>
</div>
<!-- Connection Status -->
<div id="connection-status" class="connection-status">
<span class="status-dot"></span>
<span class="status-text">Connecting...</span>
</div>
<!-- User Info -->
<div class="user-info">
<span class="user-avatar" id="user-avatar">?</span>
<span class="user-name" id="display-name">Loading...</span>
</div>
<!-- Rooms List -->
<div class="sidebar-section">
<div class="section-header">
<h3>Rooms</h3>
<button id="create-room-btn" class="btn-icon" title="Create room">+</button>
</div>
<ul id="rooms-list" class="nav-list">
<!-- Rooms populated by JS -->
</ul>
</div>
<!-- Users in Room -->
<div class="sidebar-section">
<div class="section-header">
<h3>Users</h3>
<span id="user-count" class="badge">0</span>
</div>
<ul id="users-list" class="nav-list">
<!-- Users populated by JS -->
</ul>
</div>
<!-- Server Stats (SSE) -->
<div class="sidebar-section stats-section">
<h3>Server Stats</h3>
<div class="stats-grid">
<div class="stat">
<span class="stat-value" id="stat-users">0</span>
<span class="stat-label">Online</span>
</div>
<div class="stat">
<span class="stat-value" id="stat-rooms">0</span>
<span class="stat-label">Rooms</span>
</div>
<div class="stat">
<span class="stat-value" id="stat-uptime">0s</span>
<span class="stat-label">Uptime</span>
</div>
</div>
</div>
</aside>
<!-- Main Chat Area -->
<main class="chat-main">
<!-- Room Header -->
<header class="chat-header">
<div class="room-info">
<h2 id="current-room-name">#general</h2>
<span id="typing-indicator" class="typing-indicator hidden"></span>
</div>
<div class="header-actions">
<button id="leave-room-btn" class="btn btn-secondary hidden">Leave Room</button>
</div>
</header>
<!-- Messages Area -->
<div id="messages-container" class="messages-container">
<div id="messages" class="messages">
<!-- Messages populated by JS -->
</div>
</div>
<!-- Message Input -->
<div class="message-input-container">
<form id="message-form">
<input type="text"
id="message-input"
placeholder="Type a message... (try /help for commands)"
autocomplete="off"
maxlength="1000">
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</main>
</div>
</div>
<!-- Create Room Modal -->
<div id="create-room-modal" class="modal hidden">
<div class="modal-backdrop"></div>
<div class="modal-content">
<h3>Create New Room</h3>
<form id="create-room-form">
<div class="form-group">
<label for="room-name">Room Name</label>
<input type="text" id="room-name" name="room-name"
placeholder="Enter room name..."
maxlength="30"
pattern="[a-zA-Z0-9_-]+"
required>
</div>
<div class="modal-actions">
<button type="button" class="btn btn-secondary" id="cancel-create-room">Cancel</button>
<button type="submit" class="btn btn-primary">Create</button>
</div>
</form>
</div>
</div>
<!-- Toast Notifications -->
<div id="toast-container" class="toast-container"></div>
<script src="/js/app.js"></script>
</body>
</html>