From 53afbc93fd067f43c75b0e5b1bb4d8feaf3ca349 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 23 Apr 2026 16:29:18 +0000 Subject: [PATCH] Galvanik Demo ueberarbeitet Made-with: Cursor --- index.html | 56 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a2619eb..6c9bf67 100644 --- a/index.html +++ b/index.html @@ -355,11 +355,7 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} /* Fault: main electrons go red and frantic */ .gi-wrap.fault .gi-flow.mf .gi-el{background:var(--danger);box-shadow:0 0 10px var(--danger);animation-duration:.45s} -/* Faulted: contacts open wider than normal (emphasize open state) */ -.gi-wrap.faulted .gi-cgap{width:18px !important;border-top-color:rgba(220,38,38,.4) !important;transition:width .3s,border-color .3s} -.gi-wrap.faulted .gi-chalf{background:var(--danger) !important;transition:background .3s} - -/* Faulted: coil goes gray (no more power) */ +/* Faulted: coil goes gray */ .gi-wrap.faulted .gi-coil{border-color:#d1d5db;box-shadow:none} .gi-wrap.faulted .gi-wind{border-color:#d1d5db} @@ -367,6 +363,38 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .gi-wrap.fault .gi-sep-badge{background:rgba(220,38,38,.2);color:var(--danger);animation:sepFault .5s ease-in-out infinite} @keyframes sepFault{0%,100%{letter-spacing:.05em}50%{letter-spacing:.1em}} +/* ─── BIG CURRENT ARROWS ────────────────────── */ +.gd-arrows{display:flex;gap:.4rem;justify-content:center;align-items:center;min-height:28px} +.gd-arr{font-size:1.4rem;opacity:.1;transition:opacity .15s;color:var(--accent)} +.gi-wrap.on .gd-arrows .gd-arr{animation:arrPulse 1.2s ease-in-out infinite} +.gi-wrap.on .gd-arrows .gd-arr:nth-child(2){animation-delay:.4s} +.gi-wrap.on .gd-arrows .gd-arr:nth-child(3){animation-delay:.8s} +.gi-wrap.on .gd-arrows.mf .gd-arr{color:var(--danger)} +.gi-wrap.fault .gd-arrows.mf .gd-arr{color:var(--danger);animation:arrPulse .4s ease-in-out infinite;opacity:1} +@keyframes arrPulse{0%,100%{opacity:.15;transform:scale(.9)}50%{opacity:1;transform:scale(1.18)}} + +/* ─── BIG CONTACTS ──────────────────────────── */ +.gd-contacts{display:flex;flex-direction:column;gap:.55rem;width:100%} +.gd-ct-row{display:flex;align-items:center;justify-content:center;gap:3px;font-family:'Share Tech Mono',monospace;font-size:.9rem;font-weight:700} +.gd-ct-lbl{color:var(--muted);min-width:24px;text-align:center} +.gd-ct-left,.gd-ct-right{height:6px;width:20px;background:#d1d5db;border-radius:3px;transition:background .3s,transform .35s} +.gd-ct-gap{height:6px;width:16px;border-top:3px dashed #d1d5db;transition:width .35s,border-color .3s} +.gi-wrap.on .gd-ct-left,.gi-wrap.on .gd-ct-right{background:var(--accent)} +.gi-wrap.on .gd-ct-gap{width:0;border-top-color:var(--accent)} +.gi-wrap.faulted .gd-ct-left,.gi-wrap.faulted .gd-ct-right{background:var(--danger)} +.gi-wrap.faulted .gd-ct-gap{width:20px;border-top-color:rgba(220,38,38,.4)} + +/* ─── STATUS LABELS ─────────────────────────── */ +.gd-ct-status{font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;text-align:center;color:#94a3b8;transition:color .3s;margin-top:.25rem;letter-spacing:.04em} +.gi-wrap.on .gd-ct-status{color:var(--accent)} +.gi-wrap.faulted .gd-ct-status{color:var(--danger)} +.gd-coil-status{font-family:'Outfit',sans-serif;font-size:.78rem;font-weight:700;text-align:center;color:#9ca3af;margin-top:.2rem;transition:color .3s;letter-spacing:.03em} +.gi-wrap.on .gd-coil-status{color:var(--accent)} +.gi-wrap.faulted .gd-coil-status{color:#9ca3af} +.gd-motor-status{font-family:'Outfit',sans-serif;font-weight:800;font-size:.9rem;color:#94a3b8;transition:color .3s;text-align:center;letter-spacing:.04em} +.gi-wrap.on .gd-motor-status{color:var(--accent)} +.gi-wrap.faulted .gd-motor-status{color:var(--danger)} + /* ─── FOOTER ────────────────────────────────── */ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);margin-top:2rem} @@ -1036,6 +1064,9 @@ function toggleGalv() { btn.textContent = 'Spannung abschalten'; txt.textContent = 'Schütz angezogen · Kontakte geschlossen · Motor läuft'; fBtn.disabled = false; + document.getElementById('gdCoilStatus').textContent = 'ERREGT'; + document.getElementById('gdCtStatus').textContent = 'GESCHLOSSEN ✓'; + document.getElementById('gdMotorStatus').textContent = 'LÄUFT ✓'; } else { wrap.classList.remove('on'); dot.classList.remove('on'); @@ -1043,6 +1074,9 @@ function toggleGalv() { fBtn.disabled = true; btn.textContent = 'Spannung anlegen'; txt.textContent = 'Schütz abgefallen · kein Strom fließt'; + document.getElementById('gdCoilStatus').textContent = 'STROMLOS'; + document.getElementById('gdCtStatus').textContent = 'OFFEN ✗'; + document.getElementById('gdMotorStatus').textContent = 'GESTOPPT ✗'; if (document.getElementById('giArm')) document.getElementById('giArm').style.transform = ''; } } @@ -1076,21 +1110,25 @@ function triggerFault() { galvOn = false; wrap.classList.remove('on'); wrap.classList.remove('fault'); - wrap.classList.add('faulted'); // separate "after-fault" state + wrap.classList.add('faulted'); btn.classList.remove('on'); btn.textContent = 'Spannung anlegen'; dot.classList.remove('on'); dot.style.cssText = 'background:#dc2626;box-shadow:0 0 8px #dc2626'; txt.textContent = '⛔ Schütz abgefallen · Kontakte offen · Motor spannungsfrei'; + document.getElementById('gdCoilStatus').textContent = 'STROMLOS'; + document.getElementById('gdCtStatus').textContent = 'OFFEN — ⚡ FEHLER'; + document.getElementById('gdMotorStatus').textContent = 'GESTOPPT ✗'; }, 1800); - // ── Automatisch zurücksetzen nach 4s ────────────── + // ── Automatisch zurücksetzen nach 4.5s ────────────── setTimeout(() => { wrap.classList.remove('faulted'); dot.style.cssText = ''; - fBtn.disabled = true; // fault btn bleibt grau bis manuell eingeschaltet + fBtn.disabled = true; txt.textContent = 'Schütz abgefallen · kein Strom fließt'; - }, 4800); + document.getElementById('gdCtStatus').textContent = 'OFFEN ✗'; + }, 4500); } buildQuiz();