Kopfzeile: nur Entwurf B, eigene SVG-Icons, aufgeklappte Controls
- A und C entfernt, nur schwebende Variante B. - Emojis raus -> eigene SVG-Icons im App-Stil (Home/Tempo/Musik/Ton/ Neustart/Hilfe/Glossar) via <symbol>/<use>. - Logo (bildLogo.png) + Titel + Level in EINER Pille, alle Elemente 38px hoch, gleiche Hoehe (Hoehen-Mismatch behoben). - Tempo (Segmente Pause/1x/2x/4x) und Musikplayer (Song-Dropdown + Play + Lautstaerke) zusaetzlich in aufgeklappter Version dargestellt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+72
-50
@@ -235,82 +235,104 @@
|
||||
|
||||
<!-- ============================================================== -->
|
||||
<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>
|
||||
<div class="card-h">Kopfzeile — Entwurf B (schwebend)</div>
|
||||
<p class="lead">Standard-Kopfzeile für ALLE Sims: <strong>Kreis-Logo · Titel · Level</strong> als eine schwebende Pille — Home und rechts die Steuerung: <strong>Tempo</strong> (nur Echtzeit-Sims) · Musik · Ton · Neustart · Hilfe · Glossar (<code>target="_blank"</code>). <strong>Eigene Icons im App-Stil</strong> statt Emojis, alle Elemente auf <strong>gleicher Höhe</strong>. 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}
|
||||
/* Alle Header-Elemente 38px hoch, vertikal zentriert (Logo·Titel·Level = eine Pille) */
|
||||
.ghdr{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;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}
|
||||
.ghdr .grp{display:flex;align-items:center;gap:.5rem;height:38px;padding:0 .8rem 0 .3rem;background:rgba(255,255,255,.96);border-radius:19px;box-shadow:0 2px 9px rgba(0,0,0,.2)}
|
||||
.ghdr .grp .logo{width:30px;height:30px;border-radius:50%;background:#1f4e5a;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
|
||||
.ghdr .grp .logo img{width:100%;height:100%;object-fit:cover}
|
||||
.ghdr .grp .title{font-weight:800;color:#1f4e5a;font-size:.92rem;white-space:nowrap;line-height:1}
|
||||
.ghdr .grp .ctx{font-size:.6rem;font-weight:800;color:#fff;background:#5a8a5e;border-radius:9px;padding:.2rem .5rem;line-height:1;white-space:nowrap}
|
||||
.ghdr .btn{width:38px;height:38px;border-radius:12px;border:none;background:rgba(255,255,255,.96);box-shadow:0 2px 9px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1f4e5a;padding:0}
|
||||
.ghdr .btn .ic{width:20px;height:20px}
|
||||
.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-frame-lab{font-size:.66rem;font-weight:700;color:#8a8a8a;text-transform:uppercase;letter-spacing:.04em;margin:.9rem 0 .3rem}
|
||||
.khz-ipad{height:150px}
|
||||
.khz-fhd{height:120px}
|
||||
.khz-scroll{overflow-x:auto}
|
||||
/* Aufgeklappte Steuerung */
|
||||
.khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:#fff;border-radius:12px;box-shadow:0 2px 9px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.06);vertical-align:middle}
|
||||
.khz-pop .ic{width:16px;height:16px;color:#1f4e5a}
|
||||
.khz-seg{height:30px;min-width:36px;padding:0 .6rem;border:none;background:transparent;border-radius:8px;font-weight:800;font-size:.82rem;color:#4a4a4a;cursor:pointer;display:flex;align-items:center;justify-content:center}
|
||||
.khz-seg.on{background:#4a7c8a;color:#fff}
|
||||
.khz-seg.on .ic{color:#fff}
|
||||
.khz-music{gap:.5rem;padding:0 .55rem}
|
||||
.khz-select{height:30px;border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:0 .55rem;font-size:.78rem;color:#1f4e5a;font-weight:700;background:#f7f6f3;display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
|
||||
.khz-range{width:96px;height:6px;border-radius:99px;background:linear-gradient(90deg,#4a7c8a 0 62%,#dfe6e9 62% 100%);position:relative}
|
||||
.khz-range::after{content:'';position:absolute;left:62%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#4a7c8a;box-shadow:0 1px 3px rgba(0,0,0,.3)}
|
||||
</style>
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
|
||||
<symbol id="ic-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.4 12 4l8 7.4"/><path d="M6 10.3V19a1 1 0 0 0 1 1h3v-5h4v5h3a1 1 0 0 0 1-1v-8.7"/></symbol>
|
||||
<symbol id="ic-tempo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4.6 16.5a7.5 7.5 0 0 1 14.8 0"/><path d="M12 16 15.2 12"/><circle cx="12" cy="16.3" r="1.3" fill="currentColor" stroke="none"/></symbol>
|
||||
<symbol id="ic-music" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 17V6.4l9-1.8V15"/><circle cx="6.5" cy="17" r="2.4"/><circle cx="15.5" cy="15" r="2.4"/></symbol>
|
||||
<symbol id="ic-sound" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.5h3.2L11 6v12l-3.8-3.5H4z"/><path d="M14.6 9.6a4 4 0 0 1 0 4.8"/><path d="M17 7.4a7 7 0 0 1 0 9.2"/></symbol>
|
||||
<symbol id="ic-restart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12a7 7 0 1 1-2-4.9"/><path d="M19 4.5V9h-4.5"/></symbol>
|
||||
<symbol id="ic-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.4"/><path d="M9.7 9.3a2.4 2.4 0 0 1 4.6.8c0 1.6-2.3 1.8-2.3 3.2"/><circle cx="12" cy="16.4" r=".7" fill="currentColor" stroke="none"/></symbol>
|
||||
<symbol id="ic-glossar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 6.6C10 5.2 7 5.2 5 6.2v11c2-1 5-1 7 .4"/><path d="M12 6.6c2-1.4 5-1.4 7-.4v11c-2-1-5-1-7 .4"/><path d="M12 6.6v11.4"/></symbol>
|
||||
<symbol id="ic-pause" viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14" rx="1.2" fill="currentColor"/><rect x="14" y="5" width="4" height="14" rx="1.2" fill="currentColor"/></symbol>
|
||||
<symbol id="ic-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10l5 5 5-5"/></symbol>
|
||||
</defs></svg>
|
||||
|
||||
<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>
|
||||
<p style="font-size:.78rem;color:#4a4a4a;margin:.2rem 0 .3rem">Die Stufen hinter der Zeile deuten den Sim-Inhalt an — so sieht man, wie wenig die schwebende Zeile verdeckt. Logo, Titel und Level sitzen in <b>einer</b> Pille auf gleicher Höhe wie die Buttons.</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 class="ghdr">
|
||||
<div class="grp"><span class="logo"><img src="assets/img/bildLogo.png" alt=""></span><span class="title">Klimawächter</span><span class="ctx">Level 2</span></div>
|
||||
<button class="btn" title="Startseite"><svg class="ic"><use href="#ic-home"/></svg></button>
|
||||
<span class="sp"></span>
|
||||
<button class="btn" title="Tempo"><svg class="ic"><use href="#ic-tempo"/></svg></button>
|
||||
<button class="btn" title="Musik"><svg class="ic"><use href="#ic-music"/></svg></button>
|
||||
<button class="btn" title="Ton"><svg class="ic"><use href="#ic-sound"/></svg></button>
|
||||
<button class="btn" title="Neustart"><svg class="ic"><use href="#ic-restart"/></svg></button>
|
||||
<button class="btn" title="Hilfe"><svg class="ic"><use href="#ic-help"/></svg></button>
|
||||
<button class="btn" title="Glossar (neuer Tab)"><svg class="ic"><use href="#ic-glossar"/></svg></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 class="ghdr">
|
||||
<div class="grp"><span class="logo"><img src="assets/img/bildLogo.png" alt=""></span><span class="title">Klimawächter</span><span class="ctx">Level 2</span></div>
|
||||
<button class="btn" title="Startseite"><svg class="ic"><use href="#ic-home"/></svg></button>
|
||||
<span class="sp"></span>
|
||||
<button class="btn" title="Tempo"><svg class="ic"><use href="#ic-tempo"/></svg></button>
|
||||
<button class="btn" title="Musik"><svg class="ic"><use href="#ic-music"/></svg></button>
|
||||
<button class="btn" title="Ton"><svg class="ic"><use href="#ic-sound"/></svg></button>
|
||||
<button class="btn" title="Neustart"><svg class="ic"><use href="#ic-restart"/></svg></button>
|
||||
<button class="btn" title="Hilfe"><svg class="ic"><use href="#ic-help"/></svg></button>
|
||||
<button class="btn" title="Glossar (neuer Tab)"><svg class="ic"><use href="#ic-glossar"/></svg></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 class="khz-frame-lab">Aufgeklappt · Tempo (Klick auf das Tempo-Icon — nur Echtzeit-Sims)</div>
|
||||
<div class="khz-pop">
|
||||
<button class="khz-seg" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
|
||||
<button class="khz-seg on">1×</button>
|
||||
<button class="khz-seg">2×</button>
|
||||
<button class="khz-seg">4×</button>
|
||||
</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 class="khz-frame-lab">Aufgeklappt · Musikplayer (Klick auf das Musik-Icon)</div>
|
||||
<div class="khz-pop khz-music">
|
||||
<button class="khz-seg on" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
|
||||
<span class="khz-select"><svg class="ic"><use href="#ic-music"/></svg> Ruhige Klänge <svg class="ic"><use href="#ic-caret"/></svg></span>
|
||||
<svg class="ic" style="width:18px;height:18px;color:#1f4e5a"><use href="#ic-sound"/></svg>
|
||||
<span class="khz-range"></span>
|
||||
</div>
|
||||
|
||||
<div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:1rem">
|
||||
<b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user