1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Mirror Painter - VanillaVerse</ title >
7+ < link rel ="stylesheet " href ="style.css " type ="text/css ">
8+ </ head >
9+ < body >
10+ < div class ="container ">
11+ < header >
12+ < h1 > 🎨 Mirror Painter</ h1 >
13+ < p class ="subtitle "> Draw on the left canvas and watch it mirror in real-time. Match the template to complete each level!</ p >
14+ </ header >
15+
16+ < div class ="game-info ">
17+ < div class ="level-info ">
18+ < div class ="level-title " id ="levelTitle "> Level 1: Vertical Line</ div >
19+ < div class ="level-description " id ="levelDescription "> Draw a straight vertical line</ div >
20+ </ div >
21+ < div class ="match-info ">
22+ < div class ="match-percentage low " id ="matchPercentage "> 0%</ div >
23+ < div class ="encouragement " id ="encouragement "> Start drawing!</ div >
24+ </ div >
25+ </ div >
26+
27+ < div class ="canvas-container ">
28+ < div class ="canvas-wrapper ">
29+ < div class ="canvas-label "> ✏️ Draw Here</ div >
30+ < canvas id ="drawCanvas " width ="400 " height ="400 "> </ canvas >
31+ </ div >
32+ < div class ="canvas-wrapper ">
33+ < div class ="canvas-label "> 🪞 Mirrored Result</ div >
34+ < canvas id ="mirrorCanvas " width ="400 " height ="400 "> </ canvas >
35+ </ div >
36+ </ div >
37+
38+ < div class ="controls ">
39+ < div class ="control-group ">
40+ < label for ="colorPicker "> Color:</ label >
41+ < input type ="color " id ="colorPicker " value ="#2563eb ">
42+ </ div >
43+ < div class ="control-group ">
44+ < label for ="brushSize "> Brush Size:</ label >
45+ < input type ="range " id ="brushSize " min ="2 " max ="10 " value ="4 ">
46+ < span class ="brush-size-value " id ="brushSizeValue "> 4px</ span >
47+ </ div >
48+ < button class ="btn-secondary " id ="clearBtn "> Clear</ button >
49+ < button class ="btn-primary " id ="nextLevelBtn "> Next Level</ button >
50+ </ div >
51+
52+ < div class ="success-message " id ="successMessage ">
53+ 🎉 Perfect! You matched the template!
54+ </ div >
55+
56+ < div class ="completion-message " id ="completionMessage ">
57+ 🏆 Congratulations! You completed all levels!
58+ </ div >
59+ </ div >
60+
61+ <!-- Link to external JavaScript file for educational purposes -->
62+ <!-- This demonstrates separation of concerns: HTML for structure, JS for behavior -->
63+ < script src ="main.js "> </ script >
64+ </ body >
65+ </ html >
0 commit comments