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

47
docs/slides/assets/app-demo.svg Normal file
View File

@@ -0,0 +1,47 @@
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img" aria-labelledby="title desc">
<title id="title">Chatroom app mockup</title>
<desc id="desc">English mockup of the WebSocket chatroom user interface.</desc>
<defs>
<style>
@font-face {
font-family: "Vazirmatn";
src: url("../../../app/static/Vazirmatn[wght].woff2") format("woff2");
font-weight: 100 900;
}
text { font-family: "Vazirmatn", Arial, sans-serif; }
</style>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#0f172a" flood-opacity=".16"/>
</filter>
</defs>
<rect width="960" height="540" fill="#262a3a"/>
<path d="M42 430 L260 322 L358 488 L96 548 Z" fill="#f4b740" opacity=".13"/>
<path d="M720 34 L930 96 L820 228 L640 140 Z" fill="#6d8cff" opacity=".14"/>
<g id="diagram-content-shift" transform="translate(0,-28)">
<g filter="url(#shadow)">
<rect x="88" y="74" width="784" height="392" rx="28" fill="#ffffff" opacity=".08" stroke="#ffffff"/>
</g>
<text x="132" y="122" fill="#f8fafc" font-size="28" font-weight="800">Simple WebSocket Chatroom</text>
<rect x="710" y="98" width="96" height="34" rx="17" fill="#43d9a3" opacity=".22" stroke="#43d9a3"/>
<text x="758" y="121" text-anchor="middle" fill="#9ff4d5" font-size="14" font-weight="800">Connected</text>
<rect x="132" y="164" width="496" height="232" rx="18" fill="#ffffff" opacity=".07" stroke="#ffffff"/>
<text x="162" y="204" fill="#f8fafc" font-size="20" font-weight="800">Room: internet-engineering</text>
<text x="162" y="232" fill="#a8adbd" font-size="15">You are chatting as Ali.</text>
<rect x="230" y="266" width="244" height="48" rx="14" fill="#ffffff" opacity=".10" stroke="#ffffff"/>
<text x="352" y="296" text-anchor="middle" fill="#f8fafc" font-size="15">Hello from WebSocket!</text>
<rect x="362" y="332" width="210" height="48" rx="14" fill="#6d8cff" opacity=".32" stroke="#6d8cff"/>
<text x="467" y="362" text-anchor="middle" fill="#f8fafc" font-size="15">Instant delivery</text>
<rect x="132" y="412" width="496" height="34" rx="12" fill="#ffffff" opacity=".09" stroke="#ffffff"/>
<text x="162" y="434" fill="#a8adbd" font-size="14">Type a message...</text>
<rect x="548" y="412" width="80" height="34" rx="12" fill="#f4b740"/>
<text x="588" y="434" text-anchor="middle" fill="#1f2937" font-size="14" font-weight="800">Send</text>
<rect x="660" y="164" width="166" height="282" rx="18" fill="#ffffff" opacity=".07" stroke="#ffffff"/>
<text x="743" y="204" text-anchor="middle" fill="#f8fafc" font-size="20" font-weight="800">Online Users</text>
<text x="704" y="252" fill="#a8adbd" font-size="16">Ali</text>
<text x="704" y="292" fill="#a8adbd" font-size="16">Sara</text>
<text x="704" y="332" fill="#a8adbd" font-size="16">Reza</text>
<circle cx="684" cy="246" r="6" fill="#43d9a3"/>
<circle cx="684" cy="286" r="6" fill="#43d9a3"/>
<circle cx="684" cy="326" r="6" fill="#43d9a3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB