66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
<!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>
|