-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (164 loc) · 8.01 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!--
This Code is published under the terms and conditions of the CC-BY-NC-ND-4.0
(https://creativecommons.org/licenses/by-nc-nd/4.0)
Please contribute to the current project.
SPDX-License-Identifier: CC-BY-NC-ND-4.0
@author: pdulvp@laposte.net
-->
<html lang="en">
<head>
<title>font2image.app</title>
<meta charset="utf-8">
<meta name="title" content="font2image.app">
<meta name='viewport' content='width=device-width, initial-scale=1'/>
<meta name="keywords" content="font, png, svg, gif, jpg, convert, rasterize, icon, woff, ttf">
<meta name="description" content="Convert icon fonts to rasterized PNG GIF JPG or SVG images. Choose icons, color, padding and images are created.">
<meta name="target" content="all"/>
<meta name="audience" content="all"/>
<meta name="coverage" content="Worldwide"/>
<meta name="distribution" content="Global">
<meta name="og:type" content="website"/>
<meta name="rating" content="safe for kids"/>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body class="bg-light">
<div class="container-overlay">
<div class="header">
<div class="fixed"><a href="https://font2image.app" title="font2image.app" aria-label="Home">font2image.app</a></div>
<div class="spacing"></div>
<div class="buttons">
<div id="link-about" modal="modal-about" modal-icon="about" class="fixed link" aria-label="About">about</div>
<div class="spacing"></div>
<div id="link-license" modal="modal-license" modal-icon="license" class="fixed link" aria-label="License">license</div>
<div class="spacing"></div>
<div id="link-sponsor" modal="modal-sponsor" modal-icon="sponsor" class="fixed link" aria-label="Sponsor">sponsor</div><!-- <a href="http://patreon.com/pdulvp">sponsor</a> -->
</div>
<div class="spacing"></div>
<div class="fixed"><input type="button" value="download" id="download" aria-label="Download"/>
<select id="download-type" name="download-type" aria-label="Download file extension">
<option>png</option>
<option>gif</option>
<option>jpg</option>
<option>svg</option>
</select>
</div>
</div>
<div class="container-preview">
<div class="row">
<div class="canvases-row">
<canvas class="canvases-preview" id="canvases-preview"></canvas>
</div>
<div class="toolbar">
<div class="row-wrapper-1">
<div class="row3"><div id="font-chooser-label" class="div-label">Fonts</div>
<div id="font-chooser" class="font-chooser"></div>
</div>
<div class="row3"><div class="div-label">Size</div><input id="imageSize" title="width/height of icon file" type="range" min="0" step="2" max="512" value="24" class="slider slider-white"/></div>
<div class="row3"><div class="div-label">Padding</div><input id="padding" title="space surrounding icon" type="range" min="0" step="1" max="10" value="2" class="slider slider-white"/></div>
</div>
<div class="row-wrapper-2">
<div class="row2"><input title="hue" type="range" min="-1" max="100" value="20" class="slider sliderHue" id="hue"/></div>
<div class="row2"><input title="saturation" type="range" min="1" max="100" value="20" class="slider sliderSaturation" id="saturation"/></div>
<div class="row2"><input title="luminance" type="range" min="1" max="100" value="20" class="slider sliderLuminance" id="luminance"/></div>
<div class="row2"><input title="alpha" type="range" min="1" max="100" value="20" class="slider sliderAlpha" id="alpha"/></div>
</div>
</div>
</div>
</div>
</div>
<div id="okok">
</div>
<div id="modal-back" class="modal-back modal-hide">
</div>
<div id="modal-font" class="modal modal-hide">
<div id="font-chooser-adder" class="font-chooser-adder"></div>
</div>
<div id="modal-about" class="modal modal-window modal-hide">
<div class="modal-window-content">
<p>Goal of this website is to ease use and deployment of open source fonts<br/>
on programs that can't use woff, ttf or svg files but are using rasterized<br/>
images like PNG or GIF icons. Generate such images from SVG or fonts is quite<br/>
complicated to do manually and can be easily done now.<br/>
</p>
<h2>Website hosting</h2>
<p>
<i>OVH</i><br/>
SAS au capital de 10 069 020 €<br/>
RCS Lille Métropole 424 761 419 00045<br/>
Code APE 2620Z<br/>
N° TVA : FR 22 424 761 419<br/>
Siège social : 2 rue Kellermann - 59100 Roubaix - France<br/>
</p>
<h2>Site</h2>
<p>Site non professionnel d'une personne physique</p>
<h2>Source code</h2>
<p><a href="https://github.com/pdulvp/font2image.app">https://github.com/pdulvp/font2image.app</a></p>
<h3>FAQ</h3>
<p><ul>
<li>Why this site is so ugly ?</li>
<li>Is it?</li>
</ul>
</p>
<h3>Privacy policy</h3>
<p><ul>
<li>This website is GPDR compatible</li>
<li>We don't use cookies on this site, we eat them.</li>
<li>We don't track your clicks nor send usage data to some remote server</li>
<li>We don't know neither which images you are using as they are generated client-side<br/>
on your computer.</li>
<li>Our host provider store technical cookies used for load balancing or other<br/>
technical mechanism and keep connection logs somewhere.<br/>
Please read its <a href="https://us.ovhcloud.com/legal/privacy-policy">Privacy Policy</a></li>
</ul>
</p>
</div>
</div>
<div id="modal-license" class="modal modal-window modal-hide">
<div class="modal-window-content">
<h2>Icons and Fonts</h2>
All licenses of Icons and Fonts used within this site are defined by original fonts authors.<br/>
Licenses are shown on the right from font name.
<h2>Derivative images</h2>
Derivative images generated within the site using fonts and icons are published under the same<br/>
license than the originating fonts and icons.<br/>
If mentionned by the fonts and icons license, please add references to author(s), website, and<br/>
license of the originating fonts and icons when you use such images.
<h2>Website</h2>
This website and its source code is published under the terms and conditions of the<br/>
license CC-BY-NC-ND-4.0 (https://creativecommons.org/licenses/by-nc-nd/4.0)<br/><br/>
</div>
</div>
<div id="modal-sponsor" class="modal modal-window modal-hide">
<div class="modal-window-content">
<p>You can help us to develop and keep alive this website, cheering us at:</p>
<ul>
<li><p><a href="https://patreon.com/pdulvp"><img src="svg/patreon-pdulvp-red.svg"/></a> <i>(one-time donation or recurring)</i></p></li>
</ul>
</div>
</div>
<script src="/external/filesaver-2.0.4.min.js"></script>
<script src="/external/jszip-3.4.0.min.js"></script>
<script src="/node_modules/@pdulvp/require/require.js"></script>
<script src="/node_modules/@pdulvp/httpquery/httpquery.js"></script>
<script src="/node_modules/@pdulvp/colors/colors.js"></script>
<script src="main.js"></script>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="filterMatrix">
<feColorMatrix id="filterGrs" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feColorMatrix id="filterHue" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feColorMatrix id="filterSat" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feColorMatrix id="filterLum" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
<feComponentTransfer>
<feFuncR id="filterGammaR" type="gamma" amplitude="1.00" exponent="1.00"/>
<feFuncG id="filterGammaG" type="gamma" amplitude="1.00" exponent="1.00"/>
<feFuncB id="filterGammaB" type="gamma" amplitude="1.00" exponent="1.00"/>
</feComponentTransfer>
<feComponentTransfer>
<feFuncA id="filterAlpha" type="linear" slope="1"/>
</feComponentTransfer>
</filter>
</defs>
</svg>
</body>
</html>