- Overhaul CSS with comprehensive design tokens (shadows, transitions, radii) - Add hover effects and smooth transitions to cards, buttons, tables - Improve typography hierarchy and color consistency - Remove inline styles from 10 template files for better maintainability - Add global notification container to ensure toasts appear above modals - Update showNotification/showAlert functions to use centralized container - Add accessibility improvements (focus states, reduced motion support) - Improve responsive design and mobile styling - Add print styles
61 lines
2.1 KiB
HTML
61 lines
2.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Setup - SneakyScanner{% endblock %}
|
|
|
|
{% set hide_nav = true %}
|
|
|
|
{% block content %}
|
|
<div class="login-card">
|
|
<div class="text-center mb-4">
|
|
<h1 class="brand-title">SneakyScanner</h1>
|
|
<p class="brand-subtitle">Initial Setup</p>
|
|
</div>
|
|
|
|
<div class="alert alert-info mb-4">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
<strong>Welcome!</strong> Please set an application password to secure your scanner.
|
|
</div>
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="post" action="{{ url_for('auth.setup') }}">
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input type="password"
|
|
class="form-control form-control-lg"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
minlength="8"
|
|
autofocus
|
|
placeholder="Enter password (min 8 characters)">
|
|
<div class="form-text">Password must be at least 8 characters long.</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="confirm_password" class="form-label">Confirm Password</label>
|
|
<input type="password"
|
|
class="form-control form-control-lg"
|
|
id="confirm_password"
|
|
name="confirm_password"
|
|
required
|
|
minlength="8"
|
|
placeholder="Confirm your password">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-lg w-100">
|
|
Set Password
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|