diff --git a/3d-lehrstun-de-v1.0.0-CLAUDE.md b/3d-lehrstun-de-v1.0.0-CLAUDE.md new file mode 100644 index 0000000..5ef6626 --- /dev/null +++ b/3d-lehrstun-de-v1.0.0-CLAUDE.md @@ -0,0 +1,70 @@ +# Style Guide: 3d.lehrstun.de + +Du arbeitest an einem Projekt mit folgendem Style Guide. **Verwende ausschließlich die unten definierten Design Tokens** für alle neuen oder geänderten Komponenten. Keine eigenen Farben, Schriften oder Abstände einführen. + +## Projektkontext +- **Projekt:** 3d.lehrstun.de +- **Typ:** website +- **Zielgruppe:** Schülerinnen und Schüler +- **Sprache:** de-DE + +## Tonalität +- **Soll wirken:** jugendlich, technisch, freundlich, modern +- **Soll NICHT wirken:** altmodisch, beliebig + +## Do's +- Verwende abgerundete Ecken (border-radius: sm) für Karten und Buttons, um eine einladende, moderne Wirkung zu erzeugen +- Setze subtile Schatten ein, um Tiefe und Hierarchie zu schaffen, ohne die helle Cloud-Dancer-Palette zu überladen +- Nutze großzügige, komfortable Abstände zwischen Elementen, damit Inhalte für Schüler leicht scanbar und lesbar bleiben +- Kombiniere technische Akzentfarben (z. B. leuchtendes Cyan oder Electric Blue) mit der hellen Basispalette, um 3D-Themen jugendlich und modern zu inszenieren + +## Don'ts +- Verwende keine harten, eckigen Container oder scharfe Drop-Shadows – das wirkt altmodisch und bricht die freundliche Formensprache +- Nutze keine generischen Stock-Illustrationen oder Clip-Art – das wirkt beliebig und verfehlt die technisch-moderne Markenpersönlichkeit +- Überhäufe Seiten nicht mit zu vielen Schriftgrößen oder Farben auf einmal – das erzeugt visuelle Unruhe und widerspricht der comfortable Dichte + +## Design Tokens (CSS Custom Properties) + +```css +:root { + --color-primary: #5B6EAE; + --color-primary-hover: #4A5B96; + --color-secondary: #2C3E50; + --color-accent: #9B8EC4; + --color-surface: #F0EEE9; + --color-surface-muted: #E8E5DF; + --color-border: #D5D1CC; + --color-text: #2C3E50; + --color-text-muted: #6B7C8D; + --color-error: #C0392B; + --color-success: #27AE60; + --color-warning: #E67E22; + + --font-heading: 'Raleway', system-ui, sans-serif; + --font-body: 'Lato', Georgia, serif; + --font-mono: 'Inconsolata', 'Courier New', monospace; + + --radius-sm: 2px; + --radius-md: 4px; + --radius-lg: 8px; + + --spacing-xs: 4px; + --spacing-sm: 8px; + --spacing-md: 16px; + --spacing-lg: 24px; + --spacing-xl: 40px; + + --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); + --shadow-md: 0 2px 8px rgba(0,0,0,0.08); + --shadow-lg: 0 4px 16px rgba(0,0,0,0.1); +} +``` + +## Komponentenregeln +- **Buttons:** Radius `4px`, Padding `8px 16px`, Schatten `0 1px 2px rgba(0,0,0,0.05)` +- **Cards:** Radius `8px`, Border via `--color-border`, Schatten `0 2px 8px rgba(0,0,0,0.08)` +- **Inputs:** Radius `2px`, Border via `--color-border` +- **Icons:** Stil `outline`, Strichstärke `1.75px`, Line-Cap `round` + +## Regel für neuen Code +Wenn du eine Komponente oder ein Stylesheet änderst: nutze `var(--color-…)`, `var(--font-…)`, `var(--spacing-…)` etc. Greife nie zu Hardcoded-Werten. Wenn dir ein Token fehlt, frage nach, bevor du eines erfindest. diff --git a/3d-lehrstun-de-v1.0.0-guide.md b/3d-lehrstun-de-v1.0.0-guide.md new file mode 100644 index 0000000..71abe01 --- /dev/null +++ b/3d-lehrstun-de-v1.0.0-guide.md @@ -0,0 +1,78 @@ +# Style Guide: 3d.lehrstun.de + +> Version 1.0.0 | Revision 1 | 2026-06-04T09:57:23.143Z + +## Projektinfo +- **Typ:** website +- **Zielgruppe:** Schülerinnen und Schüler +- **Sprache:** de-DE + +## Designprinzipien + +### Tonalität +- jugendlich +- technisch +- freundlich +- modern + +### Anti-Tonalität +- altmodisch +- beliebig + +### Do's +✓ Verwende abgerundete Ecken (border-radius: sm) für Karten und Buttons, um eine einladende, moderne Wirkung zu erzeugen +✓ Setze subtile Schatten ein, um Tiefe und Hierarchie zu schaffen, ohne die helle Cloud-Dancer-Palette zu überladen +✓ Nutze großzügige, komfortable Abstände zwischen Elementen, damit Inhalte für Schüler leicht scanbar und lesbar bleiben +✓ Kombiniere technische Akzentfarben (z. B. leuchtendes Cyan oder Electric Blue) mit der hellen Basispalette, um 3D-Themen jugendlich und modern zu inszenieren + +### Don'ts +✗ Verwende keine harten, eckigen Container oder scharfe Drop-Shadows – das wirkt altmodisch und bricht die freundliche Formensprache +✗ Nutze keine generischen Stock-Illustrationen oder Clip-Art – das wirkt beliebig und verfehlt die technisch-moderne Markenpersönlichkeit +✗ Überhäufe Seiten nicht mit zu vielen Schriftgrößen oder Farben auf einmal – das erzeugt visuelle Unruhe und widerspricht der comfortable Dichte + +## Farbpalette +| Token | Wert | +|-------|------| +| Primary | `#5B6EAE` | +| Primary Hover | `#4A5B96` | +| Secondary | `#2C3E50` | +| Accent | `#9B8EC4` | +| Surface | `#F0EEE9` | +| Surface Muted | `#E8E5DF` | +| Border | `#D5D1CC` | +| Text | `#2C3E50` | +| Text Muted | `#6B7C8D` | +| Error | `#C0392B` | +| Success | `#27AE60` | +| Warning | `#E67E22` | + +## Typografie +- **Überschriften:** Raleway +- **Fließtext:** Lato +- **Monospace:** Inconsolata + +## Formensprache +- **Radius:** 2px / 4px / 8px +- **Schatten:** 0 1px 2px rgba(0,0,0,0.05) / 0 2px 8px rgba(0,0,0,0.08) +- **Spacing:** 4px / 8px / 16px / 24px / 40px + +## Komponenten + +### Button +- Radius: 4px +- Padding: 8px 16px + +### Card +- Radius: 8px +- Border: 1px solid #D5D1CC + +### Input +- Radius: 2px +- Border: 1px solid #D5D1CC + +## Assets +- Icon-Stil: outline +- Strichstärke: 1.75 + +--- +*Generiert am 2026-06-04T09:57:23.143Z* diff --git a/static/fonts/inconsolata-400-latin-ext.woff2 b/static/fonts/inconsolata-400-latin-ext.woff2 new file mode 100644 index 0000000..5e8826e Binary files /dev/null and b/static/fonts/inconsolata-400-latin-ext.woff2 differ diff --git a/static/fonts/inconsolata-400-latin.woff2 b/static/fonts/inconsolata-400-latin.woff2 new file mode 100644 index 0000000..a5ef823 Binary files /dev/null and b/static/fonts/inconsolata-400-latin.woff2 differ diff --git a/static/fonts/lato-400-latin-ext.woff2 b/static/fonts/lato-400-latin-ext.woff2 new file mode 100644 index 0000000..6613fe0 Binary files /dev/null and b/static/fonts/lato-400-latin-ext.woff2 differ diff --git a/static/fonts/lato-400-latin.woff2 b/static/fonts/lato-400-latin.woff2 new file mode 100644 index 0000000..ff60934 Binary files /dev/null and b/static/fonts/lato-400-latin.woff2 differ diff --git a/static/fonts/lato-700-latin-ext.woff2 b/static/fonts/lato-700-latin-ext.woff2 new file mode 100644 index 0000000..fec4573 Binary files /dev/null and b/static/fonts/lato-700-latin-ext.woff2 differ diff --git a/static/fonts/lato-700-latin.woff2 b/static/fonts/lato-700-latin.woff2 new file mode 100644 index 0000000..11de83f Binary files /dev/null and b/static/fonts/lato-700-latin.woff2 differ diff --git a/static/fonts/raleway-400-latin-ext.woff2 b/static/fonts/raleway-400-latin-ext.woff2 new file mode 100644 index 0000000..24cc256 Binary files /dev/null and b/static/fonts/raleway-400-latin-ext.woff2 differ diff --git a/static/fonts/raleway-400-latin.woff2 b/static/fonts/raleway-400-latin.woff2 new file mode 100644 index 0000000..67a3b53 Binary files /dev/null and b/static/fonts/raleway-400-latin.woff2 differ diff --git a/templates/admin_drucker.html b/templates/admin_drucker.html index 16986a6..77ce441 100644 --- a/templates/admin_drucker.html +++ b/templates/admin_drucker.html @@ -11,7 +11,7 @@ -
+
Hinweis: Live-Status via Bambu-Cloud-API kommt mit Etappe 5 (siehe docs/offene-fragen.md — Bambu-Account muss noch geklaert werden). Bis dahin pflegst du den Status hier manuell. diff --git a/templates/admin_projekt_queue.html b/templates/admin_projekt_queue.html index 7efe9d4..90434e0 100644 --- a/templates/admin_projekt_queue.html +++ b/templates/admin_projekt_queue.html @@ -22,7 +22,7 @@ {% else %} -
🎯
diff --git a/templates/admin_projekt_review.html b/templates/admin_projekt_review.html index 31e2091..f7f2cce 100644 --- a/templates/admin_projekt_review.html +++ b/templates/admin_projekt_review.html @@ -15,7 +15,7 @@ {% else %} -
🎯
@@ -46,7 +46,7 @@

