79 lines
3.5 KiB
HTML
79 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>Scale Map Maker</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<button id="sidebarToggle" class="sidebar-toggle">☰</button>
|
|
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
<div class="toolbar">
|
|
<div class="tool-section">
|
|
<h3>Tools</h3>
|
|
<button id="selectTool" class="tool-btn active">Select</button>
|
|
<button id="moveTool" class="tool-btn">Move</button>
|
|
<button id="deleteTool" class="tool-btn">Delete</button>
|
|
<button id="lineTool" class="tool-btn">Draw Line</button>
|
|
<button id="nodeTool" class="tool-btn">Add Node</button>
|
|
<button id="switchTool" class="tool-btn">Add Switch</button>
|
|
<button id="rulerTool" class="tool-btn">Ruler</button>
|
|
<button id="sumTool" class="tool-btn">Sum</button>
|
|
</div>
|
|
|
|
<div class="tool-section">
|
|
<h3>Line Instructions</h3>
|
|
<p style="font-size: 11px; color: #ecf0f1; line-height: 1.4;">
|
|
Click to add points.<br>
|
|
Right-click to finish.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="tool-section">
|
|
<h3>Node Color</h3>
|
|
<div class="color-palette">
|
|
<button class="color-btn active" data-color="#FF0000" style="background: #FF0000;"></button>
|
|
<button class="color-btn" data-color="#00FF00" style="background: #00FF00;"></button>
|
|
<button class="color-btn" data-color="#0000FF" style="background: #0000FF;"></button>
|
|
<button class="color-btn" data-color="#FFFF00" style="background: #FFFF00;"></button>
|
|
<button class="color-btn" data-color="#FF00FF" style="background: #FF00FF;"></button>
|
|
<button class="color-btn" data-color="#00FFFF" style="background: #00FFFF;"></button>
|
|
<button class="color-btn" data-color="#FFA500" style="background: #FFA500;"></button>
|
|
<button class="color-btn" data-color="#800080" style="background: #800080;"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tool-section">
|
|
<h3>Node Count</h3>
|
|
<div id="nodeCount"></div>
|
|
</div>
|
|
|
|
<div class="tool-section">
|
|
<h3>Map View</h3>
|
|
<button id="satelliteToggle" class="tool-btn">Satellite View</button>
|
|
</div>
|
|
|
|
<div class="tool-section">
|
|
<h3>Actions</h3>
|
|
<button id="exportBtn" class="tool-btn">Export</button>
|
|
<button id="importBtn" class="tool-btn">Import</button>
|
|
<button id="clearBtn" class="action-btn">Clear All</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="map-container">
|
|
<div id="map"></div>
|
|
<div id="rulerDisplay" class="ruler-display"></div>
|
|
<div id="sumDisplay" class="sum-display"></div>
|
|
<div id="statsDisplay" class="stats-display"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|