-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (109 loc) · 11.3 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
<!DOCTYPE html>
<html>
<head>
<title>Paint</title>
<link href="images/favicon.ico" rel="SHORTCUT ICON">
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" defer src="js/initializer.js"></script>
<script type="text/javascript" defer src="js/index.js"></script>
<script type="text/javascript" defer src="js/popover.js"></script>
<script type="text/javascript" defer src="js/confirmation.js"></script>
</head>
<body>
<div id="app-container">
<div class="btn-toolbar">
<div class="popover-container">
<button id="pencil" type="button" class="btn popover-icon" aria-label="Select Pencil" title="Pencil">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M482 30a101.77 101.77 0 00-72.44-30 101.77 101.77 0 00-72.44 30L50.82 316.3a20 20 0 00-5.12 8.78L.73 486.64a20 20 0 0024.73 24.6l161.56-45.9a20 20 0 008.7-33.35L93.87 329.83 331.18 92.5l88.26 88.26-181.67 181.18A20 20 0 00266 390.27L482 174.87A101.77 101.77 0 00512 102.45c0-27.36-10.66-53.09-30-72.43zM143.4 436.17l-94.57 26.86 26.48-95.15 68.09 68.29zm310.33-289.59l-5.96 5.95-88.3-88.3 5.94-5.93A62.03 62.03 0 01409.56 40c16.68 0 32.36 6.5 44.15 18.29A62.03 62.03 0 01472 102.44c0 16.68-6.5 32.36-18.27 44.13z"/></svg>
</button>
<div class="popover-body" role="menu">
<div class="arrow"></div>
<button type="button" role="menuitem" title="Red" aria-label="Select Red Pencil" class="btn popover-item pencil-item" data-bg-color="255,0,0" style="background: rgb(255,0,0);"></button>
<button type="button" role="menuitem" title="Green" aria-label="Select Green Pencil" class="btn popover-item pencil-item" data-bg-color="0,255,0" style="background: rgb(0,255,0);"></button>
<button type="button" role="menuitem" title="Blue" aria-label="Select Blue Pencil" class="btn popover-item pencil-item" data-bg-color="0,0,255" style="background: rgb(0,0,255);"></button>
<button type="button" role="menuitem" title="Magenta" aria-label="Select Magenta Pencil" class="btn popover-item pencil-item" data-bg-color="255,0,255" style="background: rgb(255,0,255);"></button>
<button type="button" role="menuitem" title="Yellow" aria-label="Select Yellow Pencil" class="btn popover-item pencil-item" data-bg-color="255,255,0" style="background: rgb(255,255,0);"></button>
<button type="button" role="menuitem" title="Cyan" aria-label="Select Cyan Pencil" class="btn popover-item pencil-item" data-bg-color="0,255,255" style="background: rgb(0,255,255);"></button>
<button type="button" role="menuitem" title="Black" aria-label="Select Black Pencil" class="btn popover-item pencil-item" data-bg-color="0,0,0" style="background: rgb(0,0,0);"></button>
<button type="button" role="menuitem" title="White" aria-label="Select White Pencil" class="btn popover-item pencil-item" data-bg-color="255,255,255" style="background: rgb(255,255,255);"></button>
</div>
</div>
<div class="popover-container">
<button id="thickness" type="button" class="btn popover-icon" aria-label="Select Thickness" title="Thickness">
<svg style="width: 3px; height: 3px;">
<circle cx="50%" cy="50%" r="50%" fill="black" />
</svg>
</button>
<div class="popover-body" role="menu">
<div class="arrow"></div>
<button type="button" role="menuitem" title="1px" aria-label="Select 1px thickness" class="btn popover-item thickness-item thickness-1" id="1"></button>
<button type="button" role="menuitem" title="3px" aria-label="Select 3px thickness" class="btn popover-item thickness-item thickness-3" id="3"></button>
<button type="button" role="menuitem" title="5px" aria-label="Select 5px thickness" class="btn popover-item thickness-item thickness-5" id="5"></button>
</div>
</div>
<div class="popover-container">
<button id="highlighter" type="button" class="btn popover-icon" aria-label="Select Highlighter" title="Highlighter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 544 512" width="100%"><path d="M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.6 36.6 0 00-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08a36.6 36.6 0 0038.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2a54.9 54.9 0 00-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4a54.88 54.88 0 00-2.35-75.13z"/></svg>
</button>
<div class="popover-body" role="menu">
<div class="arrow"></div>
<button type="button" role="menuitem" title="Red" aria-label="Select Red Highlighter" class="btn popover-item highlighter-item" data-bg-color="255,0,0" style="background: rgb(255,0,0);"></button>
<button type="button" role="menuitem" title="Green" aria-label="Select Green Highlighter" class="btn popover-item highlighter-item" data-bg-color="0,255,0" style="background: rgb(0,255,0);"></button>
<button type="button" role="menuitem" title="Blue" aria-label="Select Blue Highlighter" class="btn popover-item highlighter-item" data-bg-color="0,0,255" style="background: rgb(0,0,255);"></button>
<button type="button" role="menuitem" title="Magenta" aria-label="Select Magenta Highlighter" class="btn popover-item highlighter-item" data-bg-color="255,0,255" style="background: rgb(255,0,255);"></button>
<button type="button" role="menuitem" title="Yellow" aria-label="Select Yellow Highlighter" class="btn popover-item highlighter-item" data-bg-color="255,255,0" style="background: rgb(255,255,0);"></button>
<button type="button" role="menuitem" title="Cyan" aria-label="Select Cyan Highlighter" class="btn popover-item highlighter-item" data-bg-color="0,255,255" style="background: rgb(0,255,255);"></button>
<button type="button" role="menuitem" title="Black" aria-label="Select Black Highlighter" class="btn popover-item highlighter-item" data-bg-color="0,0,0" style="background: rgb(0,0,0);"></button>
<button type="button" role="menuitem" title="White" aria-label="Select White Highlighter" class="btn popover-item highlighter-item" data-bg-color="255,255,255" style="background: rgb(255,255,255);"></button>
</div>
</div>
<div class="popover-container">
<button id="input-text" type="button" class="btn popover-icon" aria-label="Enter Text" title="Text">
<span style="font-size: 22px">T</span>
</button>
<div class="popover-body" role="menu">
<div class="arrow"></div>
<button type="button" role="menuitem" title="12px" aria-label="Select 12px" data-font-size="12px" class="btn popover-item font-item"><span style="font-size: 12px;">T</span></button>
<button type="button" role="menuitem" title="18px" aria-label="Select 18px" data-font-size="18px" class="btn popover-item font-item"><span style="font-size: 18px;">T</span></button>
<button type="button" role="menuitem" title="24px" aria-label="Select 24px" data-font-size="24px" class="btn popover-item font-item"><span style="font-size: 24px;">T</span></button>
<button type="button" role="menuitem" title="30px" aria-label="Select 30px" data-font-size="30px" class="btn popover-item font-item"><span style="font-size: 30px;">T</span></button>
</div>
</div>
<button type="button" id="eraser" class="btn menu-item" aria-label="Select Eraser" title="Eraser">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 433.25 433.25"><path d="M418.4 192.33a50.7 50.7 0 000-71.7l-.1-.1-78.6-78.3c-19.8-19.8-51.9-19.7-71.8 0L98.4 211.83l-54.2 54.1c-19.8 19.7-19.8 51.8-.1 71.6l48.3 48.3H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h297.4c5.5 0 10-4.5 10-10s-4.5-10-10-10H225l23.9-23.7 169.5-169.8zm-221.7 193.5h-76.1l-62.3-62.4c-12-12-11.9-31.4 0-43.4l47.1-47 122.2 122-30.9 30.8zm-77.1-166.9l162.5-162.5c12-12 31.5-12 43.5 0l78.6 78.4c12 12 12 31.4 0 43.5l-162.4 162.8-122.2-122.2z"/></svg>
</button>
<div class="popover-container">
<button id="fill" type="button" class="btn popover-icon" aria-label="Fill Color" title="Fill">
<svg viewBox="0 0 467.77 467.77" xmlns="http://www.w3.org/2000/svg"><path d="M169.36 371.5c5.7 5.7 13.19 8.56 20.67 8.56s14.96-2.86 20.67-8.57l181.46-181.46L202.13 0 160.8 41.34l31.74 31.75L52.42 213.2a29.22 29.22 0 000 41.34L169.36 371.5zm64.52-257.07l75.6 75.6-43.85 43.85h-151.2l119.45-119.45zM394.68 380.06c24.22 0 43.85-19.63 43.85-43.85s-43.85-73.1-43.85-73.1-43.86 48.88-43.86 73.1 19.64 43.85 43.86 43.85zM29.24 409.3h409.29v58.47H29.23z"/></svg>
</button>
<div class="popover-body" role="menu">
<div class="arrow"></div>
<button type="button" role="menuitem" title="Red" aria-label="Fill Canvas Red" class="btn popover-item fill-item" data-bg-color="255,0,0" style="background: rgb(255,0,0);"></button>
<button type="button" role="menuitem" title="Green" aria-label="Fill Canvas Green" class="btn popover-item fill-item" data-bg-color="0,255,0" style="background: rgb(0,255,0);"></button>
<button type="button" role="menuitem" title="Blue" aria-label="Fill Canvas Blue" class="btn popover-item fill-item" data-bg-color="0,0,255" style="background: rgb(0,0,255);"></button>
<button type="button" role="menuitem" title="Magenta" aria-label="Fill Canvas Magenta" class="btn popover-item fill-item" data-bg-color="255,0,255" style="background: rgb(255,0,255);"></button>
<button type="button" role="menuitem" title="Yellow" aria-label="Fill Canvas Yellow" class="btn popover-item fill-item" data-bg-color="255,255,0" style="background: rgb(255,255,0);"></button>
<button type="button" role="menuitem" title="Cyan" aria-label="Fill Canvas Cyan" class="btn popover-item fill-item" data-bg-color="0,255,255" style="background: rgb(0,255,255);"></button>
<button type="button" role="menuitem" title="Black" aria-label="Fill Canvas Black" class="btn popover-item fill-item" data-bg-color="0,0,0" style="background: rgb(0,0,0);"></button>
<button type="button" role="menuitem" title="White" aria-label="Fill Canvas White" class="btn popover-item fill-item" data-bg-color="255,255,255" style="background: rgb(255,255,255);"></button>
</div>
</div>
<button type="button" id="save" class="btn menu-item" aria-label="Save Canvas as image" title="Save">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 384"><path d="M298.67 0h-256A42.65 42.65 0 000 42.67v298.66A42.65 42.65 0 0042.67 384h298.66A42.65 42.65 0 00384 341.33v-256L298.67 0zM192 341.33c-35.3 0-64-28.69-64-64 0-35.3 28.7-64 64-64s64 28.7 64 64c0 35.31-28.7 64-64 64zM256 128H42.67V42.67H256V128z"/></svg>
</button>
</div>
<div id="canvas-container" class="canvas-container">
<canvas id="canvas-box"></canvas>
<div id="pointer-container"></div>
</div>
<div id="co-ordinates">(0, 0)</div>
</div>
<div id="image-container" style="display: none;">
<img></img>
<div>
<a class="btn btn-primary download-link" href="" download="my-canvas.png">Download</a>
<button class="btn btn-default" id="go-back" type="button">Back</button>
</div>
</div>
</body>
</html>