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

fix broken dns tree and port connector, full-bleed handshake and dns-lookup slides, siezen in all demos, first-letter sizing

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 12:06:04 +02:00
parent c45ddc779c
commit 0367f07166
17 changed files with 89 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
slides/223015c/assets/demos/dns-tree.html
View File

@@ -5,54 +5,58 @@
<title>DNS-Hierarchie</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px; display: inline-block; }
.tree { display: flex; flex-direction: column; align-items: center; }
.node {
background: #fef3c7;
border: 2px solid #ca8a04;
color: #713f12;
padding: 8px 18px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-weight: 700;
font-size: 0.95rem;
}
.root { background: #fde68a; border-color: #b45309; }
.leaf { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.level { display: flex; gap: 36px; margin-top: 12px; }
.edges {
width: 100%;
height: 20px;
position: relative;
}
body { padding: 20px; display: inline-block; }
svg { display: block; }
.node rect { fill: #fef3c7; stroke: #ca8a04; stroke-width: 2; rx: 6; }
.node.root rect { fill: #fde68a; stroke: #b45309; }
.node.leaf rect { fill: #dbeafe; stroke: #1e40af; }
.node text { font-family: ui-monospace, monospace; font-weight: 700; font-size: 15px; fill: #713f12; }
.node.leaf text { fill: #1e3a8a; }
.line { stroke: #d63384; stroke-width: 2; fill: none; }
</style>
</head>
<body>
<div class="tree">
<div class="node root">. (Root)</div>
<svg width="360" height="26">
<line x1="180" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="180" y1="0" x2="180" y2="26" stroke="#d63384" stroke-width="2"/>
<line x1="180" y1="0" x2="300" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">.de</div>
<div class="node">.com</div>
<div class="node">.org</div>
</div>
<svg width="360" height="26">
<line x1="60" y1="0" x2="60" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node">hdm-stuttgart</div>
</div>
<svg width="240" height="26">
<line x1="120" y1="0" x2="120" y2="26" stroke="#d63384" stroke-width="2"/>
</svg>
<div class="level">
<div class="node leaf">www</div>
</div>
</div>
<svg width="620" height="520" viewBox="0 0 620 520">
<!-- Root -->
<g class="node root">
<rect x="250" y="10" width="120" height="44"/>
<text x="310" y="38" text-anchor="middle">. (Root)</text>
</g>
<!-- Lines from Root to .de, .com, .org -->
<line class="line" x1="310" y1="54" x2="70" y2="120"/>
<line class="line" x1="310" y1="54" x2="310" y2="120"/>
<line class="line" x1="310" y1="54" x2="550" y2="120"/>
<!-- .de -->
<g class="node">
<rect x="20" y="120" width="100" height="44"/>
<text x="70" y="148" text-anchor="middle">.de</text>
</g>
<!-- .com -->
<g class="node">
<rect x="260" y="120" width="100" height="44"/>
<text x="310" y="148" text-anchor="middle">.com</text>
</g>
<!-- .org -->
<g class="node">
<rect x="500" y="120" width="100" height="44"/>
<text x="550" y="148" text-anchor="middle">.org</text>
</g>
<!-- Line .de → hdm-stuttgart -->
<line class="line" x1="70" y1="164" x2="70" y2="210"/>
<line class="line" x1="70" y1="210" x2="220" y2="210"/>
<line class="line" x1="220" y1="210" x2="220" y2="250"/>
<!-- hdm-stuttgart -->
<g class="node">
<rect x="120" y="250" width="200" height="44"/>
<text x="220" y="278" text-anchor="middle">hdm-stuttgart</text>
</g>
<!-- Line hdm → www -->
<line class="line" x1="220" y1="294" x2="220" y2="340"/>
<!-- www -->
<g class="node leaf">
<rect x="170" y="340" width="100" height="44"/>
<text x="220" y="368" text-anchor="middle">www</text>
</g>
</svg>
</body>
</html>