index.ejs 14.2 KB
Newer Older
Thibaut Broggi's avatar
Thibaut Broggi committed
1
2
3
4
5
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Thibaut Broggi's avatar
Thibaut Broggi committed
6
    <meta property="og:title" content="Soutenez La Quadrature du Net !" />
7
    <meta property="og:description" content="Soutenez La Quadrature du Net !" />
Thibaut Broggi's avatar
Thibaut Broggi committed
8
    <meta property="og:url" content="http://<%= host %>" />
Thibaut Broggi's avatar
Thibaut Broggi committed
9
    <meta property="og:image" content="http://<%= host %>/generate.png?<%= imageParams %>" />
10
    <link rel="stylesheet" href="./bootstrap-grid.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
11
    <link rel="stylesheet" href="./font-awesome.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
12
13
14
15
16
17
    <link rel="stylesheet" href="./style.css" />
    <title>Soutenez La Quadrature du Net !</title>
  </head>
  <body>
    <nav>
      <span>LQDN</span>
Thibaut Broggi's avatar
Thibaut Broggi committed
18
19
20
21
22
      <a class="fa fa-eyedropper" href="#step1"></a>
      <a class="fa fa-i-cursor" href="#step2"></a>
      <a class="fa fa-font" href="#step3"></a>
      <a class="fa fa-pencil" href="#step4"></a>
      <a class="fa fa-cogs" href="#step5"></a>
Thibaut Broggi's avatar
Thibaut Broggi committed
23
24
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Thibaut Broggi committed
25
      <div>
26
	<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
Thibaut Broggi's avatar
Thibaut Broggi committed
27
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
28
      <div id="step1">
Thibaut Broggi's avatar
Thibaut Broggi committed
29
	<h2>Choisissez la couleur de fond</h2>
30
31
32
	<div class="colorpicker container">
	  <div class="row">
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
33
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Thibaut Broggi committed
34
	      <label for="bg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
35
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
36
	      </label>
37
38
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
39
	      <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Thibaut Broggi committed
40
	      <label for="bg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
41
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
42
	      </label>
43
44
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
45
	      <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Thibaut Broggi committed
46
	      <label for="bg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
47
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
48
	      </label>
49
50
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
51
	      <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Thibaut Broggi committed
52
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
53
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
54
	      </label>
55
56
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
57
	      <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Thibaut Broggi committed
58
	      <label for="bg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
59
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
60
	      </label>
61
62
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
63
	      <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Thibaut Broggi committed
64
	      <label for="bg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
65
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
66
	      </label>
67
68
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
69
	      <input type="radio" name="bg-color" value="#000" id="bg-black" />
Thibaut Broggi's avatar
Thibaut Broggi committed
70
	      <label for="bg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
71
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
72
	      </label>
73
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
74
75
	  </div>
	</div>
76
77
78
79
	<h2>Choisissez la couleur du texte</h2>
	<div class="colorpicker container">
	  <div class="row">
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
80
	      <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
81
	      <label for="fg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
82
		<span style="background-color: #f54358"></span>
83
84
85
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
86
	      <input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
87
	      <label for="fg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
88
		<span style="background-color: #ee0088"></span>
89
90
91
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
92
	      <input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
93
	      <label for="fg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
94
		<span style="background-color: #ff9146"></span>
95
96
97
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
98
	      <input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
99
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
100
		<span style="background-color: #ffd201"></span>
101
102
103
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
104
	      <input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
105
	      <label for="fg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
106
		<span style="background-color: #39d0b7"></span>
107
108
109
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
110
	      <input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
111
	      <label for="fg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
112
		<span style="background-color: #2f5189"></span>
113
114
115
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
116
	      <input type="radio" name="fg-color" value="#000" id="fg-black" />
117
	      <label for="fg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
118
		<span style="background-color: #000"></span>
119
120
121
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
122
	      <input type="radio" name="fg-color" value="#fff" id="fg-white" />
123
	      <label for="fg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
124
		<span style="background-color: #fff"></span>
125
126
127
128
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
129
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
130
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
131
132
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
133
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
134
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
135
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Thibaut Broggi committed
136
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
137
138
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
139
140
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
141
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
142
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
143
	<div>
Thibaut Broggi's avatar
Thibaut Broggi committed
144
145
146
147
148
	  <input type="radio" id="radio-font-1" name="font" value="bilbo-inc" /><label for="radio-font-1" style="font-family: bilbo-inc">Bilbo inc</label>
	  <input type="radio" id="radio-font-2" name="font" value="bluu-next" checked/><label for="radio-font-2" style="font-family: bluu-next">Bluu Next</label>
	  <input type="radio" id="radio-font-3" name="font" value="boeticher" /><label for="radio-font-3" style="font-family: boeticher">Boeticher</label>
	  <input type="radio" id="radio-font-4" name="font" value="combat" /><label for="radio-font-4" style="font-family: combat">Combat</label>
	  <input type="radio" id="radio-font-5" name="font" value="gulax" /><label for="radio-font-5" style="font-family: gulax">Gulax</label>
Thibaut Broggi's avatar
Thibaut Broggi committed
149
	  <input type="radio" id="radio-font-6" name="font" value="lineal" checked/><label for="radio-font-6" style="font-family: lineal">Lineal</label>
