160 lines
8.6 KiB
XML
160 lines
8.6 KiB
XML
|
<svg width="900" height="500" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#0EA5E9;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#34D399;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#F59E0B;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#FBBF24;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="pinkGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#EC4899;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#F472B6;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="130%">
|
||
|
|
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#6366F1" flood-opacity="0.15"/>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<marker id="arrowPurple" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#8B5CF6"/>
|
||
|
|
</marker>
|
||
|
|
|
||
|
|
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
|
||
|
|
<circle cx="10" cy="10" r="1" fill="#6366F1" opacity="0.08"/>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.title-text { fill: #F1F5F9; }
|
||
|
|
.main-text { fill: #E2E8F0; }
|
||
|
|
.secondary-text { fill: #94A3B8; }
|
||
|
|
.mono-text { fill: #CBD5E1; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<rect width="900" height="500" fill="#FAFBFC"/>
|
||
|
|
<rect width="900" height="500" fill="url(#dots)"/>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="450" y="35" text-anchor="middle" font-size="20" font-weight="600" class="title-text">BotDevice Architecture</text>
|
||
|
|
<text x="450" y="55" text-anchor="middle" font-size="12" class="secondary-text">Mobile app deployment with Tauri for Android/HarmonyOS</text>
|
||
|
|
|
||
|
|
<!-- Main Container -->
|
||
|
|
<rect x="30" y="75" width="840" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
|
||
|
|
<!-- BotDevice App Container -->
|
||
|
|
<g transform="translate(60, 100)">
|
||
|
|
<rect x="0" y="0" width="780" height="130" rx="10" fill="#FFFFFF" stroke="#8B5CF6" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="780" height="35" rx="10" fill="url(#primaryGrad)"/>
|
||
|
|
<rect x="0" y="28" width="780" height="7" fill="url(#primaryGrad)"/>
|
||
|
|
<text x="390" y="24" text-anchor="middle" font-size="13" font-weight="600" class="white-text">BotDevice App (Tauri)</text>
|
||
|
|
|
||
|
|
<!-- Three columns inside -->
|
||
|
|
<!-- botui/ui/suite -->
|
||
|
|
<g transform="translate(20, 50)">
|
||
|
|
<rect x="0" y="0" width="230" height="65" rx="6" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1"/>
|
||
|
|
<text x="115" y="22" text-anchor="middle" font-size="11" font-weight="600" class="main-text">botui/ui/suite</text>
|
||
|
|
<text x="115" y="40" text-anchor="middle" font-size="10" class="secondary-text">(Web Interface)</text>
|
||
|
|
<text x="115" y="55" text-anchor="middle" font-size="9" class="mono-text">HTML + HTMX + CSS</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Tauri Android -->
|
||
|
|
<g transform="translate(270, 50)">
|
||
|
|
<rect x="0" y="0" width="230" height="65" rx="6" fill="#F0FDF4" stroke="#A7F3D0" stroke-width="1"/>
|
||
|
|
<text x="115" y="22" text-anchor="middle" font-size="11" font-weight="600" class="main-text">Tauri Android</text>
|
||
|
|
<text x="115" y="40" text-anchor="middle" font-size="10" class="secondary-text">(WebView + NDK)</text>
|
||
|
|
<text x="115" y="55" text-anchor="middle" font-size="9" class="mono-text">Native bridge</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- src/lib.rs -->
|
||
|
|
<g transform="translate(520, 50)">
|
||
|
|
<rect x="0" y="0" width="240" height="65" rx="6" fill="#FEF3C7" stroke="#FCD34D" stroke-width="1"/>
|
||
|
|
<text x="120" y="22" text-anchor="middle" font-size="11" font-weight="600" class="main-text">src/lib.rs (Rust)</text>
|
||
|
|
<text x="120" y="40" text-anchor="middle" font-size="10" class="secondary-text">(Backend + Hardware)</text>
|
||
|
|
<text x="120" y="55" text-anchor="middle" font-size="9" class="mono-text">Business logic</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Connector line down -->
|
||
|
|
<path d="M450 235 L450 265" stroke="#8B5CF6" stroke-width="2" fill="none" marker-end="url(#arrowPurple)"/>
|
||
|
|
|
||
|
|
<!-- Android/HarmonyOS System Container -->
|
||
|
|
<g transform="translate(60, 275)">
|
||
|
|
<rect x="0" y="0" width="780" height="180" rx="10" fill="#FFFFFF" stroke="#64748B" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="780" height="35" rx="10" fill="#64748B"/>
|
||
|
|
<rect x="0" y="28" width="780" height="7" fill="#64748B"/>
|
||
|
|
<text x="390" y="24" text-anchor="middle" font-size="13" font-weight="600" class="white-text">Android / HarmonyOS System</text>
|
||
|
|
|
||
|
|
<!-- Hardware capabilities row -->
|
||
|
|
<!-- Camera -->
|
||
|
|
<g transform="translate(30, 55)">
|
||
|
|
<rect x="0" y="0" width="160" height="105" rx="8" fill="#FFFFFF" stroke="#0EA5E9" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="160" height="30" rx="8" fill="url(#cyanGrad)"/>
|
||
|
|
<rect x="0" y="24" width="160" height="6" fill="url(#cyanGrad)"/>
|
||
|
|
<text x="80" y="20" text-anchor="middle" font-size="11" font-weight="600" class="white-text">Camera</text>
|
||
|
|
|
||
|
|
<text x="80" y="52" text-anchor="middle" font-size="20">📷</text>
|
||
|
|
<text x="80" y="75" text-anchor="middle" font-size="10" class="main-text">Photo/Video</text>
|
||
|
|
<text x="80" y="92" text-anchor="middle" font-size="9" class="mono-text">QR Scanning</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- GPS -->
|
||
|
|
<g transform="translate(210, 55)">
|
||
|
|
<rect x="0" y="0" width="160" height="105" rx="8" fill="#FFFFFF" stroke="#34D399" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="160" height="30" rx="8" fill="url(#greenGrad)"/>
|
||
|
|
<rect x="0" y="24" width="160" height="6" fill="url(#greenGrad)"/>
|
||
|
|
<text x="80" y="20" text-anchor="middle" font-size="11" font-weight="600" class="white-text">GPS</text>
|
||
|
|
|
||
|
|
<text x="80" y="52" text-anchor="middle" font-size="20">📍</text>
|
||
|
|
<text x="80" y="75" text-anchor="middle" font-size="10" class="main-text">Location</text>
|
||
|
|
<text x="80" y="92" text-anchor="middle" font-size="9" class="mono-text">Geofencing</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- WiFi -->
|
||
|
|
<g transform="translate(390, 55)">
|
||
|
|
<rect x="0" y="0" width="160" height="105" rx="8" fill="#FFFFFF" stroke="#8B5CF6" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="160" height="30" rx="8" fill="url(#primaryGrad)"/>
|
||
|
|
<rect x="0" y="24" width="160" height="6" fill="url(#primaryGrad)"/>
|
||
|
|
<text x="80" y="20" text-anchor="middle" font-size="11" font-weight="600" class="white-text">WiFi</text>
|
||
|
|
|
||
|
|
<text x="80" y="52" text-anchor="middle" font-size="20">📶</text>
|
||
|
|
<text x="80" y="75" text-anchor="middle" font-size="10" class="main-text">Connectivity</text>
|
||
|
|
<text x="80" y="92" text-anchor="middle" font-size="9" class="mono-text">Network API</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Storage -->
|
||
|
|
<g transform="translate(570, 55)">
|
||
|
|
<rect x="0" y="0" width="190" height="105" rx="8" fill="#FFFFFF" stroke="#F59E0B" stroke-width="2" filter="url(#cardShadow)"/>
|
||
|
|
<rect x="0" y="0" width="190" height="30" rx="8" fill="url(#orangeGrad)"/>
|
||
|
|
<rect x="0" y="24" width="190" height="6" fill="url(#orangeGrad)"/>
|
||
|
|
<text x="95" y="20" text-anchor="middle" font-size="11" font-weight="600" class="white-text">Storage</text>
|
||
|
|
|
||
|
|
<text x="95" y="52" text-anchor="middle" font-size="20">💾</text>
|
||
|
|
<text x="95" y="75" text-anchor="middle" font-size="10" class="main-text">Local Files</text>
|
||
|
|
<text x="95" y="92" text-anchor="middle" font-size="9" class="mono-text">SQLite / Assets</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|