feat: add HTML lessons mode and side-by-side comparison UI

- Add HTML mode support with new validation types (element_exists,
  element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality

src/index.html

@@ -46,8 +46,28 @@
 						<div class="lesson-description" id="lesson-description">Please select a lesson to begin.</div>
 
 						<div class="challenge-container">
-							<div class="preview-area" id="preview-area">
-								<!-- Preview of the challenge will be shown here -->
+							<div class="preview-comparison" id="preview-comparison">
+								<div class="preview-pane preview-student">
+									<div class="preview-header">
+										<span class="preview-label">Your Output</span>
+									</div>
+									<div class="preview-frame" id="preview-area">
+										<!-- Student's preview iframe will be shown here -->
+									</div>
+								</div>
+
+								<div class="preview-pane preview-expected">
+									<div class="preview-header">
+										<span class="preview-label">Expected Result</span>
+									</div>
+									<div class="preview-frame" id="preview-expected">
+										<!-- Expected result iframe will be shown here -->
+									</div>
+								</div>
+
+								<div class="preview-overlay" id="match-overlay">
+									<div class="match-celebration">Perfect Match!</div>
+								</div>
 							</div>
 
 							<div class="editor-container">