65 lines
2.0 KiB
HTML
65 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.0">
|
|
<title>LinkUp</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<script type="module" src="./app.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div>LinkUp</div>
|
|
<div class="window-controls">
|
|
<button id="minimize-button">-</button>
|
|
<button id="maximize-button">+</button>
|
|
<button id="close-button">x</button>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div id="register" class="hidden">
|
|
<form id="register-form">
|
|
<input required id="reg-username" type="text" placeholder="Username" />
|
|
<input type="file" id="avatar-file" accept="image/*" style="display: none;" />
|
|
<button type="button" id="select-avatar">Select Avatar</button>
|
|
<input type="submit" value="Register" />
|
|
</form>
|
|
</div>
|
|
<div id="setup" class="hidden">
|
|
<div id="user-info">
|
|
<!-- User info will be populated dynamically -->
|
|
</div>
|
|
<button id="create-chat-room">Create</button>
|
|
<div id="or">
|
|
- or -
|
|
</div>
|
|
<div id="join-chat-room-container">
|
|
<!-- <label for="connection-topic">Enter Your Connection Topic:</label> -->
|
|
<input type="text" id="join-chat-room-topic" placeholder="topic">
|
|
<button id="join-chat-room">Join</button> <!-- Changed id -->
|
|
</div>
|
|
<div id="chat" class="hidden">
|
|
<div id="header">
|
|
<div id="details">
|
|
<div>
|
|
Topic: <span id="chat-room-topic"></span>
|
|
</div>
|
|
<div>
|
|
Peers: <span id="peers-count">0</span>
|
|
</div>
|
|
</div>
|
|
<div id="user-list">
|
|
<!-- User list will be populated here -->
|
|
</div>
|
|
</div>
|
|
<div id="messages"></div>
|
|
<form id="message-form">
|
|
<input id="message" type="text" />
|
|
<input type="submit" value="Send" />
|
|
</form>
|
|
</div>
|
|
<div id="loading" class="hidden">Loading ...</div>
|
|
</main>
|
|
</body>
|
|
</html>
|