feat: add page shell, preferences and translations

Base layout with top bar, role-based menu, profile menu and phone layout; theme, language and German form of address kept in cookies; German formal, German informal and English text; Fluent avatar bundled in the image by a Node build stage; placeholder pages for the Publisher and Admin groups.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N3t4WL7bd9bdHHNjEsxzqC

portal/templates/accounts/base.html

@@ -1,13 +1 @@
-{% load i18n %}<!doctype html>
-<html lang="{{ LANGUAGE_CODE }}">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{% block title %}{% trans "Self-service portal" %}{% endblock %}</title>
-</head>
-<body>
-<main>
-{% block content %}{% endblock %}
-</main>
-</body>
-</html>
+{% extends "base.html" %}

portal/templates/accounts/home.html

@@ -1,11 +1,7 @@
 {% extends "accounts/base.html" %}
 {% load i18n %}
-{% block title %}{% trans "Welcome" %}{% endblock %}
+{% block title %}{% trans "Home" %}{% endblock %}
 {% block content %}
-<h1>{% blocktrans with name=portal_user.display_name %}Signed in as {{ name }}{% endblocktrans %}</h1>
-<p>{{ portal_user.user.sam }}</p>
-<form method="post" action="{% url 'logout' %}">
-  {% csrf_token %}
-  <button type="submit">{% trans "Sign out" %}</button>
-</form>
+<h1>{% blocktrans with name=portal_user.display_name %}Hello, {{ name }}{% endblocktrans %}</h1>
+<p class="lead">{% trans "You are signed in. More pages will follow here." %}</p>
 {% endblock %}

portal/templates/base.html

@@ -0,0 +1,69 @@
+{% load i18n static %}<!doctype html>
+<html lang="{{ html_lang }}" data-theme="{{ preferences.theme }}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light dark">
+<title>{% block title %}ping-mee Portal{% endblock %}</title>
+<link rel="stylesheet" href="{% static 'portal/shell.css' %}">
+<script src="{% static 'vendor/fluent.js' %}" defer></script>
+<script src="{% static 'portal/shell.js' %}" defer></script>
+</head>
+<body>
+<a class="skip-link" href="#content">{% trans "Skip to content" %}</a>
+<header class="top-bar">
+  {% if portal_user %}
+  <button type="button" class="menu-button" aria-controls="menu" aria-expanded="false">
+    <span class="burger" aria-hidden="true"></span>
+    <span class="visually-hidden">{% trans "Menu" %}</span>
+  </button>
+  {% endif %}
+  <a class="portal-name" href="{% url 'home' %}">ping-mee Portal</a>
+  {% if portal_user %}
+  <details class="profile">
+    <summary aria-label="{% trans 'Profile menu' %}">
+      <fluent-avatar name="{{ portal_user.display_name }}" color="brand" size="32"></fluent-avatar>
+      <span class="avatar-fallback" aria-hidden="true">{{ initials }}</span>
+    </summary>
+    <div class="profile-menu">
+      <p class="profile-name">{{ portal_user.display_name }}</p>
+      <p class="profile-user">{{ portal_user.user.sam }}</p>
+      <form method="post" action="{% url 'preferences' %}" class="prefs">
+        {% csrf_token %}
+        <input type="hidden" name="next" value="{{ request.get_full_path }}">
+        {% trans "Theme" as legend %}
+        {% include "shell/preference_group.html" with legend=legend field="theme" options=theme_options current=preferences.theme %}
+        {% trans "Language" as legend %}
+        {% include "shell/preference_group.html" with legend=legend field="language" options=language_options current=preferences.language %}
+        {% if preferences.language == "de" %}
+        {% trans "Form of address" as legend %}
+        {% include "shell/preference_group.html" with legend=legend field="form" options=form_options current=preferences.form %}
+        {% endif %}
+      </form>
+      <form method="post" action="{% url 'logout' %}" class="sign-out">
+        {% csrf_token %}
+        <button type="submit">{% trans "Sign out" %}</button>
+      </form>
+    </div>
+  </details>
+  {% endif %}
+</header>
+<div class="layout">
+  {% if portal_user %}
+  <nav id="menu" aria-label="{% trans 'Main menu' %}">
+    {% for group in menu_groups %}
+    <div class="menu-group">
+      {% if group.title %}<p class="menu-heading">{{ group.title }}</p>{% endif %}
+      {% for entry in group.entries %}
+      <a href="{{ entry.url }}"{% if entry.current %} class="current" aria-current="page"{% endif %}>{{ entry.label }}</a>
+      {% endfor %}
+    </div>
+    {% endfor %}
+  </nav>
+  {% endif %}
+  <main id="content" tabindex="-1">
+{% block content %}{% endblock %}
+  </main>
+</div>
+</body>
+</html>

portal/templates/shell/placeholder.html

@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% block title %}{{ title }}{% endblock %}
+{% block content %}
+<h1>{{ title }}</h1>
+<p class="lead">{% trans "This page is not available yet." %}</p>
+{% endblock %}

portal/templates/shell/preference_group.html

@@ -0,0 +1,8 @@
+<fieldset>
+  <legend>{{ legend }}</legend>
+  <div class="choices">
+    {% for value, label in options %}
+    <button type="submit" name="{{ field }}" value="{{ value }}" data-pref="{{ field }}" aria-pressed="{% if value == current %}true{% else %}false{% endif %}">{{ label }}</button>
+    {% endfor %}
+  </div>
+</fieldset>