diff --git a/index.html b/index.html index 4395694..9cb5abd 100644 --- a/index.html +++ b/index.html @@ -312,12 +312,49 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .gi-fault-btn{background:var(--danger);box-shadow:0 4px 16px rgba(220,38,38,.3)} .gi-fault-btn:hover:not(:disabled){background:#b91c1c;box-shadow:0 6px 20px rgba(220,38,38,.45)} .gi-fault-btn:disabled{background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none} -.gi-fault-ind{background:rgba(220,38,38,.1);border:1px solid var(--danger);border-radius:8px;padding:.35rem .7rem;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:700;color:var(--danger);display:none;text-align:center} -.gi-wrap.fault .gi-fault-ind{display:block} -.gi-wrap.fault .gi-motor-svg{color:var(--danger)} + +/* Fault indicator badge — big & pulsing */ +.gi-fault-ind{ + background:rgba(220,38,38,.12);border:2px solid var(--danger); + border-radius:10px;padding:.6rem .85rem; + font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:800; + color:var(--danger);display:none;text-align:center; + letter-spacing:.02em; +} +.gi-wrap.fault .gi-fault-ind{display:block;animation:faultPulse .65s ease-in-out infinite} +@keyframes faultPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}} + +/* Motor stop text */ +.gi-motor-stop{display:none;font-family:'Outfit',sans-serif;font-size:.82rem;font-weight:800;color:#9ca3af;text-align:center;margin-top:.2rem;letter-spacing:.03em} +.gi-wrap.faulted .gi-motor-stop{display:block} + +/* Fault: red border + glow on whole wrap */ +.gi-wrap.fault,.gi-wrap.faulted{border-color:rgba(220,38,38,.5);box-shadow:0 0 36px rgba(220,38,38,.25)} + +/* Fault: main panel gets red tint */ +.gi-panel.main{position:relative;transition:background .3s} +.gi-wrap.fault .gi-panel.main{background:rgba(220,38,38,.08)} +.gi-wrap.faulted .gi-panel.main{background:rgba(0,0,0,.03)} + +/* Fault: motor red, stops spinning */ +.gi-wrap.fault .gi-motor-svg{color:var(--danger);transition:color .2s} .gi-wrap.fault .spin-mark{animation:none} -.gi-wrap.fault .gi-flow.mf .gi-el{background:var(--danger);box-shadow:0 0 8px var(--danger);animation-duration:.5s} -@keyframes faultFlash{0%,100%{opacity:.3}50%{opacity:1}} +.gi-wrap.faulted .gi-motor-svg{color:#9ca3af;transition:color .4s} + +/* 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) */ +.gi-wrap.faulted .gi-coil{border-color:#d1d5db;box-shadow:none} +.gi-wrap.faulted .gi-wind{border-color:#d1d5db} + +/* Separation barrier flashes red on fault */ +.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}} /* ─── 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} @@ -722,7 +759,8 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
Motor M1
-
⚡ Kurzschluss erkannt!
+
⚡ Kurzschluss — Auslösung!
+
MOTOR GESTOPPT
@@ -999,39 +1037,43 @@ function toggleGalv() { function triggerFault() { if (!galvOn) return; - const wrap = document.getElementById('giWrap'); - const dot = document.getElementById('giDot'); - const btn = document.getElementById('giBtn'); - const txt = document.getElementById('giTxt'); - const fBtn = document.getElementById('giFaultBtn'); - // Step 1: fault indicator flashes in main circuit + const wrap = document.getElementById('giWrap'); + const dot = document.getElementById('giDot'); + const btn = document.getElementById('giBtn'); + const txt = document.getElementById('giTxt'); + const fBtn = document.getElementById('giFaultBtn'); + + // ── SCHRITT 1: Fehlerstrom tritt auf ────────────── wrap.classList.add('fault'); fBtn.disabled = true; - txt.textContent = '⚡ Fehlerstrom erkannt!'; - dot.style.background = '#dc2626'; - dot.style.boxShadow = '0 0 10px #dc2626'; - // Step 2 (1s): Schutz automatically falls + txt.textContent = '⚡ Fehlerstrom im Hauptstromkreis!'; + dot.style.cssText = 'background:#dc2626;box-shadow:0 0 12px #dc2626'; + + // ── SCHRITT 2 (0.9s): Schutzorgan löst aus ─────── setTimeout(() => { - txt.textContent = 'Schutzorgan hat ausgelöst — Schütz fällt ab'; - }, 800); + txt.textContent = '🔴 Schutzorgan hat ausgelöst — Schütz fällt ab ...'; + }, 900); + + // ── SCHRITT 3 (1.8s): Schütz fällt ab ──────────── setTimeout(() => { galvOn = false; wrap.classList.remove('on'); - // keep fault class for visual + wrap.classList.remove('fault'); + wrap.classList.add('faulted'); // separate "after-fault" state btn.classList.remove('on'); btn.textContent = 'Spannung anlegen'; dot.classList.remove('on'); - dot.style.background = '#dc2626'; - dot.style.boxShadow = '0 0 8px #dc2626'; - txt.textContent = '⚡ Schütz abgefallen · Motor spannungsfrei'; - // Reset fault btn after brief delay so user can restart - setTimeout(() => { - wrap.classList.remove('fault'); - dot.style.background = ''; - dot.style.boxShadow = ''; - fBtn.disabled = true; - }, 2200); - }, 1600); + dot.style.cssText = 'background:#dc2626;box-shadow:0 0 8px #dc2626'; + txt.textContent = '⛔ Schütz abgefallen · Kontakte offen · Motor spannungsfrei'; + }, 1800); + + // ── Automatisch zurücksetzen nach 4s ────────────── + setTimeout(() => { + wrap.classList.remove('faulted'); + dot.style.cssText = ''; + fBtn.disabled = true; // fault btn bleibt grau bis manuell eingeschaltet + txt.textContent = 'Schütz abgefallen · kein Strom fließt'; + }, 4800); } buildQuiz();