Spaces:
Sleeping
Sleeping
| <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> | |