kotalk/docs/assets/readme/system-overview.svg

84 lines
6 KiB
XML
Raw Permalink Normal View History

2026-04-16 09:24:26 +09:00
<svg width="1200" height="760" viewBox="0 0 1200 760" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="80" y1="40" x2="1080" y2="720" gradientUnits="userSpaceOnUse">
<stop stop-color="#0F172A"/>
<stop offset="1" stop-color="#111827"/>
</linearGradient>
<linearGradient id="accentA" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#22C55E"/>
<stop offset="1" stop-color="#0EA5E9"/>
</linearGradient>
<linearGradient id="accentB" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#F59E0B"/>
<stop offset="1" stop-color="#FB7185"/>
</linearGradient>
<filter id="shadow" x="-40" y="-40" width="1280" height="840" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="18" stdDeviation="24" flood-color="#020617" flood-opacity="0.32"/>
</filter>
</defs>
<rect x="24" y="24" width="1152" height="712" rx="32" fill="url(#bg)"/>
<rect x="24" y="24" width="1152" height="712" rx="32" stroke="#1F2937"/>
<text x="70" y="92" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="34" font-weight="700">System Overview</text>
<text x="70" y="128" fill="#94A3B8" font-family="Arial, sans-serif" font-size="18">Windows-first messenger with a live mobile web entrypoint and a transparent release surface.</text>
<g filter="url(#shadow)">
<rect x="72" y="184" width="270" height="148" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="102" y="230" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Windows Desktop</text>
<text x="102" y="260" fill="#93C5FD" font-family="Arial, sans-serif" font-size="32" font-weight="700">Avalonia 12</text>
<text x="102" y="296" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">Conversation list, chat view, send flow,</text>
<text x="102" y="320" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">portable build channel.</text>
<rect x="72" y="376" width="270" height="148" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="102" y="422" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Mobile Web</text>
<text x="102" y="452" fill="#86EFAC" font-family="Arial, sans-serif" font-size="32" font-weight="700">vstalk.phy.kr</text>
<text x="102" y="488" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">PWA shell, quick signup, list, chat,</text>
<text x="102" y="512" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">same-origin API and WebSocket flow.</text>
<rect x="72" y="568" width="270" height="112" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="102" y="614" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Android</text>
<text x="102" y="644" fill="#FCD34D" font-family="Arial, sans-serif" font-size="28" font-weight="700">Next parallel client</text>
</g>
<g filter="url(#shadow)">
<rect x="462" y="246" width="286" height="224" rx="28" fill="#0B1220" stroke="#334155"/>
<rect x="490" y="278" width="230" height="54" rx="16" fill="url(#accentA)"/>
<text x="521" y="313" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="24" font-weight="700">ASP.NET Core 8 API</text>
<text x="492" y="372" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Protocols</text>
<text x="492" y="402" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">REST bootstrap, conversations, messages</text>
<text x="492" y="428" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">WebSocket realtime events</text>
</g>
<g filter="url(#shadow)">
<rect x="862" y="164" width="270" height="148" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="892" y="210" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Storage now</text>
<text x="892" y="242" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="30" font-weight="700">SQLite</text>
<text x="892" y="278" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">Alpha storage with simple deployment</text>
<text x="892" y="302" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">and low operational overhead.</text>
<rect x="862" y="356" width="270" height="148" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="892" y="402" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Operational surface</text>
<text x="892" y="434" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="28" font-weight="700">Caddy + nginx</text>
<text x="892" y="470" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">TLS, same-origin mobile web,</text>
<text x="892" y="494" fill="#94A3B8" font-family="Arial, sans-serif" font-size="16">shared VPS reverse proxy routing.</text>
<rect x="862" y="548" width="270" height="132" rx="24" fill="#0B1220" stroke="#243244"/>
<text x="892" y="594" fill="#E2E8F0" font-family="Arial, sans-serif" font-size="18" font-weight="700">Target stack later</text>
<text x="892" y="626" fill="#F8FAFC" font-family="Arial, sans-serif" font-size="26" font-weight="700">PostgreSQL / Redis / MinIO</text>
</g>
<path d="M342 258H462" stroke="#38BDF8" stroke-width="4" stroke-linecap="round"/>
<path d="M342 450H462" stroke="#38BDF8" stroke-width="4" stroke-linecap="round"/>
<path d="M342 624H462" stroke="#F59E0B" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 10"/>
<path d="M748 358H862" stroke="#34D399" stroke-width="4" stroke-linecap="round"/>
<path d="M748 430H862" stroke="#34D399" stroke-width="4" stroke-linecap="round"/>
<path d="M748 614H862" stroke="#F59E0B" stroke-width="4" stroke-linecap="round" stroke-dasharray="10 10"/>
<circle cx="462" cy="258" r="7" fill="#38BDF8"/>
<circle cx="462" cy="450" r="7" fill="#38BDF8"/>
<circle cx="462" cy="624" r="7" fill="#F59E0B"/>
<circle cx="862" cy="358" r="7" fill="#34D399"/>
<circle cx="862" cy="430" r="7" fill="#34D399"/>
<circle cx="862" cy="614" r="7" fill="#F59E0B"/>
</svg>