index.html 8.24 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
22
23
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </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
70
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
71
	      <input type="radio" name="bg-color" value="#fff" id="bg-white" />
Thibaut Broggi's avatar
Thibaut Broggi committed
72
	      <label for="bg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
73
		<span style="background-color: #fff"></span>
Thibaut Broggi's avatar
Thibaut Broggi committed
74
	      </label>
75
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
76
77
	  </div>
	</div>
78
79
80
81
	<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
82
	      <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
83
	      <label for="fg-red">
Thibaut Broggi's avatar
Thibaut Broggi committed
84
		<span style="background-color: #f54358"></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="#ee0088" id="fg-pink" />
89
	      <label for="fg-pink">
Thibaut Broggi's avatar
Thibaut Broggi committed
90
		<span style="background-color: #ee0088"></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="#ff9146" id="fg-orange" />
95
	      <label for="fg-orange">
Thibaut Broggi's avatar
Thibaut Broggi committed
96
		<span style="background-color: #ff9146"></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="#ffd201" id="fg-yellow" checked/>
101
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Thibaut Broggi committed
102
		<span style="background-color: #ffd201"></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="#39d0b7" id="fg-teal" />
107
	      <label for="fg-teal">
Thibaut Broggi's avatar
Thibaut Broggi committed
108
		<span style="background-color: #39d0b7"></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="#2f5189" id="fg-blue" />
113
	      <label for="fg-blue">
Thibaut Broggi's avatar
Thibaut Broggi committed
114
		<span style="background-color: #2f5189"></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="#000" id="fg-black" />
119
	      <label for="fg-black">
Thibaut Broggi's avatar
Thibaut Broggi committed
120
		<span style="background-color: #000"></span>
121
122
123
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Thibaut Broggi committed
124
	      <input type="radio" name="fg-color" value="#fff" id="fg-white" />
125
	      <label for="fg-white">
Thibaut Broggi's avatar
Thibaut Broggi committed
126
		<span style="background-color: #fff"></span>
127
128
129
130
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
131
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
132
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
133
134
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
135
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
136
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
137
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Thibaut Broggi committed
138
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
139
140
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
141
142
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
143
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
144
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
145
	<div>
Thibaut Broggi's avatar
Thibaut Broggi committed
146
147
148
149
150
151
152
153
154
155
156
	  <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
157
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
158
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
159
160
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
161
162
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
163
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
164
165
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
166
167
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
168
169
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
170
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
171
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
172
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Thibaut Broggi committed
173
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
174
175
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
176
177
178
179
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
180
      <canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Thibaut Broggi committed
181
182
183
184
185
186
187
      <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
188
    </main>
Thibaut Broggi's avatar
Thibaut Broggi committed
189
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
190
191
  </body>
</html>