feat: Side-by-side dashboard layout with static tour modal

dashboard/app.js

@@ -149,23 +149,15 @@ window.execute = async function(type) {
 // Tutorial Logic
 function showStep(step) {
     const content = document.getElementById('tutorial-step');
-    const modal = document.querySelector('.modal-card');
     const data = TUTORIAL_STEPS[step];
     
     content.innerHTML = `<h2>${data.title}</h2><p>${data.text}</p>`;
     document.getElementById('tut-prev').classList.toggle('hidden', step === 0);
     document.getElementById('tut-next').textContent = step === TUTORIAL_STEPS.length - 1 ? "Start Simulation" : "Next";
 
-    // Position modal near target
-    const targetEl = document.querySelector(data.target);
-    if (targetEl && step > 0) {
-        const rect = targetEl.getBoundingClientRect();
-        document.getElementById('tutorial-modal').style.alignItems = 'flex-start';
-        document.getElementById('tutorial-modal').style.paddingTop = `${Math.max(20, rect.top - 100)}px`;
-    } else {
-        document.getElementById('tutorial-modal').style.alignItems = 'center';
-        document.getElementById('tutorial-modal').style.paddingTop = '0';
-    }
+    // Static Centered Position
+    document.getElementById('tutorial-modal').style.alignItems = 'center';
+    document.getElementById('tutorial-modal').style.paddingTop = '0';
 }
 
 document.getElementById('tut-next').addEventListener('click', () => {

dashboard/index.html

@@ -33,72 +33,40 @@
         </div>
 
         <main>
-            <section class="control-panel card">
-                <h3><span class="i-icon">ℹ️</span> Command Console</h3>
-                
-                <div class="operation-sections">
-                    <!-- Section 1: Logistics -->
-                    <div id="section-order" class="op-section">
-                        <h4>📦 Supply Logistics</h4>
-                        <div class="op-row">
-                            <select id="part-select">
-                                <option value="chips">Order Microchips</option>
-                                <option value="sensors">Order Sensors</option>
-                            </select>
-                            <select id="mode-select">
-                                <option value="sea">SEA ($50, 10d, 0.5kg)</option>
-                                <option value="rail">RAIL ($125, 5d, 2.5kg)</option>
-                                <option value="air">AIR ($250, 2d, 10kg)</option>
-                            </select>
-                            <button onclick="execute('order_parts')" class="btn btn-primary small">Order</button>
+            <section class="metrics-grid">
+                <div class="card metric-card">
+                    <h3>Carbon Footprint</h3>
+                    <div class="gauge-container">
+                        <div id="carbon-gauge" class="gauge">
+                            <span id="carbon-value">0</span><small>kg</small>
                         </div>
                     </div>
+                    <p class="limit">Limit: <span id="carbon-limit">1000</span>kg</p>
+                </div>
 
-                    <hr class="divider">
+                <div class="card metric-card">
+                    <h3>Capital Balance</h3>
+                    <div class="value-large">$<span id="cash-value">0</span></div>
+                    <div class="trend" id="cash-trend">Fulfillment: <span id="orders-done">0</span></div>
+                </div>
 
-                    <!-- Section 2: Manufacturing -->
-                    <div id="section-produce" class="op-section">
-                        <h4>🏭 Manufacturing</h4>
-                        <div class="op-row">
-                            <select id="product-select">
-                                <option value="EcoPhone">Produce EcoPhone</option>
-                                <option value="GreenTab">Produce GreenTab</option>
-                            </select>
-                            <button onclick="execute('produce')" class="btn btn-primary small">Start Run</button>
+                <div class="card metric-card">
+                    <h3>Raw Inventory</h3>
+                    <div class="inventory-grid">
+                        <div class="inv-item">
+                            <span class="label">Chips</span>
+                            <span id="chips-count" class="count">0</span>
                         </div>
-                    </div>
-
-                    <hr class="divider">
-
-                    <!-- Section 3: ESG / Offsetting -->
-                    <div id="section-offset" class="op-section">
-                        <h4>🌳 ESG Strategy</h4>
-                        <div class="op-row">
-                            <span class="op-text">Carbon Offset Purchase (100 units)</span>
-                            <button onclick="execute('offset')" class="btn btn-primary small">Buy Offset</button>
+                        <div class="inv-item">
+                            <span class="label">Sensors</span>
+                            <span id="sensors-count" class="count">0</span>
                         </div>
                     </div>
                 </div>
-
-                <div id="impact-preview" class="impact-preview">
-                    <span class="preview-label">Live Estimate:</span>
-                    <span id="preview-cost" class="val">$0</span>
-                    <span class="sep">|</span>
-                    <span id="preview-carbon" class="val">0kg CO2</span>
-                </div>
-
-                <div class="time-controls">
-                    <button id="skip-btn" class="btn btn-secondary">Advance to Next Day</button>
-                    <button id="trigger-btn" class="btn btn-danger">Trigger Suez Jam</button>
-                    <button id="reset-btn" class="btn btn-outline">Reset Sim</button>
-                </div>
-                <div id="news-alert" class="news-alert hidden">
-                    <span class="warning-icon">⚠️</span>
-                    <span id="news-text"></span>
-                </div>
             </section>
 
-            <section class="metrics-grid">
+            <section class="control-panel card">
+                <h3><span class="i-icon">ℹ️</span> Command Console</h3>
                 <div class="card metric-card">
                     <h3>Carbon Footprint</h3>
                     <div class="gauge-container">

dashboard/style.css

@@ -96,20 +96,27 @@ header {
 
 .status-online { background: #E1F5E1; color: #2C5F2D; }
 
-.metrics-grid {
+main {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: 1fr 400px;
     gap: 2rem;
-    margin-bottom: 2rem;
 }
 
-.card {
-    background: var(--card-white);
-    border: 1px solid var(--border-tan);
-    border-radius: 12px;
-    padding: 2rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
-    transition: transform 0.3s ease;
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.control-panel {
+    background: #F9F7F2;
+    height: fit-content;
+    position: sticky;
+    top: 2rem;
+}
+
+.details-section, .log-section, .guide-section {
+    grid-column: 1 / -1;
 }
 
 .card h3 {