-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (79 loc) · 2.95 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Etch-a-Sketch</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js" defer></script>
</head>
<body>
<div class="app-div">
<div class="app-cols-div">
<div class="app-left-div">
<div class="selects-div">
<input id="primary-color" class="select-color" type="color" value="#000000">
<input id="secondary-color" class="select-color" type="color" value="#ffffff">
<div id="select-pen" class="select-card" onclick="selectPen()">[P]en</div>
<div id="select-eraser" class="select-card" onclick="selectEraser()">[E]raser</div>
<div id="select-rgb" class="select-card" onclick="selectRGB()">[R]GB</div>
</div>
</div>
<div class="app-center-div">
<div class="grid-div"></div>
<div class="slider-div">
<div class="slidecontainer">
<input
type="range" class="slider" oninput="changeGridNum(this.value)"
min="1" max="100" value="16"
>
</div>
<span id="grid-num-display"></span>
</div>
</div>
<div class="app-right-div">
<div class="ctrls-div">
<div id="ctrl-grid" class="ctrl-card" onclick="toggleGrid(this)">[G]rid</div>
<div id="ctrl-lock" class="ctrl-card" onclick="toggleLock(this)">[L]ock</div>
<div id="ctrl-clear" class="ctrl-card" onclick="selectClear()">Clear</div>
</div>
</div>
</div>
</div>
<div class="right-div">
<h1>Etch-a-Sketch</h1>
<p>
This drawing app features drawing on a default 16x16 grid totaling over
420 pixels. This grid is adjustable from 1x1 to 100x100 through the green
slider below. To the left of the grid are the:<br>
<br>
<b>Primary and Secondary Color Pickers:</b> An HTML color picker
pops up upon clicking<br>
<b>[P]en:</b> Applies the selected primary color on the selected grid cell<br>
<b>[E]raser:</b> Colors the selected grid cell with white<br>
<b>[R]GB:</b> Each pass on the grid cell colors it with a random RGB primary color,
increasing darkness each time until it goes to black<br>
<br>
And to the right:<br>
<br>
<b>[G]rid:</b> Toggles the grid on/off<br>
<b>[L]ock:</b> Locks the grid dimensions<br>
<b>Clear:</b> Clears the grid<br>
<br>
...
<a target="_blank" href="https://github.com/Numbers00/odin-etch-a-sketch">
Github
</a>
</p>
<h2>Controls:</h2>
<p><b>Color Pickers Switch:</b> 0</p>
<p><b>Pen:</b> P,1</p>
<p><b>Eraser:</b> E,2</p>
<p><b>RGB:</b> R,3</p>
<p><b>Grid:</b> G,4</p>
<p><b>Lock:</b> L,5</p>
<p><b>Clear:</b> Can only be manually clicked*</p>
</div>
</body>
</html>