130 lines
6.6 KiB
HTML
130 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>DNS-Lookup Sequence</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
|
body { padding: 30px; display: inline-block; }
|
|
.diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 900px; }
|
|
.actor {
|
|
background: #1a1a2e;
|
|
color: #fff;
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
}
|
|
.lifeline {
|
|
border-left: 2px dashed #9ca3af;
|
|
margin-left: 50%;
|
|
height: 480px;
|
|
position: relative;
|
|
}
|
|
.msg {
|
|
position: absolute;
|
|
padding: 6px 10px;
|
|
background: #f3f4f6;
|
|
border: 1px solid #4a4a6a;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
}
|
|
.arrow-right {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: #d63384;
|
|
}
|
|
.arrow-right::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -1px; top: -4px;
|
|
border-left: 8px solid #d63384;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
}
|
|
.arrow-left {
|
|
position: absolute;
|
|
height: 2px;
|
|
background: #15803d;
|
|
}
|
|
.arrow-left::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -1px; top: -4px;
|
|
border-right: 8px solid #15803d;
|
|
border-top: 5px solid transparent;
|
|
border-bottom: 5px solid transparent;
|
|
}
|
|
.arrow-label {
|
|
position: absolute;
|
|
font-size: 0.75rem;
|
|
background: #fff;
|
|
padding: 1px 5px;
|
|
white-space: nowrap;
|
|
}
|
|
.ask { color: #7c2d12; }
|
|
.reply { color: #14532d; font-style: italic; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="diagram">
|
|
<div class="actor">Dein Laptop</div>
|
|
<div class="actor">Resolver</div>
|
|
<div class="actor">Root (.)</div>
|
|
<div class="actor">.de-Server</div>
|
|
<div class="actor">HdM-NS</div>
|
|
<!-- lifelines (5 cols) -->
|
|
<div style="position: relative; grid-column: 1 / span 5; height: 520px;">
|
|
<!-- vertical dashed lines per actor at 10%, 30%, 50%, 70%, 90% -->
|
|
<div style="position: absolute; left: 10%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
|
|
<div style="position: absolute; left: 30%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
|
|
<div style="position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
|
|
<div style="position: absolute; left: 70%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
|
|
<div style="position: absolute; left: 90%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
|
|
|
|
<!-- Laptop → Resolver at y=20 -->
|
|
<div style="position: absolute; left: 10%; top: 20px; width: 20%; height: 2px; background: #d63384;"></div>
|
|
<div style="position: absolute; left: 30%; top: 16px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 12%; top: 0; font-size: 0.75rem; color: #7c2d12;">"Wo ist www.hdm-stuttgart.de?"</div>
|
|
|
|
<!-- Resolver → Root at y=90 -->
|
|
<div style="position: absolute; left: 30%; top: 90px; width: 20%; height: 2px; background: #d63384;"></div>
|
|
<div style="position: absolute; left: 50%; top: 86px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 70px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet .de?"</div>
|
|
|
|
<!-- Root → Resolver at y=150 -->
|
|
<div style="position: absolute; left: 30%; top: 150px; width: 20%; height: 2px; background: #15803d;"></div>
|
|
<div style="position: absolute; left: 30%; top: 146px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 130px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag 194.0.0.53"</div>
|
|
|
|
<!-- Resolver → .de at y=220 -->
|
|
<div style="position: absolute; left: 30%; top: 220px; width: 40%; height: 2px; background: #d63384;"></div>
|
|
<div style="position: absolute; left: 70%; top: 216px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 200px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet hdm-stuttgart.de?"</div>
|
|
|
|
<!-- .de → Resolver at y=280 -->
|
|
<div style="position: absolute; left: 30%; top: 280px; width: 40%; height: 2px; background: #15803d;"></div>
|
|
<div style="position: absolute; left: 30%; top: 276px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 260px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag Nameserver der HdM"</div>
|
|
|
|
<!-- Resolver → HdM at y=350 -->
|
|
<div style="position: absolute; left: 30%; top: 350px; width: 60%; height: 2px; background: #d63384;"></div>
|
|
<div style="position: absolute; left: 90%; top: 346px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 330px; font-size: 0.75rem; color: #7c2d12;">"Welche IP hat www?"</div>
|
|
|
|
<!-- HdM → Resolver at y=410 -->
|
|
<div style="position: absolute; left: 30%; top: 410px; width: 60%; height: 2px; background: #15803d;"></div>
|
|
<div style="position: absolute; left: 30%; top: 406px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 32%; top: 390px; font-size: 0.75rem; color: #14532d; font-style: italic;">"212.132.79.37"</div>
|
|
|
|
<!-- Resolver → Laptop at y=480 -->
|
|
<div style="position: absolute; left: 10%; top: 480px; width: 20%; height: 2px; background: #15803d;"></div>
|
|
<div style="position: absolute; left: 10%; top: 476px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
|
|
<div style="position: absolute; left: 12%; top: 460px; font-size: 0.75rem; color: #14532d; font-style: italic;">"IP ist 212.132.79.37"</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|