Bernard Siebens
adf1120358
Large uncommitted body of work accumulated across sessions on this branch -- committing as a checkpoint so it's tracked and future worktree-isolated agents see the real codebase instead of a stale ancestor commit. Covers the management app's dedicated Tailwind theme and templates, the club onboarding requirement/signup workflow (club/services/onboarding.py, requirement/status models, sign-up dashboard), fee/status auto-activation decoupling, referee management, and the new events calendar grid service layer. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
113 lines
5.7 KiB
HTML
113 lines
5.7 KiB
HTML
{% load static lucide ui %}
|
|
|
|
{% comment %}
|
|
Standalone shell for every sitewide allauth screen -- login, password change/reset,
|
|
MFA, passkeys, recovery codes -- plus 403.html/maintenance.html, rendered whenever
|
|
there is no club tenant (see club/context_processors.py: this is
|
|
PLATFORM_BASE_TEMPLATE). Same industrial design language as controlpanel/base.html --
|
|
dark ink chrome, Barlow/Barlow Condensed/IBM Plex Mono, assets/controlpanel.css --
|
|
but deliberately simpler: one centred card on a dark page, not a full command-bar
|
|
app shell, since these are public entrance screens for the whole platform (every
|
|
club admin and base-domain account), not the control panel itself.
|
|
|
|
Block names match what templates/_base.html used to provide (head_title, extra_head,
|
|
main, extra_body) rather than inventing new ones: templates/allauth/layouts/base.html
|
|
and templates/403.html/maintenance.html target those names directly, and both are
|
|
shared with the club-branded skin (_club_base.html, still on assets/app.css and real
|
|
daisyUI, untouched) -- give them a different block name here and they would have
|
|
nothing to override on this side of the fork.
|
|
{% endcomment %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>
|
|
{% block head_title %}{% endblock head_title %} · RosterChief
|
|
</title>
|
|
|
|
<link rel="stylesheet" href="{% static 'css/controlpanel.css' %}">
|
|
{% block extra_head %}{% endblock extra_head %}
|
|
</head>
|
|
|
|
<body class="flex min-h-screen flex-col items-center gap-10 bg-ink px-4 py-14 font-sans text-slate">
|
|
{# Explicit bg-ink here too, not just on <body>: the white-on-dark brand mark must stay legible on its own. #}
|
|
<div class="flex w-full max-w-md items-center justify-between gap-4 bg-ink py-1">
|
|
<a class="flex min-w-0 shrink-0 items-center gap-2.5" href="/">
|
|
{# The real mark, not the .crest clip-path fallback (that's for clubs with no logo of their own) -- white-on-dark variant for this page. #}
|
|
<img class="h-8 w-8 shrink-0" src="{% static 'images/rosterchief-white.svg' %}" alt="" width="32" height="32">
|
|
<span class="font-display text-xl font-extrabold tracking-[.1em] text-white uppercase">RosterChief</span>
|
|
</a>
|
|
<a class="flex shrink-0 items-center gap-1.5 font-mono text-xs text-on-dark-dim hover:text-white" href="/">
|
|
{% lucide "arrow-left" size=14 %} Back to site
|
|
</a>
|
|
</div>
|
|
|
|
<main class="flex w-full max-w-md flex-1 flex-col justify-center gap-4">
|
|
{% if messages %}
|
|
<div class="flex flex-col gap-2">
|
|
{% for message in messages %}
|
|
{% with alert=message|as_alert %}
|
|
<div class="alert {{ alert.css }}" role="alert">
|
|
{% lucide alert.icon size=18 %}
|
|
<div>
|
|
<div class="font-display text-sm font-bold tracking-wide uppercase">{{ alert.title }}</div>
|
|
<div class="text-sm">{{ alert.body }}</div>
|
|
</div>
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% block main %}{% endblock main %}
|
|
</main>
|
|
|
|
<p class="font-mono text-[11px] text-on-dark-faint">© {% now "Y" %} RosterChief</p>
|
|
|
|
{% comment %}
|
|
A TOTP code is 6 characters, a recovery code 8, and allauth accepts either in
|
|
the same field (templates/allauth/elements/fields.html). The boxed .otp layout
|
|
only fits six, so past that this falls back to a plain .input-lg rather than
|
|
letting the text spill out of the boxes.
|
|
|
|
The real <input>'s own text is invisible (assets/controlpanel.css: `.otp input`
|
|
is `color: transparent`, only its caret shows) -- this writes each typed
|
|
character into its matching <span> directly instead, which is exact by
|
|
construction. A pure-CSS letter-spacing overlay (spacing the real glyphs to
|
|
match the box pitch) was tried first and drifted more with every character
|
|
typed, in a way font-metric tuning couldn't reliably fix.
|
|
{% endcomment %}
|
|
<script>
|
|
document.querySelectorAll("[data-otp]").forEach((otp) => {
|
|
const input = otp.querySelector("input");
|
|
const boxes = otp.querySelectorAll("span");
|
|
if (!input) return;
|
|
|
|
const fit = () => {
|
|
const boxed = input.value.length <= boxes.length;
|
|
otp.classList.toggle("otp", boxed);
|
|
otp.classList.toggle("otp-lg", boxed);
|
|
boxes.forEach((box, index) => {
|
|
box.classList.toggle("hidden", !boxed);
|
|
box.textContent = boxed ? input.value[index] || "" : "";
|
|
});
|
|
input.classList.toggle("input", !boxed);
|
|
input.classList.toggle("input-lg", !boxed);
|
|
};
|
|
|
|
input.addEventListener("input", fit);
|
|
fit();
|
|
});
|
|
</script>
|
|
|
|
{% comment %}
|
|
allauth puts page-level scripts and out-of-form markup here -- notably the
|
|
hidden `mfa_login` form the passkey button submits on the login page. Without
|
|
this block that form is never rendered and "Sign in with a passkey" is dead.
|
|
{% endcomment %}
|
|
{% block extra_body %}{% endblock extra_body %}
|
|
</body>
|
|
</html>
|