Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 6.85 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
Start html page  
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
Update html layout    
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
Start html page  
Thibaut Broggi committed
18
19 
    </nav>
    <div id="inputs">
Thibaut Broggi's avatar
Add "randomize" button    
Thibaut Broggi committed
20
21
22 
      <div>
	<button id="randomize">CHOISIR AU HASARD</button>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
23 
      <div id="step1">
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
24 
	<h2>Choisissez la couleur de fond</h2>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
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
Update colorpickers colors    
Thibaut Broggi committed
28 
	      <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
29 
	      <label for="bg-red">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
30 
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
31 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
32
33 
	    </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
34 
	      <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
35 
	      <label for="bg-pink">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
36 
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
37 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
38
39 
	    </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
40 
	      <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
41 
	      <label for="bg-orange">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
42 
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
43 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
44
45 
	    </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
46 
	      <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
47 
	      <label for="bg-yellow">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
48 
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
49 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
50
51 
	    </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
52 
	      <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
53 
	      <label for="bg-teal">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
54 
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
55 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
56
57 
	    </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
58 
	      <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
59 
	      <label for="bg-blue">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
60 
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
61 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
62
63 
	    </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
64 
	      <input type="radio" name="bg-color" value="#000" id="bg-black" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
65 
	      <label for="bg-black">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
66 
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
67 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
68
69 
	    </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
70 
	      <input type="radio" name="bg-color" value="#fff" id="bg-white" />
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
71 
	      <label for="bg-white">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
72 
		<span style="background-color: #fff"></span>
Thibaut Broggi's avatar
Complete first color picker    
Thibaut Broggi committed
73 
	      </label>
Thibaut Broggi's avatar
Use Bootstrap grid to make color picker responsive    
Thibaut Broggi committed
74 
	    </div>
Thibaut Broggi's avatar
Start to design color picker    
Thibaut Broggi committed
75
76 
	  </div>
	</div>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
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
Update colorpickers colors    
Thibaut Broggi committed
81 
	      <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
82 
	      <label for="fg-red">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
83 
		<span style="background-color: #f54358"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
84
85
86 
	      </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
87 
	      <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
88 
	      <label for="fg-pink">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
89 
		<span style="background-color: #ee0088"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
90
91
92 
	      </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
93 
	      <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
94 
	      <label for="fg-orange">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
95 
		<span style="background-color: #ff9146"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
96
97
98 
	      </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
99 
	      <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
100 
	      <label for="fg-yellow">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
101 
		<span style="background-color: #ffd201"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
102
103
104 
	      </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
105 
	      <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
106 
	      <label for="fg-teal">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
107 
		<span style="background-color: #39d0b7"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
108
109
110 
	      </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
111 
	      <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
112 
	      <label for="fg-blue">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
113 
		<span style="background-color: #2f5189"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
114
115
116 
	      </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
117 
	      <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
118 
	      <label for="fg-black">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
119 
		<span style="background-color: #000"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
120
121
122 
	      </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
123 
	      <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
124 
	      <label for="fg-white">
Thibaut Broggi's avatar
Update colorpickers colors    
Thibaut Broggi committed
125 
		<span style="background-color: #fff"></span>
Thibaut Broggi's avatar
Add second color picker (for text color)    
Thibaut Broggi committed
126
127
128
129 
	      </label>
	    </div>
	  </div>
	</div>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
130 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
131 
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
132
133
134 
	</div>
      </div>
      </input>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
135 
      <div id="step2">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
136 
	<h2>Remplissez le texte à trou</h2>
Thibaut Broggi's avatar
Remove useless div    
Thibaut Broggi committed
137 
	<textarea placeholder="(90 caractères maximum)" rows="8" id="step2value" maxlength="90"></textarea>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
138 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
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
Start html page  
Thibaut Broggi committed
141
142 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
143 
      <div id="step3">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
144 
	<h2>Choisissez votre police</h2>
Thibaut Broggi's avatar
Add font inputs    
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
Start html page  
Thibaut Broggi committed
150 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
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
Start html page  
Thibaut Broggi committed
153
154 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
155 
      <div id="step4">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
156
157 
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
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
Start html page  
Thibaut Broggi committed
160
161 
	</div>
      </div>
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
162 
      <div id="step5">
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
163 
	<h2>Signez votre création ! (optionnel)</h2>
Thibaut Broggi's avatar
Add step 5 input (signature)    
Thibaut Broggi committed
164 
	<input type="text" id="signature"></input>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
165 
	<div class="navButtons">
Thibaut Broggi's avatar
Update html layout    
Thibaut Broggi committed
166
167 
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
168
169
170
171 
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Start to write canvas    
Thibaut Broggi committed
172 
      <canvas id="output" width="600" height="413"></canvas>
Thibaut Broggi's avatar
Add main div    
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
Start html page  
Thibaut Broggi committed
180
181 
    </main>
  </body>
Thibaut Broggi's avatar
Start to write canvas    
Thibaut Broggi committed
182 
  <script src="./canvas.js"></script>
Thibaut Broggi's avatar
Start html page  
Thibaut Broggi committed
183 
</html>