-
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
146 lines (145 loc) · 5.7 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Board</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/app.css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="white"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="board">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta http-equiv="pragma" content="no-cache">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<script>
function importJs(js) {
let element = document.createElement("script");
element.setAttribute("charset", "utf-8");
element.setAttribute("src", `./js/${js}.js?t=${new Date().getTime()}`);
document.getElementsByTagName("footer")[0].appendChild(element);
}
</script>
</head>
<body>
<div id="first">
<center>
<h2>
Board
</h2>
</center>
<button id="start">
open
</button>
</div>
<canvas id="board"></canvas>
<div class="menu">
<ul class="items">
<li class="item" onclick="menuItem(this)" content="setting">Setting</li>
<li class="item" onclick="menuItem(this)" content="help">Help</li>
<li class="item" onclick="menuItem(this)" content="about">About</li>
<li class="item" onclick="menuItem(this)" content="download">Export</li>
<li class="item" onclick="menuItem(this)" content="download-with-bg">Export with background</li>
<li class="item" onclick="menuItem(this)" content="download-pdf">Export as PDF</li>
<li class="item" id="undo" onclick="menuItem(this)" content="undo">Undo</li>
<li class="item" id="redo" onclick="menuItem(this)" content="redo">Redo</li>
</ul>
</div>
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 class="modal-heading"></h2>
</div>
<div class="modal-body">
<div class="responsive">
<div id="setting">
<div>
<label for="font">Font: </label>
<input type="number" id="font" />
<label for="fcolor">Foreground Color: </label>
<select name="color" id="fcolor">
</select>
<label for="bcolor">Background color: </label>
<select name="color" id="bcolor">
</select>
<span id="error"></span>
<button id="save">Save</button>
</div>
</div>
<div id="about">
<ul>
<strong>Simple, standalone, flexible and very lightweight board app/PWA in JavaScript.
</strong>
<li><b>Created By:</b> <a href="https://lablnet.github.io/profile">Muhammad Umer Farooq</a></li>
<li><b>Version:</b> <span id="version"></span></li>
<li><b>License:</b> <a href="https://github.com/Lablnet/board/blob/master/LICENSE">GPL-3</a></li>
</ul>
</div>
<table id="help">
<thead>
<tr>
<th>Desc</th>
<th>Mobile</th>
<th>Desktop</th>
</tr>
</thead>
<tbody>
<tr>
<td>Draw</td>
<td>Touch and drag</td>
<td>Mouse and drag</td>
</tr>
<tr>
<td>Erase</td>
<td>Double tap and drag</td>
<td>shift + mouse drag</td>
</tr>
<tr>
<td>Erase All</td>
<td>Five tap</td>
<td>ctrl + x</td>
</tr>
<tr>
<td>Open Menu</td>
<td>three finger tap</td>
<td>Right click</td>
</tr>
<tr>
<td>Settings</td>
<td>Open menu and then tap on setting</td>
<td>Open menu and then click on setting</td>
</tr>
<tr>
<td>Undo</td>
<td>From context menu</td>
<td>CTRL+Z or from context menu</td>
</tr>
<tr>
<td>Redo</td>
<td>From context menu</td>
<td>CTRL+SHIFT+Z or from context menu</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
<footer></footer>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="config.js"></script>
<script>
document.getElementById("first").style.display = "none";
importJs("undo");
importJs("app");
</script>
</html>