83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Messenger App</title>
|
|
<link rel="stylesheet" href="styles.css"/>
|
|
</head>
|
|
<body>
|
|
<button id="theme-toggle" type="button">Dark</button>
|
|
<div id="login-view" class="view">
|
|
<div class="auth-container">
|
|
|
|
<section class="auth-section">
|
|
<h2>Login</h2>
|
|
<form id="login-form">
|
|
<label class="sr-only" for="login-email">Email</label>
|
|
<input id="login-email" type="email" placeholder="Email" required/>
|
|
<label class="sr-only" for="login-password">Password</label>
|
|
<input id="login-password" type="password" placeholder="Password" required/>
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="auth-section">
|
|
<h2>Register</h2>
|
|
<form id="register-form">
|
|
<label class="sr-only" for="register-name">Full Name</label>
|
|
<input id="register-name" type="text" placeholder="Full Name" required/>
|
|
<label class="sr-only" for="register-email">Email</label>
|
|
<input id="register-email" type="email" placeholder="Email" required/>
|
|
<label class="sr-only" for="register-password">Password</label>
|
|
<input id="register-password" type="password" placeholder="Password" required/>
|
|
<label for="register-group">Group</label>
|
|
<select id="register-group" required>
|
|
<option value="" disabled selected>Select your group…</option>
|
|
<option value="1">2A</option>
|
|
<option value="2">2B</option>
|
|
<option value="3">2C</option>
|
|
<option value="4">2D</option>
|
|
<option value="5">2E</option>
|
|
<option value="6">2L1</option>
|
|
<option value="7">2L2</option>
|
|
<option value="8">2L3</option>
|
|
<option value="9">2L4</option>
|
|
</select>
|
|
<button type="submit">Register</button>
|
|
</form>
|
|
</section>
|
|
|
|
<div class="error-message" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-view" class="view" style="display:none;">
|
|
<div class="chat-app">
|
|
|
|
<aside id="user-list">
|
|
<h3>Users</h3>
|
|
</aside>
|
|
|
|
<main class="chat-main">
|
|
<div class="chat-header">
|
|
<span id="chat-username">Select a user</span>
|
|
<button id="reload-btn" type="button">Reload</button>
|
|
</div>
|
|
<div id="messages">
|
|
</div>
|
|
<form id="message-form" class="message-form">
|
|
<label class="sr-only" for="message-input">Message</label>
|
|
<input id="message-input" type="text" placeholder="Type a message…" autocomplete="off"/>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</main>
|
|
|
|
</div>
|
|
<div class="error-message" style="display:none;"></div>
|
|
</div>
|
|
|
|
<script type="module" src="./dist/main.js"></script>
|
|
</body>
|
|
</html>
|