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>