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 name="twitter:card" content="summary" />
Thibaut Broggi's avatar
Thibaut Broggi committed
7
    <meta property="og:title" content="Soutenez La Quadrature du Net !" />
8
    <meta property="og:description" content="Soutenez La Quadrature du Net !" />
Thibaut Broggi's avatar
Thibaut Broggi committed
9
    <meta property="og:url" content="http://<%= host %>?<%= imageParams %>" />
Thibaut Broggi's avatar
Thibaut Broggi committed
10
    <meta property="og:image" content="http://<%= host %>/generate.png?<%= imageParams %>" />
11
    <link rel="stylesheet" href="./bootstrap-grid.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
12
    <link rel="stylesheet" href="./font-awesome.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
13
14
15
16
17
18
    <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
19
20
21
22
23
      <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
24
25
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Thibaut Broggi committed
26
      <div>
27
	<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
Thibaut Broggi's avatar
Thibaut Broggi committed
28
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
29
      <div id="step1">
Thibaut Broggi's avatar
Thibaut Broggi committed
30
	<h2>Choisissez la couleur de fond</h2>
31
32
33
	<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
34
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Thibaut Broggi committed
35
	      <label for="bg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
36
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
37
	      </label>
38
39
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
40
	      <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Thibaut Broggi committed
41
	      <label for="bg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
42
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
43
	      </label>
44
45
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
46
	      <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Thibaut Broggi committed
47
	      <label for="bg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
48
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
49
	      </label>
50
51
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
52
	      <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Thibaut Broggi committed
53
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
54
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
55
	      </label>
56
57
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
58
	      <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Thibaut Broggi committed
59
	      <label for="bg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
60
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
61
	      </label>
62
63
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
64
	      <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Thibaut Broggi committed
65
	      <label for="bg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
66
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
67
	      </label>
68
69
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
70
	      <input type="radio" name="bg-color" value="#000" id="bg-black" />
Thibaut Broggi's avatar
Thibaut Broggi committed
71
	      <label for="bg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
72
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
73
	      </label>
74
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
75
76
	  </div>
	</div>
77
78
79
80
	<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
81
	      <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
82
	      <label for="fg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
83
		<span style="background-color: #f54358"></span>
84
85
86
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
87
	      <input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
88
	      <label for="fg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
89
		<span style="background-color: #ee0088"></span>
90
91
92
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
93
	      <input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
94
	      <label for="fg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
95
		<span style="background-color: #ff9146"></span>
96
97
98
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
99
	      <input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
100
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
101
		<span style="background-color: #ffd201"></span>
102
103
104
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
105
	      <input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
106
	      <label for="fg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
107
		<span style="background-color: #39d0b7"></span>
108
109
110
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
111
	      <input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
112
	      <label for="fg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
113
		<span style="background-color: #2f5189"></span>
114
115
116
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
117
	      <input type="radio" name="fg-color" value="#000" id="fg-black" />
118
	      <label for="fg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
119
		<span style="background-color: #000"></span>
120
121
122
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
123
	      <input type="radio" name="fg-color" value="#fff" id="fg-white" />
124
	      <label for="fg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
125
		<span style="background-color: #fff"></span>
126
127
128
129
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
130
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
131
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
132
133
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
134
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
135
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
136
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Thibaut Broggi committed
137
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
138
139
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
140
141
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
142
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
143
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
144
	<div>
Thibaut Broggi's avatar
Thibaut Broggi committed
145
146
147
148
149
	  <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
150
	  <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
151
152
153
154
155
	  <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
156
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
157
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
158
159
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
160
161
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
162
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
163
	<h2>Choisissez votre icône</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
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
	<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
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
	    <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
238
239
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
240
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
241
242
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
243
244
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
245
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
246
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
247
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Thibaut Broggi committed
248
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
249
	  <a href="#step4" class="prevButton">&lsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
250
251
252
253
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
254
255
      <div>
	<canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Thibaut Broggi committed
256
	<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
257
258
	<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
259
260
      <div id="credits">
	<p><strong>Site hébergé par La Quadrature du Net</strong></p>
261
	<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
262
263
264
265
	<p><strong>Code source du site :</strong><br />
	  contact@laquadrature.net
	</p>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
266
    </main>
Thibaut Broggi's avatar
Thibaut Broggi committed
267
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
268
269
  </body>
</html>