Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 13.7 KB
Newer Older
Thibaut Broggi's avatar
Start html page  
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
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
6 
    <link rel="stylesheet" href="./bootstrap-grid.min.css" />
Thibaut Broggi's avatar
Rework nav bar    
Thibaut Broggi committed
7 
    <link rel="stylesheet" href="./font-awesome.min.css" />
Thibaut Broggi's avatar
Start html page  
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
Rework nav bar    
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
Start html page  
Thibaut Broggi committed
19
20 
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Add "randomize" button    
Thibaut Broggi committed
21 
      <div>
Thibaut Broggi's avatar
Add randomize button. It needs more work (see #4)    
Thibaut Broggi committed
22 
	<button id="randomize">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
Thibaut Broggi's avatar
Add "randomize" button    
Thibaut Broggi committed
23 
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
24 
      <div id="step1">
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
25 
	<h2>Choisissez la couleur de fond</h2>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
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
Update colorpickers colors    
Thibaut Broggi committed
29 
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
30 
	      <label for="bg-red">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
31 
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
32 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
33
34 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
35 
	      <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
36 
	      <label for="bg-pink">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
37 
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
38 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
39
40 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
41 
	      <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
42 
	      <label for="bg-orange">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
43 
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
44 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
45
46 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
47 
	      <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
48 
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
49 
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
50 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
51
52 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
53 
	      <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
54 
	      <label for="bg-teal">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
55 
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
56 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
57
58 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
59 
	      <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
60 
	      <label for="bg-blue">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
61 
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
62 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
63
64 
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
65 
	      <input type="radio" name="bg-color" value="#000" id="bg-black" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
66 
	      <label for="bg-black">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
67 
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
68 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
69 
	    </div>
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
70
71 
	  </div>
	</div>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
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
Update colorpickers colors    
Thibaut Broggi committed
76 
	      <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
77 
	      <label for="fg-red">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
78 
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
79
80
81 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
82 
	      <input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
83 
	      <label for="fg-pink">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
84 
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
85
86
87 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
88 
	      <input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
89 
	      <label for="fg-orange">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
90 
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
91
92
93 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
94 
	      <input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
95 
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
96 
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
97
98
99 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
100 
	      <input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
101 
	      <label for="fg-teal">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
102 
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
103
104
105 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
106 
	      <input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
107 
	      <label for="fg-blue">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
108 
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
109
110
111 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
112 
	      <input type="radio" name="fg-color" value="#000" id="fg-black" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
113 
	      <label for="fg-black">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
114 
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
115
116
117 
	      </label>
	    </div>
	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
118 
	      <input type="radio" name="fg-color" value="#fff" id="fg-white" />
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
119 
	      <label for="fg-white">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
120 
		<span style="background-color: #fff"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
121
122
123
124 
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
125 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
126 
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
127
128 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
129 
      <div id="step2">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
130 
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Remove useless div    
Thibaut Broggi committed
131 
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
132 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
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
Start html page  
Thibaut Broggi committed
135
136 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
137 
      <div id="step3">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
138 
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Add font inputs    
Thibaut Broggi committed
139 
	<div>
Thibaut Broggi's avatar
Add fonts selector    
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
Add a default font    
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
Add fonts selector    
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
Add font inputs    
Thibaut Broggi committed
151 
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
152 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
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
Start html page  
Thibaut Broggi committed
155
156 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
157 
      <div id="step4">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
158 
	<h2>Choisissez votre icône</h2>
Thibaut Broggi's avatar
Add icon picker    
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 
	<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
Add inputs for each icon    
Thibaut Broggi committed
185
186
187
188
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 
	    <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
Add icon picker    
Thibaut Broggi committed
233
234 
	  </div>
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
235 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
236
237 
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
238
239 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
240 
      <div id="step5">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
241 
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Fix HTML errors    
Thibaut Broggi committed
242 
	<input type="text" id="signature" />
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
243 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
244 
	  <a href="#step4" class="prevButton">&lsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
245
246
247
248 
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Add "save" button    
Thibaut Broggi committed
249
250
251
252 
      <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
Add main div    
Thibaut Broggi committed
253
254 
      <div id="credits">
	<p><strong>Site hébergé par La Quadrature du Net</strong></p>
Thibaut Broggi's avatar
Fix typo in credits    
Thibaut Broggi committed
255 
	<p><strong>Crédits :</strong> Les polices 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>
Thibaut Broggi's avatar
Add main div    
Thibaut Broggi committed
256
257
258
259 
	<p><strong>Code source du site :</strong><br />
	  contact@laquadrature.net
	</p>
      </div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
260 
    </main>
Thibaut Broggi's avatar
Fix HTML errors    
Thibaut Broggi committed
261 
    <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
262
263 
  </body>
</html>