branch-coexist: 3 neue decks 223015b-2026 / 223015c-2026 / dhbw-2026 daneben main

per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict.

struktur:
- slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak)
- slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos)

Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc.

make build durchlaufen für alle 6 decks, 0 fehler.

dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
This commit is contained in:
libretech committed 2026-05-14 21:54:15 +02:00
1 parent 6209f9f3a0
commit 351e3dfc23
467 files changed
+32391 -4701

No files matched your search

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: __TITLE__</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">__URL__</span>
</div>
<iframe src="__SRC__"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-error</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/email-form.html</span>
</div>
<iframe src="./a11y-error.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fehlermeldung</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
label { display: block; margin-bottom: 4px; font-weight: 600; }
input {
font: inherit;
padding: 6px 10px;
width: 100%;
box-sizing: border-box;
border: 2px solid #d63384;
border-radius: 4px;
}
#email-error {
color: #d63384;
font-size: 0.9em;
margin-top: 6px;
}
</style>
</head>
<body>
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" aria-describedby="email-error" value="michael@">
<p id="email-error" role="alert">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-focus</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/focus.html</span>
</div>
<iframe src="./a11y-focus.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fokus-Indikator</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
button:focus-visible, button.is-focused {
outline: 3px solid #d63384;
outline-offset: 3px;
border-radius: 4px;
}
</style>
</head>
<body>
<p><strong>Tab-Taste drücken:</strong></p>
<button class="is-focused">Erster Button</button>
<button>Zweiter Button</button>
<button>Dritter Button</button>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-semantic</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/klick.html</span>
</div>
<iframe src="./a11y-semantic.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>div vs button</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
.bad { color: #b91c1c; }
.good { color: #15803d; }
.button {
display: inline-block;
background: #e5e7eb;
border: 1px solid #9ca3af;
padding: 6px 14px;
cursor: pointer;
border-radius: 4px;
}
button { font: inherit; padding: 6px 14px; }
</style>
</head>
<body>
<h3 class="bad">Schlecht (div)</h3>
<div class="button" onclick="alert('!')">Klick mich</div>
<p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
<h3 class="good">Gut (button)</h3>
<button type="button">Klick mich</button>
<p><small>✅ Tastatur + Screenreader eingebaut</small></p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ARP</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.actor {
background: #1a1a2e;
color: #fff;
padding: 10px 16px;
border-radius: 6px;
font-weight: 700;
min-width: 160px;
text-align: center;
font-size: 0.9rem;
}
.laptop { background: #1e40af; }
.router { background: #c2410c; }
.arrow-right, .arrow-left {
width: 0; height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.arrow-right { border-left: 14px solid #d63384; }
.arrow-left { border-right: 14px solid #15803d; }
.bubble {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.95rem;
max-width: 460px;
}
.ask { background: #fce7f3; border: 2px solid #d63384; color: #7c2d12; }
.reply { background: #dcfce7; border: 2px solid #15803d; color: #14532d; }
.meta {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
margin-bottom: 3px;
}
</style>
</head>
<body>
<div class="row">
<div class="actor laptop">Laptop</div>
<div class="arrow-right"></div>
<div class="bubble ask">
<div class="meta">Broadcast</div>
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
</div>
</div>
<div class="row">
<div class="bubble reply">
<div class="meta">Antwort</div>
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
</div>
<div class="arrow-left"></div>
<div class="actor router">Router</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-Modell Diagramm</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 40px; display: inline-block; box-sizing: border-box; }
.layer {
padding-top: 38px;
padding-bottom: 30px;
padding-left: 30px;
padding-right: 30px;
position: relative;
border-radius: 4px;
}
.layer::before {
position: absolute;
top: 8px; left: 14px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.margin { background: #fde68a; }
.margin::before { content: "margin"; color: #92400e; }
.border { background: #fca5a5; }
.border::before { content: "border"; color: #991b1b; }
.padding { background: #86efac; }
.padding::before { content: "padding"; color: #166534; }
.content {
background: #93c5fd;
width: 260px;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-weight: 700;
font-size: 1.2rem;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="layer margin">
<div class="layer border">
<div class="layer padding">
<div class="content">content</div>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: button</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/button.html</span>
</div>
<iframe src="./button.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Button</title>
</head>
<body>
<button>Add to favorites</button>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Byte-Fluss: Bit → Hex → ASCII</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
--byte-border: #94a3b8;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 22px 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
.file {
width: 100%; box-sizing: border-box;
border: 2px solid var(--dark);
border-radius: 10px;
background: var(--bg-soft);
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.file .head {
background: var(--dark); color: #fff; padding: 8px 14px;
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
display: flex; justify-content: space-between; align-items: center;
}
.file .head .name { font-family: ui-monospace, monospace; }
.file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
.file .body { padding: 12px 14px; }
.row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
.row-bytes:last-child { margin-bottom: 0; }
.byte-bin {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 4px 7px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.92rem;
font-weight: 700;
background: #fff;
letter-spacing: 0.04em;
}
.byte-hex {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 6px 0;
font-family: ui-monospace, monospace;
font-size: 1.1rem;
font-weight: 700;
background: #fff;
min-width: 88px;
text-align: center;
}
.byte-ascii {
border: 1px solid var(--byte-border);
border-radius: 4px;
padding: 6px 0;
font-family: ui-monospace, monospace;
font-size: 1.2rem;
font-weight: 700;
background: #fff;
min-width: 88px;
text-align: center;
}
.byte-ascii.np { color: var(--muted); font-style: italic; }
.truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
.arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.arrow {
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 14px solid var(--hl);
}
.arrow-label {
font-size: 0.78rem; color: var(--hl); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
}
.legend {
margin-top: 12px;
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
font-size: 0.85rem; color: var(--muted);
}
.legend strong { color: var(--dark); }
.legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
<div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
<div class="stage">
<!-- Stage 1: Bitstream -->
<div class="file">
<div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
</div>
<div class="row-bytes">
<span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
</div>
</div>
</div>
<div class="arrow-stack">
<div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
<div class="arrow"></div>
</div>
<!-- Stage 2: Hex -->
<div class="file">
<div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
</div>
<div class="row-bytes">
<span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
</div>
<div class="row-bytes">
<span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
</div>
<div class="row-bytes">
<span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
</div>
</div>
</div>
<div class="arrow-stack">
<div class="arrow-label">je 1 Byte → 1 Zeichen</div>
<div class="arrow"></div>
</div>
<!-- Stage 3: ASCII -->
<div class="file">
<div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
<div class="body">
<div class="row-bytes">
<span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
</div>
<div class="row-bytes">
<span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
</div>
</div>
</div>
<div class="legend">
<span><code>␣</code> = Leerzeichen (0x20)</span>
<span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
<span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Byte → Nibble → Hex</title>
<style>
:root {
--hl: #d63384;
--dark: #1a1a2e;
--muted: #6b7280;
--border: #cbd5e1;
--bg-soft: #f8fafc;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 28px 32px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.level { display: flex; flex-direction: column; align-items: center; }
.label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
/* Level 1: whole byte */
.byte {
display: flex;
gap: 4px;
padding: 8px 14px;
border: 2px solid var(--dark);
border-radius: 8px;
background: var(--bg-soft);
}
.byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
.byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
/* Split arrows */
.split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
.split .arrow {
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid var(--hl);
}
/* Level 2: two nibbles */
.nibbles { display: flex; gap: 80px; }
.nibble {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 10px 14px;
border: 2px solid var(--hl);
border-radius: 8px;
background: #fff;
}
.nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
.nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
.nibble .meta { font-size: 0.78rem; color: var(--muted); }
.single-arrow {
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid var(--hl);
margin: 2px 0;
}
/* Level 3: hex digits */
.hex-digits { display: flex; gap: 80px; }
.hex-digit {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 8px 22px;
border: 2px solid var(--dark);
border-radius: 8px;
background: var(--dark);
color: var(--hl);
}
.hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
.hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
/* Merge down to byte */
.merge {
display: flex; justify-content: center; margin-top: 2px;
}
.merge-v {
display: grid;
grid-template-columns: 60px 60px;
justify-content: center;
align-items: center;
}
.merge-v .line {
height: 20px;
border-right: 2px solid var(--hl);
}
.merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
.bottom-bar { height: 2px; background: var(--hl); width: 120px; }
/* Final result */
.result {
margin-top: 14px;
padding: 14px 22px;
background: #fef3f8;
border-left: 4px solid var(--hl);
border-radius: 4px;
font-size: 1.05rem;
text-align: center;
max-width: 640px;
}
.result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
.result strong { color: var(--hl); }
.math {
margin-top: 10px;
font-size: 0.95rem;
color: var(--dark);
text-align: center;
}
.math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
<h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
<div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
<div class="stage">
<!-- Level 1 -->
<div class="level">
<div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
<div class="byte">
<span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
<span class="sep"></span>
<span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
</div>
</div>
<div class="split">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<!-- Level 2 -->
<div class="level">
<div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
<div class="nibbles">
<div class="nibble">
<div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
<div class="meta">= 4 (dez)</div>
</div>
<div class="nibble">
<div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
<div class="meta">= 13 (dez)</div>
</div>
</div>
</div>
<div class="split">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<!-- Level 3 -->
<div class="level">
<div class="label">2 Hex-Ziffern · Symbole 0–F</div>
<div class="hex-digits">
<div class="hex-digit">
<div class="digit">4</div>
<div class="meta">Nibble → 1 Ziffer</div>
</div>
<div class="hex-digit">
<div class="digit">D</div>
<div class="meta">13 → D</div>
</div>
</div>
</div>
<div class="result">
<code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
</div>
<div class="math">
<span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
</div>
</div>
</body>
</html>
</content>
</invoke>
Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Client/Server Ports</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.endpoint {
border: 2px solid #4a4a6a;
border-radius: 6px;
padding: 18px 24px;
margin-bottom: 24px;
min-width: 380px;
background: #f3f4f6;
}
.endpoint.client { background: #dbeafe; border-color: #1e40af; }
.endpoint.server { background: #fed7aa; border-color: #c2410c; }
.role {
font-weight: 700;
font-size: 1rem;
margin-bottom: 6px;
}
.client .role { color: #1e3a8a; }
.server .role { color: #7c2d12; }
.addr {
font-family: ui-monospace, monospace;
font-size: 1.4rem;
color: #0f172a;
}
.port {
background: #fde68a;
color: #7c2d12;
padding: 1px 8px;
border-radius: 4px;
font-weight: 700;
}
.label {
margin-top: 6px;
font-size: 0.85rem;
color: #4a4a6a;
font-style: italic;
}
</style>
</head>
<body>
<div class="endpoint client">
<div class="role">Client</div>
<div class="addr">141.62.xxx.xxx:<span class="port">52431</span></div>
<div class="label">↳ zufälliger Port vom OS</div>
</div>
<div class="endpoint server">
<div class="role">Server</div>
<div class="addr">212.132.79.37:<span class="port">443</span></div>
<div class="label">↳ HTTPS-Standardport</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Kontrast</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/contrast.html</span>
</div>
<iframe src="./contrast-levels.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kontrast-Stufen</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
.row {
background: #fff;
padding: 22px 20px;
margin-bottom: 14px;
border-radius: 6px;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.sample {
font-size: 1.5rem;
font-weight: 600;
flex: 1;
}
.meta {
text-align: right;
font-size: 0.85rem;
white-space: nowrap;
}
.ratio {
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.95rem;
color: #1a1a2e;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.fail { background: #fee2e2; color: #991b1b; }
.aa-large { background: #fed7aa; color: #7c2d12; }
.aa { background: #dcfce7; color: #166534; }
.aaa { background: #bbf7d0; color: #14532d; }
.hint {
margin-top: 14px;
font-size: 0.78rem;
color: #6b7280;
font-style: italic;
text-align: right;
}
.hint a { color: #d63384; }
</style>
</head>
<body>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">2.3:1</div>
<span class="badge fail">✗ Fail</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #949494;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">3:1</div>
<span class="badge aa-large">AA Large</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #767676;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">4.5:1</div>
<span class="badge aa">✓ AA</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #595959;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">7:1</div>
<span class="badge aaa">✓ AAA</span>
</div>
</div>
<div class="row" style="background: #fff;">
<div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
<div class="meta">
<div class="ratio">16:1</div>
<span class="badge aaa">✓ AAA+</span>
</div>
</div>
<div class="hint">Check: webaim.org/resources/contrastchecker</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-anatomie</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/anatomie.html</span>
</div>
<iframe src="./css-anatomie.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>CSS Anatomie</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
p { color: blue; font-size: 16px; }
</style>
</head>
<body>
<p>Dieser Absatz ist blau und 16 Pixel groß.</p>
<p>Alle p-Elemente werden gleich gestylt.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-box-model</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/box-model.html</span>
</div>
<iframe src="./css-box-model.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Box-Modell</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
.box { display: inline-block; }
.layer {
padding-top: 22px;
padding-bottom: 18px;
padding-left: 18px;
padding-right: 18px;
position: relative;
}
.layer::before {
position: absolute;
top: 4px; left: 8px;
font-size: 0.75em;
font-weight: 600;
}
.margin { background: #fde68a; }
.margin::before { content: "margin"; color: #92400e; }
.border { background: #fca5a5; }
.border::before { content: "border"; color: #991b1b; }
.padding { background: #86efac; }
.padding::before { content: "padding"; color: #166534; }
.content {
background: #93c5fd;
width: 140px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-weight: 600;
}
pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
</style>
</head>
<body>
<div class="box">
<div class="layer margin">
<div class="layer border">
<div class="layer padding">
<div class="content">content</div>
</div>
</div>
</div>
</div>
<pre>.box {
width: 140px;
padding: 18px;
border: 18px solid;
margin: 18px;
}</pre>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-colors</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/colors.html</span>
</div>
<iframe src="./css-colors.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Farben</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
.swatch { display: flex; align-items: center; margin-bottom: 8px; }
.chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
</style>
</head>
<body>
<div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
<div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
<div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
<div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
<div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
<div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-combinators</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/combinators.html</span>
</div>
<iframe src="./css-combinators.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kombinatoren</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
h2 + p { font-size: 1.2em; color: #065f46; }
p.wichtig { color: red; }
</style>
</head>
<body>
<nav>
<a href="#">Link</a><a href="#">Link</a>
</nav>
<article>
<h2>Artikel-Überschrift</h2>
<p>Direkt nach h2 (größer, grün).</p>
<p>Normaler Absatz im article (gelb).</p>
<p class="wichtig">Wichtig (rot).</p>
</article>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-pseudo-classes</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/pseudo-classes.html</span>
</div>
<iframe src="./css-pseudo-classes.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pseudo-Klassen</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
a { color: #2563eb; }
a:hover, a.is-hovered { color: red; text-decoration: underline; }
a:visited, a.is-visited { color: purple; }
input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
ul { list-style: none; padding: 0; }
li { padding: 6px 10px; }
li:first-child, li.is-first { font-weight: bold; }
li:nth-child(odd), li.is-odd { background: #eee; }
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
</style>
</head>
<body>
<h3>:hover / :visited</h3>
<a href="#" class="is-hovered">Link mit Hover</a> &middot;
<a href="#" class="is-visited">Besuchter Link</a>
<h3>:focus</h3>
<input class="is-focused" value="fokussiert">
<h3>:first-child, :nth-child(odd)</h3>
<ul>
<li class="is-first is-odd">Erster (bold, zebra)</li>
<li>Zweiter</li>
<li class="is-odd">Dritter (zebra)</li>
<li>Vierter</li>
<li class="is-odd">Fünfter (zebra)</li>
</ul>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-pseudo-elements</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/pseudo-elements.html</span>
</div>
<iframe src="./css-pseudo-elements.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pseudo-Elemente</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
.required::before {
content: "* ";
color: red;
}
p.drop { line-height: 1.5; }
p.drop::first-letter {
font-size: 3em;
font-weight: bold;
color: #d63384;
float: left;
line-height: 0.9;
padding-right: 6px;
padding-top: 2px;
}
label { display: block; margin-top: 10px; }
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
</style>
</head>
<body>
<h3>::before (Pflichtfeld-Sternchen)</h3>
<label class="required">E-Mail-Adresse</label>
<input type="email">
<h3>::first-letter (Initial-Buchstabe)</h3>
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Responsive Container</title>
<style>
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
.container {
padding: 1rem;
background: white;
color: #111;
text-align: left;
font-weight: 600;
border: 1px solid #d1d5db;
}
.container::before { content: "< 768px — weiß, padding 1rem"; }
@media (min-width: 768px) {
.container { padding: 2rem; background: red; color: white; border: none; }
.container::before { content: "≥ 768px — rot, padding 2rem"; }
}
@media (min-width: 1024px) {
.container { background: green; }
.container::before { content: "≥ 1024px — grün"; }
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-responsive</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/responsive.html</span>
</div>
<iframe src="./css-responsive.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Responsive Design – 3 Viewports</title>
<style>
html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff; }
body { padding: 1rem; }
.viewport {
margin-bottom: 12px;
border: 1px solid #9ca3af;
border-radius: 4px;
overflow: hidden;
}
.bar {
background: #e5e7eb;
padding: 4px 10px;
font-size: 11px;
color: #374151;
font-family: ui-monospace, monospace;
border-bottom: 1px solid #9ca3af;
}
iframe { display: block; width: 100%; border: 0; }
.vp-mobile iframe { width: 360px; }
.vp-tablet iframe { width: 800px; }
.vp-desktop iframe { width: 1100px; }
.vp-mobile { width: 362px; }
.scroll { overflow: hidden; }
</style>
</head>
<body>
<div class="viewport vp-mobile">
<div class="bar">Mobile @ 360px</div>
<div class="scroll"><iframe src="./css-responsive-container.html" height="80"></iframe></div>
</div>
<div class="viewport vp-tablet">
<div class="bar">Tablet @ 800px</div>
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
</div>
<div class="viewport vp-desktop">
<div class="bar">Desktop @ 1100px</div>
<div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-class</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-class.html</span>
</div>
<iframe src="./css-selector-class.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Klassen-Selektor</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
.wichtig { color: red; font-weight: bold; }
</style>
</head>
<body>
<p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-element</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-element.html</span>
</div>
<iframe src="./css-selector-element.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Element-Selektor</title>
<style>
body { padding: 1.2rem; }
p { color: gray; font-family: Georgia, serif; }
h1, h2, h3 { font-family: sans-serif; }
</style>
</head>
<body>
<h1>Überschrift (sans-serif)</h1>
<p>Absatz: grau, Georgia (serif).</p>
<h2>Untertitel (sans-serif)</h2>
<p>Noch ein grauer Absatz.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-selector-id</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/selector-id.html</span>
</div>
<iframe src="./css-selector-id.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>ID-Selektor</title>
<style>
body { padding: 0; margin: 0; font-family: system-ui, sans-serif; }
#hauptnavigation {
background: #333;
padding: 1rem;
color: white;
}
#hauptnavigation a { color: #fff; margin-right: 1rem; }
</style>
</head>
<body>
<nav id="hauptnavigation">
<a href="#">Home</a>
<a href="#">Kurse</a>
<a href="#">Kontakt</a>
</nav>
<p style="padding: 1rem;">Rest der Seite.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: css-specificity</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/specificity.html</span>
</div>
<iframe src="./css-specificity.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Spezifität</title>
<style>
body { padding: 1.2rem; font-family: system-ui, sans-serif; }
p { color: blue; } /* 0,0,0,1 */
.text { color: green; } /* 0,0,1,0 */
#intro { color: red; } /* 0,1,0,0 */
code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.row { margin-bottom: 10px; }
.label { color: #6b7280; font-size: 0.85em; }
</style>
</head>
<body>
<div class="row">
<p>Nur <code>p</code>: <strong>blau</strong></p>
<span class="label">0,0,0,1</span>
</div>
<div class="row">
<p class="text">Nur <code>.text</code>: <strong>grün</strong> schlägt p</p>
<span class="label">0,0,1,0 &gt; 0,0,0,1</span>
</div>
<div class="row">
<p id="intro" class="text">ID <code>#intro</code>: <strong>rot</strong> schlägt alles</p>
<span class="label">0,1,0,0 &gt; 0,0,1,0</span>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Decapsulation Stack</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.stack { display: flex; flex-direction: column; gap: 0; }
.layer {
border: 2px solid;
border-radius: 6px;
padding: 10px 18px;
min-width: 540px;
font-size: 0.95rem;
margin-bottom: 4px;
}
.layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
.check { margin-top: 3px; font-size: 0.85rem; font-style: italic; }
.http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
.eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
.bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
.arrow {
align-self: center;
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid #d63384;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="stack">
<div class="layer bit">
<div class="layer-name">Physical</div>
<div class="layer-desc">Bits empfangen</div>
</div>
<div class="arrow"></div>
<div class="layer eth">
<div class="layer-name">Ethernet-Frame</div>
<div class="check">MAC = meine MAC? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer ip">
<div class="layer-name">IP-Paket</div>
<div class="check">Ziel-IP = meine IP? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer tcp">
<div class="layer-name">TCP-Segment</div>
<div class="check">Port 52431 = mein Browser? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer http">
<div class="layer-name">HTTP-Response</div>
<div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
<div class="check">→ Browser rendert Seite</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-closed</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-closed.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary</title>
</head>
<body>
<details>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-open</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-open.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary (offen)</title>
</head>
<body>
<details open>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: dialog</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/dialog.html</span>
</div>
<iframe src="./dialog.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dialog</title>
</head>
<body>
<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DNS-Lookup Sequence</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 900px; }
.actor {
background: #1a1a2e;
color: #fff;
padding: 10px;
text-align: center;
border-radius: 4px;
font-weight: 700;
font-size: 0.85rem;
}
.lifeline {
border-left: 2px dashed #9ca3af;
margin-left: 50%;
height: 480px;
position: relative;
}
.msg {
position: absolute;
padding: 6px 10px;
background: #f3f4f6;
border: 1px solid #4a4a6a;
border-radius: 4px;
font-size: 0.8rem;
white-space: nowrap;
}
.arrow-right {
position: absolute;
height: 2px;
background: #d63384;
}
.arrow-right::after {
content: "";
position: absolute;
right: -1px; top: -4px;
border-left: 8px solid #d63384;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.arrow-left {
position: absolute;
height: 2px;
background: #15803d;
}
.arrow-left::before {
content: "";
position: absolute;
left: -1px; top: -4px;
border-right: 8px solid #15803d;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.arrow-label {
position: absolute;
font-size: 0.75rem;
background: #fff;
padding: 1px 5px;
white-space: nowrap;
}
.ask { color: #7c2d12; }
.reply { color: #14532d; font-style: italic; }
</style>
</head>
<body>
<div class="diagram">
<div class="actor">Ihr Laptop</div>
<div class="actor">Resolver</div>
<div class="actor">Root (.)</div>
<div class="actor">.de-Server</div>
<div class="actor">HdM-NS</div>
<!-- lifelines (5 cols) -->
<div style="position: relative; grid-column: 1 / span 5; height: 520px;">
<!-- vertical dashed lines per actor at 10%, 30%, 50%, 70%, 90% -->
<div style="position: absolute; left: 10%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 30%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 70%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<div style="position: absolute; left: 90%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
<!-- Laptop → Resolver at y=20 -->
<div style="position: absolute; left: 10%; top: 20px; width: 20%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 30%; top: 16px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 12%; top: 0; font-size: 0.75rem; color: #7c2d12;">"Wo ist www.hdm-stuttgart.de?"</div>
<!-- Resolver → Root at y=90 -->
<div style="position: absolute; left: 30%; top: 90px; width: 20%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 50%; top: 86px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 70px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet .de?"</div>
<!-- Root → Resolver at y=150 -->
<div style="position: absolute; left: 30%; top: 150px; width: 20%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 146px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 130px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag 194.0.0.53"</div>
<!-- Resolver → .de at y=220 -->
<div style="position: absolute; left: 30%; top: 220px; width: 40%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 70%; top: 216px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 200px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet hdm-stuttgart.de?"</div>
<!-- .de → Resolver at y=280 -->
<div style="position: absolute; left: 30%; top: 280px; width: 40%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 276px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 260px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag Nameserver der HdM"</div>
<!-- Resolver → HdM at y=350 -->
<div style="position: absolute; left: 30%; top: 350px; width: 60%; height: 2px; background: #d63384;"></div>
<div style="position: absolute; left: 90%; top: 346px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 330px; font-size: 0.75rem; color: #7c2d12;">"Welche IP hat www?"</div>
<!-- HdM → Resolver at y=410 -->
<div style="position: absolute; left: 30%; top: 410px; width: 60%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 30%; top: 406px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 32%; top: 390px; font-size: 0.75rem; color: #14532d; font-style: italic;">"212.132.79.37"</div>
<!-- Resolver → Laptop at y=480 -->
<div style="position: absolute; left: 10%; top: 480px; width: 20%; height: 2px; background: #15803d;"></div>
<div style="position: absolute; left: 10%; top: 476px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
<div style="position: absolute; left: 12%; top: 460px; font-size: 0.75rem; color: #14532d; font-style: italic;">"IP ist 212.132.79.37"</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DNS-Hierarchie</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 20px; display: inline-block; }
svg { display: block; }
.node rect { fill: #fef3c7; stroke: #ca8a04; stroke-width: 2; rx: 6; }
.node.root rect { fill: #fde68a; stroke: #b45309; }
.node.leaf rect { fill: #dbeafe; stroke: #1e40af; }
.node text { font-family: ui-monospace, monospace; font-weight: 700; font-size: 15px; fill: #713f12; }
.node.leaf text { fill: #1e3a8a; }
.line { stroke: #d63384; stroke-width: 2; fill: none; }
</style>
</head>
<body>
<svg width="620" height="520" viewBox="0 0 620 520">
<!-- Root -->
<g class="node root">
<rect x="250" y="10" width="120" height="44"/>
<text x="310" y="38" text-anchor="middle">. (Root)</text>
</g>
<!-- Lines from Root to .de, .com, .org -->
<line class="line" x1="310" y1="54" x2="70" y2="120"/>
<line class="line" x1="310" y1="54" x2="310" y2="120"/>
<line class="line" x1="310" y1="54" x2="550" y2="120"/>
<!-- .de -->
<g class="node">
<rect x="20" y="120" width="100" height="44"/>
<text x="70" y="148" text-anchor="middle">.de</text>
</g>
<!-- .com -->
<g class="node">
<rect x="260" y="120" width="100" height="44"/>
<text x="310" y="148" text-anchor="middle">.com</text>
</g>
<!-- .org -->
<g class="node">
<rect x="500" y="120" width="100" height="44"/>
<text x="550" y="148" text-anchor="middle">.org</text>
</g>
<!-- Line .de → hdm-stuttgart -->
<line class="line" x1="70" y1="164" x2="70" y2="210"/>
<line class="line" x1="70" y1="210" x2="220" y2="210"/>
<line class="line" x1="220" y1="210" x2="220" y2="250"/>
<!-- hdm-stuttgart -->
<g class="node">
<rect x="120" y="250" width="200" height="44"/>
<text x="220" y="278" text-anchor="middle">hdm-stuttgart</text>
</g>
<!-- Line hdm → www -->
<line class="line" x1="220" y1="294" x2="220" y2="340"/>
<!-- www -->
<g class="node leaf">
<rect x="170" y="340" width="100" height="44"/>
<text x="220" y="368" text-anchor="middle">www</text>
</g>
</svg>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>DOM-Baum</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.tree { display: flex; flex-direction: column; align-items: center; }
.node {
background: #dbeafe;
border: 2px solid #1e40af;
color: #1e3a8a;
padding: 7px 16px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.9rem;
}
.root { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.content { background: #dcfce7; border-color: #15803d; color: #14532d; font-weight: 400; font-style: italic; }
.level { display: flex; gap: 28px; margin-top: 10px; align-items: flex-start; }
.col { display: flex; flex-direction: column; align-items: center; }
</style>
</head>
<body>
<div class="tree">
<div class="node root">document</div>
<svg width="200" height="24"><line x1="100" y1="0" x2="100" y2="24" stroke="#d63384" stroke-width="2"/></svg>
<div class="node root">&lt;html&gt;</div>
<svg width="380" height="26">
<line x1="190" y1="0" x2="90" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="190" y1="0" x2="290" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="col">
<div class="node">&lt;head&gt;</div>
<svg width="120" height="22"><line x1="60" y1="0" x2="60" y2="22" stroke="#d63384" stroke-width="2"/></svg>
<div class="node">&lt;title&gt;</div>
</div>
<div class="col">
<div class="node">&lt;body&gt;</div>
<svg width="220" height="26">
<line x1="110" y1="0" x2="55" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="110" y1="0" x2="165" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">&lt;h1&gt;</div>
<div class="node">&lt;p&gt;</div>
</div>
</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Encapsulation Schichten</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 0.92rem; }
.label { width: 120px; font-weight: 700; color: #1a1a2e; text-align: right; flex-shrink: 0; }
.packet { display: flex; border-radius: 4px; overflow: hidden; border: 2px solid #4a4a6a; }
.part {
padding: 6px 14px;
font-family: ui-monospace, monospace;
font-size: 0.85rem;
border-right: 2px solid #4a4a6a;
}
.part:last-child { border-right: 0; }
.http { background: #e0e7ff; color: #3730a3; }
.tcp { background: #dbeafe; color: #1e3a8a; }
.ip { background: #dcfce7; color: #14532d; }
.eth { background: #fed7aa; color: #7c2d12; }
.trailer { background: #fed7aa; color: #7c2d12; }
.bit { background: #e5e7eb; color: #1f2937; font-family: ui-monospace, monospace; padding: 6px 14px; border: 2px solid #4b5563; border-radius: 4px; }
.down {
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid #d63384;
margin: 4px 0 4px 180px;
}
.note { font-size: 0.75rem; color: #d63384; margin-left: 200px; font-style: italic; }
</style>
</head>
<body>
<div class="row">
<div class="label">Anwendung</div>
<div class="packet"><div class="part http">HTTP-Request: GET /index.html</div></div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Transport</div>
<div class="packet">
<div class="part tcp">TCP-Header</div>
<div class="part http">HTTP-Request</div>
</div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Internet</div>
<div class="packet">
<div class="part ip">IP-Header</div>
<div class="part tcp">TCP-Header</div>
<div class="part http">HTTP</div>
</div>
</div>
<div class="down"></div>
<div class="note">verpackt in</div>
<div class="row">
<div class="label">Netzzugang</div>
<div class="packet">
<div class="part eth">Eth-Header</div>
<div class="part ip">IP</div>
<div class="part tcp">TCP</div>
<div class="part http">HTTP</div>
<div class="part trailer">Eth-Trailer</div>
</div>
</div>
<div class="down"></div>
<div class="row">
<div class="label">Physik</div>
<div class="bit">01001000 01010100 01010100 ...</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Encapsulation Stack</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.stack { display: flex; flex-direction: column; gap: 0; }
.layer {
border: 2px solid;
border-radius: 6px;
padding: 10px 18px;
min-width: 520px;
font-size: 0.95rem;
margin-bottom: 4px;
}
.layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
.http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
.tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
.eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
.bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
.arrow {
align-self: center;
width: 0; height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 12px solid #d63384;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="stack">
<div class="layer http">
<div class="layer-name">HTTP-Response</div>
<div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
</div>
<div class="arrow"></div>
<div class="layer tcp">
<div class="layer-name">TCP</div>
<div class="layer-desc">Dest-Port: 52431 (Ihr Browser)</div>
</div>
<div class="arrow"></div>
<div class="layer ip">
<div class="layer-name">IP</div>
<div class="layer-desc">Dest-IP: 141.62.xxx.xxx (Ihr Laptop)</div>
</div>
<div class="arrow"></div>
<div class="layer eth">
<div class="layer-name">Ethernet</div>
<div class="layer-desc">Dest-MAC: Router des Server-Netzes</div>
</div>
<div class="arrow"></div>
<div class="layer bit">
<div class="layer-name">Physical</div>
<div class="layer-desc">Bits</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ethernet-Frame</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #c2410c;
border-radius: 6px;
overflow: hidden;
min-width: 680px;
}
.eth-header, .fcs {
background: #fed7aa;
padding: 12px 16px;
}
.eth-header { border-bottom: 2px solid #c2410c; }
.fcs { border-top: 2px solid #c2410c; color: #7c2d12; font-weight: 600; font-size: 0.9rem; }
.header-title {
font-weight: 700;
color: #7c2d12;
margin-bottom: 8px;
font-size: 1.05rem;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #c2410c;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #c2410c;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #7c2d12; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dcfce7;
border: 2px solid #15803d;
border-radius: 4px;
margin: 12px 16px;
padding: 12px 16px;
}
.nested-title { color: #14532d; font-weight: 700; font-size: 0.95rem; }
.nested-note { color: #14532d; font-size: 0.85rem; font-style: italic; }
</style>
</head>
<body>
<div class="wrap">
<div class="eth-header">
<div class="header-title">Ethernet-Header</div>
<div class="fields">
<div class="field">
<div class="field-label">Source MAC</div>
<div class="field-value">aa:bb:cc:dd:ee:ff</div>
</div>
<div class="field">
<div class="field-label">Dest MAC (Router!)</div>
<div class="field-value">11:22:33:44:55:66</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">IP-Paket</div>
<div class="nested-note">unverändert gekapselt</div>
</div>
<div class="fcs">FCS — Frame Check Sequence (Prüfsumme)</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ethernet nach Router-Hop</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #c2410c;
border-radius: 6px;
overflow: hidden;
min-width: 680px;
}
.eth-header {
background: #fed7aa;
padding: 12px 16px;
border-bottom: 2px solid #c2410c;
}
.header-title {
font-weight: 700;
color: #7c2d12;
margin-bottom: 8px;
font-size: 1.05rem;
}
.badge {
display: inline-block;
background: #c2410c;
color: #fff;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 8px;
vertical-align: middle;
}
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #c2410c;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #c2410c;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #7c2d12; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dcfce7;
border: 2px solid #15803d;
border-radius: 4px;
margin: 12px 16px;
padding: 12px 16px;
}
.nested-title { color: #14532d; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.nested-line { color: #14532d; font-size: 0.85rem; font-family: ui-monospace, monospace; }
.nested-badge {
display: inline-block;
background: #15803d;
color: #fff;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 6px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<div class="eth-header">
<div class="header-title">Ethernet-Header<span class="badge">neu</span></div>
<div class="fields">
<div class="field">
<div class="field-label">Source MAC</div>
<div class="field-value">Router-MAC</div>
</div>
<div class="field">
<div class="field-label">Dest MAC</div>
<div class="field-value">Nächster-Router</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">IP-Paket<span class="nested-badge">unverändert</span></div>
<div class="nested-line">Source: 141.62.xxx.xxx</div>
<div class="nested-line">Dest: 212.132.79.37</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Grundgerüst</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///portfolio/index.html</span>
</div>
<iframe src="./grundgeruest.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Portfolio von ...</title>
<meta name="description" content="Hier gibt es die besten ..." />
<meta name="og:image" content="https://...." />
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hex → Dezimal</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
body { padding: 28px; }
h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
.sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
thead th { background: #1a1a2e; color: #fff; }
tbody th { background: #334155; color: #fff; font-weight: 600; }
tbody td.ascii { background: #f3f4f6; }
tbody td.nonascii { background: #fff; color: #6b7280; }
.corner { background: #0f0f23; color: #d63384; }
.legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
.sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
.example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
</style>
</head>
<body>
<h1>Hex → Dezimal</h1>
<div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
<table>
<thead>
<tr>
<th class="corner">×16 / +</th>
<th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
<th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="legend">
<span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
<span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
</div>
<div class="example">
<strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
</div>
<script>
const rows = '0123456789ABCDEF';
const tb = document.querySelector('tbody');
for (let r = 0; r < 16; r++) {
const tr = document.createElement('tr');
const th = document.createElement('th');
th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
tr.appendChild(th);
for (let c = 0; c < 16; c++) {
const td = document.createElement('td');
const v = r*16 + c;
td.textContent = v;
td.className = v <= 127 ? 'ascii' : 'nonascii';
tr.appendChild(td);
}
tb.appendChild(tr);
}
</script>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hop-Kette</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.chain { display: flex; flex-direction: column; align-items: center; gap: 0; }
.node {
border: 2px solid;
border-radius: 6px;
padding: 10px 22px;
min-width: 260px;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
}
.laptop { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.router { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
.server { background: #dcfce7; border-color: #15803d; color: #14532d; }
.edge {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px 0;
}
.edge-line {
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 14px solid #d63384;
}
.edge-label {
font-size: 0.75rem;
color: #d63384;
font-style: italic;
margin-bottom: 2px;
}
.dots {
color: #9ca3af;
font-weight: 700;
margin: 2px 0;
}
</style>
</head>
<body>
<div class="chain">
<div class="node laptop">Ihr Laptop</div>
<div class="edge"><div class="edge-label">[Frame an Router 1]</div><div class="edge-line"></div></div>
<div class="node router">Router HdM-Netz</div>
<div class="edge"><div class="edge-label">[Frame an Router 2]</div><div class="edge-line"></div></div>
<div class="node router">Router BelWü</div>
<div class="edge"><div class="edge-label">[Frame an Router 3]</div><div class="edge-line"></div></div>
<div class="dots">...</div>
<div class="edge"><div class="edge-label">[Frame an Server]</div><div class="edge-line"></div></div>
<div class="node server">Webserver</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Input Date</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/input.html</span>
</div>
<iframe src="./input-date.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input Date</title>
<style>
body { font-family: system-ui, -apple-system, sans-serif; padding: 1.4rem; margin: 0; background: #fff; }
label { display: block; font-size: 0.95rem; color: #374151; margin-bottom: 8px; font-weight: 600; }
input[type=date] {
font: 1.15rem system-ui, sans-serif;
padding: 10px 12px;
border: 1.5px solid #d1d5db;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
border-color: #d63384;
margin-bottom: 16px;
}
.picker {
width: 320px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
overflow: hidden;
font-size: 0.9rem;
}
.picker-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #e5e7eb;
font-weight: 600;
}
.picker-head button {
border: 0; background: transparent; font-size: 1rem; padding: 4px 8px; cursor: pointer; color: #6b7280;
}
.dow, .grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
padding: 6px 10px;
}
.dow { font-size: 0.75rem; color: #6b7280; font-weight: 600; text-align: center; padding-bottom: 2px; }
.grid { padding-top: 0; padding-bottom: 14px; }
.grid div {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-variant-numeric: tabular-nums;
}
.grid .muted { color: #d1d5db; }
.grid .today { background: #fce7f3; color: #d63384; font-weight: 700; }
.grid .sel { background: #d63384; color: #fff; font-weight: 700; }
.grid div:hover:not(.muted):not(.sel) { background: #f3f4f6; }
</style>
</head>
<body>
<label for="d">Geburtsdatum</label>
<input type="date" id="d" value="2026-04-21" />
<div class="picker" aria-hidden="true">
<div class="picker-head">
<button>‹</button>
<span>April 2026</span>
<button>›</button>
</div>
<div class="dow"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
<div class="grid">
<div class="muted">30</div><div class="muted">31</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
<div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
<div>20</div><div class="sel">21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div>
<div>27</div><div>28</div><div>29</div><div>30</div><div class="muted">1</div><div class="muted">2</div><div class="muted">3</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: input</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/input.html</span>
</div>
<iframe src="./input.html"></iframe>
</div>
</div>
</body>
</html>
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input/Eingabefeld</title>
</head>
<body>
<input
type="text"
maxlength="8"
size="10" />
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>IP-Paket</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.wrap {
border: 2px solid #15803d;
border-radius: 6px;
overflow: hidden;
min-width: 660px;
}
.ip-header {
background: #dcfce7;
padding: 12px 16px;
border-bottom: 2px solid #15803d;
}
.header-title {
font-weight: 700;
margin-bottom: 8px;
font-size: 1.05rem;
}
.ip-header .header-title { color: #14532d; }
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #15803d;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.field {
padding: 8px 12px;
border-right: 1px solid #15803d;
font-size: 0.85rem;
}
.field:last-child { border-right: 0; }
.field-label { color: #14532d; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.field-value { font-family: ui-monospace, monospace; color: #0f172a; margin-top: 2px; }
.nested {
background: #dbeafe;
padding: 12px 16px;
border: 2px solid #1e40af;
border-radius: 4px;
margin: 12px 16px;
}
.nested-title { color: #1e3a8a; font-weight: 700; font-size: 0.95rem; }
.nested-note { color: #1e3a8a; font-size: 0.85rem; font-style: italic; }
</style>
</head>
<body>
<div class="wrap">
<div class="ip-header">
<div class="header-title">IP-Header</div>
<div class="fields">
<div class="field">
<div class="field-label">Source IP</div>
<div class="field-value">141.62.xxx.xxx</div>
</div>
<div class="field">
<div class="field-label">Destination IP</div>
<div class="field-value">212.132.79.37</div>
</div>
</div>
</div>
<div class="nested">
<div class="nested-title">TCP-Segment</div>
<div class="nested-note">unverändert gekapselt</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Loaded 100 of 467 files, more files were not shown because too many files have changed in this diff. Show more