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

Schaltzeichen-Sektion entfernt; neue interaktive Galvanik-Demo mit Elektronenfluss, Magnetfeld-Animation, Kontaktschaltung, Motor-Drehung und Toggle-Button

Browse Source 
Made-with: Cursor
This commit is contained in:
root
2026-04-22 16:37:51 +00:00
parent 2efdd9c223
commit f09b3328ce
1 changed files with 239 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
index.html
View File

@@ -310,6 +310,98 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
/* ─── 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}
/* ─── GALVANIC INTERACTIVE DEMO ─────────────── */
.gi-wrap{background:var(--panel);border:2px solid var(--border);border-radius:20px;padding:1.75rem;margin:1.5rem 0;overflow:hidden;transition:box-shadow .3s}
.gi-wrap.on{box-shadow:0 0 40px rgba(22,163,74,.15)}
.gi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.gi-status{display:flex;align-items:center;gap:.65rem;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem}
.gi-dot{width:14px;height:14px;border-radius:50%;background:#d1d5db;transition:background .4s,box-shadow .4s;flex-shrink:0}
.gi-dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 20px rgba(22,163,74,.4)}
.gi-btn{padding:.85rem 2rem;border-radius:999px;border:none;font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;background:var(--accent);color:#fff;transition:background .2s,transform .15s,box-shadow .2s;box-shadow:0 4px 18px rgba(22,163,74,.35);letter-spacing:.01em}
.gi-btn:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 22px rgba(22,163,74,.45)}
.gi-btn.on{background:var(--danger);box-shadow:0 4px 18px rgba(220,38,38,.35)}
.gi-btn.on:hover{background:#b91c1c;box-shadow:0 6px 22px rgba(220,38,38,.45)}
.gi-diagram{display:grid;grid-template-columns:1fr 200px 1fr;gap:0;border-radius:14px;border:1px solid var(--border-soft);overflow:hidden;background:var(--bg)}
@media(max-width:700px){.gi-diagram{grid-template-columns:1fr}}
.gi-panel{padding:1.4rem 1rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.gi-panel.ctrl{border-right:1px solid var(--border-soft)}
.gi-panel.main{border-left:1px solid var(--border-soft)}
.gi-plabel{font-family:'Outfit',sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.gi-volt{font-family:'Share Tech Mono',monospace;font-size:1.5rem;font-weight:700;line-height:1}
.gi-volt.cv{color:var(--accent)}.gi-volt.mv{color:var(--danger)}
/* Battery symbol */
.gi-bat{display:flex;align-items:center;gap:5px;font-family:'Outfit',sans-serif;font-weight:800;font-size:.95rem;color:var(--accent)}
.gi-bat-lines{display:flex;flex-direction:column;gap:3px}
.gi-bat-thick{width:20px;height:3px;background:var(--accent);border-radius:2px}
.gi-bat-thin{width:12px;height:2px;background:var(--accent);border-radius:2px;margin:0 auto;opacity:.55}
.gi-devname{font-size:.82rem;color:var(--muted);font-family:'Outfit',sans-serif;font-weight:600;text-align:center}
/* Switch */
.gi-sw{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.gi-sw-body{display:flex;align-items:center;gap:2px;height:28px}
.gi-sw-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--accent-dark);flex-shrink:0}
.gi-sw-arm{width:26px;height:2px;background:var(--accent);transform:rotate(-38deg);transform-origin:0% 50%;transition:transform .35s ease;margin-left:-2px}
.gi-wrap.on .gi-sw-arm{transform:rotate(0deg)}
.gi-sw-spacer{width:22px;height:2px;background:var(--border-soft)}
/* Flow track */
.gi-flow{position:relative;width:100%;height:22px;border-radius:11px;overflow:hidden;border:1px solid rgba(22,163,74,.2);background:rgba(22,163,74,.05)}
.gi-flow.mf{border-color:rgba(220,38,38,.2);background:rgba(220,38,38,.05)}
.gi-el{position:absolute;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent);animation:elFlow 2s linear infinite;animation-play-state:paused}
.gi-flow.mf .gi-el{background:var(--danger);box-shadow:0 0 5px var(--danger);animation-direction:reverse}
.gi-el:nth-child(2){animation-delay:-.67s}
.gi-el:nth-child(3){animation-delay:-1.33s}
@keyframes elFlow{from{left:-11px}to{left:calc(100% + 11px)}}
.gi-wrap.on .gi-el{animation-play-state:running}
.gi-conn{font-family:'Share Tech Mono',monospace;font-size:.78rem;color:var(--accent);font-weight:600;text-align:center}
.gi-conn.mc{color:var(--danger)}
/* Motor */
.gi-motor-svg{color:#94a3b8;transition:color .4s}
.gi-wrap.on .gi-motor-svg{color:var(--accent)}
.spin-mark{transform-origin:50px 50px}
.gi-wrap.on .spin-mark{animation:motorSpin .9s linear infinite}
@keyframes motorSpin{to{transform:rotate(360deg)}}
/* CENTER Schütz panel */
.gi-sc{display:flex;flex-direction:column;align-items:center;padding:1.25rem .75rem;gap:.7rem}
.gi-sc-label{font-family:'Outfit',sans-serif;font-weight:700;font-size:.88rem;color:var(--text);text-align:center}
.gi-coil{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .75rem;border:2px solid var(--border);border-radius:10px;background:#fff;transition:border-color .4s,box-shadow .4s;width:100%}
.gi-wrap.on .gi-coil{border-color:var(--accent);box-shadow:0 0 16px rgba(22,163,74,.22)}
.gi-ctag{font-family:'Share Tech Mono',monospace;font-size:.75rem;font-weight:700;color:var(--accent)}
.gi-winds{display:flex;flex-direction:column;gap:2px;padding:.2rem 0}
.gi-wind{height:5px;border:1.5px solid var(--border);border-radius:2px;width:54px;transition:border-color .4s}
.gi-wrap.on .gi-wind{border-color:var(--accent)}
/* Mag field */
.gi-mag{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.gi-mr{position:absolute;border-radius:50%;border:2px solid var(--accent);opacity:0}
.gi-mr.r1{width:20px;height:20px}
.gi-mr.r2{width:36px;height:36px}
.gi-mr.r3{width:52px;height:52px}
.gi-wrap.on .gi-mr{animation:magRing 1.6s ease-out infinite}
.gi-wrap.on .gi-mr.r2{animation-delay:.35s}
.gi-wrap.on .gi-mr.r3{animation-delay:.7s}
@keyframes magRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}
.gi-mag-icon{font-size:1.1rem;position:relative;z-index:1}
/* Separation barrier */
.gi-sep{width:100%;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.gi-sep-dashes{width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--danger) 0,var(--danger) 7px,transparent 7px,transparent 13px);opacity:.4;transition:opacity .4s}
.gi-wrap.on .gi-sep-dashes{opacity:1;animation:sepBlink 2s ease-in-out infinite}
@keyframes sepBlink{0%,100%{opacity:.55}50%{opacity:1}}
.gi-sep-badge{font-family:'Outfit',sans-serif;font-size:.65rem;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.05em;background:rgba(220,38,38,.08);padding:.2rem .5rem;border-radius:4px;white-space:nowrap}
/* Contacts */
.gi-cts{display:flex;flex-direction:column;gap:.4rem;width:100%}
.gi-crow{display:flex;align-items:center;justify-content:center;gap:3px;font-family:'Share Tech Mono',monospace;font-size:.78rem}
.gi-cl{color:var(--muted);min-width:20px;text-align:right}
.gi-chalf{width:14px;height:3px;background:#d1d5db;border-radius:2px;transition:background .35s}
.gi-cgap{width:10px;height:3px;background:transparent;border:none;border-top:2px dashed #d1d5db;transition:width .35s,border-color .35s}
.gi-wrap.on .gi-chalf{background:var(--accent)}
.gi-wrap.on .gi-cgap{width:0;border-top-color:var(--accent)}
/* Footer */
.gi-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-top:1.25rem}
@media(max-width:700px){.gi-foot{grid-template-columns:1fr}}
.gi-fbox{padding:.9rem 1rem;border-radius:12px;text-align:center;font-size:.84rem;line-height:1.4}
.gi-fbox strong{display:block;font-family:'Outfit',sans-serif;font-size:.88rem;margin-bottom:.2rem}
.gi-fb-ctrl{background:var(--accent-soft);border:1px solid var(--border)}.gi-fb-ctrl strong{color:var(--accent-dark)}
.gi-fb-sep{background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.2)}.gi-fb-sep strong{color:var(--danger)}
.gi-fb-main{background:rgba(254,242,242,.8);border:1px solid rgba(220,38,38,.2)}.gi-fb-main strong{color:var(--danger)}
</style>
</head>
<body>
@@ -322,7 +414,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
<li><a href="#hero">Start</a></li>
<li><a href="#ab1">Grundlagen</a></li>
<li><a href="#ab2">Relais &amp; Schütz</a></li>
<li><a href="#ab4">Schaltzeichen</a></li>
<li><a href="#ab5">Aufbau</a></li>
<li><a href="#ab6">Funktion</a></li>
<li><a href="#ab7">Sicherheit</a></li>
@@ -433,14 +524,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
</div>
</section>
<!-- AB 4: Schaltzeichen -->
<section id="ab4" class="section reveal">
<h2 class="section-head">Schaltzeichen &amp; Symbole</h2>
<figure class="figure" style="text-align:center;max-width:420px;margin:1rem auto">
<img loading="lazy" src="schaltzeichen-schuetz.png" alt="Schaltzeichen Leistungsschütz — 3 Hauptkontakte, Spule A1/A2, Hilfskontakt 13/14">
<figcaption class="figcap">Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14</figcaption>
</figure>
</section>
<!-- AB 5: Aufbau -->
<section id="ab5" class="section reveal alt-bg">
@@ -521,43 +604,137 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
<strong>Wichtig:</strong> Das Schütz ist kein Dauermagnet. Fällt die Steuerspannung aus, fällt das Schütz sofort ab.
</div>
<div class="subtask">
<h3>Galvanische Trennung</h3>
</div>
<div class="subtask"><h3>Galvanische Trennung</h3></div>
<div class="galv">
<div class="galv-box left">
<h4 style="color:var(--amber)">Steuerstromkreis</h4>
<div class="big-val">DC 24V</div>
<div class="sub">kleiner Steuerstrom, Taster / SPS</div>
<img loading="lazy"
src="taster.jpg"
alt="Taster Steuerstromkreis"
onerror="this.style.display='none'"
style="width:100%;border-radius:8px;margin-top:.5rem;border:1px solid var(--border)">
<div class="flow-track"><div class="flow-dot amber"></div></div>
<!-- ── INTERACTIVE DEMO ── -->
<div class="gi-wrap" id="giWrap">
<!-- Header -->
<div class="gi-header">
<div class="gi-status">
<span class="gi-dot" id="giDot"></span>
<span id="giTxt">Schütz abgefallen — kein Strom fließt</span>
</div>
<button class="gi-btn" id="giBtn" onclick="toggleGalv()">Spannung anlegen</button>
</div>
<div class="galv-mid">
<span class="sym">⏚</span>
<span class="lbl">Q1 Schütz</span>
<!-- Three-column diagram -->
<div class="gi-diagram">
<!-- LEFT: Steuerstromkreis -->
<div class="gi-panel ctrl">
<div class="gi-plabel">Steuerstromkreis</div>
<div class="gi-volt cv">DC 24V</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:.3rem">
<div class="gi-bat">
<span>+</span>
<div class="gi-bat-lines">
<div class="gi-bat-thick"></div>
<div class="gi-bat-thin"></div>
<div class="gi-bat-thick"></div>
<div class="gi-bat-thin"></div>
</div>
<span>−</span>
</div>
<div class="gi-devname">Spannungsquelle</div>
</div>
<div class="gi-sw">
<div class="gi-sw-body">
<div class="gi-sw-dot"></div>
<div class="gi-sw-arm" id="giArm"></div>
<div class="gi-sw-spacer"></div>
<div class="gi-sw-dot"></div>
</div>
<div class="gi-devname">Taster S1</div>
</div>
<div class="gi-flow">
<div class="gi-el"></div>
<div class="gi-el"></div>
<div class="gi-el"></div>
</div>
<div class="gi-conn">Klemme A1 →</div>
</div>
<!-- CENTER: Schütz -->
<div class="gi-sc">
<div class="gi-sc-label">Schütz Q1</div>
<div class="gi-coil">
<div class="gi-ctag">A1</div>
<div class="gi-winds">
<div class="gi-wind"></div>
<div class="gi-wind"></div>
<div class="gi-wind"></div>
<div class="gi-wind"></div>
<div class="gi-wind"></div>
</div>
<div class="gi-ctag">A2</div>
</div>
<div class="gi-mag">
<div class="gi-mr r1"></div>
<div class="gi-mr r2"></div>
<div class="gi-mr r3"></div>
<span class="gi-mag-icon">🧲</span>
</div>
<div class="gi-sep">
<div class="gi-sep-dashes"></div>
<div class="gi-sep-badge">Keine elektr. Verbindung</div>
<div class="gi-sep-dashes"></div>
</div>
<div class="gi-cts">
<div class="gi-crow">
<span class="gi-cl">L1</span>
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
<span class="gi-cl" style="text-align:left">T1</span>
</div>
<div class="gi-crow">
<span class="gi-cl">L2</span>
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
<span class="gi-cl" style="text-align:left">T2</span>
</div>
<div class="gi-crow">
<span class="gi-cl">L3</span>
<div class="gi-chalf"></div><div class="gi-cgap"></div><div class="gi-chalf"></div>
<span class="gi-cl" style="text-align:left">T3</span>
</div>
</div>
</div>
<!-- RIGHT: Hauptstromkreis -->
<div class="gi-panel main">
<div class="gi-plabel">Hauptstromkreis</div>
<div class="gi-volt mv">AC 400V</div>
<svg class="gi-motor-svg" viewBox="0 0 100 100" width="82" height="82">
<circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" stroke-width="3"/>
<circle cx="50" cy="50" r="33" fill="none" stroke="currentColor" stroke-width="1" opacity=".2"/>
<text x="50" y="58" text-anchor="middle" font-family="Outfit,sans-serif" font-weight="800" font-size="26" fill="currentColor">M</text>
<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-flow mf">
<div class="gi-el"></div>
<div class="gi-el"></div>
<div class="gi-el"></div>
</div>
<div class="gi-conn mc">← T1 / T2 / T3</div>
</div>
</div>
<div class="galv-box right">
<h4 style="color:var(--accent)">Hauptstromkreis</h4>
<div class="big-val">AC 230V</div>
<div class="sub">großer Laststrom, Motor / Last</div>
<svg viewBox="0 0 120 100" width="120" height="100" style="margin:.5rem auto;display:block" aria-label="Motor-Symbol">
<circle cx="60" cy="50" r="35" fill="none" stroke="#16a34a" stroke-width="3"/>
<text x="60" y="57" text-anchor="middle" fill="#15803d" font-family="Outfit,sans-serif" font-weight="700" font-size="22">M</text>
</svg>
<div class="flow-track"><div class="flow-dot green" style="animation-duration:1.4s"></div></div>
<!-- Footer legend -->
<div class="gi-foot">
<div class="gi-fbox gi-fb-ctrl">
<strong>Steuerstromkreis</strong>
DC 24V · sicher berührbar
</div>
<div class="gi-fbox gi-fb-sep">
<strong>Galvanische Trennung</strong>
Kopplung nur über Magnetfeld
</div>
<div class="gi-fbox gi-fb-main">
<strong>Hauptstromkreis</strong>
AC 400V · lebensgefährlich
</div>
</div>
</div>
<div class="info-box">
Die <strong>Galvanische Trennung</strong> bedeutet, dass zwei Stromkreise zwar verbunden sind, aber nicht elektrisch. Das Übertragungsmedium ist der Elektromagnetismus.
</div>
</section>
<!-- AB 7: Sicherheit -->
@@ -776,6 +953,29 @@ document.querySelectorAll('img').forEach(img => {
});
});
/* ─── GALVANIC TOGGLE ───────────────────────────────── */
let galvOn = false;
function toggleGalv() {
galvOn = !galvOn;
const wrap = document.getElementById('giWrap');
const dot = document.getElementById('giDot');
const btn = document.getElementById('giBtn');
const txt = document.getElementById('giTxt');
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';
} else {
wrap.classList.remove('on');
dot.classList.remove('on');
btn.classList.remove('on');
btn.textContent = 'Spannung anlegen';
txt.textContent = 'Schütz abgefallen · kein Strom fließt';
}
}
buildQuiz();
observeReveal();
</script>