style: Clean enterprise look and dynamic quantity estimator

dashboard/app.js

@@ -111,18 +111,21 @@ async function updateState() {
 
 // UI Controls
 const modeSelect = document.getElementById('mode-select');
+const qtyInput = document.getElementById('qty-input');
 
 function updatePreview() {
     const mode = modeSelect.value;
     const s = SPECS[mode];
-    const cost = 10 * 1 * s.cost;
-    const carbon = 1 * s.carbon;
+    const qty = parseInt(qtyInput.value) || 1;
+    const cost = 10 * qty * s.cost;
+    const carbon = qty * s.carbon;
 
     document.getElementById('preview-cost').textContent = `$${cost.toFixed(0)}`;
     document.getElementById('preview-carbon').textContent = `+${carbon.toFixed(1)}kg CO2`;
 }
 
 modeSelect.addEventListener('change', updatePreview);
+qtyInput.addEventListener('input', updatePreview);
 
 function spawnFeedback(text, x, y) {
     const el = document.createElement('div');
@@ -149,10 +152,11 @@ window.execute = async function(type, event, shipment_id = null) {
     let actionObj = { action_type: type };
     if (type === 'order_parts') {
         const part = document.getElementById('part-select').value;
-        spawnFeedback(`+1 ${part} added to order`, event.clientX, event.clientY);
+        const qty = parseInt(document.getElementById('qty-input').value) || 1;
+        spawnFeedback(`+${qty} ${part} ordered`, event.clientX, event.clientY);
         actionObj.part_type = part;
         actionObj.mode = document.getElementById('mode-select').value;
-        actionObj.quantity = 1; 
+        actionObj.quantity = qty; 
     } else if (type === 'produce') {
         actionObj.product = document.getElementById('product-select').value;
     } else if (type === 'offset') {

dashboard/index.html

@@ -11,8 +11,8 @@
     <div class="container">
         <header>
             <div class="logo">
-                <span class="icon">🌍</span>
-                <h1>NETZERO-NAV</h1>
+                <span class="icon">NETZERO</span>
+                <h1>NAV</h1>
                 <button id="info-btn" class="help-circle">?</button>
             </div>
             <div id="connection-status" class="status-badge">Connecting...</div>
@@ -35,18 +35,19 @@
         <main>
             <div class="main-grid">
                 <section class="control-panel card">
-                    <h3><span class="i-icon">ℹ️</span> Command Console</h3>
+                    <h3>Command Console</h3>
                     
                     <div class="operation-sections">
                         <!-- Section 1: Logistics -->
                         <div id="section-order" class="op-section">
-                            <h4>📦 Supply Logistics</h4>
+                            <h4>Supply Logistics</h4>
                             <div class="op-row">
                                 <div class="op-inputs">
                                     <select id="part-select">
                                         <option value="chips">Order Microchips</option>
                                         <option value="sensors">Order Sensors</option>
                                     </select>
+                                    <input type="number" id="qty-input" value="1" min="1" max="100" class="qty-select" onchange="updatePreview()">
                                     <select id="mode-select">
                                         <option value="sea">SEA ($50, 10d, 0.5kg)</option>
                                         <option value="rail">RAIL ($125, 5d, 2.5kg)</option>
@@ -63,7 +64,7 @@
 
                         <!-- Section 2: Manufacturing -->
                         <div id="section-produce" class="op-section">
-                            <h4>🏭 Manufacturing</h4>
+                            <h4>Manufacturing</h4>
                             <div class="op-row">
                                 <div class="op-inputs">
                                     <select id="product-select">
@@ -81,7 +82,7 @@
 
                         <!-- Section 3: ESG / Offsetting -->
                         <div id="section-offset" class="op-section">
-                            <h4>🌳 ESG Strategy</h4>
+                            <h4>ESG Strategy</h4>
                             <div class="op-row">
                                 <div class="op-inputs">
                                     <span class="op-text">Carbon Offset Purchase (100 units)</span>
@@ -106,7 +107,7 @@
                         <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 class="warning-icon"></span>
                         <div class="news-content">
                             <div class="news-label">EMERGENCY ALERT</div>
                             <div id="news-text"></div>
@@ -116,7 +117,7 @@
 
                 <section class="shipment-cart-section">
                     <div class="card full-width h-100">
-                        <h3>📦 Logistics Cart</h3>
+                        <h3>Your Orders</h3>
                         <div id="cart-container" class="cart-list">
                             <p class="placeholder">No active shipments in transit.</p>
                         </div>
@@ -176,15 +177,15 @@
 
             <section class="guide-section">
                 <div class="card full-width mission-card">
-                    <h3>📁 Mission Briefing (Operator's Manual)</h3>
+                    <h3>Mission Briefing (Operator's Manual)</h3>
                     <div class="guide-content">
                         <div class="guide-grid">
                             <div class="guide-item">
-                                <h4>🎯 Objective</h4>
+                                <h4>Objective</h4>
                                 <p>Fulfill "EcoPhone" and "GreenTab" orders by managing a global supply chain. You must keep <strong>Carbon Footprint</strong> below the quota while maximizing <strong>Capital Balance</strong>.</p>
                             </div>
                             <div class="guide-item">
-                                <h4>🚢 Logistics Trade-offs</h4>
+                                <h4>Logistics Trade-offs</h4>
                                 <ul class="guide-list">
                                     <li><strong>SEA:</strong> Cheapest ($50), cleanest (0.5kg CO2), but very slow (10 days).</li>
                                     <li><strong>RAIL:</strong> Balanced cost ($125), low CO2 (2.5kg), medium speed (5 days).</li>
@@ -192,7 +193,7 @@
                                 </ul>
                             </div>
                             <div class="guide-item">
-                                <h4>☢️ Crisis Handling</h4>
+                                <h4>Crisis Handling</h4>
                                 <p>Clicking <strong>Trigger Suez Jam</strong> simulates a real-world blockade. Sea routes become unavailable for 7 days, forcing you to pivot to expensive Rail/Air routes to meet your deadlines.</p>
                             </div>
                         </div>

dashboard/style.css

@@ -273,7 +273,7 @@ header {
     font-size: 0.85rem;
 }
 
-select {
+select, .qty-select {
     padding: 0.7rem 1rem;
     border-radius: 10px;
     border: 1.5px solid var(--border-tan);
@@ -283,17 +283,27 @@ select {
     color: var(--text-main);
     cursor: pointer;
     transition: all 0.2s ease;
-    min-width: 220px;
     outline: none;
     box-shadow: 0 2px 5px rgba(0,0,0,0.03);
 }
 
-select:hover {
+select {
+    min-width: 220px;
+}
+
+.qty-select {
+    width: 65px;
+    padding: 0.7rem 0.5rem;
+    text-align: center;
+    cursor: text;
+}
+
+select:hover, .qty-select:hover {
     border-color: var(--sage-green);
     box-shadow: 0 4px 10px rgba(0,0,0,0.05);
 }
 
-select:focus {
+select:focus, .qty-select:focus {
     border-color: var(--primary-green);
 }