88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>3D City Sim</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<button id="ui-toggle" title="Toggle Menu">☰</button>
|
|
|
|
<!-- Hidden Input for Loading Games -->
|
|
<input type="file" id="file-load-game" style="display: none;" accept=".json" />
|
|
|
|
<!-- Floating Income Feedback -->
|
|
<div id="income-float"
|
|
style="position:absolute; top:60px; left:220px; color:#6AFF00; font-weight:bold; font-size:20px; opacity:0; transition: all 1s ease-out; z-index:90; text-shadow: 3px 3px 5px black;">
|
|
+$0</div>
|
|
|
|
<div id="ui-container">
|
|
<div class="header">
|
|
<h2>Route Planner</h2>
|
|
|
|
<!-- Save/Load System -->
|
|
<div style="display:flex; gap:5px; margin-bottom:10px;">
|
|
<button id="btn-save-game" class="secondary" style="flex:1; font-size:12px;">💾 Save</button>
|
|
<button id="btn-load-game" class="secondary" style="flex:1; font-size:12px;">📂 Load</button>
|
|
</div>
|
|
|
|
<!-- Global Stats -->
|
|
<div
|
|
style="background:#f3f4f6; padding:8px; border-radius:6px; margin-bottom:10px; display:grid; grid-template-columns: 1fr 1fr; gap:5px; font-size:13px;">
|
|
<div style="color:#2563EB">Budget: <strong id="val-budget">$1,000,000</strong></div>
|
|
<div>Day: <strong id="val-day">1</strong></div>
|
|
<div style="grid-column: span 2; border-top:1px solid #ddd; margin-top:4px; padding-top:4px;">
|
|
Total Daily Riders: <strong id="val-riders">0</strong>
|
|
</div>
|
|
<div style="color:#D97706">Approval: <strong id="val-approval">50%</strong></div>
|
|
|
|
</div>
|
|
|
|
<p style="font-size:12px; color:#666; margin-bottom:5px;">Left Click: Add Point | Drag: Move</p>
|
|
<select id="view-mode"
|
|
style="width:100%; padding:6px; border-radius:4px; border:1px solid #ccc; background:white; font-size:13px; cursor:pointer;">
|
|
<option value="none">View: Standard</option>
|
|
<option value="zoning">View: Zoning Density</option>
|
|
<option value="approval">View: Transit Coverage</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="ui-main-menu">
|
|
<div class="section">
|
|
<button id="btn-create-route" class="primary"
|
|
style="width:100%; padding: 12px; margin-bottom: 15px; font-weight:bold;">
|
|
+ Create New Route
|
|
</button>
|
|
<h3>Active Routes</h3>
|
|
<ul id="route-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DRAFTING STATE (Hidden by default) -->
|
|
<div id="ui-draft-menu" style="display:none;">
|
|
<div class="section" style="border: 2px solid #2563EB; padding: 10px; border-radius: 6px; background: #eff6ff;">
|
|
<h3 style="margin-top:0; color:#2563EB;">Route Planner</h3>
|
|
<p style="font-size:12px; color:#666; margin-bottom:5px;">Left Click: Add Point | Drag: Move</p>
|
|
|
|
<div class="stat-row"><span>Length:</span> <span id="current-length">0 m</span></div>
|
|
<div class="stat-row"><span>Cost:</span> <span id="current-cost" style="color:#ef4444">$0</span></div>
|
|
<div class="stat-row"><span>Est. Riders:</span> <span id="current-riders" style="color:#10B981">0 / day</span>
|
|
</div>
|
|
|
|
<div class="button-row">
|
|
<button id="btn-save" class="primary">Build Route</button>
|
|
<button id="btn-discard" class="danger">Discard / Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
|
|
</html>
|