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

replace ascii osi/tcpip layer diagram with rendered visual

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 11:06:16 +02:00
parent b3c0994b7e
commit 76f7ff3a46
3 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
slides/223015c/assets/demos/osi-tcpip-diagram.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>OSI vs TCP/IP</title>
<style>
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
body { padding: 30px 40px; display: inline-block; }
.wrap { display: flex; gap: 36px; align-items: flex-start; }
.col { display: flex; flex-direction: column; gap: 4px; }
h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
.box {
border: 2px solid #4a4a6a;
padding: 10px 20px;
min-width: 230px;
font-size: 0.95rem;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
.tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
.tcpip .app { min-height: 126px; }
.tcpip .trans { min-height: 40px; }
.tcpip .net { min-height: 40px; }
.tcpip .link { min-height: 82px; }
</style>
</head>
<body>
<div class="wrap">
<div class="col osi">
<h3>OSI (7 Schichten)</h3>
<div class="box">7. Anwendung</div>
<div class="box">6. Darstellung</div>
<div class="box">5. Sitzung</div>
<div class="box">4. Transport</div>
<div class="box">3. Vermittlung</div>
<div class="box">2. Sicherung</div>
<div class="box">1. Bitübertragung</div>
</div>
<div class="col tcpip">
<h3>TCP/IP (4 Schichten)</h3>
<div class="box app">Anwendung</div>
<div class="box trans">Transport</div>
<div class="box net">Internet</div>
<div class="box link">Netzzugang</div>
</div>
</div>
</body>
</html>