-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·111 lines (101 loc) · 3.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallpaper Designer</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
<div class="flex-row gap-1 p-1 grow justify-center">
<div class="flex align-center">
<div class="flex-col shrink gap-1" id="main-container">
<div class="flex" id="title-bar">
<div id="close">
<svg xmlns="http://www.w3.org/2000/svg" style="opacity: 0;">
<rect width="1" height="2" x="2" y="2"></rect>
<rect width="1" height="2" x="7" y="2"></rect>
<rect width="1" height="5" x="5" y="2"></rect>
<rect width="1" height="1" x="4" y="6"></rect>
<rect width="1" height="1" x="2" y="7"></rect>
<rect width="1" height="1" x="7" y="7"></rect>
<rect width="4" height="1" x="3" y="8"></rect>
</svg>
</div>
<hr id="hr1">
<hr id="hr2">
<hr id="hr3">
<hr id="hr4">
<hr id="hr5">
<hr id="hr6">
<h1>Wallpaper Designer</h1>
</div>
<div class="flex-row gap-1 px-1" id="controls">
<div class="flex align-center justify-center input-box">
<label for="width">Width:</label>
<input type="number" id="width" value="128" min="8" width="4">
</div>
<div class="flex align-center justify-center input-box">
<label for="height">Height:</label>
<input type="number" id="height" value="128" min="8" size="4">
</div>
</div>
<div class="flex-col gap-1 p-1">
<div class="flex-col gap-1" id="input-canvas-container">
<div class="flex align-center gap-1">
<div id="left-arrow"></div>
<table id="input-canvas"></table>
<div id="right-arrow"></div>
</div>
<button id="invert">Invert Design</button>
</div>
</div>
<div class="grid-3 w-100 justify-center p-1">
<div class="flex-col grow gap-1 p-1">
<h2>Design</h2>
<div class="flex gap-1" id="design-controls">
<button id="save">Save</button>
<button id="load">Load</button>
<button id="clear">Clear</button>
</div>
<hr style="border: none;">
<div class="flex-row gap-1">
<div class="flex-row align-center">
<label for="custom-white">White</label>
<div class="input-container">
<input type="color" name="custom-white" id="white-input" value="#fdfae7">
</div>
</div>
<div class="flex-row align-center">
<label for="custom-black">Black</label>
<div class="input-container">
<input type="color" name="custom-black" id="black-input" value="#100F0F">
</div>
</div>
</div>
</div>
<hr class="vertical-hr">
<div class="flex-col grow gap-1 p-1">
<h2>Scale</h2>
<div class="flex-row w-100 gap-1 justify-between">
<p onclick="setRangeValue(1)">1</p>
<p onclick="setRangeValue(2)">2</p>
<p onclick="setRangeValue(3)">4</p>
<p onclick="setRangeValue(4)">8</p>
<p onclick="setRangeValue(5)">10</p>
</div>
<input type="range" name="download-scale" id="scale-selector" min="1" max="5" value="4" step="1" class="custom-range">
<button id="download">Download</button>
</div>
</div>
</div>
</div>
<div id="output-canvas-container" style="display: none;">
<canvas id="output-canvas"></canvas>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>