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>
62 lines
3.2 KiB
HTML
62 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}3D-Druck-AG{% endblock %}
|
|
|
|
{% block content %}
|
|
<div style="text-align: center; margin-bottom: 2rem;">
|
|
<h1 style="font-size: 2rem;">3D-Druck-AG</h1>
|
|
<p style="color: var(--text-light); font-size: 1.1rem;">
|
|
Vom fertigen 3D-Modell zum eigenen Druck — Schritt fuer Schritt.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; max-width: 1000px; margin: 0 auto;">
|
|
|
|
{% if session.profil_id %}
|
|
<a href="/cockpit" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--primary); text-align:center; padding: 2.5rem 1.5rem;">
|
|
<div style="font-size: 3.5rem; margin-bottom: 0.5rem;">{{ tier_emoji(session.get('tier','')) }}</div>
|
|
<h2 style="color: var(--primary);">Dein Cockpit</h2>
|
|
<p style="margin: 0.8rem 0;">Projekt, Druckauftraege, Slots — alles auf einen Blick.</p>
|
|
<span class="btn btn-primary">Zum Cockpit</span>
|
|
</a>
|
|
{% else %}
|
|
<a href="/login" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--primary); text-align:center; padding: 2.5rem 1.5rem;">
|
|
<div style="font-size: 3.5rem; margin-bottom: 0.5rem;">🔒</div>
|
|
<h2 style="color: var(--primary);">Login</h2>
|
|
<p style="margin: 0.8rem 0;">Vorname · Tier-Icon · PIN. Danach siehst du deinen Stand und kannst Drucker reservieren.</p>
|
|
<span class="btn btn-primary">Einloggen</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="/lektionen" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--success); text-align:center; padding: 2.5rem 1.5rem;">
|
|
<div style="font-size: 3.5rem; margin-bottom: 0.5rem;">📚</div>
|
|
<h2 style="color: var(--success);">Lektionen</h2>
|
|
<p style="margin: 0.8rem 0;">L1 Drucker-Kennenlernen · L2 3D-Modell drucken · L3 Customizer · danach frei.</p>
|
|
<span class="btn" style="background: var(--success); color: white;">Lektionen ansehen</span>
|
|
</a>
|
|
|
|
<a href="/drucker" class="card bereich-card" style="text-decoration:none; color:inherit; border-top: 5px solid var(--secondary); text-align:center; padding: 2.5rem 1.5rem;">
|
|
<div style="font-size: 3.5rem; margin-bottom: 0.5rem;">🖨️</div>
|
|
<h2 style="color: var(--secondary);">Drucker</h2>
|
|
<p style="margin: 0.8rem 0;">4 Bambu-Lab-Drucker. Live-Status, freie Slots, Reservierungen.</p>
|
|
<span class="btn" style="background: var(--secondary); color: white;">Druckerstatus</span>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="card" style="max-width: 800px; margin: 2rem auto 0; background: var(--warn-bg); border-color: #F5C842;">
|
|
<h3 style="margin-bottom: 0.5rem;">Hinweis</h3>
|
|
<p style="margin: 0;">
|
|
Diese Seite ist im Aufbau. Stand: 2026-05-23, Skelett. Inhalte werden in
|
|
den naechsten Wochen schrittweise ergaenzt — siehe
|
|
<code>docs/kurskonzept.md</code>.
|
|
</p>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<style>
|
|
.bereich-card { transition: transform 0.15s, box-shadow 0.15s; }
|
|
.bereich-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
|
|
</style>
|
|
{% endblock %}
|