GuilanCE/internet-engineering-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(slides): improve slides images and theme

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-18 20:42:22 +03:30
parent 68f5c0b8aa
commit e859075245
13 changed files with 736 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/slides/assets/websocket-osi.svg
View File

@@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="500" viewBox="0 0 1200 500" role="img" aria-labelledby="title desc">
<title id="title">WebSocket in OSI model</title>
<desc id="desc">A compact OSI stack with English technical names and Persian supporting labels.</desc>
<desc id="desc">A compact OSI stack showing WebSocket at the application layer over TCP/IP.</desc>
<defs>
<style>
@font-face {
@@ -9,35 +9,49 @@
font-weight: 100 900;
}
text { font-family: "Vazirmatn", Arial, sans-serif; }
.layer { fill: #f8fafc; font-size: 18px; font-weight: 850; }
.value { fill: #a8adbd; font-size: 18px; font-weight: 500; }
.strong { fill: #ffffff; font-size: 19px; font-weight: 850; }
.strongValue { fill: #ffffff; font-size: 19px; font-weight: 500; }
.mutedRow { fill: #ffffff; opacity: .08; stroke: #ffffff; }
</style>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".12"/>
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
</filter>
</defs>
<rect width="960" height="540" fill="#262a3a"/>
<text x="72" y="76" fill="#f8fafc" font-size="34" font-weight="800">WebSocket in the OSI Model</text>
<text x="72" y="112" fill="#a8adbd" font-size="17">Application Layer over TCP/IP</text>
<g filter="url(#shadow)">
<rect x="106" y="142" width="748" height="350" rx="26" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<g font-size="17">
<rect x="138" y="170" width="684" height="52" rx="14" fill="#2563eb"/>
<text x="162" y="203" fill="#fff" font-weight="800">Layer 7 - Application</text>
<text x="516" y="203" fill="#fff">WebSocket - JSON - Chat</text>
<rect x="138" y="232" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="260" fill="#f8fafc" font-weight="800">Layer 6 - Presentation</text>
<text x="516" y="260" fill="#a8adbd">UTF-8 - Text</text>
<rect x="138" y="286" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="314" fill="#f8fafc" font-weight="800">Layer 5 - Session</text>
<text x="516" y="314" fill="#a8adbd">Long-lived conversation</text>
<rect x="138" y="340" width="684" height="52" rx="14" fill="#10b981"/>
<text x="162" y="373" fill="#fff" font-weight="800">Layer 4 - Transport</text>
<text x="516" y="373" fill="#fff">TCP reliable stream</text>
<rect x="138" y="402" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="430" fill="#f8fafc" font-weight="800">Layer 3 - Network</text>
<text x="516" y="430" fill="#a8adbd">IP routing</text>
<rect x="138" y="456" width="684" height="44" rx="13" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
<text x="162" y="484" fill="#f8fafc" font-weight="800">Layers 2-1 - Link / Physical</text>
<text x="516" y="484" fill="#a8adbd">Ethernet - Wi-Fi</text>
<rect width="1200" height="500" fill="#262a3a"/>
<path d="M42 396 L258 286 L374 438 L92 532 Z" fill="#f4b740" opacity=".13"/>
<path d="M880 42 L1146 112 L1030 262 L812 182 Z" fill="#6d8cff" opacity=".16"/>
<!-- Diagram is intentionally placed slightly above center, with all rows inside the outer panel. -->
<g id="diagram-content">
<g filter="url(#shadow)">
<rect x="150" y="80" width="900" height="350" rx="30" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<rect x="190" y="105" width="820" height="48" rx="15" fill="#2563eb"/>
<text x="222" y="136" class="strong">Layer 7 - Application</text>
<text x="712" y="136" class="strongValue">WebSocket - JSON - Chat</text>
<rect x="190" y="165" width="820" height="40" rx="14" class="mutedRow"/>
<text x="222" y="191" class="layer">Layer 6 - Presentation</text>
<text x="712" y="191" class="value">UTF-8 - Text</text>
<rect x="190" y="215" width="820" height="40" rx="14" class="mutedRow"/>
<text x="222" y="241" class="layer">Layer 5 - Session</text>
<text x="712" y="241" class="value">Long-lived conversation</text>
<rect x="190" y="265" width="820" height="48" rx="15" fill="#10b981"/>
<text x="222" y="296" class="strong">Layer 4 - Transport</text>
<text x="712" y="296" class="strongValue">TCP reliable stream</text>
<rect x="190" y="325" width="820" height="40" rx="14" class="mutedRow"/>
<text x="222" y="351" class="layer">Layer 3 - Network</text>
<text x="712" y="351" class="value">IP routing</text>
<rect x="190" y="375" width="820" height="40" rx="14" class="mutedRow"/>
<text x="222" y="401" class="layer">Layers 2-1 - Link / Physical</text>
<text x="712" y="401" class="value">Ethernet - Wi-Fi</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB