Galvanik Demo ueberarbeitet

Made-with: Cursor

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) */
+/* Faulted: coil goes gray */
-.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) */
 .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();