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

replace arp dialog with visual, inline first-hop arrow

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 11:52:13 +02:00
parent 5b7170e5f4
commit c45ddc779c
3 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
slides/223015c/02-netzwerke-protokolle-css.md
View File

@@ -1118,13 +1118,7 @@ SPEAKER NOTES:
**ARP** – Address Resolution Protocol
```
Laptop (Broadcast):
"Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
Router:
"Das bin ich! Meine MAC ist 11:22:33:44:55:66"
```
![w:900 center](./assets/demos/arp-lookup.png)
Das passiert automatisch. Die Info wird gecached.
@@ -1183,9 +1177,7 @@ SPEAKER NOTES:
# Der erste Hop: Ihr Router
```
Laptop → [Frame] → Router
```
**Laptop** → [Frame] → **Router**
Der Router empfängt:

65
slides/223015c/assets/demos/arp-lookup.html Normal file
View File

@@ -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>

BIN
slides/223015c/assets/demos/arp-lookup.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB