Fehlerstrom-Demo deutlicher: Pulsendes Badge, roter Glow, Motor-Stop-Badge, rote Kontakte, Spule grau, Trennlinie animiert
Made-with: Cursor
This commit is contained in:
root
102
index.html
102
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:
|
||||
<line class="spin-mark" x1="50" y1="8" x2="50" y2="20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="gi-devname">Motor M1</div>
|
||||
<div class="gi-fault-ind" id="giFaultInd">⚡ Kurzschluss erkannt!</div>
|
||||
<div class="gi-fault-ind" id="giFaultInd">⚡ Kurzschluss — Auslösung!</div>
|
||||
<div class="gi-motor-stop" id="giMotorStop">MOTOR GESTOPPT</div>
|
||||
<div class="gi-flow mf">
|
||||
<div class="gi-el"></div>
|
||||
<div class="gi-el"></div>
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user