Grosses Update: Emojis, Animationen, Interaktivitaet, Hero, Quiz-Fortschritt
- Emojis entfernt: Nav-Logo, Warn-Box, Betriebsmittel-Liste, Sicherheitsregeln - Hero: Titel ohne 'Baustein 2:', neuer Untertitel, CSS scroll-arrow statt ↓ - Section-heads: ::after Unterstrich-Animation beim Einblenden - Karten/VS-Cards: hover box-shadow 0 8px 24px rgba(22,163,74,.12) - VS-List: Hover-Hintergrund amber/green je nach Karte - Timeline: Schritte blenden von links ein (translateX -30px → 0, delay je Schritt) - Aufbau-Liste: Klick klappt Info-Box auf/zu mit Zusatzerklaerung - Quiz: Fortschrittsbalken aktualisiert sich nach jeder Antwort - Galvanische Trennung: animierter Strompunkt (flow-dot) in beiden Boxen - Wikimedia-URLs ersetzt: schuetz-aufbau.jpg, taster.jpg, hebekran.jpg (onerror=none) - Bildplatzhalter 'Beschriftetes Bild 8 Bauteile' + Canva-Hinweis entfernt - Footer-Wikimedia-Hinweis entfernt - Alle Canva/Fachkundebuch-Texte entfernt - Transitions max .2s fuer Hover-Effekte Made-with: Cursor
This commit is contained in:
root
373
index.html
373
index.html
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Baustein 2: Elektromagnetische Schalter | Steuerungstechnik</title>
|
||||
<title>Elektromagnetische Schalter | Steuerungstechnik</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
@@ -31,12 +31,12 @@ body{margin:0;font-family:'Exo 2',system-ui,sans-serif;background:var(--bg);colo
|
||||
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.01em}
|
||||
.mono{font-family:'Share Tech Mono',monospace}
|
||||
|
||||
/* ─── NAV ─────────────────────────────────────── */
|
||||
/* ─── NAV ──────────────────────────────────── */
|
||||
nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);box-shadow:0 1px 12px rgba(0,0,0,.04)}
|
||||
.nav-inner{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;gap:.5rem}
|
||||
.logo{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.05rem;color:var(--accent);letter-spacing:-.02em}
|
||||
.nav-links{display:flex;flex-wrap:wrap;gap:.2rem;list-style:none;margin:0;padding:0;justify-content:flex-end}
|
||||
.nav-links a{color:#374151;text-decoration:none;font-size:.82rem;font-weight:500;padding:.45rem .7rem;border-radius:8px;transition:.18s}
|
||||
.nav-links a{color:#374151;text-decoration:none;font-size:.82rem;font-weight:500;padding:.45rem .7rem;border-radius:8px;transition:.2s}
|
||||
.nav-links a:hover{color:var(--accent);background:var(--accent-soft)}
|
||||
#menu-btn{display:none;background:var(--panel);border:1px solid var(--accent);color:var(--accent);padding:.5rem .9rem;border-radius:8px;cursor:pointer;font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:600}
|
||||
@media(max-width:960px){
|
||||
@@ -46,37 +46,68 @@ nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-
|
||||
.nav-inner{align-items:flex-start;flex-direction:column}
|
||||
}
|
||||
|
||||
/* ─── REVEAL ANIMATION ────────────────────────── */
|
||||
/* ─── REVEAL ANIMATION ──────────────────────── */
|
||||
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
|
||||
.reveal.visible{opacity:1;transform:none}
|
||||
|
||||
/* ─── SECTIONS ────────────────────────────────── */
|
||||
/* ─── SECTION HEADS with underline animation ── */
|
||||
.section-head{
|
||||
font-size:clamp(1.5rem,3vw,2rem);
|
||||
margin:0 0 .5rem;
|
||||
color:var(--accent);
|
||||
font-weight:700;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
}
|
||||
.section-head::after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
bottom:-4px;left:0;
|
||||
height:2px;width:0;
|
||||
background:var(--accent);
|
||||
transition:width .5s ease;
|
||||
}
|
||||
.reveal.visible .section-head::after{width:100%}
|
||||
|
||||
/* ─── SECTIONS ──────────────────────────────── */
|
||||
.section{padding:3.5rem 1.25rem;max-width:1200px;margin:0 auto}
|
||||
.section-head{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .5rem;color:var(--accent);font-weight:700}
|
||||
.section-tag{display:inline-block;font-family:'Outfit',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:var(--amber-soft);padding:.3rem .7rem;border-radius:999px;margin-bottom:.75rem}
|
||||
.section-sub{color:var(--muted);max-width:780px;margin:0 0 2rem;font-size:.98rem}
|
||||
.section-sub{color:var(--muted);max-width:780px;margin:.5rem 0 2rem;font-size:.98rem}
|
||||
.alt-bg{background:linear-gradient(180deg,var(--accent-soft) 0%,transparent 100%)}
|
||||
|
||||
/* ─── HERO ────────────────────────────────────── */
|
||||
/* ─── HERO ──────────────────────────────────── */
|
||||
.hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;padding:5rem 1.25rem 4rem;text-align:center;overflow:hidden;background:var(--bg)}
|
||||
.hero-bg{position:absolute;inset:0;background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Electrical_panel.jpg/640px-Electrical_panel.jpg') center/cover no-repeat;opacity:.05;pointer-events:none}
|
||||
.hero-inner{position:relative;z-index:2;max-width:900px;width:100%}
|
||||
.hero h1{font-size:clamp(2rem,5.5vw,3.2rem);margin:0 0 1rem;line-height:1.15;background:linear-gradient(135deg,#15803d,#16a34a 50%,#ca8a04);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
|
||||
.hero-lead{font-size:1.1rem;color:#374151;max-width:640px;margin:0 auto 2.5rem}
|
||||
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem}
|
||||
.stat{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.1rem 1.5rem;min-width:160px;box-shadow:var(--glow);transition:transform .25s,border-color .25s}
|
||||
.stat:hover{transform:translateY(-3px);border-color:var(--accent)}
|
||||
.stat{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.1rem 1.5rem;min-width:160px;box-shadow:var(--glow);transition:transform .2s,border-color .2s,box-shadow .2s}
|
||||
.stat:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(22,163,74,.12)}
|
||||
.stat b{display:block;font-family:'Outfit',sans-serif;font-size:1.6rem;color:var(--accent);font-weight:700;line-height:1.1}
|
||||
.stat span{font-size:.8rem;color:var(--muted);display:block;margin-top:.25rem}
|
||||
.hero-scroll{margin-top:3rem;font-size:2rem;line-height:1;color:var(--muted);animation:heroBounce 1.6s ease-in-out infinite}
|
||||
@keyframes heroBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
|
||||
|
||||
/* ─── TEXT / CONTENT ──────────────────────────── */
|
||||
/* CSS scroll arrow */
|
||||
.hero-scroll{margin-top:3rem;display:flex;justify-content:center}
|
||||
.scroll-arrow{
|
||||
width:22px;height:22px;
|
||||
border-right:3px solid var(--muted);
|
||||
border-bottom:3px solid var(--muted);
|
||||
transform:rotate(45deg);
|
||||
animation:arrowBounce 1.5s ease-in-out infinite;
|
||||
border-radius:2px;
|
||||
}
|
||||
@keyframes arrowBounce{
|
||||
0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}
|
||||
50%{transform:rotate(45deg) translate(4px,4px);opacity:1}
|
||||
}
|
||||
|
||||
/* ─── TEXT ──────────────────────────────────── */
|
||||
p{margin:.6rem 0}
|
||||
.intro-text{font-size:1.05rem;color:#374151;margin-bottom:1.5rem}
|
||||
|
||||
/* ─── CARDS ───────────────────────────────────── */
|
||||
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem}
|
||||
/* ─── CARDS ─────────────────────────────────── */
|
||||
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;transition:box-shadow .2s}
|
||||
.card:hover{box-shadow:0 8px 24px rgba(22,163,74,.12)}
|
||||
.card h3,.card h4{margin:0 0 .5rem;color:var(--text)}
|
||||
.card-title{font-size:1rem;font-weight:600;margin:0 0 .5rem}
|
||||
.card-body{font-size:.92rem;color:var(--muted)}
|
||||
@@ -91,33 +122,21 @@ p{margin:.6rem 0}
|
||||
@media(max-width:1000px){.grid-5{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:520px){.grid-5{grid-template-columns:1fr}}
|
||||
|
||||
/* ─── IMAGES / PLACEHOLDERS ───────────────────── */
|
||||
/* ─── IMAGES / PLACEHOLDERS ─────────────────── */
|
||||
img{max-width:100%;height:auto;display:block}
|
||||
.figure{margin:0 0 1rem}
|
||||
.figure img{border-radius:12px;border:2px solid var(--border);box-shadow:var(--glow)}
|
||||
.figcap{margin-top:.6rem;font-size:.85rem;color:var(--muted);text-align:center;font-style:italic}
|
||||
|
||||
.img-placeholder{
|
||||
min-height:220px;
|
||||
background:var(--accent-soft);
|
||||
border:2px dashed #86efac;
|
||||
border-radius:12px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:.5rem;
|
||||
padding:1.5rem;
|
||||
text-align:center;
|
||||
min-height:220px;background:var(--accent-soft);border:2px dashed #86efac;
|
||||
border-radius:12px;display:flex;flex-direction:column;align-items:center;
|
||||
justify-content:center;gap:.5rem;padding:1.5rem;text-align:center;
|
||||
}
|
||||
.img-placeholder.small{min-height:120px;padding:1rem}
|
||||
.ph-icon{font-size:2.5rem;line-height:1}
|
||||
.img-placeholder.small .ph-icon{font-size:1.6rem}
|
||||
.ph-title{color:var(--accent);font-weight:700;font-size:.9rem;margin:0;font-family:'Outfit',sans-serif}
|
||||
.img-placeholder.small .ph-title{font-size:.82rem}
|
||||
.ph-hint{color:var(--muted);font-size:.75rem;margin:0;max-width:540px}
|
||||
|
||||
/* ─── VS SECTION (AB2) ────────────────────────── */
|
||||
/* ─── VS SECTION ────────────────────────────── */
|
||||
.vs-wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;margin:1.5rem 0 2rem}
|
||||
@media(max-width:900px){.vs-wrap{grid-template-columns:1fr;gap:1rem}}
|
||||
.vs-badge{
|
||||
@@ -127,32 +146,35 @@ img{max-width:100%;height:auto;display:block}
|
||||
display:flex;align-items:center;justify-content:center;flex-shrink:0;
|
||||
margin:0 auto;box-shadow:0 4px 16px rgba(22,163,74,.3);
|
||||
}
|
||||
.vs-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem}
|
||||
.vs-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1.25rem;transition:box-shadow .2s}
|
||||
.vs-card:hover{box-shadow:0 8px 24px rgba(22,163,74,.12)}
|
||||
.vs-card.left{border-top:4px solid var(--amber)}
|
||||
.vs-card.right{border-top:4px solid var(--accent)}
|
||||
.vs-card h3{margin:0 0 1rem;font-size:1.1rem}
|
||||
.vs-list{list-style:none;padding:0;margin:0}
|
||||
.vs-list li{padding:.55rem 0 .55rem 1.6rem;position:relative;font-size:.92rem;color:#374151;border-bottom:1px solid var(--border-soft)}
|
||||
.vs-list li{
|
||||
padding:.55rem 0 .55rem 1.6rem;position:relative;
|
||||
font-size:.92rem;color:#374151;
|
||||
border-bottom:1px solid var(--border-soft);
|
||||
transition:background .2s;border-radius:4px;
|
||||
cursor:default;
|
||||
}
|
||||
.vs-list li:last-child{border-bottom:none}
|
||||
.vs-list.amber li::before{content:'•';position:absolute;left:.3rem;top:.4rem;color:var(--amber);font-size:1.4rem;line-height:1;font-weight:700}
|
||||
.vs-list.green li::before{content:'•';position:absolute;left:.3rem;top:.4rem;color:var(--accent);font-size:1.4rem;line-height:1;font-weight:700}
|
||||
.vs-list.amber li:hover{background:rgba(202,138,4,.08)}
|
||||
.vs-list.green li:hover{background:rgba(22,163,74,.08)}
|
||||
|
||||
/* ─── TABLES ──────────────────────────────────── */
|
||||
/* ─── TABLES ────────────────────────────────── */
|
||||
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1rem 0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
|
||||
th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top}
|
||||
th{background:var(--accent-soft);font-family:'Outfit',sans-serif;font-size:.78rem;color:var(--accent-dark);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
|
||||
tr:last-child td{border-bottom:none}
|
||||
tr:nth-child(even) td{background:#fafafa}
|
||||
td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
|
||||
.table-title{font-family:'Outfit',sans-serif;font-weight:700;color:var(--text);margin:1.5rem 0 .5rem;font-size:1rem}
|
||||
|
||||
/* ─── AB3 Callout wrapper ─────────────────────── */
|
||||
.ab3-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
|
||||
@media(max-width:900px){.ab3-grid{grid-template-columns:1fr}}
|
||||
.canva-hint{margin-top:.85rem;padding:.85rem 1rem;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;font-size:.88rem;color:var(--accent-dark)}
|
||||
|
||||
/* ─── AB5 parts list ──────────────────────────── */
|
||||
/* ─── AB5 parts list ────────────────────────── */
|
||||
.ab5-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}
|
||||
@media(max-width:900px){.ab5-grid{grid-template-columns:1fr}}
|
||||
.parts-list{list-style:none;padding:0;margin:0;counter-reset:part}
|
||||
@@ -164,9 +186,9 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
background:#fff;
|
||||
border:1px solid var(--border);
|
||||
border-radius:10px;
|
||||
transition:.2s;
|
||||
transition:background .2s,border-color .2s,transform .2s;
|
||||
font-size:.92rem;
|
||||
cursor:default;
|
||||
cursor:pointer;
|
||||
}
|
||||
.parts-list li::before{
|
||||
content:counter(part);
|
||||
@@ -178,11 +200,31 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
}
|
||||
.parts-list li:hover{background:var(--accent-soft);border-color:var(--accent);transform:translateX(4px)}
|
||||
.parts-list strong{color:var(--accent-dark)}
|
||||
.part-info{
|
||||
max-height:0;overflow:hidden;
|
||||
transition:max-height .3s ease,padding .3s ease;
|
||||
background:var(--accent-soft);
|
||||
border:1px solid var(--border);
|
||||
border-radius:0 0 10px 10px;
|
||||
margin-top:-8px;
|
||||
margin-bottom:.6rem;
|
||||
padding:0 1rem;
|
||||
font-size:.88rem;
|
||||
color:var(--accent-dark);
|
||||
}
|
||||
.part-info.open{max-height:200px;padding:.75rem 1rem}
|
||||
|
||||
/* ─── TIMELINE (AB6) ──────────────────────────── */
|
||||
/* ─── TIMELINE ──────────────────────────────── */
|
||||
.timeline{position:relative;padding-left:2.5rem;margin:2rem 0}
|
||||
.timeline::before{content:'';position:absolute;left:12px;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-soft));border-radius:2px}
|
||||
.tl-step{position:relative;margin-bottom:1.25rem;padding:1rem 1.25rem;background:#fff;border:1px solid var(--border);border-radius:12px}
|
||||
.tl-step{
|
||||
position:relative;margin-bottom:1.25rem;
|
||||
padding:1rem 1.25rem;background:#fff;
|
||||
border:1px solid var(--border);border-radius:12px;
|
||||
opacity:0;transform:translateX(-30px);
|
||||
transition:opacity .4s ease,transform .4s ease;
|
||||
}
|
||||
.tl-step.tl-visible{opacity:1;transform:none}
|
||||
.tl-step::before{
|
||||
content:attr(data-n);
|
||||
position:absolute;left:-2.1rem;top:1rem;
|
||||
@@ -195,13 +237,12 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
.tl-step h4{margin:0 0 .35rem;color:var(--accent-dark);font-size:1rem}
|
||||
.tl-step p{margin:0;color:#374151;font-size:.92rem}
|
||||
|
||||
/* ─── BOXES ───────────────────────────────────── */
|
||||
/* ─── BOXES ─────────────────────────────────── */
|
||||
.warn-box{border:2px solid var(--danger);background:var(--danger-soft);border-radius:12px;padding:1rem 1.25rem;margin:1.25rem 0;color:#7f1d1d;font-weight:500}
|
||||
.warn-box strong{color:var(--danger)}
|
||||
.info-box{border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:1rem 1.25rem;margin:1.25rem 0;color:#064e3b}
|
||||
.amber-box{border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 10px 10px 0;padding:1rem 1.25rem;margin:1.25rem 0;color:#713f12}
|
||||
|
||||
/* ─── GALVANIC (AB6.2) ────────────────────────── */
|
||||
/* ─── GALVANIC ──────────────────────────────── */
|
||||
.galv{display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem;align-items:stretch;margin:1.5rem 0}
|
||||
@media(max-width:768px){.galv{grid-template-columns:1fr}}
|
||||
.galv-box{background:#fff;border-radius:14px;padding:1.25rem;text-align:center;display:flex;flex-direction:column;gap:.4rem}
|
||||
@@ -214,19 +255,30 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
.galv-mid .sym{font-size:3rem;line-height:1;color:var(--accent)}
|
||||
.galv-mid .lbl{font-family:'Share Tech Mono',monospace;font-size:.8rem;color:var(--amber);margin-top:.25rem}
|
||||
|
||||
/* ─── AB8 signal list ─────────────────────────── */
|
||||
/* Animated current flow dot */
|
||||
.flow-track{position:relative;height:18px;margin:.5rem 0;overflow:hidden;border-radius:4px;background:rgba(22,163,74,.08)}
|
||||
.flow-dot{
|
||||
position:absolute;top:50%;transform:translateY(-50%);
|
||||
width:10px;height:10px;border-radius:50%;
|
||||
animation:flowMove 2s linear infinite;
|
||||
}
|
||||
.flow-dot.green{background:var(--accent);box-shadow:0 0 6px var(--accent)}
|
||||
.flow-dot.amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}
|
||||
@keyframes flowMove{from{left:-10px}to{left:100%}}
|
||||
|
||||
/* ─── SIGNAL LIST ───────────────────────────── */
|
||||
.signal-list{list-style:none;padding:0;margin:1rem 0}
|
||||
.signal-list li{display:flex;align-items:flex-start;gap:.85rem;padding:.75rem 1rem;background:#fff;border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;font-size:.93rem}
|
||||
.signal-list .icon{font-size:1.4rem;flex-shrink:0;line-height:1.2}
|
||||
.signal-list .sig-name{font-family:'Share Tech Mono',monospace;color:var(--accent);font-weight:600}
|
||||
|
||||
/* ─── SAFETY CARDS (AB7.2) ────────────────────── */
|
||||
.safe-card{background:#fff;border:1px solid var(--danger);border-top:4px solid var(--danger);border-radius:12px;padding:1rem;text-align:center;box-shadow:0 2px 10px rgba(220,38,38,.08)}
|
||||
/* ─── SAFETY CARDS ──────────────────────────── */
|
||||
.safe-card{background:#fff;border:1px solid var(--danger);border-top:4px solid var(--danger);border-radius:12px;padding:1rem;text-align:center;box-shadow:0 2px 10px rgba(220,38,38,.08);transition:box-shadow .2s}
|
||||
.safe-card:hover{box-shadow:0 8px 24px rgba(220,38,38,.14)}
|
||||
.safe-card .num{font-family:'Outfit',sans-serif;font-weight:800;color:var(--danger);font-size:1.5rem;line-height:1}
|
||||
.safe-card h4{margin:.5rem 0 .35rem;font-size:.95rem;color:var(--text)}
|
||||
.safe-card p{font-size:.82rem;color:var(--muted);margin:0}
|
||||
|
||||
/* ─── ACCORDION ───────────────────────────────── */
|
||||
/* ─── ACCORDION ─────────────────────────────── */
|
||||
.acc-item{border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden;background:#fff}
|
||||
.acc-h{width:100%;text-align:left;padding:.85rem 1rem;background:var(--accent-soft);border:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
|
||||
.acc-h:hover{background:#dcfce7}
|
||||
@@ -234,7 +286,9 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
.acc-b.open{max-height:400px;padding:.9rem 1rem 1.1rem}
|
||||
.acc-b p{font-size:.92rem;color:#374151;margin:.25rem 0}
|
||||
|
||||
/* ─── QUIZ ────────────────────────────────────── */
|
||||
/* ─── QUIZ ──────────────────────────────────── */
|
||||
.quiz-progress-wrap{background:var(--border-soft);border-radius:999px;height:8px;margin-bottom:1.5rem;overflow:hidden}
|
||||
.quiz-progress-bar{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent),#22c55e);width:0%;transition:width .4s ease}
|
||||
.quiz-q{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1rem}
|
||||
.quiz-q h4{margin:0 0 .75rem;font-size:1rem;color:var(--accent-dark)}
|
||||
.qopts{display:flex;flex-direction:column;gap:.5rem}
|
||||
@@ -249,12 +303,12 @@ td.mono,th.mono{font-family:'Share Tech Mono',monospace;font-size:.85rem}
|
||||
.btn.ghost:hover{background:#6b7280}
|
||||
.score-panel{text-align:center;padding:2rem;margin-top:1.5rem;border-radius:16px;background:#fff;border:2px solid var(--border)}
|
||||
|
||||
/* ─── SUBTASK HEADERS ─────────────────────────── */
|
||||
/* ─── SUBTASK HEADERS ───────────────────────── */
|
||||
.subtask{margin:2rem 0 1rem}
|
||||
.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}
|
||||
|
||||
/* ─── FOOTER ──────────────────────────────────── */
|
||||
/* ─── 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}
|
||||
</style>
|
||||
</head>
|
||||
@@ -262,7 +316,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="logo">⚡ Elektromagnetische Schalter</div>
|
||||
<div class="logo">Elektromagnetische Schalter</div>
|
||||
<button type="button" id="menu-btn" aria-label="Menü">☰ Menü</button>
|
||||
<ul class="nav-links" id="navm">
|
||||
<li><a href="#hero">Start</a></li>
|
||||
@@ -278,21 +332,23 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ═══════════════════════════════════ HERO ═══════════════════════════════════ -->
|
||||
<!-- HERO -->
|
||||
<section id="hero" class="hero reveal">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-inner">
|
||||
<h1>Baustein 2: Elektromagnetische Schalter</h1>
|
||||
<p class="hero-lead">Steuerungstechnik</p>
|
||||
<h1>Elektromagnetische Schalter</h1>
|
||||
<p class="hero-lead">Relais und Schütze — Aufbau, Funktion und Einsatz in der Steuerungstechnik</p>
|
||||
<div class="stats">
|
||||
<div class="stat"><b>Relais & Schütz</b><span>Schalttypen</span></div>
|
||||
<div class="stat"><b>Schütz</b><span>8 Bauteile</span></div>
|
||||
</div>
|
||||
<div class="hero-scroll" aria-hidden="true">↓</div>
|
||||
<div class="hero-scroll" aria-hidden="true">
|
||||
<div class="scroll-arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 1 ════════════════════════════════════ -->
|
||||
<!-- AB 1: Grundlagen -->
|
||||
<section id="ab1" class="section reveal alt-bg">
|
||||
<h2 class="section-head">Was sind elektromagnetische Schalter?</h2>
|
||||
<p class="intro-text">Elektromagnetische Schalter werden in der Industrie überall dort eingesetzt, wo elektrische Stromkreise sicher und zuverlässig geschaltet werden müssen — zum Beispiel beim Starten von Motoren oder bei der Steuerung von Kränen.</p>
|
||||
@@ -317,13 +373,12 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 2 ════════════════════════════════════ -->
|
||||
<!-- AB 2: Relais vs Schütz -->
|
||||
<section id="ab2" class="section reveal">
|
||||
<h2 class="section-head">Relais & Schütz im Vergleich</h2>
|
||||
<p class="section-sub">Zwei elektromagnetische Schalter im direkten Vergleich — unterschiedliche Schaltleistungen, Ankertypen und Bezeichnungen.</p>
|
||||
|
||||
<div class="vs-wrap">
|
||||
<!-- RELAIS -->
|
||||
<div class="vs-card left">
|
||||
<figure class="figure" style="margin-bottom:1rem">
|
||||
<img loading="lazy" src="relais.png" alt="Relais geöffnet — Spule und Kontakte sichtbar">
|
||||
@@ -339,15 +394,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- VS BADGE -->
|
||||
<div class="vs-badge">VS</div>
|
||||
|
||||
<!-- SCHÜTZ -->
|
||||
<div class="vs-card right">
|
||||
<figure class="figure" style="margin-bottom:1rem">
|
||||
<img loading="lazy"
|
||||
src="schuetz.png"
|
||||
alt="Leistungsschütz">
|
||||
<img loading="lazy" src="schuetz.png" alt="Leistungsschütz">
|
||||
<figcaption class="figcap">Leistungsschütz</figcaption>
|
||||
</figure>
|
||||
<h3>Schütz <span class="mono" style="color:var(--accent);font-size:.9rem">(Q)</span></h3>
|
||||
@@ -388,7 +439,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 4 ════════════════════════════════════ -->
|
||||
<!-- AB 4: Schaltzeichen -->
|
||||
<section id="ab4" class="section reveal">
|
||||
<h2 class="section-head">Schaltzeichen & Symbole</h2>
|
||||
<p class="section-sub">Normgerechte Darstellung nach DIN EN 60617 — so werden Schütze in Schaltplänen dargestellt.</p>
|
||||
@@ -399,15 +450,14 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</div>
|
||||
<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">Schaltzeichen eines Leistungsschützes — Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14</figcaption>
|
||||
<figcaption class="figcap">Hauptkontakte 1/L1–6/T3, Spule A1/A2, Hilfskontakt 13/14</figcaption>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 5 ════════════════════════════════════ -->
|
||||
<!-- AB 5: Aufbau -->
|
||||
<section id="ab5" class="section reveal alt-bg">
|
||||
<h2 class="section-head">Aufbau & Bestandteile eines Schützes</h2>
|
||||
<p class="section-sub">Ein Leistungsschütz besteht aus 8 Hauptbauteilen — vom Öffner bis zum Eisenkern. Fahre mit der Maus über die Liste rechts, um jedes Bauteil zu erkunden.</p>
|
||||
<p class="section-sub">Ein Leistungsschütz besteht aus 8 Hauptbauteilen. Klicke auf ein Bauteil für eine erweiterte Erklärung.</p>
|
||||
|
||||
<div class="subtask">
|
||||
<h3>Die 8 Bestandteile</h3>
|
||||
@@ -417,30 +467,27 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img loading="lazy"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Contacteur_tripolaire.jpg/640px-Contacteur_tripolaire.jpg"
|
||||
alt="Bestandteile eines Schützes – Querschnitt"
|
||||
src="schuetz-aufbau.jpg"
|
||||
alt="Motorschütz geöffnet — Bestandteile sichtbar"
|
||||
onerror="this.style.display='none'"
|
||||
style="width:100%;border-radius:12px;border:2px solid #86efac">
|
||||
<figcaption class="figcap">Motorschütz geöffnet (Quelle: Wikimedia Commons)</figcaption>
|
||||
<figcaption class="figcap">Motorschütz geöffnet — alle Bauteile sichtbar</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="img-placeholder" style="margin-top:1rem">
|
||||
<span class="ph-icon">📷</span>
|
||||
<p class="ph-title">Beschriftetes Bild: Alle 8 Bauteile nummeriert</p>
|
||||
<p class="ph-hint">Erstelle mit Canva (canva.com): Lade das Foto oben hoch, füge 8 nummerierte Pfeile/Kreise ein und beschrifte:<br>
|
||||
1=Öffner, 2=Schaltstücke, 3=Schließer, 4=Spulenanschluss, 5=Anker, 6=Kurzschlussring, 7=Spule, 8=Eisenkern</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ol class="parts-list">
|
||||
<li><strong>Öffner</strong> — Ruhekontakt (NC), öffnet bei Anzug der Spule</li>
|
||||
<li><strong>Schaltstücke</strong> — Kontaktflächen aus Silberlegierung</li>
|
||||
<li><strong>Schließer</strong> — Arbeitskontakt (NO), schließt bei Anzug</li>
|
||||
<li><strong>Spulenanschluss</strong> — Klemmen A1 und A2</li>
|
||||
<li><strong>Anker</strong> — bewegliches Eisenteil, wird angezogen</li>
|
||||
<li><strong>Kurzschlussring</strong> — verhindert Brummen bei AC-Spulen</li>
|
||||
<li><strong>Spule</strong> — Erregerspule, erzeugt das Magnetfeld</li>
|
||||
<li><strong>Eisenkern</strong> — verstärkt und leitet den magnetischen Fluss</li>
|
||||
</ol>
|
||||
<div>
|
||||
<ol class="parts-list" id="parts-list">
|
||||
<li data-key="oeffner"><strong>Öffner</strong> — Ruhekontakt (NC), öffnet bei Anzug der Spule</li>
|
||||
<li data-key="schaltstuecke"><strong>Schaltstücke</strong> — Kontaktflächen aus Silberlegierung</li>
|
||||
<li data-key="schliesser"><strong>Schließer</strong> — Arbeitskontakt (NO), schließt bei Anzug</li>
|
||||
<li data-key="spulenanschluss"><strong>Spulenanschluss</strong> — Klemmen A1 und A2</li>
|
||||
<li data-key="anker"><strong>Anker</strong> — bewegliches Eisenteil, wird angezogen</li>
|
||||
<li data-key="kurzschlussring"><strong>Kurzschlussring</strong> — verhindert Brummen bei AC-Spulen</li>
|
||||
<li data-key="spule"><strong>Spule</strong> — Erregerspule, erzeugt das Magnetfeld</li>
|
||||
<li data-key="eisenkern"><strong>Eisenkern</strong> — verstärkt und leitet den magnetischen Fluss</li>
|
||||
</ol>
|
||||
<div class="part-info" id="part-info"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subtask">
|
||||
@@ -465,36 +512,36 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 6 ════════════════════════════════════ -->
|
||||
<!-- AB 6: Funktionsweise -->
|
||||
<section id="ab6" class="section reveal">
|
||||
<h2 class="section-head">Funktionsweise Schritt für Schritt</h2>
|
||||
<p class="section-sub">Vom Anlegen der Spulenspannung bis zum Abfall — der gesamte Schaltvorgang in fünf Schritten erklärt.</p>
|
||||
|
||||
<div class="timeline">
|
||||
<div class="tl-step" data-n="1">
|
||||
<div class="tl-step" data-n="1" style="transition-delay:.0s">
|
||||
<h4>Spannung anlegen</h4>
|
||||
<p>Spannung wird an die beiden Spulenanschlüsse A1 und A2 angelegt.</p>
|
||||
</div>
|
||||
<div class="tl-step" data-n="2">
|
||||
<div class="tl-step" data-n="2" style="transition-delay:.15s">
|
||||
<h4>Magnetfeld entsteht</h4>
|
||||
<p>Strom fließt durch die Schützspule — ein Magnetfeld entsteht.</p>
|
||||
</div>
|
||||
<div class="tl-step" data-n="3">
|
||||
<div class="tl-step" data-n="3" style="transition-delay:.3s">
|
||||
<h4>Anker wird angezogen</h4>
|
||||
<p>Das Magnetfeld zieht den Anker an und betätigt die Schaltkontakte.</p>
|
||||
</div>
|
||||
<div class="tl-step" data-n="4">
|
||||
<div class="tl-step" data-n="4" style="transition-delay:.45s">
|
||||
<h4>Kontakte schalten</h4>
|
||||
<p>Schließer schließen, Öffner öffnen — der Verbraucher wird eingeschaltet.</p>
|
||||
</div>
|
||||
<div class="tl-step" data-n="5">
|
||||
<div class="tl-step" data-n="5" style="transition-delay:.6s">
|
||||
<h4>Schütz fällt ab</h4>
|
||||
<p>Nach Abschalten der Spannungsversorgung drückt die Rückstellfeder den Anker zurück. Das Schütz fällt ab.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="warn-box">
|
||||
<strong>⚠️ Wichtig:</strong> Das Schütz ist kein Dauermagnet — fällt die Steuerspannung aus, fällt das Schütz sofort ab!
|
||||
<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">
|
||||
@@ -508,9 +555,11 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
<div class="big-val">DC 24V</div>
|
||||
<div class="sub">kleiner Steuerstrom, Taster / SPS</div>
|
||||
<img loading="lazy"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Push_button_assembly.jpg/640px-Push_button_assembly.jpg"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div class="galv-mid">
|
||||
@@ -526,6 +575,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -534,7 +584,7 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 7 ════════════════════════════════════ -->
|
||||
<!-- AB 7: Sicherheit -->
|
||||
<section id="ab7" class="section reveal alt-bg">
|
||||
<h2 class="section-head">Sicherheitsregeln beim Schützaustausch</h2>
|
||||
<p class="section-sub">Vor dem Austausch eines Schützes müssen die fünf Sicherheitsregeln der Elektrotechnik beachtet werden — sie schützen vor lebensgefährlichen Stromschlägen.</p>
|
||||
@@ -546,33 +596,33 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
<div class="grid-5">
|
||||
<div class="safe-card">
|
||||
<div class="num">1</div>
|
||||
<h4>⛔ Freischalten</h4>
|
||||
<h4>Freischalten</h4>
|
||||
<p>Anlage spannungsfrei schalten</p>
|
||||
</div>
|
||||
<div class="safe-card">
|
||||
<div class="num">2</div>
|
||||
<h4>🔒 Gegen Wieder­einschalten sichern</h4>
|
||||
<h4>Gegen Wieder­einschalten sichern</h4>
|
||||
<p>Hauptschalter abschließen</p>
|
||||
</div>
|
||||
<div class="safe-card">
|
||||
<div class="num">3</div>
|
||||
<h4>🔍 Spannungs­freiheit feststellen</h4>
|
||||
<h4>Spannungs­freiheit feststellen</h4>
|
||||
<p>Mit Messgerät alle Leiter prüfen</p>
|
||||
</div>
|
||||
<div class="safe-card">
|
||||
<div class="num">4</div>
|
||||
<h4>🌍 Erden und kurz­schließen</h4>
|
||||
<h4>Erden und kurz­schließen</h4>
|
||||
<p>Bei Mittelspannung und höher</p>
|
||||
</div>
|
||||
<div class="safe-card">
|
||||
<div class="num">5</div>
|
||||
<h4>🚧 Benachbarte Teile abdecken</h4>
|
||||
<h4>Benachbarte Teile abdecken</h4>
|
||||
<p>Schutz vor Nachbarspannungen</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ AB 8 ════════════════════════════════════ -->
|
||||
<!-- AB 8: Praxis -->
|
||||
<section id="ab8" class="section reveal">
|
||||
<h2 class="section-head">Praxisbeispiel: Hebekran</h2>
|
||||
<p class="section-sub">Ein typisches Beispiel für den Einsatz von Schützen in der Industrie.</p>
|
||||
@@ -581,8 +631,9 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
|
||||
<figure class="figure">
|
||||
<img loading="lazy"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Gantry-crane.jpg/640px-Gantry-crane.jpg"
|
||||
alt="Industrieller Portalkran mit Schützsteuerung">
|
||||
src="hebekran.jpg"
|
||||
alt="Industrieller Portalkran mit Schützsteuerung"
|
||||
onerror="this.style.display='none'">
|
||||
<figcaption class="figcap">Portalkran — schwere Lasten werden über Schütz-gesteuerte Motoren bewegt</figcaption>
|
||||
</figure>
|
||||
|
||||
@@ -591,22 +642,23 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
<p class="lead">Eine Kransteuerung besteht aus mehreren Bedien- und Schaltelementen, die über Schütze auf den Antriebsmotor wirken:</p>
|
||||
</div>
|
||||
<ul class="signal-list">
|
||||
<li><span class="icon">⚡</span><div><span class="sig-name">-Q1 Hauptschalter</span> → Energieversorgung des gesamten Krans</div></li>
|
||||
<li><span class="icon">🔑</span><div><span class="sig-name">-S1 Schlüsselschalter</span> → Inbetriebnahme der Steuerung</div></li>
|
||||
<li><span class="icon">⬆️</span><div><span class="sig-name">-S2 Taster AUF</span> → Motor Seilwinde aufwärts (Tippbetrieb)</div></li>
|
||||
<li><span class="icon">⬇️</span><div><span class="sig-name">-S3 Taster AB</span> → Motor Seilwinde abwärts (Tippbetrieb)</div></li>
|
||||
<li><span class="icon">🔴</span><div><span class="sig-name">-S0 NOT-HALT</span> → Sofortstillstand bei Gefahr</div></li>
|
||||
<li><div><span class="sig-name">Q1 Hauptschalter</span> — Energieversorgung des gesamten Krans</div></li>
|
||||
<li><div><span class="sig-name">S1 Schlüsselschalter</span> — Inbetriebnahme der Steuerung</div></li>
|
||||
<li><div><span class="sig-name">S2 Taster AUF</span> — Motor Seilwinde aufwärts (Tippbetrieb)</div></li>
|
||||
<li><div><span class="sig-name">S3 Taster AB</span> — Motor Seilwinde abwärts (Tippbetrieb)</div></li>
|
||||
<li><div><span class="sig-name">S0 NOT-HALT</span> — Sofortstillstand bei Gefahr</div></li>
|
||||
</ul>
|
||||
|
||||
<div class="info-box">
|
||||
Die Steuerung des Krans ist ein gutes Beispiel für die <strong>Galvanische Trennung</strong>: Bediener arbeiten mit ungefährlicher Steuerspannung (z.B. DC 24V), während die Motoren über Schütze mit der hohen Lastspannung (z.B. AC 400V) versorgt werden. Verbunden sind beide Kreise nur über das Magnetfeld der Schützspulen.
|
||||
Die Steuerung des Krans ist ein gutes Beispiel für die <strong>Galvanische Trennung</strong>: Bediener arbeiten mit ungefährlicher Steuerspannung (z.B. DC 24V), während die Motoren über Schütze mit der hohen Lastspannung (z.B. AC 400V) versorgt werden.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═══════════════════════════════════ QUIZ ═══════════════════════════════════ -->
|
||||
<!-- QUIZ -->
|
||||
<section id="quiz" class="section reveal alt-bg">
|
||||
<h2 class="section-head">Wissens-Check</h2>
|
||||
<p class="section-sub">Acht allgemeine Fragen rund um Relais, Schütz und Steuerungstechnik — sofortiges Feedback nach jeder Antwort.</p>
|
||||
<div class="quiz-progress-wrap"><div class="quiz-progress-bar" id="quiz-progress"></div></div>
|
||||
<div id="quiz-box"></div>
|
||||
<div style="text-align:center;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center">
|
||||
<button type="button" class="btn" onclick="auswerten()">Auswerten</button>
|
||||
@@ -616,12 +668,13 @@ footer{padding:2rem 1.25rem 3rem;text-align:center;color:var(--muted);font-size:
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Baustein 2 · Elektromagnetische Schalter · Steuerungstechnik · Bilder: Wikimedia Commons (CC)</p>
|
||||
<p>Elektromagnetische Schalter · Steuerungstechnik</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/* ─── QUIZ ─────────────────────────────────────────── */
|
||||
const quizData = [
|
||||
{q:'Was bedeutet NO bei einem Schützkontakt?',
|
||||
o:['Normally Open — Schließer, im Ruhezustand offen','Normally Obstructed','New Output','Normally On'], c:0},
|
||||
@@ -643,10 +696,17 @@ const quizData = [
|
||||
|
||||
let quizState = [];
|
||||
|
||||
function updateProgress() {
|
||||
const answered = quizState.filter(s => s.answered).length;
|
||||
const pct = (answered / quizData.length) * 100;
|
||||
document.getElementById('quiz-progress').style.width = pct + '%';
|
||||
}
|
||||
|
||||
function buildQuiz() {
|
||||
const box = document.getElementById('quiz-box');
|
||||
box.innerHTML = '';
|
||||
quizState = quizData.map(() => ({ answered:false, correct:null }));
|
||||
updateProgress();
|
||||
quizData.forEach((d, i) => {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'quiz-q reveal';
|
||||
@@ -669,6 +729,7 @@ function answer(qIdx, choice, correctIdx) {
|
||||
if (quizState[qIdx].answered) return;
|
||||
quizState[qIdx].answered = true;
|
||||
quizState[qIdx].correct = choice === correctIdx;
|
||||
updateProgress();
|
||||
const wrap = document.getElementById('opts-' + qIdx);
|
||||
wrap.querySelectorAll('.qbtn').forEach((btn, idx) => {
|
||||
btn.disabled = true;
|
||||
@@ -713,6 +774,7 @@ function toggleAcc(btn) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── REVEAL ────────────────────────────────────────── */
|
||||
let revealObs = null;
|
||||
function observeReveal() {
|
||||
if (!revealObs) {
|
||||
@@ -727,18 +789,67 @@ function observeReveal() {
|
||||
});
|
||||
}
|
||||
|
||||
/* ─── TIMELINE: animate steps on scroll ─────────────── */
|
||||
const tlObs = new IntersectionObserver(entries => {
|
||||
entries.forEach(e => {
|
||||
if (e.isIntersecting) {
|
||||
const steps = e.target.querySelectorAll('.tl-step');
|
||||
steps.forEach(s => s.classList.add('tl-visible'));
|
||||
tlObs.unobserve(e.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
document.querySelectorAll('.timeline').forEach(t => tlObs.observe(t));
|
||||
|
||||
/* ─── PARTS LIST: click to expand info ──────────────── */
|
||||
const partInfo = {
|
||||
oeffner: 'Im Schaltplan als NC gekennzeichnet. Kontaktnummern: 21/22, 41/42',
|
||||
schaltstuecke:'Material: Silber-Zinnoxid — hohe Leitfähigkeit und Verschleißfestigkeit',
|
||||
schliesser: 'Im Schaltplan als NO gekennzeichnet. Kontaktnummern: 13/14, 33/34',
|
||||
spulenanschluss:'A1 = Plus bei DC, A2 = Minus/Neutral',
|
||||
anker: 'Besteht aus weichem Eisen — wird nach Abschalten sofort losgelassen',
|
||||
kurzschlussring:'Nur bei AC-Schützen — erzeugt Phasenverschiebung',
|
||||
spule: 'Bemessungsspannung z.B. 24V DC oder 230V AC',
|
||||
eisenkern: 'Aus laminierten Blechen — reduziert Wirbelstromverluste'
|
||||
};
|
||||
document.querySelectorAll('#parts-list li').forEach(li => {
|
||||
li.addEventListener('click', () => {
|
||||
const key = li.dataset.key;
|
||||
const box = document.getElementById('part-info');
|
||||
if (box.dataset.open === key) {
|
||||
box.classList.remove('open');
|
||||
box.dataset.open = '';
|
||||
return;
|
||||
}
|
||||
box.textContent = partInfo[key] || '';
|
||||
box.classList.add('open');
|
||||
box.dataset.open = key;
|
||||
});
|
||||
});
|
||||
|
||||
/* ─── MENU ──────────────────────────────────────────── */
|
||||
document.getElementById('menu-btn').addEventListener('click', function() {
|
||||
document.getElementById('navm').classList.toggle('open');
|
||||
});
|
||||
|
||||
buildQuiz();
|
||||
observeReveal();
|
||||
/* ─── PROGRESS BAR ──────────────────────────────────── */
|
||||
(function() {
|
||||
const nav = document.querySelector('nav');
|
||||
const bar = document.createElement('div');
|
||||
bar.style.cssText = 'position:absolute;bottom:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#16a34a,#ca8a04);transition:width .1s ease;z-index:10';
|
||||
nav.appendChild(bar);
|
||||
window.addEventListener('scroll', () => {
|
||||
const h = document.documentElement.scrollHeight - window.innerHeight;
|
||||
bar.style.width = (h <= 0 ? 0 : Math.min((window.scrollY / h) * 100, 100)) + '%';
|
||||
}, { passive:true });
|
||||
})();
|
||||
|
||||
// ─── Bild-Fehler-Handler: ersetzt fehlgeschlagene Bilder durch Placeholder ────
|
||||
/* ─── IMG ERROR HANDLER ─────────────────────────────── */
|
||||
document.querySelectorAll('img').forEach(img => {
|
||||
img.addEventListener('error', function() {
|
||||
if (this.dataset.err) return;
|
||||
this.dataset.err = '1';
|
||||
if (this.style.display === 'none') return;
|
||||
const ph = document.createElement('div');
|
||||
ph.className = 'img-placeholder';
|
||||
ph.innerHTML = '<span class="ph-icon">📷</span>' +
|
||||
@@ -749,18 +860,8 @@ document.querySelectorAll('img').forEach(img => {
|
||||
});
|
||||
});
|
||||
|
||||
// ─── Fortschrittsbalken unten an der Nav ──────────────────────────────────────
|
||||
(function() {
|
||||
const nav = document.querySelector('nav');
|
||||
const bar = document.createElement('div');
|
||||
bar.style.cssText = 'position:absolute;bottom:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#16a34a,#ca8a04);transition:width .1s ease;z-index:10';
|
||||
nav.appendChild(bar);
|
||||
window.addEventListener('scroll', () => {
|
||||
const h = document.documentElement.scrollHeight - window.innerHeight;
|
||||
const pct = h <= 0 ? 0 : (window.scrollY / h) * 100;
|
||||
bar.style.width = Math.min(Math.max(pct, 0), 100) + '%';
|
||||
}, { passive:true });
|
||||
})();
|
||||
buildQuiz();
|
||||
observeReveal();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user