Input-Button-Sprite-Generator/index.html at master · NetroScript/Input-Button-Sprite-Generator · GitHub

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>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Automatically generate images for key inputs</title>
<linkhref="css/main.css" rel="stylesheet" type="text/css">
<scriptsrc="js/FileSaver.min.js"></script>
<scriptsrc="js/html2canvas.min.js"></script>
<scriptsrc="js/jszip.min.js"></script>
<linkhref="https://fonts.googleapis.com/css?family=Roboto|Material Icons" rel="stylesheet" type="text/css">
<styleclass="customCSS">
</style>
</head>
<body>
<main>
<sectionclass="keyboard">
<divclass="left">
<divclass="centercontent">
<divclass="imagekeyboard">
</div>
</div>
<divclass="outKeyImages">
</div>
</div>
<divclass="right centercontent">
<divclass="settings">
<sectionclass="keyfiles">
<label>
<h2>JSON Object containing file name as key and the letter as value</h2>
<textareaclass="dict"></textarea>
</label>
<divclass="dictionary-error">There was an error trying to parse the JSON: <divclass="json-error"></div></div>
</section>
<sectionclass="html">
<label>
<h2>Custom HTML, the content of the element with the class "letter" will be set to the
 letter.</h2>
<textareaclass="dict" style="min-height:105px"></textarea>
</label>
</section>
<sectionclass="style">
<label>
<h2>Style for the button.</h2>
<textareaclass="dict" style="min-height:250px"></textarea>
</label>
</section>
<sectionclass="zipfilename">
<label>
<h2>Name of the resulting zipfile</h2>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="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>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="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>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="sbutton">
<divclass="centercontent">
<divclass="button">Generate Images</div>
</div>
</section>
</div>
</div>
</section>
<sectionclass="divider"></section>
<sectionclass="mouse">
<divclass="left">
<divclass="centercontent">
<divclass="imagemouse">
</div>
</div>
<divclass="outMouseImages">
</div>
</div>
<divclass="right centercontent">
<divclass="settings">
<sectionclass="keyfiles">
<label>
<h2>JSON Object containing file name as key and applied CSS classes as a value</h2>
<textareaclass="dict"></textarea>
</label>
<divclass="dictionary-error">There was an error trying to parse the JSON: <divclass="json-error"></div></div>
</section>
<sectionclass="html">
<label>
<h2>The HTML of the Mouse, the classes are applied to the top most</h2>
<textareaclass="dict" style="min-height:105px"></textarea>
</label>
</section>
<sectionclass="style">
<label>
<h2>Style</h2>
<textareaclass="dict" style="min-height:250px"></textarea>
</label>
</section>
<sectionclass="zipfilename">

<label>
<h2>Name of the resulting zipfile</h2>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="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>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="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>
<inputtype="text" class="dict"/>
</label>
</section>
<sectionclass="sbutton">
<divclass="centercontent">
<divclass="button">Generate Images</div>
</div>
</section>
</div>
</div>
</section>
<sectionclass="divider"></section>
<sectionclass="github">
<p>
<ahref="https://github.com/NetroScript/Input-Button-Sprite-Generator">View the GitHub repository</a>
<aclass="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>
<aclass="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>
<scriptsrc="js/main.js"></script>
<scriptasyncdefersrc="https://buttons.github.io/buttons.js"></script>
</body>
</html>