diff --git a/TallyFlow/TallyFlow-Architecture-Diagram.html b/TallyFlow/TallyFlow-Architecture-Diagram.html index f68b82c..2209d9e 100644 --- a/TallyFlow/TallyFlow-Architecture-Diagram.html +++ b/TallyFlow/TallyFlow-Architecture-Diagram.html @@ -11,35 +11,46 @@ font-family: 'JetBrains Mono', monospace; background: #020617; min-height: 100vh; - padding: 2rem; + padding: 1.5rem 2rem; color: white; } - .container { max-width: 1200px; margin: 0 auto; } - .header { margin-bottom: 2rem; text-align: center; } - .header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.5rem; } + .container { max-width: 1180px; margin: 0 auto; } + .header { margin-bottom: 1.25rem; text-align: center; } + .header-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.4rem; } .pulse-dot { width: 12px; height: 12px; background: #22d3ee; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } - h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } + h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; } .subtitle { color: #94a3b8; font-size: 0.875rem; } .diagram-container { background: rgba(15, 23, 42, 0.5); border-radius: 1rem; border: 1px solid #1e293b; - padding: 1.5rem; overflow-x: auto; + padding: 1.25rem; overflow-x: auto; + margin-bottom: 1.5rem; + } + svg { width: 100%; min-width: 1050px; display: block; } + .components-row { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 1.5rem; } - svg { width: 100%; min-width: 1000px; display: block; } .cards { - display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1rem; margin-top: 2rem; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; + max-width: 1180px; + margin: 0 auto; } .card { background: rgba(15, 23, 42, 0.5); border-radius: 0.75rem; border: 1px solid #1e293b; - padding: 1.25rem; + padding: 1.1rem; } - .card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } + .card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; } .card-dot { width: 8px; height: 8px; border-radius: 50%; } .card-dot.cyan { background: #22d3ee; } .card-dot.emerald { background: #34d399; } @@ -48,8 +59,8 @@ .card-dot.orange { background: #fb923c; } .card h3 { font-size: 0.875rem; font-weight: 600; } .card ul { list-style: none; color: #94a3b8; font-size: 0.75rem; } - .card li { margin-bottom: 0.375rem; } - .footer { text-align: center; margin-top: 1.5rem; color: #475569; font-size: 0.75rem; } + .card li { margin-bottom: 0.35rem; } + .footer { text-align: center; margin-top: 1.25rem; color: #475569; font-size: 0.75rem; }
@@ -59,11 +70,11 @@Manufacturing Asset Tracking & RFID Workflow Platform
+Asset Tracking & RFID Workflow Platform