diff --git a/index.html b/index.html index aca5593..4395694 100644 --- a/index.html +++ b/index.html @@ -308,14 +308,16 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem} .subtask h3{margin:0 0 .35rem;color:var(--accent-dark);font-size:1.15rem;font-weight:700} .subtask p.lead{color:var(--muted);margin:0;font-size:.94rem} -/* ─── FAULT SIMULATION ──────────────────────── */ -.fsim-card{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:1.5rem 1.5rem 1.25rem;margin:1.5rem 0;overflow-x:auto} -.fsim-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:.75rem 1.5rem;font-family:'Outfit',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s,transform .15s} -.fsim-btn:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px)} -.fsim-btn:disabled{opacity:.65;cursor:not-allowed} -.fsim-btn.reset-mode{background:#6b7280} -.fsim-btn.reset-mode:hover:not(:disabled){background:#4b5563} -#fscbar{transform-box:fill-box;transform-origin:0% 50%;transition:transform .45s ease,stroke .3s} +/* ─── FAULT BUTTON in gi-wrap ───────────────── */ +.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)} +.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}} /* ─── 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} @@ -625,6 +627,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: Schütz abgefallen — kein Strom fließt + @@ -719,6 +722,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
Motor M1
+
⚡ Kurzschluss erkannt!
@@ -745,70 +749,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
- -
-
- -
- - - HAUPTSTROMKREIS - STEUERSTROMKREIS - - - 400V - Source - - - - - - - LS / RLS - Schutzorgan - Auslösung! - - - - - - - ⚡ - - - - - - - - - - Schütz fällt ab - - - - - - - M - Motor M1 - Motor spannungsfrei - - - - - - - - A1 / A2 - Spule - - - - mech. - -
@@ -1027,64 +968,7 @@ document.querySelectorAll('img').forEach(img => { }); }); -/* ─── FAULT CURRENT SIMULATION ─────────────────────── */ -let fsRunning = false, fsFaulted = false; -const FS_G = '#16a34a', FS_R = '#dc2626', FS_GR = '#d1d5db', FS_MU = '#9ca3af'; -function _fss(id, attr, val) { const e = document.getElementById(id); if (e) e.setAttribute(attr, val); } -function _fso(id) { const e = document.getElementById(id); if (e) e.style.opacity = '1'; } - -function runFaultSim() { - if (fsRunning) return; - const btn = document.getElementById('fsimBtn'); - if (fsFaulted) { - fsFaulted = false; - btn.textContent = 'Fehlerstrom simulieren'; - btn.classList.remove('reset-mode'); - // Restore all green - ['fsw2','fsw3','fsw4','fscl','fscr','fscc1','fscc2','fsccoil','fsmot'].forEach(id => _fss(id,'stroke',FS_G)); - _fss('fsr','stroke',FS_G); _fss('fst1','fill',FS_G); _fss('fsccoilt','fill',FS_G); _fss('fsmotm','fill',FS_G); - // Reset contact bar - const bar = document.getElementById('fscbar'); - bar.style.transform = ''; bar.setAttribute('stroke', FS_G); - // Hide bolt + labels - const bolt = document.getElementById('fsbolt'); - bolt.style.opacity = '0'; bolt.style.transform = 'scale(.2)'; - ['fslb-aus','fslb-ab','fslb-mfr'].forEach(id => { const e = document.getElementById(id); if (e) e.style.opacity = '0'; }); - return; - } - fsRunning = true; btn.disabled = true; btn.textContent = '·· ·· ··'; - // Step 1 (0.5s) — fault bolt - setTimeout(() => { - const b = document.getElementById('fsbolt'); - b.style.opacity = '1'; b.style.transform = 'scale(1)'; - }, 500); - // Step 2 (1s) — protection triggers - setTimeout(() => { - _fss('fsr','stroke',FS_R); _fss('fst1','fill',FS_R); _fso('fslb-aus'); - }, 1000); - // Step 3 (1.5s) — control circuit interrupted - setTimeout(() => { - ['fscc1','fscc2','fsccoil'].forEach(id => _fss(id,'stroke',FS_GR)); - _fss('fsccoilt','fill',FS_MU); - }, 1500); - // Step 4 (2s) — contacts open - setTimeout(() => { - const bar = document.getElementById('fscbar'); - bar.style.transform = 'rotate(-32deg)'; - bar.setAttribute('stroke', FS_GR); - ['fscl','fscr','fsw3'].forEach(id => _fss(id,'stroke',FS_GR)); - _fso('fslb-ab'); - }, 2000); - // Step 5 (2.5s) — motor de-energized - setTimeout(() => { - _fss('fsw4','stroke',FS_GR); _fss('fsmot','stroke',FS_GR); - _fss('fsmotm','fill',FS_GR); _fso('fslb-mfr'); - fsRunning = false; fsFaulted = true; - btn.textContent = 'Zurücksetzen'; btn.classList.add('reset-mode'); btn.disabled = false; - }, 2500); -} - -/* ─── GALVANIC TOGGLE ───────────────────────────────── */ +/* ─── GALVANIC TOGGLE + FAULT ───────────────────────── */ let galvOn = false; function toggleGalv() { galvOn = !galvOn; @@ -1092,21 +976,64 @@ function toggleGalv() { const dot = document.getElementById('giDot'); const btn = document.getElementById('giBtn'); const txt = document.getElementById('giTxt'); + const fBtn = document.getElementById('giFaultBtn'); + // Always clear fault state when toggling + wrap.classList.remove('fault'); if (galvOn) { wrap.classList.add('on'); dot.classList.add('on'); btn.classList.add('on'); btn.textContent = 'Spannung abschalten'; txt.textContent = 'Schütz angezogen · Kontakte geschlossen · Motor läuft'; + fBtn.disabled = false; } else { wrap.classList.remove('on'); dot.classList.remove('on'); btn.classList.remove('on'); + fBtn.disabled = true; btn.textContent = 'Spannung anlegen'; txt.textContent = 'Schütz abgefallen · kein Strom fließt'; + if (document.getElementById('giArm')) document.getElementById('giArm').style.transform = ''; } } +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 + 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 + setTimeout(() => { + txt.textContent = 'Schutzorgan hat ausgelöst — Schütz fällt ab'; + }, 800); + setTimeout(() => { + galvOn = false; + wrap.classList.remove('on'); + // keep fault class for visual + 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); +} + buildQuiz(); observeReveal();