forked from priyanshusingh305/WhiteBoard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (91 loc) · 4.16 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
<!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>WhiteBoard</title>
<link rel="icon" href="./images/2015027.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div class="navbar">
<h1>Whiteboard</h1>
<button title="Undo" id="undo"style=" float: right;"><i class="fas fa-undo"></i></button>
</div>
<div style="display: block;">
<div id="menu">
<button title="Pencil" id="pencil-btn">
<input type="number" class="stroke-size-selector" value='' placeholder=" 1">
<i class="fas fa-pencil-alt"></i>
<div class="pencile-back"></div>
</button>
<button title="Eraser" id="eraser-btn">
<input type="number" class="eraser-stroke-selector" placeholder="10">
<i class="fas fa-eraser">
<div class="eraser-back"></div>
</i></button>
<!-- <button title="Fill" id=""><i class="fas fa-fill-drip"></i></button> -->
<button title="Shapes" id="shapes-btn">
<i class="fas fa-shapes"></i>
<div class="bgshape"></div>
<span class="shape-selector">
<button class="shape-button" title="circle" id="shape-button1"> <i
class="far fa-circle"></i></button>
<button class="shape-button" title="rectangle" id="shape-button2"><svg width="20" height="14">
<rect width="20" height="14" style="fill:black;"></rect>
</svg></button>
</span>
<div class="shape-back"></div>
</button>
<!-- <button title="Text" id=""><svg viewBox="0 0 24 24" width="14" height="14" stroke="black" stroke-width="2"
fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
<polyline points="4 7 4 4 20 4 20 7"></polyline>
<line x1="9" y1="20" x2="15" y2="20"></line>
<line x1="12" y1="4" x2="12" y2="20"></line>
</svg></button> -->
<button id="colorselector" title="color selector">
<input type="color" class="color-selector">
<i class="fas fa-eye-dropper"></i>
<div class="cs-back"></div>
</button>
<button id="background-color-btn" title="background color">
<input type="color" class="bgcolor-selector">
<i class="fas fa-swatchbook"></i>
<div class="bg-back"></div>
</button>
<!-- <button title="Sticker" id="" ><i class="fas fa-sticky-note"></i></button> -->
<button title="Clear All"id="clear-all"><i class="fas fa-trash"></i></button>
</div>
<div class="introcard">
<div class="introback"></div>
<div class="introcarddetails">
<div class="modal-header">
<div class="title">WHITEBOARD</div>
<button class="close-button">×</button>
</div>
<div class="modal-body">
Hello!! This whiteboard application is meant for desktop use only. If you are facing any problems please leave the details in the github repo on which this page is hosted. Enjoy your visit.
<br><a href="./shortcuts.html" target="_blank" rel="noopener noreferrer">Keybinds for tools</a>
</div>
<div class="remember">
<label for="remembercheck" id="rememberchecklabel"> Don't show again</label>
<input type="checkbox" id="remembercheck" name="remembercheck" value="Bike">
</div>
</div>
</div>
<canvas id="myCanvas"></canvas>
<script src="script.js"></script>
</div>
</body>
</html>
<!-- draw 1
eraser 1
background board colour
color selector
sticker button 1
erase all 1
text 1
shape button 1
fill button 1 -->