104 lines
3.4 KiB
HTML
104 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Learn CircuitPython</title>
|
|
|
|
<script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs/loader.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Top Bar with Heading and Buttons -->
|
|
<header>
|
|
<!-- <div class="header-inner">
|
|
<div>
|
|
<h1>Learn CircuitPython</h1>
|
|
<p>Write code, simulate physics, and see instant output</p>
|
|
</div>
|
|
</div> -->
|
|
</header>
|
|
|
|
|
|
<!-- New Lesson Box / Instructions Area -->
|
|
<section id="lesson-box">
|
|
|
|
<div class="dropdown-row content-width">
|
|
<div class="dropdown-group">
|
|
<div class="dropdown-title">Basics</div>
|
|
<select id="lesson-select"></select>
|
|
</div>
|
|
|
|
<div class="dropdown-group">
|
|
<div class="dropdown-title">Robot</div>
|
|
<select id="robot-select"></select>
|
|
</div>
|
|
|
|
<div class="dropdown-group">
|
|
<div class="dropdown-title">Challenges</div>
|
|
<select id="challenge-select"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-width" style="display: flex; gap: 20px; align-items: flex-start;">
|
|
|
|
<!-- 📘 Lesson content area (3/4 width) -->
|
|
<div style="flex: 3;">
|
|
<h2 id="lesson-title">Lesson Title</h2>
|
|
<p id="lesson-content">Lesson Content</p>
|
|
|
|
<div class="lesson-nav">
|
|
<button id="prev-lesson">← Prev</button>
|
|
<div id="lesson-status" aria-live="polite"
|
|
style="align-self: center; font-weight: 600; color: green; min-width: 120px; text-align: center;">
|
|
<!-- status text appears here -->
|
|
</div>
|
|
<button id="next-lesson">Next →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ✅ Objectives (1/4 width) -->
|
|
<aside style="flex: 1;">
|
|
<h2>Objectives</h2>
|
|
<div id="objectives-list">
|
|
<!-- Populated via JavaScript -->
|
|
</div>
|
|
</aside>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
<div class="container">
|
|
<div id="monaco-editor"></div>
|
|
<div class="right-side">
|
|
<canvas id="gameCanvas"></canvas>
|
|
<div id="button-bar" style="display: flex; justify-content: space-between; padding: 8px;">
|
|
<div class="left-buttons">
|
|
<button id="compile-button">Compile & Run</button>
|
|
</div>
|
|
<div class="right-buttons">
|
|
<button id="pause-button">Pause</button>
|
|
<button id="reset-button">Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="console"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module">
|
|
import { initializeMonaco } from './game.js';
|
|
initializeMonaco();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |