index.html 4.11 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
	<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="bg-color" value="red" id="bg-red" />
	      <label style="background-color: red" for="bg-red"></label>
	    </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" />
	      <label style="background-color: pink" for="bg-pink"></label>
	    </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" />
	      <label style="background-color: orange" for="bg-orange"></label>
	    </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" />
	      <label style="background-color: yellow" for="bg-yellow"></label>
	    </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" />
	      <label style="background-color: teal" for="bg-teal"></label>
	    </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" />
	      <label style="background-color: blue" for="bg-blue"></label>
	    </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" />
	      <label style="background-color: black" for="bg-black"></label>
	    </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" />
	      <label style="background-color: white" for="bg-white"></label>
	    </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
59
60
	  </div>
	</div>
Thibaut Broggi's avatar
Thibaut Broggi committed
61
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
62
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
63
64
65
	</div>
      </div>
      </input>
Thibaut Broggi's avatar
Thibaut Broggi committed
66
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
67
68
	<h2>Remplissez le texte à trou</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
69
70
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
71
72
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
73
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
74
75
	<h2>Choisissez votre police</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
76
77
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
78
79
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
80
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
81
82
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
83
84
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
85
86
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
87
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
88
89
	<h2>Signez votre création ! (optionnel)</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
90
91
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
92
93
94
95
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
96
97
98
99
100
101
102
103
      <div id="output"></div>
      <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
104
105
106
    </main>
  </body>
</html>