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>
56 lines
2.0 KiB
HTML
56 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Login — 3D-Druck-AG{% endblock %}
|
|
|
|
{% block content %}
|
|
<div style="text-align: center; margin-bottom: 1.5rem;">
|
|
<h1>Wer bist du?</h1>
|
|
<p style="color: var(--text-light);">Such dein Profil und klick drauf.</p>
|
|
</div>
|
|
|
|
{% if profile %}
|
|
<div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto;">
|
|
{% for p in profile %}
|
|
<a href="{{ url_for('profil.login_pin', profil_id=p.id) }}"
|
|
class="card profil-kachel{% if p.rolle == 'power' %} profil-power{% endif %}">
|
|
{% if p.rolle == 'power' %}
|
|
<div style="font-size: 3rem;">🔧</div>
|
|
<div style="font-weight: 600; margin-top: 0.3rem;">{{ p.vorname }}</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-light);">Power-User</div>
|
|
{% else %}
|
|
<div style="font-size: 3rem;">{{ tier_emoji(p.tier) }}</div>
|
|
<div style="font-weight: 600; margin-top: 0.3rem;">{{ p.vorname }}</div>
|
|
<div style="font-size: 0.8rem; color: var(--text-light);">{{ tier_name(p.tier) }}</div>
|
|
{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card" style="max-width: 600px; margin: 2rem auto; text-align: center;">
|
|
<h2>Noch keine Profile angelegt</h2>
|
|
<p>Der Lehrer muss erst Profile anlegen. Sag Herb oder Herr Rechmann Bescheid.</p>
|
|
<p style="margin-top: 1rem;"><a href="{{ url_for('admin.admin_login') }}" class="btn btn-secondary">Admin-Login</a></p>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<style>
|
|
.profil-kachel {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
text-align: center;
|
|
padding: 1.5rem 0.8rem;
|
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
.profil-kachel:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
|
|
}
|
|
.profil-power {
|
|
border-color: var(--primary);
|
|
background: linear-gradient(180deg, #fff, var(--info-bg));
|
|
}
|
|
</style>
|
|
{% endblock %}
|