-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (227 loc) · 19.1 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WordCamp Europe Logo Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<!-- Controls -->
<div class="controls">
<form class="form-group" action="#">
<div class="project-info">
<h1>WCEU Logo Generator</h1>
<p>Modify colors and click on the specific dot to generate a focus area unique for each edition of <a href="https://2017.europe.wordcamp.org">WordCamp Europe</a>.</p>
</div>
<fieldset class="field-group">
<div class="field">
<label class="field__label" for="select-color-base">Base Color</label>
<div class="field__group">
<input type="color" class="input-color-base picker" id="select-color-base" pattern="#[a-f0-9]{6}" value="#DDDDDD">
<input type="text" class="input-color-base hex" value="#DDDDDD">
</div>
</div>
<div class="field">
<label class="field__label" for="select-color-dots">Dots Color</label>
<div class="field__group">
<input type="color" class="input-color-dots picker" id="select-color-dots" pattern="#[a-f0-9]{6}" value="#222222">
<input type="text" class="input-color-dots hex" value="#222222">
</div>
</div>
<div class="field">
<label class="field__label" for="select-color-wordpress-logo">WordPress Logo Color</label>
<div class="field__group">
<input type="color" class="input-color-wordpress-logo picker" id="select-color-wordpress-logo" pattern="#[a-f0-9]{6}" value="#222222">
<input type="text" class="input-color-wordpress-logo hex" value="#222222">
</div>
</div>
<div class="field">
<label class="field__label" for="select-color-wordpress-logo-background">WordPress Logo Background Color</label>
<div class="field__group">
<input type="color" class="input-color-wordpress-logo-background picker" id="select-color-wordpress-logo-background" pattern="#[a-f0-9]{6}" value="#FFFFFF">
<input type="text" class="input-color-wordpress-logo-background hex" value="#FFFFFF">
</div>
</div>
<div class="field">
<label class="field__label" for="select-color-background">Background Color</label>
<div class="field__group">
<input type="color" class="input-color-background picker" id="select-color-background" pattern="#[a-f0-9]{6}" value="#666666" >
<input type="text" class="input-color-background hex" value="#666666">
</div>
</div>
<div class="field">
<div class="field__action">
<input class="button-download svg" type="button" value="Save Logo as SVG">
</div>
</div>
<div class="field">
<div class="field__action">
<input class="button-download png" type="button" value="Save Logo as PNG">
</div>
</div>
<div class="field">
<div class="field__action">
<input class="button-markerReset" type="button" value="Remove Marker" disabled="disabled">
</div>
</div>
</fieldset>
</form>
</div>
<!-- /Controls -->
<!-- Preview -->
<div class="preview" style="background: #666666;">
<div class="svg">
<svg id="svgLogo" width="360" height="360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #666666;">
<title>
Logo
</title>
<defs>
<circle id="a" cx="180" cy="180" r="180" />
<symbol id="circle-small">
<circle class="dot" cx="12" cy="12" r="5" />
</symbol>
<symbol id="circle-medium">
<circle class="dot" cx="12" cy="12" r="7" />
</symbol>
<symbol id="circle-large">
<circle class="dot" cx="12" cy="12" r="9" />
</symbol>
</defs>
<g fill="none" fill-rule="evenodd">
<g id="background">
<use xlink:href="#a" class="base" fill="#FFF" />
</g>
<g id="world">
<mask id="b" fill="#FFF">
<use xlink:href="#a" />
</mask>
<g class="world" mask="url(#b)">
<!-- 1st row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(240 24)"/>
<!-- 2nd row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(72 48)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 48)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 48)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(264 48)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 48)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 48)"/>
<!-- 3rd row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 72)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(216 72)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 72)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 72)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 72)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 72)"/>
<!-- 4th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(96 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 96)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 96)"/>
<!-- 5th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(72 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(96 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(240 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 120)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 120)"/>
<!-- 6th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(72 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(96 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(168 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(192 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(216 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 144)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 144)"/>
<!-- 7th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(144 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 168)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 168)"/>
<!-- 8th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(96 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(120 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(144 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(288 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(312 192)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 192)"/>
<!-- 9th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(48 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(96 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(120 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(144 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(192 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(264 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(288 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(312 216)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(336 216)"/>
<!-- 10th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(48 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(72 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(96 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(120 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(144 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(168 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(192 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(240 240)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(264 240)"/>
<!-- 11th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(48 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(72 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(96 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(144 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(168 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(240 264)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(264 264)"/>
<!-- 12th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(168 288)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="9" data-r="9" transform="translate(216 288)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(240 288)"/>
<!-- 13th row -->
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="7" data-r="7" transform="translate(144 312)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(168 312)"/>
<circle class="dot" fill="#222" fill-opacity=".9" cx="12" cy="12" r="5" data-r="5" transform="translate(240 312)"/>
</g>
</g>
<g id="logo" transform="translate(240 0)">
<circle class="wordpress-logo-background" fill="#FFF" cx="60" cy="60" r="60"/>
<path class="wordpress-logo" transforms="" d="M101.025 37.57c3.65 6.658 5.726 14.3 5.726 22.428 0 17.248-9.346 32.306-23.246 40.41l14.28-41.286c2.667-6.67 3.555-12.003 3.555-16.745 0-1.72-.114-3.32-.315-4.808zm-34.582.508c2.814-.148 5.35-.444 5.35-.444 2.52-.298 2.223-4-.298-3.853 0 0-7.572.596-12.46.596-4.595 0-12.314-.595-12.314-.595-2.52-.146-2.816 3.705-.295 3.854 0 0 2.384.296 4.904.444l7.282 19.958L48.38 88.72 31.354 38.078c2.817-.148 5.35-.444 5.35-.444 2.518-.298 2.22-4-.3-3.853 0 0-7.57.596-12.46.596-.876 0-1.91-.022-3.008-.057C29.297 21.627 43.667 13.246 60 13.246c12.17 0 23.253 4.653 31.57 12.274-.2-.01-.398-.036-.605-.036-4.593 0-7.85 4-7.85 8.297 0 3.854 2.222 7.114 4.59 10.966 1.78 3.114 3.856 7.114 3.856 12.894 0 4-1.538 8.645-3.557 15.114l-4.664 15.58-16.897-50.256zM60 106.753c-4.59 0-9.02-.673-13.208-1.905l14.03-40.76 14.368 39.37c.095.23.21.444.335.645-4.86 1.71-10.08 2.65-15.525 2.65zM13.248 59.998c0-6.778 1.454-13.212 4.048-19.026l22.302 61.102C24 94.497 13.248 78.504 13.248 59.998zM60 8C31.327 8 8 31.326 8 59.998 8 88.67 31.327 112 60 112c28.672 0 52-23.33 52-52.002C112 31.326 88.672 8 60 8z" fill="#222"/>
</g>
</g>
</svg>
</div>
</div>
<!-- /Preview -->
</div>
<script src="scripts/saveSvgAsPng.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>