-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (40 loc) · 1.73 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Make your own pixel art!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>
<span class = "redText" style="margin: 10px;">Pixel </span> <span class = "whiteText">Art</span> <span class = "redText">Maker </span>
</h1>
<div id="welcomePage">
<div id="splashGrid"></div>
<div class="centre">
<button class="beginDesign">Begin your design 🪄 </button>
</div>
</div>
<div id="actionPhase">
<h2>Set up a new canvas</h2>
<form id="sizePicker">
<!-- Canvas grid size (pixels):
<input type="number" id="gridSize" name="gridSize" min="10" value="20" max="50"> -->
Height (pixels):
<input type="number" id="inputHeight" name="height" min="1" value="1">
Weigth (pixels):
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" id="setUp" value = "Set up your canvas">
</form>
<h2>Start your design</h2>
<p > Your current pen color: <input type="color" id="colorPicker">. Please click here to reset the existing canvas: <button>Reset</button></p>
<p style="margin-bottom: 2em;"> Note: you can erase color by right-clicking. </p>
<div class='emptyState'>
<p class="emptyStateText">There's no canvas right now. Please create a new canvas under <span style ="font-weight: 700"> Set up a new canvas</span>.<span style="font-style: normal; font-size: 30px; ">☝ </span> </p>
</div>
<table id="pixelCanvas">
</table>
</div>
<script src="designs.js"></script>
</body>
</html>