81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ESP32-S3 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">ESP32-S3 Blockly</span>
|
|
</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-save-workspace" title="Save Blockly workspace to device" disabled>
|
|
<span class="icon">💾</span> Save WS
|
|
</button>
|
|
<button id="btn-load-workspace" title="Load Blockly workspace from device" disabled>
|
|
<span class="icon">📂</span> Load WS
|
|
</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>
|
|
|
|
<!-- 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>
|