Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Auth App</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Auth & Notification App</h1> | |
| <button id="theme-toggle">Toggle Theme</button> | |
| </div> | |
| <!-- Registration Section --> | |
| <div id="register-section" class="content-section auth-section"> | |
| <h2>Register</h2> | |
| <form id="register-form"> | |
| <div class="form-group"> | |
| <label for="reg-email">Email:</label> | |
| <input type="email" id="reg-email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-password">Password:</label> | |
| <input type="password" id="reg-password" name="password" required minlength="8"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-confirm-password">Confirm Password:</label> | |
| <input type="password" id="reg-confirm-password" name="confirm_password" required minlength="8"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Register</button> | |
| </form> | |
| <p id="register-status" class="status-message"></p> | |
| <p class="form-switch">Already have an account? <a href="#" onclick="showSection('login-section')">Login here</a></p> | |
| </div> | |
| <!-- Login Section --> | |
| <div id="login-section" class="content-section auth-section" style="display: none;"> | |
| <h2>Login</h2> | |
| <form id="login-form"> | |
| <div class="form-group"> | |
| <label for="login-email">Email:</label> | |
| <input type="email" id="login-email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="login-password">Password:</label> | |
| <input type="password" id="login-password" name="password" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Login</button> | |
| </form> | |
| <p id="login-status" class="status-message"></p> | |
| <p class="form-switch">Don't have an account? <a href="#" onclick="showSection('register-section')">Register here</a></p> | |
| </div> | |
| <!-- Welcome Section (shown after login) --> | |
| <div id="welcome-section" class="content-section" style="display: none;"> | |
| <h2>Welcome!</h2> | |
| <p id="welcome-message">Welcome, user!</p> | |
| <button id="logout-button" class="btn btn-danger">Logout</button> | |
| <hr> | |
| <h2>Real-time Notifications</h2> | |
| <div id="notifications"> | |
| <p><em>Notifications will appear here...</em></p> | |
| </div> | |
| </div> | |
| </div><!-- end container --> | |
| <script src="/static/js/script.js"></script> | |
| </body> | |
| </html> |