-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (171 loc) · 6.06 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
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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" />
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="res/icons/paint-brush.png" type="image/x-icon" />
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script
async
defer
src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"
></script>
<script
async
defer
src="https://cdn.rawgit.com/eligrey/FileSaver.js/5ed507ef8aa53d8ecfea96d96bc7214cd2476fd2/FileSaver.min.js"
></script>
<script src="script.js" defer></script>
<title>Etch-A-Sketch</title>
</head>
<body>
<div id="main-container" class="vflex">
<div class="header hflex">
<div class="toolbar hflex">
<div class="canvas-controls-column vflex">
<label class="bold">Canvas Controls</label>
<div class="tooltip">
<button id="resize-button" class="tooltip">Resize</button>
<span class="tooltiptext">
Specify a new pixel grid dimensions
</span>
</div>
<div class="tooltip">
<button id="clear-button" class="tooltip">Clear</button>
<span class="tooltiptext">
Removes all brush strokes from the canvas
</span>
</div>
<div class="tooltip">
<button id="save-button" class="tooltip">Save</button>
<span class="tooltiptext">
Save the canvas to your computer as an SVG
</span>
</div>
<div class="tooltip">
<button id="play-pause-button" class="tooltip">Play/Pause</button>
<span class="tooltiptext">
Plays/Pauses the pattern if the background is a Shader
</span>
</div>
</div>
<div class="options-column vflex">
<label class="bold">Options</label>
<div class="options hflex">
<div class="left vflex">
<input id="cursor-visibility-switch" type="checkbox" />
<input id="solid-background-switch" type="checkbox" />
</div>
<div class="right vflex">
<p>Show cursor on canvas</p>
<p>Solid-color background</p>
<div class="tooltip">
<input id="solid-background-picker" type="color" />
<span class="tooltiptext">Solid background color picker</span>
</div>
</div>
</div>
</div>
<div class="brush-controls-column vflex">
<label class="bold">Brush Controls</label>
<div class="brush-controls hflex">
<div class="left vflex">
<label id="brush-opacity-data" class="value-display"></label>
<label id="brush-color-data" class="value-display"></label>
</div>
<div class="right vflex">
<div class="tooltip">
<input
id="brush-opacity-range"
type="range"
name="Brush Opacity"
/>
<span class="tooltiptext">
Brush Opacity (Value Range: 0.00 - 1.00)
</span>
</div>
<div class="tooltip">
<input
id="brush-color-picker"
type="color"
name="Brush Color"
/>
<span class="tooltiptext">Brush Color</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="canvas-container vflex">
<!-- Grid Canvas goes here -->
</div>
<div class="footnotes vflex">
<div class="github-buttons hflex">
<a
class="github-button"
href="https://github.com/A-G-D/TOP-etch-a-sketch"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star A-G-D/TOP-etch-a-sketch on GitHub"
>
Star
</a>
<a
class="github-button"
href="https://github.com/A-G-D"
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-size="large"
data-show-count="true"
aria-label="Follow @A-G-D on GitHub"
>
Follow @A-G-D
</a>
</div>
<div class="vflex">
<p>
Credits to the original author of the Shader pattern.
<a href="https://www.shadertoy.com/view/NdKXzw">(Source)</a>
</p>
<p>
Webpage icon made by
<a href="https://www.flaticon.com/authors/freepik" title="Freepik">
Freepik
</a>
from
<a href="https://www.flaticon.com/" title="Flaticon">
www.flaticon.com
</a>
</p>
</div>
</div>
<div class="footer hflex">
<p>Copyright © 2021 A-G-D</p>
</div>
</div>
<div class="modal">
<div class="modalbox vflex">
<div class="header hflex">
<label class="title bold">Resize Canvas</label>
</div>
<div class="body hflex">
<div class="left vflex">
<label class="rows-label">Rows</label>
<label class="columns-label">Columns</label>
</div>
<div class="right vflex">
<input class="rows-input" type="number" min="16" max="128" />
<input class="columns-input" type="number" min="16" max="128" />
</div>
</div>
<div class="footer hflex">
<button class="resize-button">Resize</button>
</div>
</div>
</div>
</body>
</html>