-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
254 lines (242 loc) · 14.9 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Untitled WhiteBoard</title>
<link rel="stylesheet" href="styles/style.css"/>
<link rel="stylesheet" href="./styles/addText.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css"/>
<script src="scripts/canvas.js" defer></script>
<script src="scripts/script.js" defer></script>
<script src="scripts/colorPicker.js" defer></script>
<script src="scripts/pencilBox.js" defer></script>
<script src="./scripts/clear-canvas.js" defer></script>
<script src="./scripts/penbar.js" defer></script>
<script src="./scripts/defbar.js" defer></script>
<script src="scripts/shapebar.js" defer></script>
<script src="scripts/drawShapes.js" defer></script>
<script src="scripts/undoRedo.js" defer></script>
<script src="scripts/multiboard.js" defer></script>
<script src="scripts/slider.js" defer></script>
<script src="scripts/eraserbar.js" defer></script>
<script src="scripts/expand-menu.js" defer></script>
<script src="./scripts/insert-image.js" defer></script>
<script src="./scripts/addText.js" defer></script>
</head>
<body>
<div class="hamburger tooltip">
<div class="ham-icon">
<i class="fas fa-bars"></i>
</div>
<div class="ham-option bg-color tooltip">
<input type="color" id="bg-color-picker"/>
<span class="tooltiptext">Background Color</span>
</div>
<div class="ham-option undo tooltip" id="undo">
<i class="fas fa-undo"></i>
<span class="tooltiptext">Undo (ctrl+Z)</span>
</div>
<div class="ham-option redo tooltip" id="redo">
<i class="fas fa-redo"></i>
<span class="tooltiptext">Redo (ctrl+Y)</span>
</div>
<div class="ham-option download tooltip" id="download">
<i class="fal fa-download"></i>
<span class="tooltiptext">Download Board</span>
</div>
<span class="tooltiptext">Background Color <br> Undo <br> Redo <br> Download Board</span>
</div>
<div class="full-screen">
<i class="fas fa-expand-alt fas-icon-change"></i>
</div>
<canvas id="canvas"></canvas>
<div class="toolbar">
<div class="bar defbar" id="defbar">
<div class="tool tooltip defbarEle" id="pen">
<i class="fas fa-pen"></i>
<span class="tooltiptext">Pen Palette</span>
</div>
<div class="tool tooltip defbarEle" id="text">
<i class="fas fa-font"></i>
<div></div>
<span class="tooltiptext">Insert Text</span>
</div>
<div class="tool tooltip defbarEle" id="image">
<i class="fas fa-image"></i>
<input type="file" id="fileinput" accept = "image/*">
<span class="tooltiptext">Insert Image</span>
</div>
<div class="tool defbarEle tooltip" id="shapes">
<i class="far fa-shapes"></i>
<span class="tooltiptext">Shape Palette</span>
</div>
<div class="tool clear defbarEle tooltip" id="clear-canvasDefbar">
<div class="round">
<i class="fas fa-trash-alt"></i>
</div>
<span class="tooltiptext">Clear All</span>
</div>
</div>
<div class="bar penbar" id="penbar">
<div class="tool penbarEle tooltip" id="goBackPenbar">
<div class="round">
<img src="assets/img/done.svg" class="check" alt="done">
</div>
<span class="tooltiptext" id="tipBack">Go Back</span>
</div>
<div class="tool penbarEle tooltip" id="penOne">
<div class="round">
<svg class="penbar-icon" viewBox="0 0 24 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 48L0 92H23.965L23 48H1Z" fill="red" class="pen-svg-1-col"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2236 92H23.9996L22.9976 48.39H17.2236L17.2236 92Z" fill="#DBDBDB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7999 19.903C20.7589 19.683 20.7099 19.46 20.6569 19.236C20.6289 19.116 20.5969 18.996 20.5659 18.876C20.5419 18.786 20.5199 18.697 20.4949 18.606C20.4459 18.43 20.3949 18.252 20.3399 18.074L20.3329 18.054C19.5059 15.357 18.0389 12.562 16.5229 10.006L16.4999 9.966V9.968C16.0899 9.278 15.6789 8.605 15.2749 7.957C13.0239 4.343 12.3839 1 12.3839 1H11.9999L11.9999 39.988H16.1639C16.1631 39.992 16.1624 39.996 16.1619 40H18.5489L19.8269 31.612C19.8809 31.08 19.9429 30.549 20.0109 30.019L20.0329 29.851C20.1606 28.8692 20.312 27.8906 20.4869 26.916C20.7139 25.66 20.9569 24.163 20.9939 22.636C21.0179 21.721 20.9689 20.795 20.8009 19.903H20.7999ZM10.6849 1C10.6849 1 9.97687 4.344 7.72487 7.959C6.81287 9.425 5.85687 11.015 4.99087 12.651C3.72087 15.051 2.64587 17.551 2.19987 19.909C1.74987 22.286 2.14987 24.908 2.51287 26.912C2.79281 28.4687 3.01297 30.0355 3.17287 31.609L4.45087 40H10.9999L10.9999 1H10.6849ZM0.999867 45L0.963867 49.483C4.32787 49.816 8.20087 50 12.0929 50C15.9859 50 19.6719 49.816 23.0369 49.483L22.9999 45H0.999867Z" fill="#969696"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29688 20.8862C9.29701 20.2895 9.53419 19.7172 9.95624 19.2954C10.3783 18.8735 10.9506 18.6366 11.5474 18.6367C12.1441 18.6369 12.7164 18.874 13.1382 19.2961C13.5601 19.7181 13.797 20.2905 13.7969 20.8872C13.7968 21.1827 13.7385 21.4753 13.6254 21.7482C13.5123 22.0212 13.3465 22.2692 13.1375 22.4781C12.7155 22.8999 12.1431 23.1369 11.5464 23.1367C10.9496 23.1366 10.3774 22.8994 9.95553 22.4774C9.53367 22.0553 9.29674 21.483 9.29688 20.8862Z" fill="red" class="pen-svg-1-col"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.204 42H0.796C0.356 42 0 42.435 0 42.97L0 44.03C0 44.565 0.356 45 0.796 45H23.204C23.644 45 24 44.565 24 44.03V42.97C24 42.435 23.643 42 23.204 42Z" fill="#6B6B6B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.747 42H23L21.606 40.312C21.5281 40.2184 21.4306 40.1432 21.3203 40.0917C21.21 40.0402 21.0897 40.0137 20.968 40.014H17.55L17.532 40H17.471L15.958 40.014H15.828C15.821 40.009 15.815 40.004 15.807 40H12.673L10.933 40.014L10.935 40.015L8.567 40.027C8.567 40.027 2.865 40.021 2.807 40.033C2.64386 40.0812 2.49961 40.1786 2.394 40.312L1 42H11.747ZM10.536 1C10.536 0.448 10.989 0 11.548 0C12.107 0 12.56 0.448 12.56 1C12.56 1.552 12.107 2 11.548 2C10.988 2 10.536 1.552 10.536 1" fill="black"/>
</svg>
</div>
<span class="tooltiptext">Select Pen</span>
<span class="tooltiptext">Open Palette</span>
</div>
<div class="tool penbarEle tooltip" id="penTwo">
<div class="round">
<svg class="penbar-icon" viewBox="0 0 24 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 48L0 92H23.965L23 48H1Z" fill="blue" class="pen-svg-2-col"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2236 92H23.9996L22.9976 48.39H17.2236L17.2236 92Z" fill="#DBDBDB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7999 19.903C20.7589 19.683 20.7099 19.46 20.6569 19.236C20.6289 19.116 20.5969 18.996 20.5659 18.876C20.5419 18.786 20.5199 18.697 20.4949 18.606C20.4459 18.43 20.3949 18.252 20.3399 18.074L20.3329 18.054C19.5059 15.357 18.0389 12.562 16.5229 10.006L16.4999 9.966V9.968C16.0899 9.278 15.6789 8.605 15.2749 7.957C13.0239 4.343 12.3839 1 12.3839 1H11.9999L11.9999 39.988H16.1639C16.1631 39.992 16.1624 39.996 16.1619 40H18.5489L19.8269 31.612C19.8809 31.08 19.9429 30.549 20.0109 30.019L20.0329 29.851C20.1606 28.8692 20.312 27.8906 20.4869 26.916C20.7139 25.66 20.9569 24.163 20.9939 22.636C21.0179 21.721 20.9689 20.795 20.8009 19.903H20.7999ZM10.6849 1C10.6849 1 9.97687 4.344 7.72487 7.959C6.81287 9.425 5.85687 11.015 4.99087 12.651C3.72087 15.051 2.64587 17.551 2.19987 19.909C1.74987 22.286 2.14987 24.908 2.51287 26.912C2.79281 28.4687 3.01297 30.0355 3.17287 31.609L4.45087 40H10.9999L10.9999 1H10.6849ZM0.999867 45L0.963867 49.483C4.32787 49.816 8.20087 50 12.0929 50C15.9859 50 19.6719 49.816 23.0369 49.483L22.9999 45H0.999867Z" fill="#969696"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29688 20.8862C9.29701 20.2895 9.53419 19.7172 9.95624 19.2954C10.3783 18.8735 10.9506 18.6366 11.5474 18.6367C12.1441 18.6369 12.7164 18.874 13.1382 19.2961C13.5601 19.7181 13.797 20.2905 13.7969 20.8872C13.7968 21.1827 13.7385 21.4753 13.6254 21.7482C13.5123 22.0212 13.3465 22.2692 13.1375 22.4781C12.7155 22.8999 12.1431 23.1369 11.5464 23.1367C10.9496 23.1366 10.3774 22.8994 9.95553 22.4774C9.53367 22.0553 9.29674 21.483 9.29688 20.8862Z" fill="blue" class="pen-svg-2-col"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.204 42H0.796C0.356 42 0 42.435 0 42.97L0 44.03C0 44.565 0.356 45 0.796 45H23.204C23.644 45 24 44.565 24 44.03V42.97C24 42.435 23.643 42 23.204 42Z" fill="#6B6B6B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.747 42H23L21.606 40.312C21.5281 40.2184 21.4306 40.1432 21.3203 40.0917C21.21 40.0402 21.0897 40.0137 20.968 40.014H17.55L17.532 40H17.471L15.958 40.014H15.828C15.821 40.009 15.815 40.004 15.807 40H12.673L10.933 40.014L10.935 40.015L8.567 40.027C8.567 40.027 2.865 40.021 2.807 40.033C2.64386 40.0812 2.49961 40.1786 2.394 40.312L1 42H11.747ZM10.536 1C10.536 0.448 10.989 0 11.548 0C12.107 0 12.56 0.448 12.56 1C12.56 1.552 12.107 2 11.548 2C10.988 2 10.536 1.552 10.536 1" fill="black"/>
</svg>
</div>
<span class="tooltiptext">Select Pen</span>
<span class="tooltiptext">Open Palette</span>
</div>
<div class="tool penbarEle tooltip" id="highlighter">
<div class="round">
<img src="assets/img/highlighter.svg" class="penbar-icon" alt="highlighter">
</div>
<span class="tooltiptext">Select Highlighter</span>
</div>
<div class="tool penbarEle tooltip" id="eraser">
<div class="round">
<img src="assets/img/eraser.svg" class="penbar-icon" alt="eraser"/>
</div>
<span class="tooltiptext">Select Eraser</span>
<span class="tooltiptext">Open Palette</span>
</div>
<div class="tool clear penbarEle tooltip" id="clear-canvasPenbar">
<div class="round">
<i class="fal fa-trash-alt"></i>
</div>
<span class="tooltiptext">Clear All</span>
</div>
</div>
<div class="bar strokebarPenOne" id="strokebarPenOne">
<div class="tool strokebarPenOne tooltip" id="goBackStrokePenOnebar">
<div class="round">
<img src="assets/img/done.svg" class="check" alt="done">
</div>
<span class="tooltiptext">Go Back</span>
</div>
<div class="colorpicker strokebarPenOne tooltip">
<input class="strokebarPenTwoEle" type="color" id="PenOne-color-picker" value="#ff0000">
<span class="tooltiptext">Color Picker</span>
</div>
<div class="strokeslider strokebarPenOne tooltip">
<input type="range" class="stroke" id="stroke1" value="10">
<span class="tooltiptext">Increase Pen Size</span>
</div>
</div>
<div class="bar strokebarPenTwo" id="strokebarPenTwo">
<div class="tool strokebarPenTwoEle tooltip" id="goBackStrokePenTwobar">
<div class="round">
<img src="assets/img/done.svg" class="check" alt="done">
</div>
<span class="tooltiptext">Go Back</span>
</div>
<div class="colorpicker strokebarPenTwoEle tooltip">
<input class="strokebarPenTwoEle" type="color" id="PenTwo-color-picker" value="#0000ff">
<span class="tooltiptext">Color Picker</span>
</div>
<div class="strokeslider strokebarPenTwoEle tooltip">
<input type="range" class="stroke" id="stroke2" value="10">
<span class="tooltiptext">Increase Pen Size</span>
</div>
</div>
<div class="bar eraserbar" id="eraserbar">
<div class="tool tooltip">
<div class="round" id="goBackEraser">
<img src="assets/img/done.svg" class="check" alt="done">
</div>
<span class="tooltiptext">Go Back</span>
</div>
<div class="strokeslider tooltip">
<input type="range" class="stroke" id="stroke3" value="50">
<span class="tooltiptext">Increase Eraser Size</span>
</div>
</div>
<div class="bar shapebar" id="shapebar">
<div class="tool shape tooltip" id="goBackShapebar">
<div class="round">
<img src="assets/img/done.svg" class="check" alt="done">
</div>
<span class="tooltiptext">Go Back</span>
</div>
<div class="tool shape tooltip" id="shape-line">
<i class="fal fa-horizontal-rule"></i>
<span class="tooltiptext">Insert Line</span>
</div>
<div class="tool shape tooltip" id="shape-rect">
<i class="fal fa-rectangle-landscape"></i>
<span class="tooltiptext">Insert Rectangle</span>
</div>
<div class="tool shape tooltip" id="shape-circle">
<i class="fal fa-circle"></i>
<span class="tooltiptext">Insert Circle</span>
</div>
<div class="tool shape tooltip" id="shape-triangle">
<i class="fal fa-triangle"></i>
<span class="tooltiptext">Insert Triangle</span>
</div>
<div class="shape tool colorpicker tooltip">
<input class="shape" type="color" value="#333333" id="shape-color-picker">
<span class="tooltiptext">Color Picker</span>
</div>
<div class="tool clear shape tooltip" id="clear-canvasShapebar">
<div class="round">
<i class="fal fa-trash-alt"></i>
<span class="tooltiptext">Clear All</span>
</div>
</div>
</div>
</div>
<div class="multipage-bar closed" id="boards">
<div class="close-multipage">
<i class="fas fa-chevron-left"></i>
</div>
<div class="showonexpand" id="add">
<i class="fas fa-plus"></i>
</div>
<div class="multipage-titlebar">
Multipages
</div>
<div class="multipage-thumbnails">
</div>
</div>
<div class="add-text-popup">
<div class="add-text-wrap">
<textarea id="addTextField" cols="20" rows="5"></textarea>
<div class="add-text-div">
<input type="color" id="text-color-picker" value="#ffffff"/>
</div>
<div class="add-text-div">
<input type="range" id="text-stroke-width" value="18" min="10" max="100"/>
</div>
<div class="add-text-div"><button id="addTextButton">Add Text</button></div>
</div>
</div>
</body>
</html>