Teacher-Fixes (Heli-Flugplan, Modul-Label) + Kopfzeilen-Entwuerfe
- teacher.html: Modul-Detail-Spalte 'Sterne' -> 'Leistung' (zeigt %-Balken). Heli 'Aktuell': neue Spalte 'Flugplan' (kumuliert Wegpunkt/Treffer/Fehlkl.), die drei Detailspalten bleiben, 'Gesamt' entfaellt (Leistung deckt es ab). - admin-styleguide.html: neue Sektion 'Kopfzeile' mit 3 Entwuerfen (A durchgehend / B schwebend / C schwebend+halbtransparent), je als iPad- und Full-HD-Mockup ueber simuliertem Sim-Inhalt. Glossar target=_blank, Neustart drin, Lehrplan raus. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -65,6 +65,7 @@
|
||||
<a href="#farben-bild">🌿 Bild-Farbpalette</a>
|
||||
<a href="#farben-ui">🧩 UI-Farbtokens</a>
|
||||
<a href="#leistung">📊 Leistungs-Skala</a>
|
||||
<a href="#kopfzeile">🎩 Kopfzeile</a>
|
||||
<a href="#layout">📐 Layout & Spacing</a>
|
||||
<a href="#typo">🔤 Typografie</a>
|
||||
<a href="#bilder">🖼️ Bildformate</a>
|
||||
@@ -232,6 +233,87 @@
|
||||
<p style="font-size:.78rem;color:#8a8a8a;margin-top:.6rem">Vorschau der Zuordnung je Sim: <a href="admin-lehrer-view.html">Lehrer-View Parameter-Überblick</a>.</p>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<div class="card" id="kopfzeile">
|
||||
<div class="card-h">Kopfzeile — Vereinheitlichung (3 Entwürfe)</div>
|
||||
<p class="lead">Eine Standard-Kopfzeile für ALLE Sims: <strong>Kreis-Logo</strong> (ohne Schriftzug) · 🏠 Home · Sim-Titel + Kontext (Level/Phase) — rechts <strong>⏱ Tempo</strong> (nur Echtzeit-Sims) · 🎵 Musik · 🔊 Ton · 🔄 Neustart · ℹ️ Hilfe · 📖 Glossar (<code>target="_blank"</code>). Lehrplan entfällt. Musik überall (Klima-Track als Platzhalter).</p>
|
||||
<style>
|
||||
.khz-scene{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#a7cbe0 0%,#8bb98d 55%,#e6dca6 100%);border:1px solid #cfd6cf}
|
||||
.khz-scene .khz-sky{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:1.5rem;font-weight:800;letter-spacing:.08em;pointer-events:none}
|
||||
.khz-scene .khz-content{position:absolute;left:14px;bottom:12px;display:flex;gap:8px;pointer-events:none}
|
||||
.khz-scene .khz-content i{width:70px;height:44px;border-radius:8px;background:rgba(255,255,255,.35);display:block}
|
||||
.ghdr{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.45rem;padding:.45rem .65rem;z-index:3}
|
||||
.ghdr .sp{flex:1}
|
||||
.ghdr .logo{width:34px;height:34px;border-radius:50%;background:#1f4e5a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none}
|
||||
.ghdr .tw{display:flex;align-items:center;gap:.45rem;padding:.15rem .1rem}
|
||||
.ghdr .title{font-weight:800;color:#1f4e5a;font-size:.92rem;white-space:nowrap}
|
||||
.ghdr .ctx{font-size:.64rem;font-weight:700;color:#4a7c8a;background:#dae8ec;border-radius:10px;padding:.12rem .5rem;white-space:nowrap}
|
||||
.ghdr .btn{width:34px;height:34px;border-radius:9px;border:1px solid rgba(0,0,0,.08);background:#fff;display:flex;align-items:center;justify-content:center;font-size:.98rem;flex:none}
|
||||
/* A durchgehend */
|
||||
.ghdr.solid{background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 1px 5px rgba(0,0,0,.08)}
|
||||
/* B schwebend — einzelne Pillen mit Schatten, kein durchgehender Grund */
|
||||
.ghdr.float{background:transparent}
|
||||
.ghdr.float .logo,.ghdr.float .btn,.ghdr.float .tw{box-shadow:0 2px 8px rgba(0,0,0,.22)}
|
||||
.ghdr.float .tw{background:rgba(255,255,255,.94);border-radius:10px;padding:.2rem .55rem}
|
||||
/* C schwebend + halbtransparent, bei Hover voll */
|
||||
.ghdr.ghost{background:transparent}
|
||||
.ghdr.ghost .logo,.ghdr.ghost .btn,.ghdr.ghost .tw{box-shadow:0 2px 8px rgba(0,0,0,.22);opacity:.45;transition:opacity .2s}
|
||||
.ghdr.ghost .tw{background:rgba(255,255,255,.94);border-radius:10px;padding:.2rem .55rem}
|
||||
.ghdr.ghost:hover .logo,.ghdr.ghost:hover .btn,.ghdr.ghost:hover .tw{opacity:1}
|
||||
.khz-variant{margin:1rem 0}
|
||||
.khz-variant h3{margin-bottom:.2rem}
|
||||
.khz-tag{font-size:.7rem;color:#6a6a6a;margin:0 0 .5rem}
|
||||
.khz-frame-lab{font-size:.66rem;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;margin:.5rem 0 .25rem}
|
||||
.khz-ipad{height:150px}
|
||||
.khz-fhd{height:120px}
|
||||
.khz-scroll{overflow-x:auto}
|
||||
</style>
|
||||
|
||||
<p style="font-size:.78rem;color:#4a4a4a;margin:.2rem 0 1rem"><b>Fahre mit der Maus über Entwurf C</b>, um den Halbtransparent-Effekt (voll bei Hover) zu sehen. Die Stufen hinter der Zeile deuten den Sim-Inhalt an — so sieht man, wie viel jede Variante verdeckt.</p>
|
||||
|
||||
<!-- Entwurf A -->
|
||||
<div class="khz-variant">
|
||||
<h3>A — Durchgehend (wie Klimawächter)</h3>
|
||||
<p class="khz-tag">Klar abgegrenzter Balken. Sehr eindeutig, verdeckt aber einen festen Streifen des Hauptfensters.</p>
|
||||
<div class="khz-frame-lab">📱 iPad-Landscape (~1024 px)</div>
|
||||
<div class="khz-scene khz-ipad" style="max-width:1024px">
|
||||
<div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
|
||||
<div class="ghdr solid"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Entwurf B -->
|
||||
<div class="khz-variant">
|
||||
<h3>B — Schwebend (wie Landwirtschaft) · <span style="color:#5a8a5e">Atlas-Empfehlung</span></h3>
|
||||
<p class="khz-tag">Einzelne Elemente „schweben" über dem Inhalt. Wirkt leichter, verdeckt weniger, zeigt mehr vom Hauptfenster.</p>
|
||||
<div class="khz-frame-lab">📱 iPad-Landscape (~1024 px)</div>
|
||||
<div class="khz-scene khz-ipad" style="max-width:1024px">
|
||||
<div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
|
||||
<div class="ghdr float"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
|
||||
</div>
|
||||
<div class="khz-frame-lab">🖥️ Full-HD PC (1920 px — mehr Platz zwischen den Elementen)</div>
|
||||
<div class="khz-scroll"><div class="khz-scene khz-fhd" style="width:1600px">
|
||||
<div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i><i></i><i></i></div>
|
||||
<div class="ghdr float"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<!-- Entwurf C -->
|
||||
<div class="khz-variant">
|
||||
<h3>C — Schwebend + halbtransparent (voll bei Hover)</h3>
|
||||
<p class="khz-tag">Wie B, aber die Elemente sind halbtransparent und werden erst bei Maus-Berührung voll sichtbar — maximaler Blick auf den Inhalt. (Am iPad: „voll" per Antippen.)</p>
|
||||
<div class="khz-frame-lab">📱 iPad-Landscape (~1024 px) — <b>Maus drüber = voll</b></div>
|
||||
<div class="khz-scene khz-ipad" style="max-width:1024px">
|
||||
<div class="khz-sky">SIM-INHALT</div><div class="khz-content"><i></i><i></i><i></i></div>
|
||||
<div class="ghdr ghost"><span class="logo">GGS</span><button class="btn" title="Startseite">🏠</button><span class="tw"><span class="title">🌍 Klimawächter</span><span class="ctx">Level 2</span></span><span class="sp"></span><button class="btn" title="Tempo">⏱</button><button class="btn" title="Musik">🎵</button><button class="btn" title="Ton">🔊</button><button class="btn" title="Neustart">🔄</button><button class="btn" title="Hilfe">ℹ️</button><button class="btn" title="Glossar (neuer Tab)">📖</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:.6rem">
|
||||
<b>Aufbau (alle Varianten gleich):</b> links Kreis-Logo · 🏠 Home · Titel + Kontext — rechts ⏱ Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · 🎵 Musik · 🔊 Ton · 🔄 Neustart · ℹ️ Hilfe · 📖 Glossar (neuer Tab). Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<div class="card" id="layout">
|
||||
<div class="card-h">Layout & Spacing</div>
|
||||
|
||||
+7
-4
@@ -953,15 +953,18 @@ var LIVE_PRIMARY_FIELDS = {
|
||||
return n === 0 ? '<span style="color:#5a8a5e;font-weight:700">0</span>'
|
||||
: '<span style="color:'+c+';font-weight:700">'+n+'</span>';
|
||||
}},
|
||||
// Flugplan = Routenplanungs-Phase kumuliert (Wegpunkt-Genauigkeit − Fehlklick-Abzug).
|
||||
{k:'__flugplan', label:'🗺️ Flugplan', fmt:function(v, row){
|
||||
var s = row.state||{}; if (!s.planTotal) return '<span style="color:#9a9a9a">—</span>';
|
||||
var p = Math.max(0, Math.min(100, Math.round((s.planCorrect||0)/s.planTotal*100) - Math.min(40, (s.planAttempts||0)*4)));
|
||||
return _pctBar(p);
|
||||
}},
|
||||
{k:'startScore', label:'🛫 Start', fmt:function(v){
|
||||
return v==null ? '<span style="color:#9a9a9a">—</span>' : _pctBar(Math.round(Math.max(0,Math.min(5,v))/5*100));
|
||||
}},
|
||||
{k:'landingScore', label:'🛬 Landung', fmt:function(v){
|
||||
return v==null ? '<span style="color:#9a9a9a">—</span>' : _pctBar(Math.round(Math.max(0,Math.min(5,v))/5*100));
|
||||
}},
|
||||
{k:'totalStars', label:'⭐ Gesamt', fmt:function(v){
|
||||
return v==null ? '<span style="color:#9a9a9a">—</span>' : _pctBar(Math.round(Math.max(0,Math.min(5,v))/5*100));
|
||||
}},
|
||||
{k:'failed', label:'Status', align:'center', fmt:function(v, row){
|
||||
var s = row.state||{};
|
||||
if (v === true) return '<span style="color:#c07a6b;font-weight:700">⚠ Chefpilot</span>';
|
||||
@@ -4697,7 +4700,7 @@ function renderModDetail() {
|
||||
html += '<table class="result-matrix" style="font-size:.72rem">';
|
||||
html += '<thead><tr>'
|
||||
+ '<th onclick="sortModDetail(\'name\')">Schüler*in '+arr('name')+'</th>'
|
||||
+ '<th onclick="sortModDetail(\'best_stars\')">Sterne '+arr('best_stars')+'</th>'
|
||||
+ '<th onclick="sortModDetail(\'best_stars\')">Leistung '+arr('best_stars')+'</th>'
|
||||
+ '<th onclick="sortModDetail(\'plays\')">Durchg. '+arr('plays')+'</th>';
|
||||
hl.forEach(function(h) {
|
||||
html += '<th onclick="sortModDetail(\'hl:'+h.key+'\')" title="'+esc(h.label)+(h.agg==='min'?' (weniger ist besser)':' (mehr ist besser)')+'">'+esc(h.label)+' '+arr('hl:'+h.key)+'</th>';
|
||||
|
||||
Reference in New Issue
Block a user