From 3a2e65ebd9ac30d052c6d5eb044deb872505efc6 Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Wed, 22 Jul 2026 11:49:34 +0200
Subject: [PATCH] =?UTF-8?q?Schueler:=20Auftrags-Card=20im=20Marken-Stil=20?=
 =?UTF-8?q?(Sim-Bild=20+=20Orange=20+=20=F0=9F=93=8B=20Auftrag-Badge)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- renderAuftragCard nutzt card_image + .mod-card-Muster statt Verlauf+Emoji
- Warte-Zustand bei pausierter (Tempo-)Freigabe: "⏳ Wartet auf Freigabe"

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/schueler.html | 44 +++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/App/schueler.html b/App/schueler.html
index e377bc0..0bb4ede 100644
--- a/App/schueler.html
+++ b/App/schueler.html
@@ -225,21 +225,35 @@ async function renderModules() {
   // das Modul aber spielbar bleibt.
   var teacherStarted = modList.filter(function(m) { return m.mode === 'teacher_started' && !m.assignmentCompleted; });
   if (teacherStarted.length > 0) {
-    html += '<div style="margin-bottom:1rem">';
-    html += '<p style="font-size:.78rem;font-weight:700;color:#e8833a;margin-bottom:.4rem">📋 Aufträge von deiner Lehrperson</p>';
-    teacherStarted.forEach(function(m) {
-      var due = m.dueDate ? '<br><span style="font-size:.6rem;color:#8a8a8a">Zu erledigen bis ' + new Date(m.dueDate).toLocaleDateString('de-AT',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'}) + '</span>' : '';
-      var quiz = m.quizEnabled ? '<br><span style="font-size:.6rem;color:#4a7c8a">📝 Mit kurzem Quiz</span>' : '';
-      var url = buildModuleUrl(m);
-      html += '<a href="'+url+'" class="mod-card" style="border-color:#e8833a;border-width:2px;margin-bottom:.5rem">';
-      html += '<div class="mod-img" style="height:80px;background:linear-gradient(135deg,#e8833a,#f4a261)"><span style="font-size:2.5rem">'+(m.icon||'📚')+'</span></div>';
-      html += '<div class="mod-body">';
-      html += '<h3 style="color:#e8833a">'+m.icon+' '+m.name+(m.forcedLevel ? ' — Stufe '+m.forcedLevel : '')+'</h3>';
-      html += '<p>Auftrag von deiner Lehrperson'+due+quiz+'</p>';
-      html += '<span class="mod-status" style="background:#fde8d0;color:#e8833a">▶ Jetzt starten</span>';
-      html += '</div></a>';
-    });
-    html += '</div>';
+    html += '<div style="margin-bottom:1.3rem">';
+    html += '<p style="font-size:.84rem;font-weight:800;color:#e8833a;margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem">📋 Aufträge von deiner Lehrperson</p>';
+    html += '<div class="mod-grid">';
+    teacherStarted.forEach(function(m) { html += renderAuftragCard(m); });
+    html += '</div></div>';
+  }
+
+  // Auftrags-Card im Marken-Stil: Sim-Bild + Orange-Akzent, klar als Auftrag erkennbar.
+  function renderAuftragCard(m) {
+    var cardImg = m.card_image ? 'assets/img/' + m.card_image : null;
+    var imgHtml = cardImg ? '<img src="'+cardImg+'" alt="">' : '<span style="font-size:3rem">'+(m.icon||'📚')+'</span>';
+    var url = buildModuleUrl(m);
+    var badge = '<span style="position:absolute;top:8px;left:8px;background:#e8833a;color:#fff;font-size:.66rem;font-weight:800;padding:3px 11px;border-radius:9999px;letter-spacing:.04em;box-shadow:0 2px 5px rgba(0,0,0,.22);z-index:5">📋 Auftrag</span>';
+    var meta = [];
+    if (m.dueDate)     meta.push('⏰ bis ' + new Date(m.dueDate).toLocaleDateString('de-AT',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'}));
+    if (m.quizEnabled) meta.push('📝 mit kurzem Quiz');
+    var s = '<div class="mod-card spielbar" style="border-color:#e8833a;border-width:2px">';
+    s += '<div class="mod-img" style="position:relative">'+imgHtml+badge+'</div>';
+    s += '<div class="mod-body">';
+    s += '<h3 style="color:#c25e1e">'+(m.icon||'📚')+' '+m.name+(m.forcedLevel ? ' <span style="font-weight:600;color:#9a9a9a;font-size:.82rem">· Stufe '+m.forcedLevel+'</span>' : '')+'</h3>';
+    s += '<p>Auftrag von deiner Lehrperson'+(meta.length ? '<br><span style="color:#8a8a8a">'+meta.join(' · ')+'</span>' : '')+'</p>';
+    s += '<div class="mod-actions">';
+    if (m.paused) {
+      s += '<span class="mod-btn" style="flex:1;justify-content:center;background:#fdf1e6;color:#c25e1e;border-color:#e8c3a0;cursor:default" title="Deine Lehrperson gibt den Start noch frei">⏳ Wartet auf Freigabe</span>';
+    } else {
+      s += '<a href="'+url+'" class="mod-btn primary" style="background:#e8833a;border-color:#e8833a">▶ Jetzt starten</a>';
+    }
+    s += '</div></div></div>';
+    return s;
   }
 
   // Regulaere Module: spielbar zuerst, "in Kürze" am Ende.