public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove klausur class from chapter 2, siezen students, add server-decap demo, hide header/footer on oversized slides

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 11:47:55 +02:00
parent 8ed7796968
commit cbebc1a6f7
7 changed files with 210 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
slides/223015c/assets/demos/server-decap.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Server Decapsulation</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 + FCS okay? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer ip">
<div class="layer-name">IP-Paket</div>
<div class="check">Ziel-IP = meine? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer tcp">
<div class="layer-name">TCP-Segment</div>
<div class="check">Port 443, Seq-Nr passt? ✓ auspacken</div>
</div>
<div class="arrow"></div>
<div class="layer http">
<div class="layer-name">HTTP-Request</div>
<div class="layer-desc">"GET / HTTP/1.1"</div>
<div class="check">→ Webserver bearbeitet</div>
</div>
</div>
</body>
</html>

BIN
slides/223015c/assets/demos/server-decap.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

119
slides/223015c/assets/demos/tcp-handshake.html Normal file
View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>TCP 3-Way-Handshake</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.actors { display: flex; justify-content: space-between; width: 900px; margin-bottom: 8px; }
.actor {
background: #1a1a2e;
color: #fff;
padding: 10px 24px;
border-radius: 6px;
font-weight: 700;
font-size: 0.95rem;
}
.client { background: #1e40af; }
.server { background: #c2410c; }
.diagram {
position: relative;
width: 900px;
height: 420px;
}
.lifeline {
position: absolute;
top: 0; bottom: 0;
width: 3px;
background: repeating-linear-gradient(to bottom, #9ca3af 0 8px, transparent 8px 14px);
}
.ll-client { left: 80px; }
.ll-server { right: 80px; }
.msg {
position: absolute;
height: 2px;
background: #d63384;
}
.msg-reverse { background: #15803d; }
.arrow-right::after {
content: "";
position: absolute;
right: -1px; top: -6px;
border-left: 10px solid #d63384;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.arrow-left::before {
content: "";
position: absolute;
left: -1px; top: -6px;
border-right: 10px solid #15803d;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.label {
position: absolute;
font-size: 0.85rem;
padding: 4px 12px;
background: #fff;
border-radius: 4px;
border: 1px solid;
font-weight: 600;
white-space: nowrap;
}
.label.ask { border-color: #d63384; color: #7c2d12; top: -24px; }
.label.reply { border-color: #15803d; color: #14532d; top: -24px; }
.quote {
position: absolute;
font-size: 0.78rem;
color: #4a4a6a;
font-style: italic;
top: 14px;
white-space: nowrap;
}
.final {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: #dcfce7;
border: 2px solid #15803d;
color: #14532d;
padding: 8px 20px;
border-radius: 6px;
font-weight: 700;
}
</style>
</head>
<body>
<div class="actors">
<div class="actor client">Client (Laptop)</div>
<div class="actor server">Server</div>
</div>
<div class="diagram">
<div class="lifeline ll-client"></div>
<div class="lifeline ll-server"></div>
<!-- SYN -->
<div class="msg arrow-right" style="left: 82px; right: 80px; top: 60px;">
<div class="label ask" style="left: 50%; transform: translateX(-50%);">SYN · Seq=1000</div>
<div class="quote" style="left: 50%; transform: translateX(-50%);">"Ich will reden"</div>
</div>
<!-- SYN-ACK -->
<div class="msg arrow-left msg-reverse" style="left: 83px; right: 80px; top: 180px;">
<div class="label reply" style="left: 50%; transform: translateX(-50%);">SYN-ACK · Seq=5000, Ack=1001</div>
<div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000"</div>
</div>
<!-- ACK -->
<div class="msg arrow-right" style="left: 82px; right: 80px; top: 300px;">
<div class="label ask" style="left: 50%; transform: translateX(-50%);">ACK · Ack=5001</div>
<div class="quote" style="left: 50%; transform: translateX(-50%);">"Verstanden, los geht's"</div>
</div>
<div class="final">✓ Verbindung steht</div>
</div>
</body>
</html>

BIN
slides/223015c/assets/demos/tcp-handshake.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB