feat: Official production release with premium HUD and expanded tour guide

dashboard/app.js

@@ -7,7 +7,7 @@ const SPECS = {
     rail: { cost: 2.5, carbon: 0.5 }
 };
 
-// Tutorial Content 
+// Tutorial Content - Updated with detailed button instructions
 const TUTORIAL_STEPS = [
     {
         title: "Mission: NetZero-Nav",
@@ -16,22 +16,27 @@ const TUTORIAL_STEPS = [
     },
     {
         title: "Ordering Parts",
-        text: "Select a component and Transport Mode. Click the <strong>'Order'</strong> button. SEA is green but takes 10 full days!",
+        text: "Select a component (Chips/Sensors) and a Transport Mode. Click the <strong>'Order'</strong> button to dispatch a shipment. SEA is green but takes 10 full days!",
         target: "#section-order"
     },
     {
-        title: "The Logistics Cart",
-        text: "To the right of the Order button, you'll see your <strong>Mini-Cart</strong>. It tracks active shipments, quantities, and their arrival dates in real-time.",
-        target: "#mini-cart"
+        title: "The Impact Preview",
+        text: "Watch this box! Whenever you change a transport mode, we calculate the <strong>Financial Cost</strong> and <strong>Carbon Footprint</strong> in real-time before you commit.",
+        target: "#impact-preview"
     },
     {
         title: "Starting Production",
-        text: "Once parts arrive, use the <strong>'Start Run'</strong> button to fulfill product orders and generate revenue.",
+        text: "Once inventory arrives, use the <strong>'Start Run'</strong> button. This consumes parts and fulfills active orders, generating revenue for your fleet.",
         target: "#section-produce"
     },
+    {
+        title: "Buying Offsets",
+        text: "Exceeding your carbon quota? Click <strong>'Buy Offset'</strong> to trade capital for carbon credits and keep the gauges in the green zone.",
+        target: "#section-offset"
+    },
     {
         title: "Time Management",
-        text: "Use <strong>'Advance to Next Day'</strong> to progress. If you're ready for a challenge, trigger a <strong>Suez Jam</strong> crisis.",
+        text: "Use <strong>'Advance to Next Day'</strong> to process shipments. If you're feeling daring, trigger a <strong>Suez Jam</strong> to see if your strategy can survive a global crisis.",
         target: ".time-controls"
     }
 ];
@@ -62,23 +67,6 @@ async function updateState() {
             newsAlert.classList.add('hidden');
         }
 
-        // --- UPDATE MINI CART ---
-        const cart = document.getElementById('mini-cart');
-        if (data.shipments && data.shipments.length > 0) {
-            const last = data.shipments[0]; // Show latest/most relevant
-            const arrivalDay = data.step + last.eta;
-            cart.innerHTML = `
-                <div class="cart-item">
-                    <span>📦 ${last.part}</span>
-                    <b>x${last.quantity}</b>
-                    <span class="eta">Arrives: Day ${arrivalDay}</span>
-                </div>
-            `;
-        } else {
-            cart.innerHTML = '<div class="cart-placeholder">No active shipments</div>';
-        }
-
-        // --- UPDATE ORDERS HUD ---
         const container = document.getElementById('shipments-container');
         if (data.orders && data.orders.length > 0) {
             container.innerHTML = data.orders.map(order => `
@@ -112,7 +100,7 @@ function updatePreview() {
     document.getElementById('preview-carbon').textContent = `+${carbon.toFixed(1)}kg CO2`;
 }
 
-if (modeSelect) modeSelect.addEventListener('change', updatePreview);
+modeSelect.addEventListener('change', updatePreview);
 
 function log(message, type = 'system') {
     const box = document.getElementById('activity-log');
@@ -122,6 +110,7 @@ function log(message, type = 'system') {
     box.prepend(entry);
 }
 
+// Global Execute Function (exposed to onclick in HTML)
 window.execute = async function(type) {
     document.querySelector('main').classList.add('transitioning');
     
@@ -168,13 +157,14 @@ function showStep(step) {
     const data = TUTORIAL_STEPS[step];
     
     content.innerHTML = `
-        <div class="step-counter">Briefing Step ${step + 1}</div>
+        <div class="step-counter">Step ${step + 1} of ${TUTORIAL_STEPS.length}</div>
         <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 Operations" : "Next Segment";
+    document.getElementById('tut-next').textContent = step === TUTORIAL_STEPS.length - 1 ? "Start Mission" : "Next";
 
+    // Static Centering logic maintained
     const modalOverlay = document.getElementById('tutorial-modal');
     modalOverlay.style.alignItems = 'center';
     modalOverlay.style.paddingTop = '0';
@@ -206,6 +196,7 @@ document.getElementById('info-btn').addEventListener('click', () => {
     document.getElementById('tutorial-modal').classList.remove('hidden');
 });
 
+// Initialization
 async function manualReset() {
     if (!confirm("Are you sure you want to reset the simulation?")) return;
     try {

dashboard/index.html

@@ -34,28 +34,23 @@
 
         <main>
             <section class="control-panel card">
-                <h3>Command Console</h3>
+                <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 centered">
-                            <div class="op-inputs">
-                                <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>
-                            </div>
+                        <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>
-                            <div id="mini-cart" class="mini-cart">
-                                <div class="cart-placeholder">No active shipments</div>
-                            </div>
                         </div>
                     </div>
 
@@ -64,27 +59,23 @@
                     <!-- Section 2: Manufacturing -->
                     <div id="section-produce" class="op-section">
                         <h4>🏭 Manufacturing</h4>
-                        <div class="op-row centered">
-                            <div class="op-inputs">
-                                <select id="product-select">
-                                    <option value="EcoPhone">Produce EcoPhone</option>
-                                    <option value="GreenTab">Produce GreenTab</option>
-                                </select>
-                            </div>
+                        <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="cart-spacer"></div>
                         </div>
                     </div>
 
                     <hr class="divider">
 
-                    <!-- Section 3: ESG -->
+                    <!-- Section 3: ESG / Offsetting -->
                     <div id="section-offset" class="op-section">
                         <h4>🌳 ESG Strategy</h4>
-                        <div class="op-row centered">
-                            <div class="op-text">Buy Carbon Offset (100 units)</div>
+                        <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="cart-spacer"></div>
                         </div>
                     </div>
                 </div>

dashboard/style.css

@@ -175,7 +175,6 @@ header {
 
 .op-section {
     padding: 0.5rem 0;
-    text-align: center;
 }
 
 .op-section h4 {
@@ -187,53 +186,16 @@ header {
     font-weight: 700;
 }
 
-.op-row.centered {
-    display: flex;
-    gap: 2rem;
-    align-items: center;
-    justify-content: center;
-}
-
-.op-inputs {
-    display: flex;
-    gap: 1rem;
-}
-
-.mini-cart {
-    background: #FFFFFF;
-    border: 1px dashed var(--border-tan);
-    border-radius: 12px;
-    padding: 0.6rem 1rem;
-    min-width: 250px;
-    text-align: left;
-    height: 38px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-}
-
-.cart-placeholder {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    font-style: italic;
-}
-
-.cart-item {
-    font-size: 0.8rem;
+.op-row {
     display: flex;
-    gap: 0.5rem;
+    gap: 1.2rem;
     align-items: center;
-    animation: fadeIn 0.3s ease;
 }
 
-.cart-item b { color: var(--deep-forest); }
-.cart-item .eta { color: var(--primary-green); font-weight: 600; }
-
-.cart-spacer { min-width: 250px; }
-
 .op-text {
     font-size: 0.95rem;
     color: var(--text-main);
+    flex-grow: 1;
     font-weight: 500;
 }