Spaces:
Runtime error
Runtime error
| <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> | |