96 أسطر
5.9 KiB
XML
96 أسطر
5.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" font-family="Segoe UI, Arial, sans-serif">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
|
<stop offset="100%" style="stop-color:#1e293b"/>
|
|
</linearGradient>
|
|
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#22c55e"/>
|
|
<stop offset="100%" style="stop-color:#16a34a"/>
|
|
</linearGradient>
|
|
<linearGradient id="blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
|
<stop offset="100%" style="stop-color:#2563eb"/>
|
|
</linearGradient>
|
|
<linearGradient id="purpleGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#a855f7"/>
|
|
<stop offset="100%" style="stop-color:#9333ea"/>
|
|
</linearGradient>
|
|
<filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
|
|
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-opacity="0.3"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="800" height="500" fill="url(#bg)" rx="12"/>
|
|
|
|
<!-- Title -->
|
|
<text x="400" y="45" text-anchor="middle" fill="#e2e8f0" font-size="20" font-weight="700">Q1: Deploy & Monitor Architecture</text>
|
|
<text x="400" y="68" text-anchor="middle" fill="#94a3b8" font-size="12">Node.js API on Ghaymah Cloud</text>
|
|
|
|
<!-- User -->
|
|
<circle cx="100" cy="250" r="35" fill="#334155" stroke="#475569" stroke-width="2" filter="url(#shadow)"/>
|
|
<text x="100" y="245" text-anchor="middle" fill="#e2e8f0" font-size="11" font-weight="600">User</text>
|
|
<text x="100" y="262" text-anchor="middle" fill="#94a3b8" font-size="9">Browser</text>
|
|
|
|
<!-- Arrow: User to Load Balancer -->
|
|
<line x1="135" y1="250" x2="195" y2="250" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
<defs><marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#475569"/></marker></defs>
|
|
|
|
<!-- Load Balancer -->
|
|
<rect x="200" y="215" width="120" height="70" rx="10" fill="url(#blueGrad)" filter="url(#shadow)"/>
|
|
<text x="260" y="245" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Load Balancer</text>
|
|
<text x="260" y="263" text-anchor="middle" fill="#bfdbfe" font-size="9">Ghaymah</text>
|
|
|
|
<!-- Arrow: LB to Container -->
|
|
<line x1="320" y1="250" x2="380" y2="250" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Container -->
|
|
<rect x="385" y="170" width="160" height="160" rx="12" fill="#1e293b" stroke="#22c55e" stroke-width="2" filter="url(#shadow)"/>
|
|
<text x="465" y="198" text-anchor="middle" fill="#22c55e" font-size="11" font-weight="700">Docker Container</text>
|
|
<line x1="400" y1="210" x2="530" y2="210" stroke="#334155" stroke-width="1"/>
|
|
<text x="465" y="232" text-anchor="middle" fill="#e2e8f0" font-size="10">Node.js + Express</text>
|
|
<text x="465" y="252" text-anchor="middle" fill="#94a3b8" font-size="9">Port 3000</text>
|
|
<text x="465" y="272" text-anchor="middle" fill="#94a3b8" font-size="9">/health endpoint</text>
|
|
<text x="465" y="292" text-anchor="middle" fill="#94a3b8" font-size="9">Request counter</text>
|
|
<text x="465" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">Static dashboard</text>
|
|
|
|
<!-- Arrow: Container to Block Storage -->
|
|
<line x1="465" y1="330" x2="465" y2="380" stroke="#475569" stroke-width="2" marker-end="url(#arrowhead)"/>
|
|
|
|
<!-- Block Storage -->
|
|
<rect x="385" y="385" width="160" height="55" rx="10" fill="url(#purpleGrad)" filter="url(#shadow)"/>
|
|
<text x="465" y="408" text-anchor="middle" fill="#fff" font-size="11" font-weight="600">Block Storage</text>
|
|
<text x="465" y="425" text-anchor="middle" fill="#ddd6fe" font-size="9">Persistent Data</text>
|
|
|
|
<!-- Monitoring Section -->
|
|
<rect x="590" y="170" width="180" height="160" rx="12" fill="#1e293b" stroke="#eab308" stroke-width="2" filter="url(#shadow)"/>
|
|
<text x="680" y="198" text-anchor="middle" fill="#eab308" font-size="11" font-weight="700">Monitoring</text>
|
|
<line x1="605" y1="210" x2="755" y2="210" stroke="#334155" stroke-width="1"/>
|
|
<text x="680" y="232" text-anchor="middle" fill="#e2e8f0" font-size="10">health-check.sh</text>
|
|
<text x="680" y="252" text-anchor="middle" fill="#94a3b8" font-size="9">Every 30 seconds</text>
|
|
<text x="680" y="272" text-anchor="middle" fill="#e2e8f0" font-size="10">Dashboard</text>
|
|
<text x="680" y="292" text-anchor="middle" fill="#94a3b8" font-size="9">Status / Latency / Requests</text>
|
|
<text x="680" y="312" text-anchor="middle" fill="#94a3b8" font-size="9">HTML / CSS / JS</text>
|
|
|
|
<!-- Arrow: Monitoring to Container -->
|
|
<line x1="590" y1="250" x2="545" y2="250" stroke="#eab308" stroke-width="2" stroke-dasharray="6,4" marker-end="url(#arrowYellow)"/>
|
|
<defs><marker id="arrowYellow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#eab308"/></marker></defs>
|
|
|
|
<!-- Ghaymah Cloud Label -->
|
|
<rect x="170" y="130" width="590" height="340" rx="16" fill="none" stroke="#334155" stroke-width="1.5" stroke-dasharray="8,6"/>
|
|
<text x="465" y="155" text-anchor="middle" fill="#64748b" font-size="11" font-weight="600">ghaymah.systems</text>
|
|
|
|
<!-- Legend -->
|
|
<rect x="20" y="440" width="760" height="45" rx="8" fill="#0f172a" stroke="#334155" stroke-width="1"/>
|
|
<circle cx="50" cy="463" r="6" fill="#3b82f6"/>
|
|
<text x="65" y="467" fill="#94a3b8" font-size="10">Infrastructure</text>
|
|
<circle cx="180" cy="463" r="6" fill="#22c55e"/>
|
|
<text x="195" y="467" fill="#94a3b8" font-size="10">Application</text>
|
|
<circle cx="310" cy="463" r="6" fill="#a855f7"/>
|
|
<text x="325" y="467" fill="#94a3b8" font-size="10">Storage</text>
|
|
<circle cx="420" cy="463" r="6" fill="#eab308"/>
|
|
<text x="435" y="467" fill="#94a3b8" font-size="10">Monitoring</text>
|
|
<text x="600" y="467" fill="#64748b" font-size="10">Deploy: gy resource app launch</text>
|
|
</svg>
|