From abd2de59f9e156ecb021f365333a0d1ceb1c2d7b Mon Sep 17 00:00:00 2001
From: TNB <tnb@clawdad.local>
Date: Tue, 7 Jul 2026 10:04:03 -0400
Subject: [PATCH] Center the 4 component boxes in the SVG and embed TallyFlow
 icon as favicon

---
 TallyFlow/TallyFlow-Architecture-Diagram.html | 78 +++++++++----------
 1 file changed, 36 insertions(+), 42 deletions(-)

diff --git a/TallyFlow/TallyFlow-Architecture-Diagram.html b/TallyFlow/TallyFlow-Architecture-Diagram.html
index 642c05a..56d0ea3 100644
--- a/TallyFlow/TallyFlow-Architecture-Diagram.html
+++ b/TallyFlow/TallyFlow-Architecture-Diagram.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>TallyFlow Architecture Diagram</title>
+  <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAQAElEQVR4Aezd6Y9l6X0X8HNurd0zvUwv43EcnJAFCAIilBcgASEo" type="image/png">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -119,57 +120,50 @@
         <!-- Core API label -->
         <text x="550" y="245" fill="#34d399" font-size="9" text-anchor="middle" font-weight="600">Core API Layer — single integration point for all components</text>
 
-        <!-- ========== ASSETS (Mobile) ========== -->
-        <rect x="50" y="390" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
-        <text x="135" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
-        <text x="135" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
-        <text x="135" y="451" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
-        <text x="135" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Seek &amp; Find • Inventory</text>
-        <text x="135" y="482" fill="#94a3b8" font-size="8" text-anchor="middle">Enrollment</text>
+        <!-- Centered row of 4 boxes -->
+        <!-- Assets -->
+        <rect x="150" y="390" width="170" height="100" rx="10" fill="rgba(8, 51, 68, 0.5)" stroke="#22d3ee" stroke-width="2"/>
+        <text x="235" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Assets</text>
+        <text x="235" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">(Mobile)</text>
+        <text x="235" y="451" fill="#22d3ee" font-size="9" text-anchor="middle">Flutter</text>
+        <text x="235" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Seek &amp; Find • Inventory</text>
+        <text x="235" y="482" fill="#94a3b8" font-size="8" text-anchor="middle">Enrollment</text>
 
-        <!-- ========== PRINT ========== -->
-        <rect x="260" y="390" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
-        <text x="350" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
-        <text x="350" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
-        <text x="350" y="451" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
-        <text x="350" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + API • Registers assets</text>
+        <!-- Print -->
+        <rect x="360" y="390" width="180" height="100" rx="10" fill="rgba(120, 53, 15, 0.45)" stroke="#fbbf24" stroke-width="2"/>
+        <text x="450" y="415" fill="white" font-size="13" font-weight="700" text-anchor="middle">Print</text>
+        <text x="450" y="433" fill="#94a3b8" font-size="10" text-anchor="middle">Flutter + Rust</text>
+        <text x="450" y="451" fill="#fbbf24" font-size="9" text-anchor="middle">Zebra ZPL • RFID</text>
+        <text x="450" y="469" fill="#94a3b8" font-size="8" text-anchor="middle">Print UI + API • Registers assets</text>
 
-        <!-- ========== CAPTURE (native) ========== -->
-        <rect x="490" y="390" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
-        <text x="575" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
-        <text x="575" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
-        <text x="575" y="454" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
-        <text x="575" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
+        <!-- Capture -->
+        <rect x="590" y="390" width="170" height="100" rx="10" fill="rgba(136, 19, 55, 0.45)" stroke="#fb7185" stroke-width="2"/>
+        <text x="675" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">Capture</text>
+        <text x="675" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">(PhotoTag)</text>
+        <text x="675" y="454" fill="#fb7185" font-size="9" text-anchor="middle">Native App</text>
+        <text x="675" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">Photo + Barcode QC</text>
 
-        <!-- ========== IoT ========== -->
-        <rect x="720" y="390" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
-        <text x="810" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
-        <text x="810" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
-        <text x="810" y="454" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
-        <text x="810" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
+        <!-- IoT -->
+        <rect x="820" y="390" width="180" height="100" rx="10" fill="rgba(251, 146, 60, 0.4)" stroke="#fb923c" stroke-width="2"/>
+        <text x="910" y="418" fill="white" font-size="13" font-weight="700" text-anchor="middle">IoT</text>
+        <text x="910" y="436" fill="#94a3b8" font-size="10" text-anchor="middle">Rust</text>
+        <text x="910" y="454" fill="#fb923c" font-size="9" text-anchor="middle">Fixed Readers • Sensors</text>
+        <text x="910" y="470" fill="#94a3b8" font-size="8" text-anchor="middle">MQTT / HTTP • ERP integration</text>
 
-        <!-- ========== CONNECTIONS ========== -->
+        <!-- CONNECTIONS -->
+        <line x1="322" y1="430" x2="380" y2="355" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="335" y="385" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
 
-        <!-- Assets → Core (solid) -->
-        <line x1="222" y1="430" x2="280" y2="355" stroke="#22d3ee" stroke-width="2" marker-end="url(#arrowhead)"/>
-        <text x="235" y="385" fill="#22d3ee" font-size="9" font-weight="600">API Sync</text>
+        <line x1="450" y1="388" x2="530" y2="355" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="465" y="372" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
 
-        <!-- Print → Core (solid) -->
-        <line x1="350" y1="388" x2="430" y2="355" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowhead)"/>
-        <text x="365" y="372" fill="#fbbf24" font-size="9">Print Jobs + Asset Reg</text>
+        <line x1="675" y1="388" x2="675" y2="355" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="690" y="372" fill="#fb7185" font-size="9">Photos + Metadata</text>
 
-        <!-- Capture → Core (solid) -->
-        <line x1="575" y1="388" x2="575" y2="355" stroke="#fb7185" stroke-width="2" marker-end="url(#arrowhead)"/>
-        <text x="590" y="372" fill="#fb7185" font-size="9">Photos + Metadata</text>
+        <line x1="910" y1="388" x2="710" y2="355" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
+        <text x="790" y="365" fill="#fb923c" font-size="9">Events (optional)</text>
 
-        <!-- IoT → Core (dashed, optional) -->
-        <line x1="810" y1="388" x2="610" y2="355" stroke="#fb923c" stroke-width="2" stroke-dasharray="5,4" marker-end="url(#arrowhead-dashed)"/>
-        <text x="690" y="365" fill="#fb923c" font-size="9">Events (optional)</text>
-
-        <!-- Core Web UI uses Core Backend API -->
         <line x1="392" y1="122" x2="408" y2="122" stroke="#22d3ee" stroke-width="1.5" marker-end="url(#arrowhead)"/>
-
-        <!-- Core Backend owns MongoDB -->
         <line x1="602" y1="122" x2="618" y2="122" stroke="#a78bfa" stroke-width="2" marker-end="url(#arrowhead)"/>
 
         <!-- Centered Legend -->