replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops

2026-04-20 11:27:28 +02:00
parent 54ba08cdbc
commit 6c8688c9f6
13 changed files with 369 additions and 62 deletions
--- a/slides/223015c/assets/demos/port-highlight.html
+++ b/slides/223015c/assets/demos/port-highlight.html
@@ -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>