candifloss
23af7e0a02
- Introduce bootstrap - Add bootstrap styling to login page - Modify template to fit bootstrap css
71 lines
3.3 KiB
HTML
71 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ brandingconfig.APP_NAME }} - Login</title>
|
|
{% include 'favicon.html' %}
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-light">
|
|
<div class="container-fluid vh-100">
|
|
<div class="row h-100">
|
|
<!-- Left Column (Branding) -->
|
|
<div class="col-md-6 d-none d-md-flex bg-primary text-white justify-content-center align-items-center">
|
|
<div class="text-center p-5">
|
|
<img src="{{ url_for('static', filename=brandingconfig.LOGIN_LOGO) }}"
|
|
alt="{{ brandingconfig.APP_NAME }} Logo"
|
|
class="img-fluid mb-4" style="max-height: 150px;">
|
|
<h1 class="display-4 fw-bold">{{ brandingconfig.APP_NAME }}</h1>
|
|
<p class="lead">{{ brandingconfig.TAGLINE }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column (Login Form) -->
|
|
<div class="col-md-6 d-flex justify-content-center align-items-center">
|
|
<div class="w-100 p-4" style="max-width: 400px;">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body p-4">
|
|
<h2 class="card-title text-center mb-4">Login</h2>
|
|
<form action="/login" method="post">
|
|
<div class="mb-3">
|
|
<input type="text"
|
|
name="username"
|
|
class="form-control form-control-lg"
|
|
placeholder="Username"
|
|
required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input type="password"
|
|
name="password"
|
|
class="form-control form-control-lg"
|
|
placeholder="Password"
|
|
required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-lg w-100">
|
|
Login
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS (optional) -->
|
|
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
|
</body>
|
|
</html>
|