116 lines
3.1 KiB
HTML
116 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Power System Designer</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<h1>Power System Designer</h1>
|
|
<div class="controls">
|
|
<button id="calculateBtn" class="btn btn-primary">
|
|
Calculate Voltage Drops
|
|
</button>
|
|
<button id="clearBtn" class="btn btn-danger">Clear All</button>
|
|
<button id="exportBtn" class="btn btn-secondary">Export Data</button>
|
|
<button id="importBtn" class="btn btn-secondary">Import Data</button>
|
|
<input
|
|
type="file"
|
|
id="fileInput"
|
|
accept=".json"
|
|
style="display: none"
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<div class="toolbar">
|
|
<div class="toolbar-section">
|
|
<div class="toolbar-label">Objects</div>
|
|
<div class="icon-toolbar">
|
|
<button class="icon-btn" data-type="triangle" title="Transformer">
|
|
<div class="icon-triangle"></div>
|
|
</button>
|
|
<button class="icon-btn" data-type="box" title="Cable Box">
|
|
<div class="icon-box"></div>
|
|
</button>
|
|
<button class="icon-btn" data-type="pole" title="Pole">
|
|
<div class="icon-pole"></div>
|
|
</button>
|
|
<button class="icon-btn" data-type="end" title="End Connection">
|
|
<div class="icon-end"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-section">
|
|
<div class="toolbar-label">Cables</div>
|
|
<div class="icon-toolbar">
|
|
<button
|
|
class="icon-btn"
|
|
data-type="underground"
|
|
title="Underground Cable"
|
|
>
|
|
<div class="icon-underground"></div>
|
|
</button>
|
|
<button
|
|
class="icon-btn"
|
|
data-type="overhead"
|
|
title="Overhead Cable"
|
|
>
|
|
<div class="icon-overhead"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar-section">
|
|
<div class="toolbar-label">Tools</div>
|
|
<div class="icon-toolbar">
|
|
<button
|
|
id="selectBtn"
|
|
class="icon-btn tool-btn active"
|
|
title="Select Mode"
|
|
>
|
|
<div class="icon-select"></div>
|
|
</button>
|
|
<button
|
|
id="deleteBtn"
|
|
class="icon-btn tool-btn"
|
|
title="Delete Mode"
|
|
>
|
|
<div class="icon-delete"></div>
|
|
</button>
|
|
<button
|
|
id="autoArrangeBtn"
|
|
class="icon-btn tool-btn"
|
|
title="Auto Arrange - One Click to Make Everything Look Nice and Tidy"
|
|
>
|
|
<div class="icon-auto-arrange"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-container">
|
|
<canvas id="canvas" width="1200" height="800"></canvas>
|
|
</div>
|
|
|
|
<div class="properties-panel">
|
|
<h3>Properties</h3>
|
|
<div id="objectProperties">
|
|
<p class="no-selection">No object selected</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tooltip moved outside containers to avoid overflow issues -->
|
|
<div id="tooltip" class="tooltip"></div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|