-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (158 loc) · 7.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
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
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Automatically generate images for key inputs</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script src="js/FileSaver.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/jszip.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto|Material Icons" rel="stylesheet" type="text/css">
<style class="customCSS">
</style>
</head>
<body>
<main>
<section class="keyboard">
<div class="left">
<div class="centercontent">
<div class="imagekeyboard">
</div>
</div>
<div class="outKeyImages">
</div>
</div>
<div class="right centercontent">
<div class="settings">
<section class="keyfiles">
<label>
<h2>JSON Object containing file name as key and the letter as value</h2>
<textarea class="dict"></textarea>
</label>
<div class="dictionary-error">There was an error trying to parse the JSON: <div class="json-error"></div></div>
</section>
<section class="html">
<label>
<h2>Custom HTML, the content of the element with the class "letter" will be set to the
letter.</h2>
<textarea class="dict" style="min-height:105px"></textarea>
</label>
</section>
<section class="style">
<label>
<h2>Style for the button.</h2>
<textarea class="dict" style="min-height:250px"></textarea>
</label>
</section>
<section class="zipfilename">
<label>
<h2>Name of the resulting zipfile</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="scale">
<label>
<h2>Scale Property for html2canvas (when the text is blurry you can try higher values to see if
you can read it
better)</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="filenameappend">
<label>
<h2>If you want to generate multiple sizes, you can add a string here which is appended to the
file name. (So you
don't have to change the JSON everytime)</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="sbutton">
<div class="centercontent">
<div class="button">Generate Images</div>
</div>
</section>
</div>
</div>
</section>
<section class="divider"></section>
<section class="mouse">
<div class="left">
<div class="centercontent">
<div class="imagemouse">
</div>
</div>
<div class="outMouseImages">
</div>
</div>
<div class="right centercontent">
<div class="settings">
<section class="keyfiles">
<label>
<h2>JSON Object containing file name as key and applied CSS classes as a value</h2>
<textarea class="dict"></textarea>
</label>
<div class="dictionary-error">There was an error trying to parse the JSON: <div class="json-error"></div></div>
</section>
<section class="html">
<label>
<h2>The HTML of the Mouse, the classes are applied to the top most</h2>
<textarea class="dict" style="min-height:105px"></textarea>
</label>
</section>
<section class="style">
<label>
<h2>Style</h2>
<textarea class="dict" style="min-height:250px"></textarea>
</label>
</section>
<section class="zipfilename">
<label>
<h2>Name of the resulting zipfile</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="scale">
<label>
<h2>Scale Property for html2canvas (when the text is blurry you can try higher values to see if
you can
read it
better)</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="filenameappend">
<label>
<h2>If you want to generate multiple sizes, you can add a string here which is appended to the
file
name. (So you
don't have to change the JSON everytime)</h2>
<input type="text" class="dict"/>
</label>
</section>
<section class="sbutton">
<div class="centercontent">
<div class="button">Generate Images</div>
</div>
</section>
</div>
</div>
</section>
<section class="divider"></section>
<section class="github">
<p>
<a href="https://github.com/NetroScript/Input-Button-Sprite-Generator">View the GitHub repository</a>
<a class="github-button" href="https://github.com/NetroScript/Input-Button-Sprite-Generator"
data-icon="octicon-star"
data-size="large" data-show-count="true"
aria-label="Star NetroScript/Input-Button-Sprite-Generator on GitHub">Star</a>
<a class="github-button" href="https://github.com/NetroScript/Input-Button-Sprite-Generator/issues"
data-icon="octicon-issue-opened"
data-size="large" data-show-count="true"
aria-label="Issue NetroScript/Input-Button-Sprite-Generator on GitHub">Issue</a>
</p>
</section>
</main>
<script src="js/main.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>