index.html 8.09 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
8
9
10
11
12
    <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
13
14
15
16
17
      <a href="#step1">1</a>
      <a href="#step2">2</a>
      <a href="#step3">3</a>
      <a href="#step4">4</a>
      <a href="#step5">5</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
18
19
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Thibaut Broggi committed
20
21
22
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
23
      <div id="step1">
Thibaut Broggi's avatar
Thibaut Broggi committed
24
	<h2>Choisissez la couleur de fond</h2>
25
26
27
	<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
28
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Thibaut Broggi committed
29
	      <label for="bg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
30
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
31
	      </label>
32
33
	    </div>
	    <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="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Thibaut Broggi committed
35
	      <label for="bg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
36
		<span style="background-color: #ee0088"></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="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Thibaut Broggi committed
41
	      <label for="bg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
42
		<span style="background-color: #ff9146"></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="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Thibaut Broggi committed
47
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
48
		<span style="background-color: #ffd201"></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="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Thibaut Broggi committed
53
	      <label for="bg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
54
		<span style="background-color: #39d0b7"></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="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Thibaut Broggi committed
59
	      <label for="bg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
60
		<span style="background-color: #2f5189"></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="#000" id="bg-black" />
Thibaut Broggi's avatar
Thibaut Broggi committed
65
	      <label for="bg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
66
		<span style="background-color: #000"></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="#fff" id="bg-white" />
Thibaut Broggi's avatar
Thibaut Broggi committed
71
	      <label for="bg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
72
		<span style="background-color: #fff"></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
150
151
152
153
154
155
	  <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>
	  <input type="radio" id="radio-font-6" name="font" value="lineal" /><label for="radio-font-6" style="font-family: lineal">Lineal</label>
	  <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
164
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
165
166
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
167
168
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
169
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
170
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
171
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Thibaut Broggi committed
172
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
173
174
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
175
176
177
178
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
179
      <canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Thibaut Broggi committed
180
181
182
183
184
185
186
      <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
187
    </main>
Thibaut Broggi's avatar
Thibaut Broggi committed
188
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
189
190
  </body>
</html>