172 lines
6.4 KiB
HTML
172 lines
6.4 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="Toggle projects panel">
|
|
<span class="icon">📂</span> Projects
|
|
</button>
|
|
<button id="btn-addons" title="Manage addons">
|
|
<span class="icon">🔌</span> Addons
|
|
</button>
|
|
<span id="connection-status" class="status-disconnected">Disconnected</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="workspace-container">
|
|
<!-- Top row: Blockly + Projects sidebar -->
|
|
<div id="top-area">
|
|
<div id="blockly-area">
|
|
<div id="blockly-div"></div>
|
|
</div>
|
|
|
|
<!-- Projects right sidebar -->
|
|
<div id="projects-panel" class="ide-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">Projects</span>
|
|
<button class="panel-toggle" data-panel="projects-panel" title="Toggle panel">◂</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<!-- Tabs: Browser / Device -->
|
|
<div class="proj-tabs">
|
|
<button class="proj-tab active" data-tab="browser">Browser</button>
|
|
<button class="proj-tab" data-tab="device">Device</button>
|
|
</div>
|
|
|
|
<!-- Browser tab -->
|
|
<div class="proj-tab-content" id="proj-tab-browser">
|
|
<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>
|
|
|
|
<!-- Device tab -->
|
|
<div class="proj-tab-content hidden" id="proj-tab-device">
|
|
<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>
|
|
|
|
<!-- Bottom panels: code preview + serial terminal -->
|
|
<div id="bottom-panels">
|
|
<div id="resize-handle-h" class="resize-handle horizontal"></div>
|
|
<div id="code-panel" class="ide-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">Generated Code</span>
|
|
<button class="panel-toggle" data-panel="code-panel" title="Toggle panel">▾</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<pre id="code-preview"><code id="code-output"></code></pre>
|
|
</div>
|
|
</div>
|
|
<div id="terminal-panel" class="ide-panel">
|
|
<div class="panel-header">
|
|
<span class="panel-title">Serial Terminal</span>
|
|
<button class="panel-toggle" data-panel="terminal-panel" title="Toggle panel">▾</button>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="terminal-output"></div>
|
|
<div id="terminal-input-row">
|
|
<input type="text" id="terminal-input" placeholder="Type command..." disabled />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Send code progress modal (Run / Save) -->
|
|
<div id="send-overlay" class="hidden">
|
|
<div id="send-modal">
|
|
<h3 id="send-modal-title">Sending code to device</h3>
|
|
<div id="send-progress-bar">
|
|
<div id="send-progress-fill"></div>
|
|
</div>
|
|
<span id="send-progress-text">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Addons manager overlay -->
|
|
<div id="addons-overlay" class="hidden">
|
|
<div id="addons-modal">
|
|
<div class="addons-header">
|
|
<h3>Addons</h3>
|
|
<button id="addons-close" title="Close">×</button>
|
|
</div>
|
|
<p class="addons-description">Upload <code>.js</code> addon files to add new toolbox categories. Addons are saved in your browser.</p>
|
|
<div class="addons-upload-row">
|
|
<input type="file" id="addon-file-input" accept=".js" />
|
|
<button id="addon-install-btn">Install</button>
|
|
</div>
|
|
<div id="addon-status" class="addons-status"></div>
|
|
<ul id="addons-list" class="addons-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|