replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops
This commit is contained in:
58
slides/223015c/assets/demos/client-server-ports.html
Normal file
58
slides/223015c/assets/demos/client-server-ports.html
Normal file
@@ -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>
|
||||
BIN
slides/223015c/assets/demos/client-server-ports.png
Normal file
BIN
slides/223015c/assets/demos/client-server-ports.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
65
slides/223015c/assets/demos/decap-stack.html
Normal file
65
slides/223015c/assets/demos/decap-stack.html
Normal file
@@ -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>
|
||||
BIN
slides/223015c/assets/demos/decap-stack.png
Normal file
BIN
slides/223015c/assets/demos/decap-stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
63
slides/223015c/assets/demos/encap-stack.html
Normal file
63
slides/223015c/assets/demos/encap-stack.html
Normal file
@@ -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 (dein 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 (dein 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>
|
||||
BIN
slides/223015c/assets/demos/encap-stack.png
Normal file
BIN
slides/223015c/assets/demos/encap-stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
57
slides/223015c/assets/demos/network-chain.html
Normal file
57
slides/223015c/assets/demos/network-chain.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Netzwerk-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; }
|
||||
.step {
|
||||
background: #f3f4f6;
|
||||
border: 2px solid #4a4a6a;
|
||||
border-radius: 6px;
|
||||
padding: 10px 22px;
|
||||
font-size: 1rem;
|
||||
color: #1a1a2e;
|
||||
min-width: 320px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
.step.you { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
|
||||
.step.net { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
|
||||
.step.wire { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
|
||||
.step.server { background: #dcfce7; border-color: #15803d; color: #14532d; }
|
||||
.arrow {
|
||||
width: 0; height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 14px solid #d63384;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.arrow-label {
|
||||
font-size: 0.75rem;
|
||||
color: #d63384;
|
||||
font-style: italic;
|
||||
margin: 2px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="chain">
|
||||
<div class="step you">Dein Browser</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step wire">Netzwerkkarte (WLAN / Ethernet)</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step net">Router zu Hause</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step net">Provider-Netz / HdM</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="arrow-label">Internet · dutzende Router</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step net">Ziel-Netz</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step server">Webserver</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/network-chain.png
Normal file
BIN
slides/223015c/assets/demos/network-chain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
52
slides/223015c/assets/demos/port-highlight.html
Normal file
52
slides/223015c/assets/demos/port-highlight.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Port-Highlight</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
||||
body { padding: 28px 40px; display: inline-block; }
|
||||
.line {
|
||||
font-family: ui-monospace, "SF Mono", monospace;
|
||||
font-size: 2.2rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.port {
|
||||
background: #fde68a;
|
||||
color: #7c2d12;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.caption {
|
||||
margin-top: 14px;
|
||||
font-size: 1rem;
|
||||
color: #4a4a6a;
|
||||
padding-left: 210px;
|
||||
position: relative;
|
||||
}
|
||||
.caption::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 210px;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
background: #c2410c;
|
||||
}
|
||||
.caption-text {
|
||||
background: #fed7aa;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #c2410c;
|
||||
display: inline-block;
|
||||
color: #7c2d12;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="line">212.132.79.37:<span class="port">443</span></div>
|
||||
<div class="caption"><span class="caption-text">Port 443 = HTTPS</span></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/port-highlight.png
Normal file
BIN
slides/223015c/assets/demos/port-highlight.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
50
slides/223015c/assets/demos/response-hops.html
Normal file
50
slides/223015c/assets/demos/response-hops.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rückweg</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; }
|
||||
.step {
|
||||
border: 2px solid;
|
||||
border-radius: 6px;
|
||||
padding: 10px 22px;
|
||||
min-width: 280px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.server { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
|
||||
.router { background: #fef3c7; border-color: #ca8a04; color: #713f12; }
|
||||
.hdm { background: #fde68a; border-color: #b45309; color: #78350f; }
|
||||
.laptop { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
|
||||
.arrow {
|
||||
width: 0; height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 14px solid #d63384;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.dots {
|
||||
color: #d63384;
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
margin: 2px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="chain">
|
||||
<div class="step server">Server</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step router">Router → Router → Router</div>
|
||||
<div class="dots">jeder Hop: IP gleich · MAC neu</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step hdm">Router HdM</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="step laptop">Dein Laptop</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/response-hops.png
Normal file
BIN
slides/223015c/assets/demos/response-hops.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Reference in New Issue
Block a user