/
index.html
112 lines (96 loc) · 3.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paint</title>
<link rel="stylesheet" type="text/css" href="src/css/main.css">
</head>
<body>
<div class="container app-container">
<div class="row mb-2">
<div class="col">
<h1>HTML5 Paint</h1>
</div>
<div class="col d-flex align-items-center justify-content-end">
<div class="d-flex">
<button class="btn btn-primary btn-sm mr-1" id="undo">Undo</button>
<button class="btn btn-primary btn-sm mr-1 ml-1" id="redo">Redo</button>
<button class="btn btn-danger btn-sm ml-1" id="clearCanvas">Clear board</button>
</div>
</div>
</div>
<div class="row mb-3">
<canvas class="col" id="myCanvas" width="900" height="500" style="cursor: crosshair">
<p>This browser doesn't support HTML5 canvas</p>
</canvas>
</div>
<div class="row mb-3">
<div class="col">
<select class="selTool btn btn-primary mr-1">
<option value="erasor">erasor</option>
<option value="pen">pen</option>
<option value="line">line</option>
<option value="rect">rectangle</option>
<option value="circle">circle</option>
<option value="text">text</option>
</select>
<select class="selWidth btn btn-primary mr-1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="50">50</option>
</select>
<select class="colorButton btn btn-primary mr-1">
<option value="black">black</option>
<option value="yellow">yellow</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<span class="filled-stroked">
<input id="filled" type="checkbox">Filled</input>
</span>
<div class="text-input mt-2">
<input id="font-input" type="text" name="input-text" placeholder="Type here..."></input>
<select class="font-family btn btn-primary">
<option value="Calibri">Calibri</option>
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="sans-serif">sans-serif</option>
</select>
<select class="font-size btn btn-primary">
<option value="10pt">10pt</option>
<option value="14pt">14pt</option>
<option value="18pt">18pt</option>
<option value="24pt">24pt</option>
<option value="30pt">30pt</option>
<option value="36pt">36pt</option>
<option value="42pt">42pt</option>
<option value="50pt">50pt</option>
</select>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-end">
<div class="mr-2">
<input id="save-imagename" type="text" name="input-text" placeholder="Image name..." disabled></input>
</div>
<button class="btn btn-success btn-sm mr-1" id="save" disabled>Save</button>
<select class="btn btn-success" id="load" disabled></select>
</div>
</div>
</div>
</div>
<script src="src/scripts/index.js"></script>
</body>
</html>