diff --git a/index.html b/index.html index ab4e178..e71a4ed 100644 --- a/index.html +++ b/index.html @@ -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)} @@ -322,7 +414,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
  • Start
  • Grundlagen
  • Relais & Schütz
    • -
  • Schaltzeichen
  • Aufbau
  • Funktion
  • Sicherheit
    • @@ -433,14 +524,6 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: - -
    -

    Schaltzeichen & Symbole

    -
    - Schaltzeichen Leistungsschütz — 3 Hauptkontakte, Spule A1/A2, Hilfskontakt 13/14 -
    Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14
    -
    -
    @@ -521,43 +604,137 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size: Wichtig: Das Schütz ist kein Dauermagnet. Fällt die Steuerspannung aus, fällt das Schütz sofort ab. -
    -

    Galvanische Trennung

    -
    +

    Galvanische Trennung

    -
    -
    -

    Steuerstromkreis

    -
    DC 24V
    -
    kleiner Steuerstrom, Taster / SPS
    - Taster Steuerstromkreis -
    + +
    + + +
    +
    + + Schütz abgefallen — kein Strom fließt +
    +
    -
    - ⏚ - Q1 Schütz + +
    + + +
    +
    Steuerstromkreis
    +
    DC 24V
    +
    +
    + + +
    +
    +
    +
    +
    +
    + − +
    +
    Spannungsquelle
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Taster S1
    +
    +
    +
    +
    +
    +
    +
    Klemme A1 →
    +
    + + +
    +
    Schütz Q1
    +
    +
    A1
    +
    +
    +
    +
    +
    +
    +
    +
    A2
    +
    +
    +
    +
    +
    + 🧲 +
    +
    +
    +
    Keine elektr. Verbindung
    +
    +
    +
    +
    + L1 +
    + T1 +
    +
    + L2 +
    + T2 +
    +
    + L3 +
    + T3 +
    +
    +
    + + +
    +
    Hauptstromkreis
    +
    AC 400V
    + + + + M + + +
    Motor M1
    +
    +
    +
    +
    +
    +
    ← T1 / T2 / T3
    +
    -
    -

    Hauptstromkreis

    -
    AC 230V
    -
    großer Laststrom, Motor / Last
    - - - M - -
    + +
    +
    + Steuerstromkreis + DC 24V · sicher berührbar +
    +
    + Galvanische Trennung + Kopplung nur über Magnetfeld +
    +
    + Hauptstromkreis + AC 400V · lebensgefährlich +
    - -
    - Die Galvanische Trennung bedeutet, dass zwei Stromkreise zwar verbunden sind, aber nicht elektrisch. Das Übertragungsmedium ist der Elektromagnetismus. -
    @@ -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();