-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvoid-wp.html
87 lines (87 loc) · 4.99 KB
/
void-wp.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Void Wallpaper Generator </title>
<link href="assets/stylesheets/reset.css" rel="stylesheet"/>
<link href="assets/stylesheets/void-wp.css" rel="stylesheet"/>
</head>
<body>
<!-- TODO: can I make svg external and still have all the control over it? -->
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:700');
</style>
<!-- Use gradient to simtrate two different colors -->
<defs>
<linearGradient id="logo-outer-gradient">
<stop id="lower-outer" offset="50%" stop-color="#478061"/>
<stop id="higher-outer" offset="50%" stop-color="#abc2ab"/>
</linearGradient>
</defs>
<!-- Define shape of logo to reuse it with different viewboxes -->
<symbol id="void" viewBox="0 0 100 100">
<g transform="rotate(-45,50,50)">
<circle cx="50" cy="50" r="44" fill="url(#logo-outer-gradient)"/>
<circle id="separator-circle" cx="50" cy="50" r="30" fill="#f6f6f6"/>
<rect id="separator-rect" x="43" y="4" width="14" height="92" fill="#f6f6f6"/>
</g>
<circle id="inner" cx="50" cy="50" r="14" fill="#abc2ab"/>
<!-- This little abomination is the result of canvas not picking up external fonts,
so I needed to turn text into a path -->
<path id="logo-text" d="M 8.4886163,57.557548 C 8.2534442,57.382454 0,42.108916 0,41.848814 c 0,-0.549101 0.104343,-0.559253 5.7485119,-0.559253 6.4833691,0 5.3210381,-0.727211 8.4206161,5.268355 l 2.529188,4.892249 0.960269,-0.669508 c 12.727322,-8.873612 13.720444,-9.491096 15.264836,-9.491096 1.997704,0 2.450187,-0.372955 -10.082719,8.310606 C 9.9627003,58.522831 9.8608973,58.579271 8.4886163,57.557548 Z m 23.8649677,0.01975 c -8.048959,-1.5778 -2.669456,-14.46191 6.722091,-16.099658 1.300685,-0.22682 13.82522,-0.277798 14.977109,-0.06096 8.176686,1.539229 2.754329,14.445574 -6.769802,16.113548 -1.194941,0.209272 -13.897638,0.24932 -14.929398,0.04707 z M 43.85424,54.520343 c 1.897327,-0.883314 5.465432,-7.772233 4.995468,-9.644716 -0.358356,-1.427806 -6.530641,-1.085312 -7.900584,0.438396 -1.197837,1.332281 -3.586043,6.814853 -3.586043,8.232427 0,1.307836 4.366636,1.962982 6.491159,0.973893 z m 12.148592,3.11033 c -0.04598,-0.04597 -0.08359,-0.187909 -0.08359,-0.315416 0,-0.43899 6.764653,-15.445609 7.096871,-15.743604 0.393686,-0.35313 9.143411,-0.45649 9.276532,-0.10958 0.130055,0.338916 -6.94595,16.04266 -7.287833,16.173851 -0.275278,0.105634 -8.896128,0.100607 -9.001983,-0.0053 z m 11.748024,-0.102914 c -0.130035,-0.338865 6.670533,-15.650718 7.114547,-16.018795 0.325465,-0.269803 19.94735,-0.343382 21.200447,-0.0795 8.05686,1.696655 2.707841,14.446878 -6.752945,16.096702 -1.610251,0.280806 -21.454344,0.282269 -21.562049,0.0015 z M 84.71526,54.52622 c 1.276678,-0.594421 2.2553,-1.951247 3.623829,-5.024314 2.318172,-5.2055 2.231425,-5.391318 -2.516841,-5.391318 H 83.0639 l -2.345053,5.265938 c -1.28978,2.896266 -2.34767,5.308252 -2.350866,5.359972 -0.01749,0.282751 5.694815,0.09351 6.347279,-0.210278 z"/>
</symbol>
<rect width="100%" height="100%" fill="#f6f6f6"/>
<text id="upper-text" x="50%" y="15%" text-anchor="middle" font-family="Fira Mono, monospace" font-size="2.5em" font-weight="bold" fill="black">xbps-install -Syu</text>
<use href="#void" x="25%" y="25%" width="50%" height="50%"/>
<text id="lower-text" x="50%" y="90%" text-anchor="middle" font-family="Fira Mono, monospace" font-size="2.5em" font-weight="bold" fill="black">More Arch than Archlinux</text>
</svg>
<div id="control">
<table>
<tr>
<td>Resolution:</td>
<td><input type="number" name="x"/>x<input type="number" name="y"/></td>
</tr>
<tr><td>---</td></tr>
<tr><td><b>Colors:</b></td></tr>
<tr>
<td>Background:</td>
<td><input type="color" name="background" value="#f6f6f6"/></td>
</tr>
<tr>
<td>Lower outer circle:</td>
<td><input type="color" name="lower-outer" value="#478061"/></td>
</tr>
<tr>
<td>Higher outer circle:</td>
<td><input type="color" name="higher-outer" value="#abc2ab"/></td>
</tr>
<tr>
<td>Inner circle:</td>
<td><input type="color" name="inner" value="#abc2ab"/></td>
</tr>
<tr>
<td>Logo:</td>
<td><input type="color" name="logo" value="#000000"/><input type="checkbox" name="logo-switch" checked/></td>
</tr>
<tr>
<td>Text:</td>
<td><input type="color" name="p-text" value="#000000"/></td>
</tr>
<tr><td>---</td></tr>
<tr><td><b>Up Text:</b></td></tr>
<tr><td colspan=2><input type="text" name="up-text"/></td></tr>
<tr><td><b>Down Text:</b></td></tr>
<tr><td colspan=2><input type="text" name="down-text"/></td></tr>
</table>
<p></p>
<button>Generate!</button>
<div id="copyright">
<p>Created by Pavel Kiselev</p>
<p><a id="void-lnk" href="http://voidlinux.eu">Voidlinux</a> logo © by Juan RP
</div>
</div>
<canvas></canvas>
<script src="assets/scripts/void-wp.js"></script>
</body>
</html>