63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DNS-Hierarchie</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
|
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>
|
|
<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>
|