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>
153 lines
7.8 KiB
HTML
153 lines
7.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Review: {{ p.titel }}{% endblock %}
|
|
{% block content %}
|
|
|
|
<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<h1>Review: {{ p.titel }}</h1>
|
|
<a href="{{ url_for('admin.projekt_freigabe') }}" class="btn btn-secondary">← Review-Queue</a>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 280px 1fr; gap: 1rem;">
|
|
|
|
{# ============== Cover ============== #}
|
|
<div class="card" style="text-align: center;">
|
|
{% if p.hat_cover %}
|
|
<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, 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>
|
|
{% endif %}
|
|
{% if profil %}
|
|
<div style="margin-top: 0.8rem;">
|
|
<div style="font-size: 1.4rem;">{{ tier_emoji(profil.tier) }}</div>
|
|
<strong>{{ profil.vorname }}</strong>
|
|
</div>
|
|
{% endif %}
|
|
<div style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.4rem;">
|
|
abgeschlossen {{ p.abgeschlossen_am[:16].replace('T', ' ') if p.abgeschlossen_am else '—' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{# ============== Beschreibung ============== #}
|
|
<div class="card">
|
|
<h2>Beschreibung</h2>
|
|
{% if p.beschreibung_md %}
|
|
<div>{{ p.beschreibung_md|markdown }}</div>
|
|
{% else %}
|
|
<p style="color: var(--text-light);"><em>Keine Beschreibung.</em></p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# ============== Selbstbewertung ============== #}
|
|
<div class="card">
|
|
<h2>Selbstbewertung</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: 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' %}🟢
|
|
{% elif p.selbsteinschaetzung == 'mittel' %}🟡
|
|
{% elif p.selbsteinschaetzung == 'gelernt' %}🔴{% endif %}
|
|
</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: 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' %}🟢
|
|
{% elif p.selbsteinschaetzung_planung == 'ok' %}🟡
|
|
{% elif p.selbsteinschaetzung_planung == 'schwierig' %}🔴
|
|
{% else %}—{% endif %}
|
|
</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: 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' %}🟢
|
|
{% elif p.selbsteinschaetzung_ausfuehrung == 'ok' %}🟡
|
|
{% elif p.selbsteinschaetzung_ausfuehrung == 'schwierig' %}🔴
|
|
{% else %}—{% endif %}
|
|
</div>
|
|
<div style="font-size: 0.85rem; margin-top: 0.2rem;">{{ p.selbsteinschaetzung_ausfuehrung or '—' }}</div>
|
|
</div>
|
|
</div>
|
|
{% if p.was_gelernt %}
|
|
<div style="margin-bottom: 0.6rem;">
|
|
<strong>Was gelernt:</strong>
|
|
<div style="margin-top: 0.2rem;">{{ p.was_gelernt }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if p.was_klappte_nicht %}
|
|
<div>
|
|
<strong>Was klappte nicht:</strong>
|
|
<div style="margin-top: 0.2rem;">{{ p.was_klappte_nicht }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# ============== Rueckfragen-Historie ============== #}
|
|
{% if rueckfragen %}
|
|
<div class="card">
|
|
<h2>Rueckfragen-Historie</h2>
|
|
{% for r in rueckfragen %}
|
|
<div style="border-left: 3px solid {% if r.status == 'offen' %}var(--warning){% else %}var(--success){% endif %};
|
|
padding: 0.5rem 0.8rem; margin-bottom: 0.5rem; background: var(--surface-muted); border-radius: 4px;">
|
|
<div style="font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.2rem;">
|
|
{{ r.erstellt_am[:16].replace('T', ' ') }}{% if r.status == 'erledigt' %} · ✓ erledigt{% endif %}
|
|
</div>
|
|
<div>{{ r.text }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# ============== Aktionen ============== #}
|
|
<div class="card" style="border-top: 4px solid var(--primary);">
|
|
<h2>Deine Entscheidung</h2>
|
|
|
|
<form method="post" action="{{ url_for('admin.projekt_freigeben', projekt_id=p.id) }}"
|
|
style="display: inline-block; margin-right: 0.5rem;">
|
|
<button class="btn btn-primary" style="padding: 0.7rem 1.5rem;">
|
|
✅ Freigeben — SuS darf neues anfangen
|
|
</button>
|
|
</form>
|
|
|
|
<details style="margin-top: 1rem;">
|
|
<summary style="cursor: pointer; color: var(--primary); font-weight: 600;">
|
|
❓ Rueckfrage stellen
|
|
</summary>
|
|
<form method="post" action="{{ url_for('admin.projekt_rueckfrage', projekt_id=p.id) }}"
|
|
style="margin-top: 0.5rem; display: grid; gap: 0.5rem;">
|
|
<textarea name="text" required rows="3" maxlength="500"
|
|
placeholder="z.B. 'Schreib mir bitte 2-3 Saetze dazu, was beim Slicen schief lief.'"
|
|
style="padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit;"></textarea>
|
|
<div>
|
|
<button class="btn btn-secondary">Rueckfrage abschicken</button>
|
|
</div>
|
|
</form>
|
|
</details>
|
|
|
|
<details style="margin-top: 1rem;">
|
|
<summary style="cursor: pointer; color: var(--danger); font-weight: 600;">
|
|
🗑️ Hart loeschen
|
|
</summary>
|
|
<p style="font-size: 0.85rem; color: var(--text-light); margin-top: 0.5rem;">
|
|
Nur fuer Spam, Penismodelle, Copyright-Verletzungen. Wird im aenderung_log dokumentiert.
|
|
</p>
|
|
<form method="post" action="{{ url_for('admin.projekt_admin_loeschen', projekt_id=p.id) }}"
|
|
onsubmit="return confirm('Projekt {{ p.titel }} wirklich UNWIDERRUFLICH loeschen?')"
|
|
style="margin-top: 0.5rem;">
|
|
<button class="btn btn-secondary" style="color: var(--danger);">Endgueltig loeschen</button>
|
|
</form>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|