ANDJ/Steuerungstechnik
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kurzschluss deutlicher: grosser roter Blitz-Flash ueber rechtem Panel + Motor-Shake

Browse Source 
Made-with: Cursor
This commit is contained in:
root
2026-04-22 21:29:54 +00:00
parent b5b427b124
commit bb8721d5f0
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -332,12 +332,23 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
.gi-wrap.fault,.gi-wrap.faulted{border-color:rgba(220,38,38,.5);box-shadow:0 0 36px rgba(220,38,38,.25)} .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 */ /* Fault: main panel gets red tint */
.gi-panel.main{position:relative;transition:background .3s} .gi-panel.main{position:relative;overflow:hidden;transition:background .3s}
.gi-wrap.fault .gi-panel.main{background:rgba(220,38,38,.08)} .gi-wrap.fault .gi-panel.main{background:rgba(220,38,38,.12)}
.gi-wrap.faulted .gi-panel.main{background:rgba(0,0,0,.03)} .gi-wrap.faulted .gi-panel.main{background:rgba(0,0,0,.03)}
/* Fault: motor red, stops spinning */ /* BIG KS FLASH: covers entire right panel */
.gi-wrap.fault .gi-motor-svg{color:var(--danger);transition:color .2s} .gi-ks-flash{
position:absolute;inset:0;z-index:20;pointer-events:none;
background:rgba(220,38,38,.88);border-radius:inherit;
display:flex;align-items:center;justify-content:center;
font-size:4rem;opacity:0;
}
.gi-ks-flash.go{animation:ksFlash .7s ease-out forwards}
@keyframes ksFlash{0%{opacity:1;transform:scale(.8)}20%{opacity:1;transform:scale(1.15)}70%{opacity:.6}100%{opacity:0;transform:scale(1.2)}}
/* Motor shake on fault */
.gi-wrap.fault .gi-motor-svg{color:var(--danger);animation:motorShake .08s linear 6}
@keyframes motorShake{0%,100%{transform:translateX(0)}33%{transform:translateX(-4px)}66%{transform:translateX(4px)}}
.gi-wrap.fault .spin-mark{animation:none} .gi-wrap.fault .spin-mark{animation:none}
.gi-wrap.faulted .gi-motor-svg{color:#9ca3af;transition:color .4s} .gi-wrap.faulted .gi-motor-svg{color:#9ca3af;transition:color .4s}
@@ -750,6 +761,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
<!-- RIGHT: Hauptstromkreis --> <!-- RIGHT: Hauptstromkreis -->
<div class="gi-panel main"> <div class="gi-panel main">
<div class="gi-ks-flash" id="giKsFlash">⚡</div>
<div class="gi-plabel">Hauptstromkreis</div> <div class="gi-plabel">Hauptstromkreis</div>
<div class="gi-volt mv">AC 400V</div> <div class="gi-volt mv">AC 400V</div>
<svg class="gi-motor-svg" viewBox="0 0 100 100" width="82" height="82"> <svg class="gi-motor-svg" viewBox="0 0 100 100" width="82" height="82">
@@ -1044,6 +1056,11 @@ function triggerFault() {
const fBtn = document.getElementById('giFaultBtn'); const fBtn = document.getElementById('giFaultBtn');
// ── SCHRITT 1: Fehlerstrom tritt auf ────────────── // ── SCHRITT 1: Fehlerstrom tritt auf ──────────────
// Big flash first, then fault state
const flash = document.getElementById('giKsFlash');
flash.classList.add('go');
setTimeout(() => flash.classList.remove('go'), 750);
wrap.classList.add('fault'); wrap.classList.add('fault');
fBtn.disabled = true; fBtn.disabled = true;
txt.textContent = '⚡ Fehlerstrom im Hauptstromkreis!'; txt.textContent = '⚡ Fehlerstrom im Hauptstromkreis!';