Skip to content

Commit 5012356

Browse files
author
Max Pleaner
authored
Create index.html
0 parents  commit 5012356

1 file changed

Lines changed: 108 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!doctype html>
2+
<html lang='en'>
3+
<head>
4+
<script
5+
src="https://code.jquery.com/jquery-3.6.3.min.js"
6+
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
7+
crossorigin="anonymous"></script>
8+
9+
<style>
10+
#instructions {
11+
width: 100vh;
12+
height: 400px;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="editor"
18+
<h1>Icon Layout</h1>
19+
<label for="#page-width">page width (inch)</label>
20+
<input type='number' id="page-width" value="8.5" step="0.1">
21+
<br>
22+
<label for="#page-height">page height (inch)</label>
23+
<input type='number' id="page-height" value="11" step="0.1">
24+
<br>
25+
<label for="#icon-size">icon size (centimeter)</label>
26+
<input type='number' id="icon-size" value="0.6" step="0.01">
27+
<br>
28+
<label for="#icon-padding-horizontal">icon horizontal padding (centimeter)</label>
29+
<input type='number' id="icon-padding-horizontal" value="0.05" step="0.01">
30+
<br>
31+
<label for="#icon-padding-vertical">icon vertical padding (centimeter)</label>
32+
<input type='number' id="icon-padding-vertical" value="0.05" step="0.01">
33+
34+
<br>
35+
<p><b>Instructions</b></p>
36+
<p><i>Each line should contain comma separated values name/count/number, for example:</i></p>
37+
<p><pre>
38+
5, dog, http://pictures.com/dog.jpg
39+
10, cat, http://pictures.com/cat.png
40+
</pre></p>
41+
<textarea id="instructions">
42+
100, cat1, https://e7.pngegg.com/pngimages/238/156/png-clipart-meng-pet-cat-meng-chong-kitty.png
43+
100, cat2, https://png.pngtree.com/png-vector/20201226/ourmid/pngtree-sitting-british-shorthair-cat-png-image_2642250.jpg
44+
</textarea>
45+
<button id="submit">submit</button>
46+
</div>
47+
<div id="results">
48+
</div>
49+
50+
<script>
51+
$(function() {
52+
hasConfigObj = location.search.split("?data=")[1]
53+
if (hasConfigObj) {
54+
queryParams = new URLSearchParams(new URL(location.href).search);
55+
data = JSON.parse(queryParams.get("data").slice(0, -1))
56+
$("#editor").hide()
57+
$results = $("#results")
58+
$results
59+
.css("outline", "1px solid black")
60+
.css("width", `${data.config.pageWidth}in`)
61+
.css("height", `${data.config.pageHeight}in`)
62+
63+
data.instructions.forEach(([count, name, url]) => {
64+
for (let i = 0; i < count; i++) {
65+
$img = $("<img>").attr("src", url)
66+
$img.css("width", `${data.config.iconSize}cm`)
67+
$img.css("height", `${data.config.iconSize}cm`)
68+
$img.css("margin-right", `${data.config.iconPaddingHorizontal / 2}cm`)
69+
$img.css("margin-left", `${data.config.iconPaddingHorizontal / 2}cm`)
70+
$img.css("margin-top", `${data.config.iconPaddingVertical / 2}cm`)
71+
$img.css("margin-bottom", `${data.config.iconPaddingVertical / 2}cm`)
72+
$results.append($img)
73+
}
74+
})
75+
76+
$("html,body").css("margin", "0px")
77+
78+
}
79+
80+
$("#submit").on("click", () => {
81+
82+
data = {}
83+
data["config"] = {
84+
"pageWidth": parseFloat($("#page-width").val()),
85+
"pageHeight": parseFloat($("#page-height").val()),
86+
"iconSize": parseFloat($("#icon-size").val()),
87+
"iconPaddingHorizontal": parseFloat($("#icon-padding-horizontal").val()),
88+
"iconPaddingVertical": parseFloat($("#icon-padding-vertical").val())
89+
}
90+
91+
instructionsRaw = $("#instructions").val()
92+
data["instructions"] = instructionsRaw.split("\n").map((line) => {
93+
return line.split(",").map((part) => part.trim())
94+
}).filter((x) => x.length == 3).map(([count, name, url]) => {
95+
return [parseInt(count), name, url]
96+
})
97+
debugger
98+
99+
paramsStr = new URLSearchParams(JSON.stringify(data)).toString();
100+
search = `data=${paramsStr}`
101+
newPath = location.href + `?${search}`
102+
window.open(newPath, "_blank")
103+
104+
})
105+
})
106+
</script>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)