LiteCodeBox/index.html at master · MuGrahiman/LiteCodeBox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="styles.css" />
		<title>Lite Code Box</title>
		<link
			rel="shortcut icon"
			href="https://res.cloudinary.com/my-images-env/image/upload/v1775751702/ox0cqdgwdeww20z5y8ga.png"
			type="image/x-icon" />
	</head>
	<body>
		<header>
			<div class="container row">
				<div class="brand">
					<div class="logo"></div>

					<div class="title">Lite Code Box</div>
				</div>

				<div class="row">
					<button class="btn secondary" id="saveBtn" title="Save work locally">
						<span>Save</span>
					</button>
					<button class="btn secondary" id="loadBtn" title="Load work file">
						<span>Load</span>
					</button>
					<input id="openFile" type="file" accept="application/json" hidden />
				</div>
			</div>
		</header>
		<main>
			<!-- Left panel: Task description and settings -->
			<aside class="card panel stack">
				<h2>Task / Assignment</h2>

				<textarea
					id="assignment"
					class="text"
					placeholder="Write the task description here..."></textarea>

				<div class="stack">
					<label for="testArea"
						>Validation tests (JavaScript only – optional)</label
					>
					<textarea
						id="testArea"
						class="text"
						placeholder="Write simple tests to append after the student's code to check the solution."></textarea>
				</div>

				<div class="muted">
					Tip: <span class="kbd">Ctrl</span> + <span class="kbd">S</span> to
					save, <span class="kbd">Ctrl</span> +
					<span class="kbd">Enter</span> to run.
				</div>
			</aside>
			<!-- Middle: Editors and preview -->
			<section class="stack" id="web-only">
				<div id="webEditors" class="stack card panel">
					<div class="row">
						<h2>HTML / CSS / JS</h2>
						<div class="row">
							<button class="btn ok" id="runWeb">Run</button>
							<button class="btn secondary" id="openPreview">
								Open preview in window
							</button>
						</div>
					</div>

					<div
						class="tabs"
						id="webTabs"
						role="tablist"
						aria-label="Web editors">
						<button
							class="tab active"
							role="tab"
							aria-selected="true"
							tabindex="0"
							data-pane="html">
							HTML
						</button>
						<button
							class="tab"
							role="tab"
							aria-selected="false"
							tabindex="-1"
							data-pane="css">
							CSS
						</button>
						<button
							class="tab"
							role="tab"
							aria-selected="false"
							tabindex="-1"
							data-pane="js">
							JavaScript
						</button>
					</div>

					<!-- Link each editor to a clear panel name -->
					<div class="editor-wrap" data-pane="html">
						<div id="ed_html" class="editor"></div>
					</div>
					<div class="editor-wrap" data-pane="css" hidden>
						<div id="ed_css" class="editor"></div>
					</div>
					<div class="editor-wrap" data-pane="js" hidden>
						<div id="ed_js" class="editor"></div>
					</div>

					<div class="stack">
						<h3>Preview</h3>
						<iframe
							id="preview"
							class="preview"
							sandbox="allow-scripts allow-same-origin allow-modals"></iframe>
					</div>
				</div>
			</section>
			<!-- Right: Output and log -->
			<aside class="card panel stack">
				<h2>Output</h2>
				<div id="output" class="out" aria-live="polite"></div>
				<div class="row">
					<button class="btn warn" id="runTests">Run with tests</button>
					<button class="btn secondary" id="clearOut">Clear log</button>
				</div>
				<h3>Notes</h3>
				<ul class="muted" style="margin: 0 0 8px 0; padding-inline-start: 18px">
					<li>Everything runs inside the browser in a sandbox.</li>
					<li>You can save the work as a JSON file and restore it.</li>
				</ul>
			</aside>
		</main>
		<div class="footer">&copy; 2026 Lite Code Box — All rights reserved</div>
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3/ace.js"
			integrity="sha512-T2otaV2NuxAJAOCoj8ijyy+eAAadZlpvdLmakrIGVFbBkthgIFqLTXd+T8Z+S+kf4V7Ib5+6f6r4D4IdS9Ey4A=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
			onerror="
				(function () {
					var s = document.createElement('script');
					s.src =
						'https://cdn.jsdelivr.net/npm/ace-builds@1.43.2/src-min/ace.js';
					document.head.appendChild(s);
				})()
			"></script>

			<script src=https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js></script>


			<script type="module" src="script.js"></script>

	</body>
</html>