83 lines
2.6 KiB
HTML
83 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Transient.chat - Active Rooms</title>
|
|
<link rel="stylesheet" href="/assets/css/styles.css" />
|
|
<link rel="stylesheet" href="/assets/css/server_list.css" />
|
|
<link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
|
|
</head>
|
|
<body>
|
|
<div class="title-row">
|
|
<a href="index.html">
|
|
<img src="/assets/images/transientchat-blue.png" alt="Transient.chat" />
|
|
</a>
|
|
<h1>Server Browser</h1>
|
|
</div>
|
|
|
|
<div id="user-info"></div>
|
|
|
|
<div id="server-browser-container">
|
|
<div id="stats-badge" class="stats-badge">
|
|
Loading active rooms...
|
|
</div>
|
|
|
|
<h2>Active Rooms</h2>
|
|
<div id="active-rooms-container"></div>
|
|
|
|
<div class="form-card">
|
|
<h2>Create or Join On-Demand Room</h2>
|
|
<p class="form-subtitle">
|
|
All rooms are private, password-protected, and end-to-end encrypted.
|
|
</p>
|
|
<form id="create-room-form">
|
|
<input
|
|
type="text"
|
|
id="new-room-name"
|
|
placeholder="Room Name"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
<input
|
|
type="password"
|
|
id="new-room-password"
|
|
placeholder="Room Password (required for encryption)"
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
<label class="checkbox-row">
|
|
<input type="checkbox" id="new-room-watchparty" />
|
|
<span>Enable Watch Party mode immediately</span>
|
|
</label>
|
|
<button type="submit" id="create-room-btn">
|
|
Enter Room
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Prompt Modal for Joining an Active Room -->
|
|
<div id="join-modal" class="modal-overlay hidden">
|
|
<div class="modal-box">
|
|
<h3 id="modal-room-title">🔒 Enter Room Password</h3>
|
|
<p>This room is private and encrypted. Enter the password to join:</p>
|
|
<form id="join-modal-form">
|
|
<input
|
|
type="password"
|
|
id="modal-room-password"
|
|
placeholder="Password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
<div class="modal-buttons">
|
|
<button type="submit" id="modal-join-btn">Join</button>
|
|
<button type="button" class="cancel-btn" id="modal-cancel-btn">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/server_list.js"></script>
|
|
</body>
|
|
</html>
|