125 lines
4.5 KiB
HTML
125 lines
4.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>Blockly IDE</title>
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Top toolbar -->
|
|
<header id="toolbar">
|
|
<div class="toolbar-left">
|
|
<span class="app-title">Blockly IDE</span>
|
|
<label for="device-select" class="device-label">Device</label>
|
|
<select id="device-select" title="Target device (changes code generator and firmware)">
|
|
<option value="esp32s3">ESP32-S3</option>
|
|
<option value="microbit">micro:bit</option>
|
|
<option value="rp2040">RP2040 (Pico)</option>
|
|
</select>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<button id="btn-connect" title="Connect to ESP32 via Web Serial">
|
|
<span class="icon">▶</span> Connect
|
|
</button>
|
|
<button id="btn-flash" title="Flash MicroPython firmware">
|
|
<span class="icon">⚡</span> Flash FW
|
|
</button>
|
|
<button id="btn-run" title="Upload and run code" disabled>
|
|
<span class="icon">▷</span> Run
|
|
</button>
|
|
<button id="btn-stop" title="Stop running code" disabled>
|
|
<span class="icon">■</span> Stop
|
|
</button>
|
|
<button id="btn-save" title="Save code to device as main.py" disabled>
|
|
<span class="icon">💾</span> Save
|
|
</button>
|
|
<button id="btn-projects" title="Open/save projects (browser or device)">
|
|
<span class="icon">📂</span> Projects
|
|
</button>
|
|
<span id="connection-status" class="status-disconnected">Disconnected</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main workspace area -->
|
|
<main id="workspace-container">
|
|
<!-- Blockly editor fills the top area -->
|
|
<div id="blockly-area">
|
|
<div id="blockly-div"></div>
|
|
</div>
|
|
|
|
<!-- Bottom panels: code preview + serial terminal -->
|
|
<div id="bottom-panels">
|
|
<div id="resize-handle-h" class="resize-handle horizontal"></div>
|
|
<div id="code-panel">
|
|
<div class="panel-header">Generated Code</div>
|
|
<pre id="code-preview"><code id="code-output"></code></pre>
|
|
</div>
|
|
<div id="terminal-panel">
|
|
<div class="panel-header">Serial Terminal</div>
|
|
<div id="terminal-output"></div>
|
|
<div id="terminal-input-row">
|
|
<input type="text" id="terminal-input" placeholder="Type command…" disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Projects dialog -->
|
|
<div id="projects-overlay" class="hidden">
|
|
<div id="projects-modal">
|
|
<div class="projects-header">
|
|
<h3>Projects</h3>
|
|
<button id="projects-close">×</button>
|
|
</div>
|
|
<div class="projects-columns">
|
|
<div class="projects-col">
|
|
<h4>Browser</h4>
|
|
<ul class="projects-list" id="browser-list"></ul>
|
|
<div class="projects-actions">
|
|
<div class="projects-name-row">
|
|
<input type="text" id="browser-save-name" placeholder="Project name..." />
|
|
<button id="browser-save-btn">Save</button>
|
|
</div>
|
|
<div class="projects-btn-row">
|
|
<button id="browser-load-btn" disabled>Load</button>
|
|
<button id="browser-delete-btn" class="btn-danger" disabled>Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="projects-col">
|
|
<h4>Device</h4>
|
|
<ul class="projects-list" id="device-list"></ul>
|
|
<div class="projects-actions">
|
|
<div class="projects-name-row">
|
|
<input type="text" id="device-save-name" placeholder="Project name..." />
|
|
<button id="device-save-btn">Save</button>
|
|
</div>
|
|
<div class="projects-btn-row">
|
|
<button id="device-load-btn" disabled>Load</button>
|
|
<button id="device-delete-btn" class="btn-danger" disabled>Delete</button>
|
|
</div>
|
|
</div>
|
|
<div id="device-status" class="projects-note"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash progress overlay -->
|
|
<div id="flash-overlay" class="hidden">
|
|
<div id="flash-modal">
|
|
<h3>Flashing MicroPython Firmware</h3>
|
|
<div id="flash-log"></div>
|
|
<div id="flash-progress-bar">
|
|
<div id="flash-progress-fill"></div>
|
|
</div>
|
|
<span id="flash-progress-text">0%</span>
|
|
<button id="flash-close" class="hidden">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|