<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MechBase PLC</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Segoe+UI:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<!-- ═══ Ribbon Bar ═══ -->
<header class="ribbon">
<div class="ribbon-brand">
<h1>MechBase <span class="ver">PLC</span></h1>
<span class="ribbon-subtitle">Logix5000 Ladder Logic</span>
</div>
<div class="ribbon-controls">
<div class="status-badge">
<span class="status-dot" id="statusDot"></span>
<span class="status-label" id="statusText">STOP</span>
</div>
<span class="scan-info" id="scanCount">Scan: 0 ms</span>
<button id="btnRun" class="ribbon-btn run-btn" onclick="toggleRun()">▶ RUN</button>
<button class="ribbon-btn" onclick="resetPLC()">RESET</button>
<button class="ribbon-btn" onclick="loadTemplate()">Templates</button>
<div class="toolbar-sep"></div>
<button class="ribbon-btn" onclick="showL5xImport()" style="background:#1a6dd4;color:#fff;">⬇ Import L5X</button>
</div>
</header>
<!-- ═══ Instruction Palette (draggable) ═══ -->
<nav class="palette" id="palette">
<div class="palette-group">
<span class="palette-label">CONTACTS</span>
<div class="palette-item" draggable="true" data-type="XIC" title="Examine If Closed">| |</div>
<div class="palette-item" draggable="true" data-type="XIO" title="Examine If Open">|/|</div>
<div class="palette-item" draggable="true" data-type="Rising" title="One-Shot Rising">|↑|</div>
<div class="palette-item" draggable="true" data-type="Falling" title="One-Shot Falling">|↓|</div>
</div>
<div class="palette-group">
<span class="palette-label">OUTPUTS</span>
<div class="palette-item output" draggable="true" data-type="OTE" title="Output Energize">( )</div>
<div class="palette-item output" draggable="true" data-type="OTL" title="Output Latch">(L)</div>
<div class="palette-item output" draggable="true" data-type="OTU" title="Output Unlatch">(U)</div>
</div>
<div class="palette-group">
<span class="palette-label">TIMER</span>
<div class="palette-item timer" draggable="true" data-type="TON" title="On-Delay Timer">TON</div>
<div class="palette-item timer" draggable="true" data-type="TOF" title="Off-Delay Timer">TOF</div>
<div class="palette-item timer" draggable="true" data-type="TP" title="Pulse Timer">TP</div>
</div>
<div class="palette-group">
<span class="palette-label">COUNTER</span>
<div class="palette-item counter" draggable="true" data-type="CTU" title="Count Up">CTU</div>
<div class="palette-item counter" draggable="true" data-type="CTD" title="Count Down">CTD</div>
</div>
<div class="palette-group">
<span class="palette-label">COMPARE</span>
<div class="palette-item compare" draggable="true" data-type="EQU">EQU</div>
<div class="palette-item compare" draggable="true" data-type="GRT">GRT</div>
<div class="palette-item compare" draggable="true" data-type="LES">LES</div>
</div>
<div class="palette-group">
<span class="palette-label">MATH / DATA</span>
<div class="palette-item math" draggable="true" data-type="ADD">ADD</div>
<div class="palette-item math" draggable="true" data-type="SUB">SUB</div>
<div class="palette-item math" draggable="true" data-type="MUL">MUL</div>
<div class="palette-item math" draggable="true" data-type="DIV">DIV</div>
<div class="palette-item data" draggable="true" data-type="MOV">MOV</div>
</div>
<div class="palette-group">
<span class="palette-label">CONTROL</span>
<div class="palette-item control" draggable="true" data-type="RES">RES</div>
</div>
</nav>
<!-- ═══ Main Layout ═══ -->
<div class="workspace">
<!-- ── Left: Project Tree ── -->
<aside class="project-tree" id="projectTree">
<div class="tree-header">Controller</div>
<div class="tree-item" onclick="scrollToNetwork(0)">
<span class="tree-icon">⎓</span> Ladder Logic
</div>
<div class="tree-nets" id="treeNets"></div>
<div class="tree-actions">
<button class="tree-btn" onclick="addNetwork()">+ Network</button>
</div>
</aside>
<!-- ── Center: Ladder Canvas ── -->
<main class="ladder-area">
<div class="ladder-toolbar">
<span class="ladder-toolbar-label">Rung Operations</span>
<button class="ladder-btn" onclick="addRungToSelected()">+ Rung</button>
<button class="ladder-btn branch-btn" onclick="addBranchToSelected()">+ Branch</button>
<div class="toolbar-sep"></div>
<button class="ladder-btn" onclick="clearProgram()">Clear All</button>
</div>
<div class="canvas-wrapper" id="canvasWrapper">
<canvas id="ladderCanvas"></canvas>
</div>
</main>
<!-- ── Right: I/O Monitor ── -->
<aside class="io-monitor">
<div class="io-section">
<h3>INPUTS</h3>
<div id="ioInputs"></div>
</div>
<div class="io-section">
<h3>OUTPUTS</h3>
<div id="ioOutputs"></div>
</div>
<div class="io-section">
<h3>INTERNAL BITS</h3>
<div id="ioMemory"></div>
</div>
<div class="io-section">
<h3>INT MEMORY</h3>
<div id="ioIntMem"></div>
</div>
<div class="io-section">
<h3>TIMERS</h3>
<div id="ioTimers"></div>
</div>
<div class="io-section">
<h3>COUNTERS</h3>
<div id="ioCounters"></div>
</div>
</aside>
</div>
<!-- ═══ Element Edit Dialog ═══ -->
<div class="dialog-overlay" id="editDialog">
<div class="dialog">
<div class="dialog-header">
<h2>Edit Instruction</h2>
<button class="dialog-close" onclick="closeEditDialog()">✕</button>
</div>
<div class="dialog-body">
<div class="form-group">
<label>Type</label>
<select id="editType"></select>
</div>
<div class="form-group">
<label>Tag Name</label>
<input type="text" id="editTag" placeholder="e.g. Motor_Start">
</div>
<div class="form-group" id="editValueGroup">
<label>Value / Preset</label>
<input type="text" id="editValue" placeholder="Value">
</div>
<div class="form-group" id="editValue2Group" style="display:none;">
<label>Value 2</label>
<input type="text" id="editValue2" placeholder="High limit">
</div>
<div class="form-group" id="editExpressionGroup" style="display:none;">
<label>Expression</label>
<input type="text" id="editExpression" placeholder="e.g. N10 = N0 + N1">
</div>
</div>
<div class="dialog-footer">
<button class="dialog-btn cancel" onclick="closeEditDialog()">Cancel</button>
<button class="dialog-btn delete" onclick="deleteSelectedElement()">Delete</button>
<button class="dialog-btn save" onclick="saveEdit()">Save</button>
</div>
</div>
</div>
<!-- ═══ Add Element Dialog ═══ -->
<div class="dialog-overlay" id="addDialog">
<div class="dialog">
<div class="dialog-header">
<h2>Add Element</h2>
<button class="dialog-close" onclick="closeAddDialog()">✕</button>
</div>
<div class="dialog-body">
<div class="form-group">
<label>Type</label>
<select id="addType"></select>
</div>
<div class="form-group">
<label>Tag Name</label>
<input type="text" id="addTag" placeholder="e.g. I0">
</div>
<div class="form-group" id="addValueGroup">
<label>Value / Preset</label>
<input type="text" id="addValue" placeholder="Value">
</div>
</div>
<div class="dialog-footer">
<button class="dialog-btn cancel" onclick="closeAddDialog()">Cancel</button>
<button class="dialog-btn save" onclick="confirmAdd()">Add</button>
</div>
</div>
</div>
<!-- ═══ Template Dialog ═══ -->
<div class="dialog-overlay" id="templateDialog">
<div class="dialog">
<div class="dialog-header">
<h2>Load Template</h2>
<button class="dialog-close" onclick="closeTemplateDialog()">✕</button>
</div>
<div id="templateList"></div>
</div>
</div>
<!-- ═══ L5X Import Dialog ═══ -->
<div class="dialog-overlay" id="l5xImportDialog">
<div class="dialog" style="min-width:420px;">
<div class="dialog-header">
<h2>Import L5X Project</h2>
<button class="dialog-close" onclick="closeL5xImport()">✕</button>
</div>
<div class="dialog-body">
<div class="form-group">
<label>Select File</label>
<select id="l5xFileSelect" onchange="loadL5xRoutines()">
<option value="">— Loading files...</option>
</select>
</div>
<div class="form-group">
<label>Select Routine</label>
<select id="l5xRoutineSelect">
<option value="">— Select a file first</option>
</select>
</div>
<div id="l5xInfo" style="font-size:11px;color:#666;margin-top:8px;"></div>
</div>
<div class="dialog-footer">
<button class="dialog-btn cancel" onclick="closeL5xImport()">Cancel</button>
<button class="dialog-btn save" onclick="confirmL5xImport()">Import</button>
</div>
</div>
</div>
<script src="/static/ladder.js"></script>
</body>
</html>