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

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>