Spaces:
Sleeping
Sleeping
File size: 11,155 Bytes
ab38db6 3358e03 ab38db6 7ccc70d fbf9261 5e65639 7ccc70d 3358e03 7ccc70d 5e65639 3358e03 5e65639 ab38db6 dec8599 47e37f8 fbf9261 47e37f8 fbf9261 47e37f8 fbf9261 47e37f8 5f4d425 47e37f8 6db75c6 47e37f8 82eba81 ab38db6 47e37f8 7326d3c 47e37f8 fbf9261 47e37f8 eaea692 47e37f8 6db75c6 47e37f8 82eba81 7326d3c 04438ae 47e37f8 04438ae 47e37f8 fbf9261 47e37f8 eaea692 47e37f8 6db75c6 47e37f8 82eba81 7326d3c 04438ae 47e37f8 04438ae 47e37f8 82eba81 47e37f8 fbf9261 47e37f8 82eba81 dec8599 0419cad dec8599 87e9783 dec8599 47e37f8 ab38db6 3358e03 b9f25ba ab38db6 3358e03 ab38db6 3358e03 b9f25ba 3358e03 b9f25ba 3358e03 b9f25ba 3358e03 b9f25ba 3358e03 b9f25ba 3358e03 fbf9261 3358e03 fbf9261 3358e03 fbf9261 3358e03 241a322 3358e03 fbf9261 3358e03 241a322 3358e03 ab38db6 3358e03 ab38db6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetZero-Nav Dashboard</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<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>
</header>
<!-- Interactive Walkthrough -->
<div id="tutorial-modal" class="modal-overlay hidden">
<div class="modal-card">
<div id="tutorial-step" class="tutorial-content">
<!-- Dynamic Content -->
</div>
<div class="modal-footer">
<button id="tut-prev" class="btn btn-outline small hidden">Back</button>
<button id="tut-next" class="btn btn-primary small">Next</button>
<button id="tut-close" class="btn btn-ghost small">Skip Tour</button>
</div>
</div>
</div>
<main>
<div class="main-grid">
<section class="control-panel card">
<h3>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">
<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 ($10, 10 days, 0.1kg)</option>
<option value="rail">RAIL ($25, 5 days, 0.5kg)</option>
<option value="air">AIR ($50, 2 days, 2.0kg)</option>
</select>
</div>
<div class="op-actions">
<button onclick="execute('order_parts', event)" class="btn btn-primary">Order</button>
</div>
</div>
</div>
<hr class="divider">
<!-- Section 2: Manufacturing -->
<div id="section-produce" class="op-section">
<h4>Manufacturing</h4>
<div class="op-row">
<div class="op-inputs">
<select id="product-select">
<option value="EcoPhone">Produce EcoPhone</option>
<option value="GreenTab">Produce GreenTab</option>
</select>
<input type="number" id="produce-qty-input" value="1" min="1" max="100" class="qty-select">
</div>
<div class="op-actions">
<button onclick="execute('produce', event)" class="btn btn-primary">Start Run</button>
</div>
</div>
</div>
<hr class="divider">
<!-- Section 3: ESG / Offsetting -->
<div id="section-offset" class="op-section">
<h4>ESG Strategy</h4>
<div class="op-row">
<div class="op-inputs" style="align-items: center;">
<span class="op-text" style="font-size: 0.95rem; font-weight: 500;">Carbon Offset Purchase</span>
<input type="number" id="offset-qty-input" value="10" min="1" max="500" step="10" class="qty-select" style="width: 80px;">
<span class="op-text" style="font-size: 0.85rem; color: var(--text-muted);">units</span>
</div>
<div class="op-actions">
<button onclick="execute('offset', event)" class="btn btn-primary">Buy Offset</button>
</div>
</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>
<div class="news-content">
<div class="news-label">EMERGENCY ALERT</div>
<div id="news-text"></div>
</div>
</div>
</section>
<!-- Right Column: Orders + History -->
<div class="right-col">
<section class="shipment-cart-section">
<div class="card full-width">
<h3>Your Orders</h3>
<div id="cart-container" class="cart-list">
</div>
</div>
</section>
<section class="history-section">
<div class="card full-width" style="display: flex; flex-direction: column; max-height: 420px;">
<h3>Command History</h3>
<div class="history-list" id="activity-log" style="overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; padding-right: 0.5rem; flex: 1;">
<!-- items arrive here -->
</div>
</div>
</section>
</div>
</div>
<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>
<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>
<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 class="inv-item">
<span class="label">Sensors</span>
<span id="sensors-count" class="count">0</span>
</div>
</div>
</div>
</section>
<section class="details-section">
<div class="card full-width">
<h3>Active Logistics Stream</h3>
<div id="shipments-container" class="shipment-list">
<p class="placeholder">Awaiting shipment data...</p>
</div>
</div>
</section>
<section class="guide-section">
<div class="card full-width mission-card">
<h3>Mission Briefing (Operator's Manual)</h3>
<div class="guide-content">
<div class="guide-grid">
<div class="guide-item">
<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>
<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>
<li><strong>AIR:</strong> Expensive ($250), high CO2 (10kg), but ultra-fast (2 days).</li>
</ul>
</div>
<div class="guide-item">
<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>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 NetZero-Nav | Eco-Resilient Supply Chain Intelligence</p>
</footer>
</div>
<script src="app.js"></script>
</body>
</html>
|