file-hub / login.html
ntdservices's picture
Upload login.html
2fdf2ef verified
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in – File Hub</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
:root { --accent-rgb: 25,85,130; }
body { background:#f8fafc; }
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
background:rgb(var(--accent-rgb)) !important;
border-color:rgb(var(--accent-rgb)) !important;
}
</style>
</head>
<body class="d-flex justify-content-center align-items-center vh-100">
<div class="card shadow p-4" style="min-width:325px">
<h4 class="mb-3 text-center">Welcome to File Hub</h4>
<form method="POST" class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Your name</label>
<input class="form-control" name="username" required autofocus placeholder="e.g. Kevin">
<div class="invalid-feedback">Please choose a name.</div>
</div>
<button class="btn btn-primary w-100">Enter</button>
</form>
{% with messages = get_flashed_messages() %}
{% if messages %}
<div class="alert alert-warning mt-3">{{ messages[0] }}</div>
{% endif %}
{% endwith %}
</div>
<script>
/* simple Bootstrap validation */
(function () {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', evt => {
if (!form.checkValidity()) { evt.preventDefault(); evt.stopPropagation(); }
form.classList.add('was-validated');
}, false);
});
})();
</script>
</body>
</html>