index.html 10.1 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" />
6
    <link rel="stylesheet" href="./bootstrap-grid.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
7
    <link rel="stylesheet" href="./font-awesome.min.css" />
Thibaut Broggi's avatar
Thibaut Broggi committed
8
9
10
11
12
13
    <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
14
15
16
17
18
      <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
19
20
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Thibaut Broggi committed
21
      <div>
22
	<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
Thibaut Broggi's avatar
Thibaut Broggi committed
23
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
24
      <div id="step1">
Thibaut Broggi's avatar
Thibaut Broggi committed
25
	<h2>Choisissez la couleur de fond</h2>
26
27
28
	<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
29
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Thibaut Broggi committed
30
	      <label for="bg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
31
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
32
	      </label>
33
34
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
35
	      <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Thibaut Broggi committed
36
	      <label for="bg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
37
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
38
	      </label>
39
40
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
41
	      <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Thibaut Broggi committed
42
	      <label for="bg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
43
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
44
	      </label>
45
46
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
47
	      <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Thibaut Broggi committed
48
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
49
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
50
	      </label>
51
52
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
53
	      <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Thibaut Broggi committed
54
	      <label for="bg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
55
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
56
	      </label>
57
58
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
59
	      <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Thibaut Broggi committed
60
	      <label for="bg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
61
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
62
	      </label>
63
64
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
65
	      <input type="radio" name="bg-color" value="#000" id="bg-black" />
Thibaut Broggi's avatar
Thibaut Broggi committed
66
	      <label for="bg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
67
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
68
	      </label>
69
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
70
71
	  </div>
	</div>
72
73
74
75
	<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
76
	      <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
77
	      <label for="fg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
78
		<span style="background-color: #f54358"></span>
79
80
81
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
82
	      <input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
83
	      <label for="fg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
84
		<span style="background-color: #ee0088"></span>
85
86
87
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
88
	      <input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
89
	      <label for="fg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
90
		<span style="background-color: #ff9146"></span>
91
92
93
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
94
	      <input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
95
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
96
		<span style="background-color: #ffd201"></span>
97
98
99
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
100
	      <input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
101
	      <label for="fg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
102
		<span style="background-color: #39d0b7"></span>
103
104
105
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
106
	      <input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
107
	      <label for="fg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
108
		<span style="background-color: #2f5189"></span>
109
110
111
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
112
	      <input type="radio" name="fg-color" value="#000" id="fg-black" />
113
	      <label for="fg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
114
		<span style="background-color: #000"></span>
115
116
117
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
118
	      <input type="radio" name="fg-color" value="#fff" id="fg-white" />
119
	      <label for="fg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
120
		<span style="background-color: #fff"></span>
121
122
123
124
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
125
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
126
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
127
128
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
129
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
130
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
131
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Thibaut Broggi committed
132
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
133
134
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
135
136
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
137
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
138
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
139
	<div>
Thibaut Broggi's avatar
Thibaut Broggi committed
140
141
142
143
144
	  <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
145
	  <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
146
147
148
149
150
	  <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
151
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
152
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
153
154
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
155
156
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
157
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
158
	<h2>Choisissez votre icône</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
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
	<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>
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
187
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
188
189
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
190
191
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
192
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
193
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
194
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Thibaut Broggi committed
195
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
196
197
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
198
199
200
201
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
202
203
204
205
      <div>
	<canvas id="output" width="600" height="413"></canvas>
	<a id="save-image" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
206
207
208
209
210
211
212
      <div id="credits">
	<p><strong>Site hébergé par La Quadrature du Net</strong></p>
	<p><strong>Crédits :</strong> Les policies utilisées viennnent de <strong>Velvetyne Type Foundry</strong>. 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>
	<p><strong>Code source du site :</strong><br />
	  contact@laquadrature.net
	</p>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
213
    </main>
Thibaut Broggi's avatar
Thibaut Broggi committed
214
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
215
216
  </body>
</html>