-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
89 lines (89 loc) · 3.18 KB
/
options.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Options</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
<link rel="stylesheet" type="text/css" href='options.css'/>
</head>
<body>
<div id='menu'>
<div class='headerWithTitleAndElement'>
<h5>Grid size</h5>
<button id='gridToggle'>Visible: ✅</button>
</div>
<hr />
<div id='gridSize'>
<button id='gridSizeButtonMinusBig'>--</button>
<button id='gridSizeButtonMinus'>-</button>
<label>
<input type='number' id='gridSizeInput' value='80'/>
</label>
<button id='gridSizeButtonPlus'>+</button>
<button id='gridSizeButtonPlusBig'>++</button>
</div>
<h5>Grid color</h5>
<hr />
<label style='width: 100%'>
<input type="color" id="borderColorPicker" value="#000000">
</label>
<h5>Grid Thickness</h5>
<hr />
<div id='gridThickness'>
<button id='gridThicknessButtonMinus'>-</button>
<button id='gridThicknessButtonPlus'>+</button>
</div>
<div class='headerWithTitleAndElement'>
<h5>Displays</h5>
<button id='reloadDisplays' title='reload'>🔄️</button>
</div>
<hr />
<div id='displays'>
</div>
<!-- https://codeshack.io/html-styling-tables-example/ -->
<div class='headerWithTitleAndElement'>
<h5>Items</h5>
<button id='cornerInformationToggle'>Details: ✅</button>
</div>
<hr />
<div id='itemOptions'>
<div class='itemOptionsRow'>
<button id='newCircleButton'>◯</button>
<button id='newRectangleButton'>▢</button>
<button id='newConeButton'>▽</button>
</div>
<div class='itemOptionsRow'>
<label for='newImageCircle'>Add circular image(s)</label>
<input type='file' id='newImageCircle' accept='image/png, image/jpeg, image/webm' multiple placeholder='Circular Images' />
<label for='newImageRectangle'>Add square image(s)</label>
<input type='file' id='newImageRectangle' accept='image/png, image/jpeg, image/webm' multiple placeholder='Square Images' />
</div>
<div class='itemOptionsRow'>
<button id='newRulerButton'>Measure distance</button>
</div>
</div>
<div id='tableList'>
<table id='tableHeader'>
<thead>
<tr>
<td style='min-width: 100px; overflow-wrap: anywhere'>name</td>
<td>type</td>
<td style='width: 100%'>actions</td>
</tr>
</thead>
<tbody id='tableBody'>
</tbody>
</table>
</div>
</div>
<script src="./dist/helpers/options/gridSize.js"></script>
<script src="./dist/helpers/options/gridBorderColor.js"></script>
<script src="./dist/helpers/options/gridThickness.js"></script>
<script src="./dist/helpers/options/addToGrid.js"></script>
<script src="./dist/helpers/options/gridToggle.js"></script>
<script src="./dist/helpers/options/rotationScript.js"></script>
<script src="./dist/helpers/options/cornerInformationToggle.js"></script>
<script src="./dist/renderer/options.js"></script>
</body>
</html>