Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="color-scheme" content="light dark"> | |
| <title>Auth App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header class="app-header"> | |
| <h1 class="app-title">Auth & Notification App</h1> | |
| <p class="app-subtitle">Secure login and real-time notifications</p> | |
| </header> | |
| <!-- Registration Section --> | |
| <div id="register-section" class="auth-section"> | |
| <h2 class="section-title">Create Account</h2> | |
| <form id="register-form"> | |
| <div class="form-group"> | |
| <label for="reg-email"><i class="fas fa-envelope"></i> Email Address</label> | |
| <input type="email" id="reg-email" name="email" placeholder="[email protected]" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-password"><i class="fas fa-lock"></i> Password</label> | |
| <input type="password" id="reg-password" name="password" placeholder="Minimum 8 characters" required minlength="8"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-confirm-password"><i class="fas fa-lock"></i> Confirm Password</label> | |
| <input type="password" id="reg-confirm-password" name="confirm_password" placeholder="Confirm your password" required minlength="8"> | |
| </div> | |
| <button type="submit" class="btn btn-full"><i class="fas fa-user-plus"></i> Register</button> | |
| </form> | |
| <div id="register-status" class="status-message"></div> | |
| <div class="switch-auth"> | |
| Already have an account? <a href="#" onclick="showSection('login-section')">Sign in</a> | |
| </div> | |
| </div> | |
| <!-- Login Section --> | |
| <div id="login-section" class="auth-section" style="display: none;"> | |
| <h2 class="section-title">Welcome Back</h2> | |
| <form id="login-form"> | |
| <div class="form-group"> | |
| <label for="login-email"><i class="fas fa-envelope"></i> Email Address</label> | |
| <input type="email" id="login-email" name="email" placeholder="[email protected]" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="login-password"><i class="fas fa-lock"></i> Password</label> | |
| <input type="password" id="login-password" name="password" placeholder="Your password" required> | |
| </div> | |
| <button type="submit" class="btn btn-full"><i class="fas fa-sign-in-alt"></i> Login</button> | |
| </form> | |
| <div id="login-status" class="status-message"></div> | |
| <div class="switch-auth"> | |
| Don't have an account? <a href="#" onclick="showSection('register-section')">Create one now</a> | |
| </div> | |
| </div> | |
| <!-- Welcome Section (shown after login) --> | |
| <div id="welcome-section" style="display: none;"> | |
| <div class="welcome-header"> | |
| <h2 class="section-title">Dashboard</h2> | |
| <button id="logout-button" class="btn btn-danger"><i class="fas fa-sign-out-alt"></i> Logout</button> | |
| </div> | |
| <div id="welcome-message">Welcome back, user!</div> | |
| <div class="divider"></div> | |
| <div class="notifications-header"> | |
| <h2 class="section-title">Real-time Notifications</h2> | |
| </div> | |
| <div id="notifications"> | |
| <p><em><i class="fas fa-bell"></i> Notifications will appear here...</em></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/js/script.js"></script> | |
| </body> | |
| </html> |