index.html 6.8 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
29
30
31
	      <input type="radio" name="bg-color" value="red" id="bg-red" checked/>
	      <label for="bg-red">
		<span style="background-color: red"></span>
	      </label>
32
33
34
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="pink" id="bg-pink" />
Thibaut Broggi's avatar
Thibaut Broggi committed
35
36
37
	      <label for="bg-pink">
		<span style="background-color: pink"></span>
	      </label>
38
39
40
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="orange" id="bg-orange" />
Thibaut Broggi's avatar
Thibaut Broggi committed
41
42
43
	      <label for="bg-orange">
		<span style="background-color: orange"></span>
	      </label>
44
45
46
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
Thibaut Broggi's avatar
Thibaut Broggi committed
47
48
49
	      <label for="bg-yellow">
		<span style="background-color: yellow"></span>
	      </label>
50
51
52
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="teal" id="bg-teal" />
Thibaut Broggi's avatar
Thibaut Broggi committed
53
54
55
	      <label for="bg-teal">
		<span style="background-color: teal"></span>
	      </label>
56
57
58
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="blue" id="bg-blue" />
Thibaut Broggi's avatar
Thibaut Broggi committed
59
60
61
	      <label for="bg-blue">
		<span style="background-color: blue"></span>
	      </label>
62
63
64
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="black" id="bg-black" />
Thibaut Broggi's avatar
Thibaut Broggi committed
65
66
67
	      <label for="bg-black">
		<span style="background-color: black"></span>
	      </label>
68
69
70
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="bg-color" value="white" id="bg-white" />
Thibaut Broggi's avatar
Thibaut Broggi committed
71
72
73
	      <label for="bg-white">
		<span style="background-color: white"></span>
	      </label>
74
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
75
76
	  </div>
	</div>
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
	<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">
	      <input type="radio" name="fg-color" value="red" id="fg-red"/>
	      <label for="fg-red">
		<span style="background-color: red"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="pink" id="fg-pink" />
	      <label for="fg-pink">
		<span style="background-color: pink"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="orange" id="fg-orange" />
	      <label for="fg-orange">
		<span style="background-color: orange"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="yellow" id="fg-yellow" checked />
	      <label for="fg-yellow">
		<span style="background-color: yellow"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="teal" id="fg-teal" />
	      <label for="fg-teal">
		<span style="background-color: teal"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="blue" id="fg-blue" />
	      <label for="fg-blue">
		<span style="background-color: blue"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="black" id="fg-black" />
	      <label for="fg-black">
		<span style="background-color: black"></span>
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
	      <input type="radio" name="fg-color" value="white" id="fg-white" />
	      <label for="fg-white">
		<span style="background-color: white"></span>
	      </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
134
	</div>
      </div>
      </input>
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
146
147
148
149
	<div>
	  <input type="radio" id="radio-font-1" name="font" value="1" /><label for="radio-font-1">Font 1</label>
	  <input type="radio" id="radio-font-2" name="font" value="2" checked/><label for="radio-font-2">Font 2</label>
	  <input type="radio" id="radio-font-3" name="font" value="3" /><label for="radio-font-3">Font 3</label>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
150
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
151
152
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
153
154
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
155
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
156
157
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
158
159
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" 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="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
163
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Thibaut Broggi committed
164
	<input type="text" id="signature"></input>
Thibaut Broggi's avatar
Thibaut Broggi committed
165
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
166
167
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
168
169
170
171
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
172
      <canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Thibaut Broggi committed
173
174
175
176
177
178
179
      <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
180
181
    </main>
  </body>
Thibaut Broggi's avatar
Thibaut Broggi committed
182
  <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Thibaut Broggi committed
183
</html>