-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (66 loc) · 2.76 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
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Multi-screen Wallpaper Helper</title>
</head>
<body>
<div id="preview"></div>
<div id="toolbar">
<button name="help">Help</button>
<button name="add-monitor">Add</button>
<button name="remove-monitor">Remove</button>
<button name="calibration">Calibration</button>
<button name="wallpaper">Wallpaper
<input type="file" accept="image/*" hidden>
</button>
<span name="message"></span>
</div>
<div id="help">
<p>This is a tool to help users align wallpaper correctly across different sized monitors. Click "Calibration" to start, when you are done, right click on the monitors and click "Save image as" to download them.</p>
</div>
<div id="properties">
<form action="javascript:void(0)" method="get" data-monitor="-1" hidden>
<label>
<p>Actual width in inches (″):</p>
<input type="number" name="actual-width">
</label>
<label>
<p>Actual height in inches (″):</p>
<input type="number" name="actual-height">
</label>
<label>
<p>Actual x-offset in inches (″):</p>
<input type="number" name="actual-x">
</label>
<label>
<p>Actual y-offset in inches (″):</p>
<input type="number" name="actual-y">
</label>
</form>
</div>
<div id="calibration">
<form action="javascript:void(0)" method="get" hidden>
<p>Select the main monitor for calibration</p>
<label>
<p>Actual width in inches (″):</p>
<input type="number" step=".05" name="actual-width" required>
</label>
<label>
<p>Actual height in inches (″):</p>
<input type="number" step=".05" name="actual-height" required>
</label>
<label>
<p>Virtual width in pixels (px):</p>
<input type="number" name="virtual-width" required>
</label>
<label>
<p>Virtual height in pixels (px):</p>
<input type="number" name="virtual-height" required>
</label>
<br>
<button type="submit">Done</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>