Spaces:
Runtime error
Runtime error
File size: 4,463 Bytes
9c72a28 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Room</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #1a1a2e; color: #eee; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.container { width: 100%; max-width: 500px; }
form { background: #16213e; padding: 24px; border-radius: 8px; }
form h2 { margin-bottom: 16px; text-align: center; }
input { width: 100%; padding: 10px; margin-bottom: 12px; border: 1px solid #0f3460; border-radius: 4px; background: #0f3460; color: #eee; font-size: 14px; }
input:focus { outline: none; border-color: #e94560; }
button { width: 100%; padding: 10px; background: #e94560; color: #fff; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
button:hover { background: #c73750; }
.error { color: #e94560; font-size: 13px; margin-bottom: 10px; min-height: 18px; }
.switch { text-align: center; margin-top: 12px; font-size: 13px; }
.switch a { color: #e94560; text-decoration: none; }
.switch a:hover { text-decoration: underline; }
.hint { font-size: 11px; color: #888; margin-top: -8px; margin-bottom: 12px; }
#chat-app { display: none; }
#chat-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #16213e; border-radius: 8px 8px 0 0; }
#chat-header button { width: auto; padding: 6px 14px; font-size: 12px; }
#chat-window { height: 350px; overflow-y: auto; padding: 12px; background: #0f3460; border-left: 2px solid #16213e; border-right: 2px solid #16213e; word-break: break-word; }
#chat-window div { padding: 4px 0; border-bottom: 1px solid #1a1a4e; font-size: 14px; }
#chat-input-area { display: flex; gap: 8px; padding: 10px; background: #16213e; border-radius: 0 0 8px 8px; }
#chat-input-area input { flex: 1; margin-bottom: 0; }
#chat-input-area button { width: 80px; }
</style>
</head>
<body>
<div class="container">
<div id="auth-container">
<form id="login-form" onsubmit="handleLogin(event)" autocomplete="on">
<h2>Login</h2>
<input type="text" name="login" placeholder="Username or Email" autocomplete="username" required>
<input type="password" name="password" placeholder="Password" autocomplete="current-password" required>
<div class="error" id="login-error"></div>
<button type="submit">Log In</button>
<p class="switch">No account? <a href="#" onclick="showSignup();return false">Sign up</a></p>
</form>
<form id="signup-form" onsubmit="handleSignup(event)" autocomplete="on" style="display:none">
<h2>Sign Up</h2>
<input type="email" name="email" placeholder="Email address" autocomplete="email" required>
<input type="text" name="username" placeholder="Username" autocomplete="username" required minlength="3" maxlength="20">
<div class="hint">3-20 chars: letters, numbers, _, -</div>
<input type="password" name="password" placeholder="Password (min 8 chars)" autocomplete="new-password" required minlength="8">
<input type="password" name="confirm_password" placeholder="Confirm password" autocomplete="new-password" required>
<div class="error" id="signup-error"></div>
<button type="submit">Sign Up</button>
<p class="switch">Have an account? <a href="#" onclick="showLogin();return false">Log in</a></p>
</form>
</div>
<div id="chat-app">
<div id="chat-header">
<span>Logged in as <strong id="display-username"></strong></span>
<button onclick="logout()">Logout</button>
</div>
<div id="chat-window"></div>
<div id="chat-input-area">
<input type="text" id="message-input" placeholder="Type a message..." maxlength="2000">
<button id="send-button" onclick="sendMessage()">Send</button>
</div>
</div>
</div>
<script src="/static/chat.js"></script>
</body>
</html>
|