147 lines
5.0 KiB
HTML
147 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Browser–Server HTTP Sequenz</title>
|
||
<style>
|
||
:root {
|
||
--dark: #1a1a2e;
|
||
--muted: #6b7280;
|
||
--border: #cbd5e1;
|
||
--bg-soft: #f8fafc;
|
||
--hl: #005f8a;
|
||
--req: #2563eb;
|
||
--res: #16a34a;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: #fff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
||
body { padding: 24px 32px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
|
||
h1 { margin: 0 0 4px; font-size: 1.45rem; text-align: center; }
|
||
.sub { color: var(--muted); margin-bottom: 24px; font-size: 0.88rem; text-align: center; }
|
||
|
||
.diagram { display: grid; grid-template-columns: 140px 1fr 140px; gap: 0; align-items: start; }
|
||
|
||
/* Actors */
|
||
.actor {
|
||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||
font-weight: 700; font-size: 0.9rem;
|
||
}
|
||
.actor-box {
|
||
border: 2px solid var(--dark); border-radius: 8px;
|
||
padding: 8px 18px; background: var(--bg-soft);
|
||
white-space: nowrap;
|
||
}
|
||
.lifeline {
|
||
width: 2px; background: var(--border);
|
||
height: 100%; min-height: 280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Messages */
|
||
.messages { display: flex; flex-direction: column; gap: 0; padding-top: 48px; }
|
||
.msg { display: flex; flex-direction: column; margin-bottom: 6px; }
|
||
.msg-arrow {
|
||
display: flex; align-items: center; gap: 0; position: relative;
|
||
}
|
||
.msg-line {
|
||
flex: 1; height: 2px;
|
||
}
|
||
.msg-line.req { background: var(--req); }
|
||
.msg-line.res { background: var(--res); background: repeating-linear-gradient(90deg, var(--res) 0 8px, transparent 8px 13px); }
|
||
|
||
.arrowhead-r { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--req); }
|
||
.arrowhead-l { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid var(--res); }
|
||
|
||
.msg-label {
|
||
font-size: 0.75rem; font-family: ui-monospace, monospace;
|
||
padding: 2px 0 6px; text-align: center;
|
||
}
|
||
.msg-label.req { color: var(--req); }
|
||
.msg-label.res { color: var(--res); }
|
||
|
||
.gap { height: 10px; }
|
||
|
||
.legend {
|
||
margin-top: 20px; display: flex; gap: 24px; justify-content: center;
|
||
font-size: 0.82rem;
|
||
}
|
||
.leg { display: flex; align-items: center; gap: 8px; }
|
||
.leg-line { width: 28px; height: 2px; }
|
||
.leg-line.req { background: var(--req); }
|
||
.leg-line.res { background: repeating-linear-gradient(90deg, var(--res) 0 6px, transparent 6px 10px); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Browser–Server: HTTP Kommunikation</h1>
|
||
<p class="sub">Jede Ressource = eigener Request — Browser blockiert nicht, lädt parallel</p>
|
||
|
||
<div class="diagram">
|
||
|
||
<!-- Browser actor -->
|
||
<div class="actor">
|
||
<div class="actor-box">🌐 Browser</div>
|
||
<div class="lifeline"></div>
|
||
</div>
|
||
|
||
<!-- Messages -->
|
||
<div class="messages">
|
||
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="msg-line req"></div><div class="arrowhead-r"></div></div>
|
||
<div class="msg-label req">GET /products</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="arrowhead-l"></div><div class="msg-line res"></div></div>
|
||
<div class="msg-label res">HTTP 200 + index.html</div>
|
||
</div>
|
||
|
||
<div class="gap"></div>
|
||
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="msg-line req"></div><div class="arrowhead-r"></div></div>
|
||
<div class="msg-label req">GET /style.css</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="arrowhead-l"></div><div class="msg-line res"></div></div>
|
||
<div class="msg-label res">HTTP 200 + style.css</div>
|
||
</div>
|
||
|
||
<div class="gap"></div>
|
||
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="msg-line req"></div><div class="arrowhead-r"></div></div>
|
||
<div class="msg-label req">GET /script.js</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="arrowhead-l"></div><div class="msg-line res"></div></div>
|
||
<div class="msg-label res">HTTP 200 + script.js</div>
|
||
</div>
|
||
|
||
<div class="gap"></div>
|
||
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="msg-line req"></div><div class="arrowhead-r"></div></div>
|
||
<div class="msg-label req">GET /api/products</div>
|
||
</div>
|
||
<div class="msg">
|
||
<div class="msg-arrow"><div class="arrowhead-l"></div><div class="msg-line res"></div></div>
|
||
<div class="msg-label res">HTTP 200 + JSON</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Server actor -->
|
||
<div class="actor">
|
||
<div class="actor-box">🖥️ Server</div>
|
||
<div class="lifeline"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div class="leg"><div class="leg-line req"></div><span style="color:var(--req)">Request (Browser → Server)</span></div>
|
||
<div class="leg"><div class="leg-line res"></div><span style="color:var(--res)">Response (Server → Browser)</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|