Thibaut Broggi's avatar
Thibaut Broggi committed
150
151
152
153
154
	  <input type="radio" id="radio-font-7" name="font" value="resistance" /><label for="radio-font-7" style="font-family: resistance">Resistance</label>
	  <input type="radio" id="radio-font-8" name="font" value="savate" /><label for="radio-font-8" style="font-family: savate">Savate</label>
	  <input type="radio" id="radio-font-9" name="font" value="solid-mirage" /><label for="radio-font-9" style="font-family: solid-mirage">Solid Mirage</label>
	  <input type="radio" id="radio-font-10" name="font" value="steps-mono" /><label for="radio-font-10" style="font-family: steps-mono">Steps-Mono</label>
	  <input type="radio" id="radio-font-11" name="font" value="terminal" /><label for="radio-font-11" style="font-family: terminal">Terminal</label>
Thibaut Broggi's avatar
Thibaut Broggi committed
155
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
156
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
157
158
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
159
160
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
161
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
162
	<h2>Choisissez votre icône</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
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
	<div class="container">
	  <div class="row">
	    <input type="radio" id="radio-icon-1" name="icon" value="1" checked/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-1">1</label>
	    <input type="radio" id="radio-icon-2" name="icon" value="2" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-2">2</label>
	    <input type="radio" id="radio-icon-3" name="icon" value="3" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-3">3</label>
	    <input type="radio" id="radio-icon-4" name="icon" value="4" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-4">4</label>
	    <input type="radio" id="radio-icon-5" name="icon" value="5" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-5">5</label>
	    <input type="radio" id="radio-icon-6" name="icon" value="6" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-6">6</label>
	    <input type="radio" id="radio-icon-7" name="icon" value="7" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-7">7</label>
	    <input type="radio" id="radio-icon-8" name="icon" value="8" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-8">8</label>
	    <input type="radio" id="radio-icon-9" name="icon" value="9" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-9">9</label>
	    <input type="radio" id="radio-icon-10" name="icon" value="10" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-10">10</label>
	    <input type="radio" id="radio-icon-11" name="icon" value="11" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-11">11</label>
	    <input type="radio" id="radio-icon-12" name="icon" value="12" />
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-12">12</label>
Thibaut Broggi's avatar
Thibaut Broggi committed
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
	    <input type="radio" id="radio-icon-13" name="icon" value="13"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-13">13</label>
	    <input type="radio" id="radio-icon-14" name="icon" value="14"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-14">14</label>
	    <input type="radio" id="radio-icon-15" name="icon" value="15"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-15">15</label>
	    <input type="radio" id="radio-icon-16" name="icon" value="16"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-16">16</label>
	    <input type="radio" id="radio-icon-17" name="icon" value="17"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-17">17</label>
	    <input type="radio" id="radio-icon-18" name="icon" value="18"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-18">18</label>
	    <input type="radio" id="radio-icon-19" name="icon" value="19"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-19">19</label>
	    <input type="radio" id="radio-icon-20" name="icon" value="20"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-20">20</label>
	    <input type="radio" id="radio-icon-21" name="icon" value="21"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-21">21</label>
	    <input type="radio" id="radio-icon-22" name="icon" value="22"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-22">22</label>
	    <input type="radio" id="radio-icon-23" name="icon" value="23"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-23">23</label>
	    <input type="radio" id="radio-icon-24" name="icon" value="24"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-24">24</label>
	    <input type="radio" id="radio-icon-25" name="icon" value="25"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-25">25</label>
	    <input type="radio" id="radio-icon-26" name="icon" value="26"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-26">26</label>
	    <input type="radio" id="radio-icon-27" name="icon" value="27"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-27">27</label>
	    <input type="radio" id="radio-icon-28" name="icon" value="28"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-28">28</label>
	    <input type="radio" id="radio-icon-29" name="icon" value="29"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-29">29</label>
	    <input type="radio" id="radio-icon-30" name="icon" value="30"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-30">30</label>
	    <input type="radio" id="radio-icon-31" name="icon" value="31"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-31">31</label>
	    <input type="radio" id="radio-icon-32" name="icon" value="32"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-32">32</label>
	    <input type="radio" id="radio-icon-33" name="icon" value="33"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-33">33</label>
	    <input type="radio" id="radio-icon-34" name="icon" value="34"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-34">34</label>
	    <input type="radio" id="radio-icon-35" name="icon" value="35"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-35">35</label>
	    <input type="radio" id="radio-icon-36" name="icon" value="36"/>
	    <label class="col-xs-12 col-sm-6 col-lg-4 col-xl-3" for="radio-icon-36">36</label>
Thibaut Broggi's avatar
Thibaut Broggi committed
237
238
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
239
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
240
241
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
242
243
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
244
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
245
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
246
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Thibaut Broggi committed
247
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
248
	  <a href="#step4" class="prevButton">&lsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
249
250
251
252
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
253
254
      <div>
	<canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Thibaut Broggi committed
255
	<a id="tweet-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
Thibaut Broggi's avatar
Thibaut Broggi committed
256
257
	<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
258
259
      <div id="credits">
	<p><strong>Site hébergé par La Quadrature du Net</strong></p>
260
	<p><strong>Crédits :</strong> Les polices utilisées viennnent de <a href="https://www.velvetyne.fr/">Velvetyne Type Foundry</a>. Bluu par Jean Baptiste Morizot, Bilbo Inc par Hélène Marian Srodogora, Boeticher par Charles Paille, Combat par Martin Desinde, Gulax par Morgan Gilbert, Lineal par Frank Adebiaye, Resistance par Collective, Savate par Wech, Solide Mirage par Jérémy Landes-Nones, Steps mono par Jean Baptiste Morizot, Terminal par Rapaël Bastide et Jérémy Landes-Nones.</p>
Thibaut Broggi's avatar
Thibaut Broggi committed
261
262
263
264
	<p><strong>Code source du site :</strong><br />
	  contact@laquadrature.net
	</p>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
265
    </main>
Thibaut Broggi's avatar
Thibaut Broggi committed
266
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
267
268
  </body>
</html>