index.html 4.3 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>
Thibaut Broggi's avatar
Thibaut Broggi committed
77
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
78
	  <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
79
80
81
	</div>
      </div>
      </input>
Thibaut Broggi's avatar
Thibaut Broggi committed
82
      <div id="step2">
Thibaut Broggi's avatar
Thibaut Broggi committed
83
84
	<h2>Remplissez le texte à trou</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
85
86
	  <a href="#step1" class="prevButton">&lsaquo;</a>
	  <a href="#step3" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
87
88
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
89
      <div id="step3">
Thibaut Broggi's avatar
Thibaut Broggi committed
90
91
	<h2>Choisissez votre police</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
92
93
	  <a href="#step2" class="prevButton">&lsaquo;</a>
	  <a href="#step4" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
94
95
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
96
      <div id="step4">
Thibaut Broggi's avatar
Thibaut Broggi committed
97
98
	<h2>Choisissez votre icône</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
99
100
	  <a href="#step3" class="prevButton">&lsaquo;</a>
	  <a href="#step5" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
101
102
	</div>
      </div>
Thibaut Broggi's avatar
Thibaut Broggi committed
103
      <div id="step5">
Thibaut Broggi's avatar
Thibaut Broggi committed
104
105
	<h2>Signez votre création ! (optionnel)</h2>
	<div class="navButtons">
Thibaut Broggi's avatar
Thibaut Broggi committed
106
107
	  <a href="#step4" class="prevButton">&lsaquo;</a>
	  <a class="nextButton">GÉNÉRER &rsaquo;</a>
Thibaut Broggi's avatar
Thibaut Broggi committed
108
109
110
111
	</div>
      </div>
    </div>
    <main>
Thibaut Broggi's avatar
Thibaut Broggi committed
112
113
114
115
116
117
118
119
      <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
120
121
122
    </main>
  </body>
</html>