Selbstbewertung

-
+
Gesamt
{% if p.selbsteinschaetzung == 'zufrieden' %}🟢 @@ -55,7 +55,7 @@
{{ p.selbsteinschaetzung or '—' }}
-
+
Planung
{% if p.selbsteinschaetzung_planung == 'gut' %}🟢 @@ -65,7 +65,7 @@
{{ p.selbsteinschaetzung_planung or '—' }}
-
+
Ausfuehrung
{% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢 @@ -96,7 +96,7 @@

Rueckfragen-Historie

{% for r in rueckfragen %}
+ padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; background: var(--surface-muted); border-radius: 4px;">
{{ r.erstellt_am[:16].replace('T', ' ') }}{% if r.status == 'erledigt' %} · ✓ erledigt{% endif %}
diff --git a/templates/admin_projekte.html b/templates/admin_projekte.html index 84a8a54..707a64a 100644 --- a/templates/admin_projekte.html +++ b/templates/admin_projekte.html @@ -38,7 +38,7 @@ {% else %} -
🎯
diff --git a/templates/admin_slot_neu.html b/templates/admin_slot_neu.html index 3cf7530..9c6ad2a 100644 --- a/templates/admin_slot_neu.html +++ b/templates/admin_slot_neu.html @@ -8,12 +8,12 @@
{% if not profile %} -
+
Keine aktiven SuS-Profile. Erst ein Profil anlegen.
{% elif not drucker_liste %} -
+
Keine Drucker eingerichtet.
{% else %} @@ -81,7 +81,7 @@ style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem;">
-
+
Hinweis: Du kannst auch fuer SuS reservieren, die noch nicht freigeschaltet sind, und auch fuer gesperrte Drucker (du bekommst dann eine Warnung).
diff --git a/templates/admin_software_bild.html b/templates/admin_software_bild.html index caf1777..b827e8d 100644 --- a/templates/admin_software_bild.html +++ b/templates/admin_software_bild.html @@ -21,7 +21,7 @@

+ text-align: center; cursor: pointer; transition: border-color 0.2s; background: var(--surface-soft);">

Strg+V zum Einfuegen

oder klicken um Datei auszuwaehlen

@@ -54,7 +54,7 @@

Vorschau

+ style="border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted);">
@@ -149,16 +149,16 @@ dateiInput.addEventListener('change', function() { dropZone.addEventListener('dragover', function(e) { e.preventDefault(); this.style.borderColor = 'var(--primary)'; - this.style.background = '#EBF5FB'; + this.style.background = 'var(--info-bg)'; }); dropZone.addEventListener('dragleave', function() { this.style.borderColor = 'var(--border)'; - this.style.background = '#fafafa'; + this.style.background = 'var(--surface-soft)'; }); dropZone.addEventListener('drop', function(e) { e.preventDefault(); this.style.borderColor = 'var(--border)'; - this.style.background = '#fafafa'; + this.style.background = 'var(--surface-soft)'; if (e.dataTransfer.files[0] && e.dataTransfer.files[0].type.indexOf('image') >= 0) { var reader = new FileReader(); reader.onload = function(ev) { bildLaden(ev.target.result); }; diff --git a/templates/admin_software_edit.html b/templates/admin_software_edit.html index 8911272..2533e23 100644 --- a/templates/admin_software_edit.html +++ b/templates/admin_software_edit.html @@ -20,7 +20,7 @@ {% else %} -
+
{%- if karte.kategorie == 'app' -%}📱 {%- elif karte.kategorie == 'generator' -%}🧩 {%- else -%}🖥️ @@ -54,7 +54,7 @@
+ style="padding: 0.5rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-soft);">
diff --git a/templates/base.html b/templates/base.html index ac8b8dc..3b66caf 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,30 +5,120 @@ {% block title %}3D-Druck-AG{% endblock %} {% endblock %} diff --git a/templates/profil_slot_neu.html b/templates/profil_slot_neu.html index 18550af..5a91211 100644 --- a/templates/profil_slot_neu.html +++ b/templates/profil_slot_neu.html @@ -8,7 +8,7 @@
{% if not drucker_liste %} -
+
Kein Drucker frei. Alle Drucker sind derzeit gesperrt (Wartung / Reparatur). Frag den Lehrer, wann wieder reserviert werden kann.
@@ -62,7 +62,7 @@ style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem;">
-
+
Regeln: Mindest-Dauer 15 Minuten, Maximum 24 Stunden. Achte darauf, dass dein Druck in deinem Slot fertig wird — sonst kann der naechste SuS nicht starten.
diff --git a/templates/profil_slots.html b/templates/profil_slots.html index 46794a0..1738c81 100644 --- a/templates/profil_slots.html +++ b/templates/profil_slots.html @@ -13,7 +13,7 @@
{% if not darf_reservieren %} -
+
Reservierung noch nicht freigeschaltet. Bitte den Lehrer kurz darum — er muss dich einmalig freischalten, danach kannst du selbst reservieren.
diff --git a/templates/projekt_abschluss.html b/templates/projekt_abschluss.html index 9166144..f17988a 100644 --- a/templates/projekt_abschluss.html +++ b/templates/projekt_abschluss.html @@ -9,13 +9,13 @@ .eval-optionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .eval-option { cursor: pointer; padding: 0.7rem 0.5rem; border-radius: 6px; text-align: center; - background: #F4F6F7; border: 2px solid transparent; transition: all 0.15s; + background: var(--surface-muted); border: 2px solid transparent; transition: all 0.15s; } - .eval-option:hover { background: #ECF0F1; } + .eval-option:hover { background: var(--surface-muted); } .eval-option input[type=radio] { display: none; } .eval-option input[type=radio]:checked + span { font-weight: 600; } .eval-option:has(input[type=radio]:checked) { - background: #EBF5FB; border-color: var(--primary); + background: var(--info-bg); border-color: var(--primary); } .eval-emoji { font-size: 1.4rem; display: block; margin-bottom: 0.2rem; } @@ -25,7 +25,7 @@ Abbrechen
-
+
Ehrlich bleiben. Niemand wird benotet — die Bewertung ist fuer dich selbst, damit du beim naechsten Projekt besser einschaetzen kannst, was du planen musst.
diff --git a/templates/projekt_cover.html b/templates/projekt_cover.html index f0910ef..d316124 100644 --- a/templates/projekt_cover.html +++ b/templates/projekt_cover.html @@ -21,7 +21,7 @@

+ text-align: center; cursor: pointer; transition: border-color 0.2s; background: var(--surface-soft);">

Strg+V zum Einfuegen

oder klicken um Datei auszuwaehlen

@@ -52,7 +52,7 @@

Vorschau

+ style="border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted);">
@@ -139,14 +139,14 @@ dateiInput.addEventListener('change', function() { } }); dropZone.addEventListener('dragover', function(e) { - e.preventDefault(); this.style.borderColor = 'var(--primary)'; this.style.background = '#EBF5FB'; + e.preventDefault(); this.style.borderColor = 'var(--primary)'; this.style.background = 'var(--info-bg)'; }); dropZone.addEventListener('dragleave', function() { - this.style.borderColor = 'var(--border)'; this.style.background = '#fafafa'; + this.style.borderColor = 'var(--border)'; this.style.background = 'var(--surface-soft)'; }); dropZone.addEventListener('drop', function(e) { e.preventDefault(); - this.style.borderColor = 'var(--border)'; this.style.background = '#fafafa'; + this.style.borderColor = 'var(--border)'; this.style.background = 'var(--surface-soft)'; if (e.dataTransfer.files[0] && e.dataTransfer.files[0].type.indexOf('image') >= 0) { var reader = new FileReader(); reader.onload = function(ev) { bildLaden(ev.target.result); }; diff --git a/templates/projekt_detail.html b/templates/projekt_detail.html index 08f7ee8..ac652ba 100644 --- a/templates/projekt_detail.html +++ b/templates/projekt_detail.html @@ -12,7 +12,7 @@ {# ============== Lineage-Banner: Vorlage + Wiederholungen ============== #} {% if vorlage %} -
+
🔗 Vorlage: {{ vorlage.titel }} von {{ tier_emoji(vorlage.tier or '') }} {{ vorlage.vorname or '—' }} @@ -23,7 +23,7 @@ {% endif %} {% if wiederholungen %} -
+
🔁 Wurde wiederholt von: {% for w in wiederholungen %} {{ tier_emoji(w.tier or '') }} @@ -57,7 +57,7 @@ {% else %} -
🎯
@@ -97,7 +97,7 @@

Deine Bewertung

-
+
Gesamt
{% if p.selbsteinschaetzung == 'zufrieden' %}🟢 @@ -107,7 +107,7 @@
{{ p.selbsteinschaetzung or '—' }}
-
+
Planung
{% if p.selbsteinschaetzung_planung == 'gut' %}🟢 @@ -117,7 +117,7 @@
{{ p.selbsteinschaetzung_planung or '—' }}
-
+
Ausfuehrung
{% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢 @@ -251,7 +251,7 @@ {# Upload-Zone #}
+ padding: 1.5rem; text-align: center; cursor: pointer; background: var(--surface-soft);">
📁 Dateien hier ablegen
oder klicken — STL, 3MF, JPG, PNG · max. 60 MB pro Datei @@ -300,7 +300,7 @@ {% endif %}
{% if not darf_abschliessen %} -
+
Noch nicht abschliessbar:
    {% for f in abschluss_fehlende %}
  • {{ f }}
    • {% endfor %} @@ -308,17 +308,17 @@
{% endif %} {% elif p.freigabe_status == 'wartet_auf_freigabe' %} -
+
Wartet auf Freigabe vom Lehrer. Sobald er drueber geschaut hat, kannst du ein neues Projekt anfangen.
{% elif p.freigabe_status == 'rueckfrage' %} -
+
Lehrer hat eine Rueckfrage. Schau ins Cockpit fuer die Details und beantworte sie.
{% else %} -
+
Freigegeben. {% if p.freigegeben_am %}Am {{ p.freigegeben_am[:10] }}.{% endif %} Du kannst jetzt ein neues Projekt anfangen. @@ -349,16 +349,16 @@ zone.addEventListener('dragover', function(e) { e.preventDefault(); zone.style.borderColor = 'var(--primary)'; - zone.style.background = '#EBF5FB'; + zone.style.background = 'var(--info-bg)'; }); zone.addEventListener('dragleave', function() { zone.style.borderColor = 'var(--border)'; - zone.style.background = '#fafafa'; + zone.style.background = 'var(--surface-soft)'; }); zone.addEventListener('drop', function(e) { e.preventDefault(); zone.style.borderColor = 'var(--border)'; - zone.style.background = '#fafafa'; + zone.style.background = 'var(--surface-soft)'; if (e.dataTransfer.files && e.dataTransfer.files.length) { dateienHochladen(e.dataTransfer.files); } diff --git a/templates/projekt_liste.html b/templates/projekt_liste.html index bcf6fc6..062ec6c 100644 --- a/templates/projekt_liste.html +++ b/templates/projekt_liste.html @@ -13,7 +13,7 @@
{% if not darf_neues and sperr_grund %} -
+
{{ sperr_grund }}
{% endif %} @@ -27,7 +27,7 @@ {% else %} -
🎯
diff --git a/templates/projekt_neu.html b/templates/projekt_neu.html index b94e182..c7f188c 100644 --- a/templates/projekt_neu.html +++ b/templates/projekt_neu.html @@ -7,7 +7,7 @@ Abbrechen
-
+
Commitment. Mit dem Anlegen entscheidest du dich, dieses Projekt durchzuziehen. Du kannst es spaeter abschliessen und selbst bewerten — und erst dann wieder ein neues anfangen.
diff --git a/templates/projekte_katalog.html b/templates/projekte_katalog.html index 472c7e6..81bd0d7 100644 --- a/templates/projekte_katalog.html +++ b/templates/projekte_katalog.html @@ -5,11 +5,11 @@

Projekte

diff --git a/templates/software.html b/templates/software.html index 66de231..662cf94 100644 --- a/templates/software.html +++ b/templates/software.html @@ -15,7 +15,7 @@ } .sw-karte .bild-platzhalter { height: 110px; - background: linear-gradient(135deg, #ECF0F1, #D5DBDB); + background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px; display: flex; align-items: center; @@ -49,8 +49,8 @@ gap: 0.3rem; font-size: 0.8rem; padding: 0.35rem 0.7rem; - border-radius: 6px; - background: #2C3E50; + border-radius: var(--radius-md); + background: var(--color-secondary); color: #fff; text-decoration: none; }