-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (138 loc) · 5.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
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
<!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="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/media-queries.css" />
<title>Quickdraw | Online whiteboard</title>
</head>
<body>
<div class="app">
<div
class="hamburger-button-container button-container flex flex-jc-c flex-ai-c"
>
<img
class="hamburger-button icon"
src="/img/menu-burger.svg"
alt="menu-burger"
/>
</div>
<div
class="share-button-container button-container flex flex-jc-c flex-ai-c"
>
<img
class="share-button icon"
src="/img/share.svg"
alt="share"
/>
</div>
<div class="tools-container">
<div class="shapes-container flex flex-dir-col">
<p class="tools-container-heading">Shapes</p>
<a class="line" href="#"
><img
class="tools-icon"
src="/img/diagonal-rule.svg"
alt="rule"
/>Line</a
>
<a class="rectangle" href="#"
><img
class="tools-icon"
src="/img/rectangle.svg"
alt="rectangle"
/>Rectangle</a
>
<a class="circle" href="#"
><img
class="tools-icon"
src="/img/circle.svg"
alt="circle"
/>Circle</a
>
<a class="fill-color" href="#"
><input
class="fill-color-checkbox"
type="checkbox"
name="Fill color"
id=""
/>Fill color</a
>
</div>
<div class="options-container flex flex-dir-col">
<p class="tools-container-heading">Options</p>
<a class="paintbrush" href="#"
><img
class="tools-icon"
src="/img/paintbrush-focus.svg"
alt="paintbrush"
/>Brush</a
>
<a class="eraser" href="#"
><img
class="tools-icon"
src="/img/eraser.svg"
alt="eraser"
/>Eraser</a
>
<input
class="thickness-slider"
type="range"
min="2"
max="38"
value="2"
/>
</div>
<div class="colors-container">
<p class="tools-container-heading">Colors</p>
<div class="color-list flex flex-ai-c">
<div class="#3c4043 black color"></div>
<div class="#db4437 red color"></div>
<div class="#689f38 green color"></div>
<div class="#00acc1 blue color"></div>
<div class="#f4b400 yellow color"></div>
</div>
</div>
<div class="buttons-container flex flex-dir-col flex-ai-c">
<a
class="clear-canvas-button button flex flex-jc-c flex-ai-c"
href="#"
>Clear Canvas</a
>
<a
class="save-as-image-button button flex flex-jc-c flex-ai-c"
href="#"
>Save As Image</a
>
</div>
</div>
</div>
<div class="message-box flex flex-jc-c flex-ai-c">
<p>Website currently works only on Desktop view</p>
</div>
<canvas class="canvas"></canvas>
<script
src="https://cdn.socket.io/4.5.0/socket.io.min.js"
integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k"
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"
integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/script.js"></script>
<script src="/js/canvas.js"></script>
</body>
</html>