Hans Puettmann
8a55e175a2
Komplette visuelle Umstellung nach dem generierten Style-Guide
(3d-lehrstun-de-v1.0.0). 3D-Druck-AG bekommt eine eigene Marke,
getrennt vom Teal der arduino.lehrstun.de-Schwester.
Farben: Teal #00979D -> Indigo #5B6EAE, warmes Off-White Surface
#F0EEE9 statt Kuehlweiss, Lavendel-Akzent #9B8EC4.
Fonts: Raleway (Headings), Lato (Body), Inconsolata (Mono) — lokal
gehostet in static/fonts/ (DSGVO-konform, kein Google-CDN),
via @font-face + unicode-range (latin + latin-ext).
Form: Radius/Schatten/Spacing als Tokens (--radius-*, --shadow-*).
Technik:
- base.html :root: neue --color-*/--font-*/--radius-* Tokens,
alte Variablennamen (--primary etc.) als Aliase -> alle 33
Templates ziehen sofort mit, kein Template-Rewrite noetig.
- Semantische Banner-Tokens (--info/warn/success/error-bg+text+border)
loesen ~130 Hardcoded-Pastelle ab (per sed gemappt).
- Komponenten (Card, Button, Badge, Flash, Table, Code) auf Tokens.
Alle 13 Hauptseiten gegengeprueft (HTTP 200, keine Render-Fehler).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
45 lines
2.0 KiB
HTML
45 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}L{{ lektion.nummer }} — {{ lektion.titel }}{% endblock %}
|
|
{% block content %}
|
|
<div class="section-header">
|
|
<h1><span style="color: var(--text-light);">L{{ lektion.nummer }}</span> {{ lektion.titel }}</h1>
|
|
<a href="{{ url_for('oeffentlich.lektionen') }}" class="btn btn-secondary">← Alle Lektionen</a>
|
|
</div>
|
|
|
|
<div class="card">
|
|
{% if lektion.onboarding %}<span class="badge badge-pflicht">Onboarding</span>{% endif %}
|
|
<span class="badge badge-{{ lektion.schwierigkeit }}">{{ lektion.schwierigkeit }}</span>
|
|
|
|
<div class="content" style="margin-top: 1rem;">{{ lektion.aufgabe_md|markdown }}</div>
|
|
|
|
{% if lektion.tipp_md %}
|
|
<details style="margin-top: 1rem;">
|
|
<summary style="cursor:pointer; color: var(--primary);"><strong>💡 Tipp</strong></summary>
|
|
<div class="content" style="margin-top: 0.5rem;">{{ lektion.tipp_md|markdown }}</div>
|
|
</details>
|
|
{% endif %}
|
|
|
|
{% if lektion.extern_link %}
|
|
<p style="margin-top: 1rem;">
|
|
<a href="{{ lektion.extern_link }}" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
|
|
Externer Link ↗
|
|
</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Wenn eingeloggt: Status-Buttons zum Selbst-Zertifizieren #}
|
|
{% if session.profil_id %}
|
|
<div class="card" style="background: var(--info-bg); border-left: 4px solid var(--primary);">
|
|
<p style="margin: 0;"><strong>Status setzen</strong> (du entscheidest selbst, wann du fertig bist):</p>
|
|
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;">
|
|
{% for opt, label in [('offen', '⚪ noch nicht angefangen'), ('laeuft', '🟡 läuft'), ('fertig', '✅ fertig')] %}
|
|
<form method="post" action="{{ url_for('profil.lektion_status_setzen', nummer=lektion.nummer) }}">
|
|
<button name="status" value="{{ opt }}" class="btn btn-secondary" style="font-size: 0.85rem;">{{ label }}</button>
|
|
</form>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|