Style Guide v1.0.0: Indigo-Palette + lokale Web-Fonts
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>
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
|
||||
{# ============== Lineage-Banner: Vorlage + Wiederholungen ============== #}
|
||||
{% if vorlage %}
|
||||
<div class="card" style="background: #EBF5FB; border-left: 4px solid var(--primary); margin-bottom: 0.8rem;">
|
||||
<div class="card" style="background: var(--info-bg); border-left: 4px solid var(--primary); margin-bottom: 0.8rem;">
|
||||
<strong>🔗 Vorlage:</strong>
|
||||
<a href="{{ url_for('profil.projekt_detail', projekt_id=vorlage.id) }}">{{ vorlage.titel }}</a>
|
||||
von {{ tier_emoji(vorlage.tier or '') }} {{ vorlage.vorname or '—' }}
|
||||
@@ -23,7 +23,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% if wiederholungen %}
|
||||
<div class="card" style="background: #EAFBF1; border-left: 4px solid var(--success); margin-bottom: 0.8rem;">
|
||||
<div class="card" style="background: var(--success-bg); border-left: 4px solid var(--success); margin-bottom: 0.8rem;">
|
||||
<strong>🔁 Wurde wiederholt von:</strong>
|
||||
{% for w in wiederholungen %}
|
||||
{{ tier_emoji(w.tier or '') }}
|
||||
@@ -57,7 +57,7 @@
|
||||
<img src="{{ url_for('api.projekt_cover', projekt_id=p.id) }}" alt=""
|
||||
style="width: 100%; max-height: 240px; object-fit: cover; border-radius: 6px;">
|
||||
{% else %}
|
||||
<div style="height: 200px; background: linear-gradient(135deg, #ECF0F1, #D5DBDB); border-radius: 6px;
|
||||
<div style="height: 200px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover)); border-radius: 6px;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text-light);">
|
||||
🎯
|
||||
</div>
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="card">
|
||||
<h2>Deine Bewertung</h2>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem;">
|
||||
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
|
||||
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
|
||||
<div style="font-size: 0.75rem; color: var(--text-light);">Gesamt</div>
|
||||
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
|
||||
{% if p.selbsteinschaetzung == 'zufrieden' %}🟢
|
||||
@@ -107,7 +107,7 @@
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung or '—' }}</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
|
||||
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
|
||||
<div style="font-size: 0.75rem; color: var(--text-light);">Planung</div>
|
||||
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
|
||||
{% if p.selbsteinschaetzung_planung == 'gut' %}🟢
|
||||
@@ -117,7 +117,7 @@
|
||||
</div>
|
||||
<div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_planung or '—' }}</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 0.6rem; background: #F4F6F7; border-radius: 6px;">
|
||||
<div style="text-align: center; padding: 0.6rem; background: var(--surface-muted); border-radius: 6px;">
|
||||
<div style="font-size: 0.75rem; color: var(--text-light);">Ausfuehrung</div>
|
||||
<div style="font-size: 1.4rem; margin-top: 0.2rem;">
|
||||
{% if p.selbsteinschaetzung_ausfuehrung == 'gut' %}🟢
|
||||
@@ -251,7 +251,7 @@
|
||||
|
||||
{# Upload-Zone #}
|
||||
<div id="upload-zone" style="margin-top: 1rem; border: 3px dashed var(--border); border-radius: 8px;
|
||||
padding: 1.5rem; text-align: center; cursor: pointer; background: #fafafa;">
|
||||
padding: 1.5rem; text-align: center; cursor: pointer; background: var(--surface-soft);">
|
||||
<div style="font-size: 1.1rem; color: var(--text-light);">📁 Dateien hier ablegen</div>
|
||||
<div style="font-size: 0.85rem; color: var(--text-light); margin-top: 0.3rem;">
|
||||
oder klicken — STL, 3MF, JPG, PNG · max. 60 MB pro Datei
|
||||
@@ -300,7 +300,7 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if not darf_abschliessen %}
|
||||
<div style="margin-top: 0.6rem; background: #FEF9E7; padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.85rem;">
|
||||
<div style="margin-top: 0.6rem; background: var(--warn-bg); padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.85rem;">
|
||||
<strong>Noch nicht abschliessbar:</strong>
|
||||
<ul style="margin: 0.3rem 0 0 1.2rem; padding: 0;">
|
||||
{% for f in abschluss_fehlende %}<li>{{ f }}</li>{% endfor %}
|
||||
@@ -308,17 +308,17 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
{% elif p.freigabe_status == 'wartet_auf_freigabe' %}
|
||||
<div style="background: #FEF9E7; padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--warning);">
|
||||
<div style="background: var(--warn-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--warning);">
|
||||
<strong>Wartet auf Freigabe vom Lehrer.</strong>
|
||||
Sobald er drueber geschaut hat, kannst du ein neues Projekt anfangen.
|
||||
</div>
|
||||
{% elif p.freigabe_status == 'rueckfrage' %}
|
||||
<div style="background: #FADBD8; padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--danger);">
|
||||
<div style="background: var(--error-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--danger);">
|
||||
<strong>Lehrer hat eine Rueckfrage.</strong>
|
||||
Schau ins Cockpit fuer die Details und beantworte sie.
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="background: #EAFBF1; padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--success);">
|
||||
<div style="background: var(--success-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--success);">
|
||||
<strong>Freigegeben.</strong>
|
||||
{% 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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user