Spaces:
Sleeping
Sleeping
| <!-- START OF FILE login.html --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Login - Secure Password Manager</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --primary-hover: #1d4ed8; | |
| --success-color: #10b981; | |
| --warning-color: #f59e0b; | |
| --danger-color: #ef4444; | |
| --text-primary: #1f2937; | |
| --text-secondary: #4b5563; | |
| --bg-card: #ffffff; | |
| --border-color: #e5e7eb; | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .auth-container { | |
| background: var(--bg-card); | |
| max-width: 400px; | |
| width: 100%; | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .auth-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .auth-header h2 { | |
| color: var(--text-primary); | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin: 0; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| label { | |
| display: block; | |
| color: var(--text-primary); | |
| font-weight: 500; | |
| margin-bottom: 0.5rem; | |
| } | |
| input[type="email"], | |
| input[type="password"] { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 2px solid var(--border-color); | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| background: white; | |
| } | |
| input[type="email"]:focus, | |
| input[type="password"]:focus { | |
| border-color: var(--primary-color); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| } | |
| .remember-me { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .remember-me input[type="checkbox"] { | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 0.25rem; | |
| border: 2px solid var(--border-color); | |
| cursor: pointer; | |
| } | |
| .remember-me label { | |
| margin: 0; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .btn { | |
| display: block; | |
| width: 100%; | |
| padding: 0.875rem; | |
| background: var(--primary-color); | |
| color: white; | |
| border: none; | |
| border-radius: 0.5rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .alert { | |
| padding: 1rem; | |
| margin-bottom: 1.5rem; | |
| border-radius: 0.5rem; | |
| font-size: 0.875rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .alert-danger { | |
| background: #fee2e2; | |
| color: #991b1b; | |
| border: 1px solid #fecaca; | |
| } | |
| .alert-success { | |
| background: #dcfce7; | |
| color: #166534; | |
| border: 1px solid #bbf7d0; | |
| } | |
| .alert-warning { | |
| background: #fef3c7; | |
| color: #92400e; | |
| border: 1px solid #fde68a; | |
| } | |
| .alert-info { | |
| background: #dbeafe; | |
| color: #1e40af; | |
| border: 1px solid #bfdbfe; | |
| } | |
| .auth-footer { | |
| text-align: center; | |
| margin-top: 2rem; | |
| color: var(--text-secondary); | |
| font-size: 0.875rem; | |
| } | |
| .auth-footer a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .auth-footer a:hover { | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 480px) { | |
| .auth-container { | |
| padding: 1.5rem; | |
| } | |
| .auth-header h2 { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg-card: #1f2937; | |
| --text-primary: #f3f4f6; | |
| --text-secondary: #9ca3af; | |
| --border-color: #374151; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #111827 0%, #1f2937 100%); | |
| } | |
| input[type="email"], | |
| input[type="password"] { | |
| background: #374151; | |
| color: #f3f4f6; | |
| } | |
| .auth-container { | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="auth-container"> | |
| <div class="auth-header"> | |
| <h2>Welcome Back</h2> | |
| </div> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, message in messages %} | |
| {% set alert_class = 'alert-' + category if category in ['danger', 'success', 'warning'] else 'alert-info' %} | |
| <div class="alert {{ alert_class }}">{{ message }}</div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <form method="POST" action="{{ url_for('login', next=request.args.get('next')) }}"> | |
| <div class="form-group"> | |
| <label for="email">Email Address</label> | |
| <input type="email" id="email" name="email" required autocomplete="username" placeholder="Enter your email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Master Password</label> | |
| <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Enter your master password"> | |
| </div> | |
| <div class="remember-me"> | |
| <input type="checkbox" id="remember" name="remember" value="yes"> | |
| <label for="remember">Remember me</label> | |
| </div> | |
| <button type="submit" class="btn">Sign In</button> | |
| </form> | |
| <div class="auth-footer"> | |
| <p>Don't have an account? <a href="{{ url_for('register') }}">Create one now</a></p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| <!-- END OF FILE login.html --> |