-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
365 lines (337 loc) · 20.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
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
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Le projet Karmacratie</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<span class="navbar-brand js-scroll-trigger" href="#page-top">Karmacratie, le projet...</span>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Constat">Le constat</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Proposition">La proposition</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Participer">Nous rejoindre</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-heading text-uppercase">“Vous devez être le changement que vous voulez voir dans ce monde.”</div>
<div class="intro-lead-in">Gandi</div>
<a class="btn btn-primary btn-xl text-center js-scroll-trigger" href="#Constat">En savoir plus...</a>
</div>
</div>
</header>
<!-- Services -->
<section id="Constat">
<div class="container">
<h1>Notre constat</h1>
<h3><i>Le changement... ils nous l'ont tous promis à un moment.</i></h3>
Les gouvernements changent mais le résultat reste le même:<br>
<br>
<ul>
<li>Acquis sociaux entamés.</li>
<li>Pression sur les classes populaires et moyennes toujours plus forte.</li>
<li>Richesse et impunité pour les gens <b>de pouvoir</b>.</li>
</ul>
<br>
La succession de politiques et d'étiquettes ne résout rien au maux de la France et la raison en est simple: <b>le pouvoir</b> qu'il soit politique ou économique est <b>depuis toujours détenu par une poignée de familles défendant avant tout leurs intérêts propres.</b><br>
<br>
C'est ainsi que les grands patrons continuent à licencier abusivement, à pratiquer l'évasion fiscale, à mettre sur le marché des produits dangereux pour le consommateur en toute impunité.<br>
<br>
C'est ainsi que les politiques continuent à détourner de l'argent publique pour leurs conforts ou celui de leurs proches, à <i>s'arranger</i> avec les grands industriels en échange de jolis costumes pendant que le français moyen se serre la ceinture, pour le bien de la France et de sa dette.<br>
<br>
<b>La démocratie dans son expression actuelle est un échec...</b><br>
<br>
Au VIème siècle av. J.-C, les habitants d'Athènes avaient pourtant trouvés la solution: <a href="https://fr.wikipedia.org/wiki/D%C3%A9mocratie_directe" >la démocratie directe</a> dans laquelle "les citoyens exercent directement le pouvoir, sans l'intermédiaire de représentants"...<br>
Malheureusement, un tel système à longtemps été <b>impossible à appliquer en France faute d'outil électroral adapté...</b><br>
<br>
Aujourd'hui, les possibilités offertes par l'informatique son telles que cet outil peut exister! <b>C'est pour développer cet outil et promouvoir son usage que le projet Karmacratie a vu le jour</b>.<br>
<br>
<div class="text-center">
<a class="btn btn-primary btn-xl text-center js-scroll-trigger" href="#Proposition">Que proposez vous ?</a>
</div>
</div>
</section>
<section id="Proposition">
<div class="container">
<h1>Notre Proposition</h1>
Tout d'abord, il faut bien garder à l'esprit que même si la (petite) équipe de Karmacratie a déjà une idée plutôt précise de ce projet de démocratie directe, nous restons totalement ouverts à la discussion et le projet évoluera certainement avec l'arrivée de nouveaux participants.<br>
Aujourd'hui, Karmacratie vise à:<br>
<br>
<ul>
<li>Déporter la rédaction, la proposition et le vote des lois actuellement confiés, entre autres aux députés, vers les citoyens.</li>
<li>Permettre à tous de participer au moins en mettant en avant les personnes que les citoyens estiment les plus pertinentes, les plus qualifiées dans leurs domaines ou encore les plus représentatifs de leurs idées.</li>
<li>Confier à ces citoyens, et pour des périodes courtes, le rôle de représentant actuellement tenus par les ministres et leurs équipes.</li>
</ul>
Pour parvenir à cela, nous souhaitons nous appuyer sur un outil web découpé en autant de <i>sections</i> que d'actuels ministères.<br>
<br>
Voyons en détail, pour chacune des fonctions que nous souhaitons mettre en place, comment cet outil doit nous aider à y parvenir:
<br>
<h3>Les lois</h3>
Pour la mise en place de loi, l'outil fonctionnera en <b>cycle découpés 3 phases</b>: l'étude, la seconde lecture et le vote.<br>
Détaillons ces 3 phases:<br>
<br>
<ul>
<li>Lors de <b>l'étude</b>, les différentes propositions sont soumises aux citoyens. Ceux-ci peuvent voter <i>pour</i>, <i>contre</i> ou <i>blanc</i> mais également commenter la proposition afin de contribuer au débat. Les commentaires sont également soumis au jugement des citoyens. C'est en appliquant un algorithme basé sur ces différents votes que les propositions obtiennent un score. A la fin de la période d'étude, les propositions ayant obtenues les meilleurs scores passent à l'étape suivante. Les autres sont considérées comme refusées.</li>
<li>Lors de <b>la seconde lecture</b>, le citoyen peut modifier sa proposition en fonction du débat ou la conserver en l'état. La proposition est, à nouveau, soumise au vote des citoyens. Cette phase permet à l'auteur de la proposition de l'affiner en fonction de l'opinion de chacun, mais également aux citoyens moins spécialisés dans le domaine de pouvoir intervenir avant le passage de la proposition à la dernière étape. En effet, le nombre de propositions en seconde lecture sera volontairement réduit pour que tous puisse en prendre connaissance. A nouveau, à l'issue de cette phase, les meilleures propositions sont selectionnées pour être ensuite soumises au vote.</li>
<li>La phase de <b>vote</b> est, normalement, beaucoup plus courte: chaque citoyen doit voter pour les propositions des différentes sections (pour, contre, blanc). Lorsque le seuil de participation est atteint, la proposition est appliquée ou rejetée en fonction du résultat.</li>
</ul>
Ce découpage doit permettre à chaque citoyen de s'informer, de débattre et de voter pour faire évoluer la société.<br>
<br>
<h3>L'équipe du gouvernement</h3>
Les différents votes des citoyens que ce soit sur les propositions mais aussi le débat les accompagnant ne servent pas uniquement à mettre en avant les contenus les plus pertinents.<br>
<br>
Ils servent également à définir le <i>Karma</i> de son auteur. Plus les interventions d'un citoyen sont jugées pertinentes, plus son karma augmente. A l'inverse, si les interventions du citoyens sont jugées inutiles, mauvaises ou stériles, son karma va diminuer.<br>
<br>
A noter cependant que le <i>Karma</i> est spécifique à chaque sections: ainsi, la mauvaise foi dans le domaine de l'économie d'un citoyen n'impactera pas sa pertinence en écologie si c'est un domaine ou il est très compétent.<br>
<br>
C'est sur la base de ce <i>Karma</i> qu'est constituée, chaque année, l'équipe du gouvernement: les 2 citoyens les plus pertinents de chaque sections sont mis à la tête du <i>ministère</i> associé.<br>
Le rôle de ministre sera, bien évidemment, à re-définir mais devra essentiellement consister en un rôle de réprésentation auprès de ses homologues étrangers.<br>
<br>
<h3>Les citoyens</h3>
<b>Le projet est encore en cours de rédaction à ce jour... revenez nous voir pour la suite !</b><br>
<br>
<div class="text-center">
<a class="btn btn-primary btn-xl text-center js-scroll-trigger" href="#Participer">Vous souhaitez prendre part au projet ?</a>
</div>
</div>
</section>
<section id="Participer">
<div class="container">
<h1>Nous rejoindre</h1>
Karmacratie est un projet ambitieux qui démarre tout juste. Nous avons besoin de vous, en particulier si vous avez des compétences dans les domaines suivants:<br>
<br>
<ul>
<li>Développement web backend.</li>
<li>Développement web frontend.</li>
<li>Développement applications mobiles.</li>
<li>Graphisme et design.</li>
<li>Gestion d'association.</li>
<li>Communication, Buzz, Community management.</li>
<li>Rédaction.</li>
</ul>
En outre, dès que l'outil sera disponible, nous aurons besoin de vous pour le faire vivre, pour l'animer, pour y débattre de ce que nous voulons voir changer!<br>
<br>
Si vous souhaitez prendre part à l'aventure, veuillez nous contacter via le formulaire ci-dessous ou via twitter: <a href="https://twitter.com/TeamKarmacratie">@TeamKarmacratie</a><br>
<br>
Il est important de préciser que, vu la vocation du <b>projet</b>, nous souhaitons une <b>totale transparence</b> de ce dernier. C'est pourquoi vous êtes d'ores et déjà libre de consulter le code source de ce site mais également le travail en cours sur l'outil démocratique que nous développons via le site de développement communautaire <a href="http://github.com">GitHub</a>:<br>
<ul>
<li>Code source de ce site: <a href="https://github.com/karmacratie/project_site">https://github.com/karmacratie/project_site</a></li>
<li>Code source de l'outil démocratique: <a href="https://github.com/karmacratie/karmacratie-backend">https://github.com/karmacratie/karmacratie-backend</a></li>
<li>Wiki du projet: <a href="https://github.com/karmacratie/karmacratie-backend/wiki">https://github.com/karmacratie/karmacratie-backend/wiki</a></li>
</ul>
Vous êtes donc libre de nous soumettre vos contributions...<br>
<br>
<h3>A bientôt !</h3>
</section>
<!-- About -->
<!--
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Roadmap</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<ul class="timeline">
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/1.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>2009-2011</h4>
<h4 class="subheading">Our Humble Beginnings</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/2.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>March 2011</h4>
<h4 class="subheading">An Agency is Born</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li>
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/3.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>December 2012</h4>
<h4 class="subheading">Transition to Full Service</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<img class="rounded-circle img-fluid" src="img/about/4.jpg" alt="">
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4>July 2014</h4>
<h4 class="subheading">Phase Two Expansion</h4>
</div>
<div class="timeline-body">
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-image">
<h4>Be Part
<br>Of Our
<br>Story!</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
-->
<!-- Contact -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Contactez nous !</h2>
<h3 class="section-subheading text-muted">Vous voulez nous rejoindre ? En savoir plus sur le projet ? Contactez nous !</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form id="contactForm" name="sentMessage" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" type="text" placeholder="Votre nom *" required data-validation-required-message="Merci de saisir votre nom.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="email" type="email" placeholder="Votre adresse email *" required data-validation-required-message="Merci de saisir votre adresse email.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" id="phone" type="tel" placeholder="Votre numéro de téléphone">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Votre message *" required data-validation-required-message="Merci de saisir votre message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Envoyez</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col text-left">
<span class="copyright ">Karmacratie - 2018 (<i>Basé sur <a href="https://github.com/BlackrockDigital/startbootstrap-agency/">startbootstrap-agency.</a></i>)</span>
</div>
<!--
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="#">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
-->
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
</body>
</html>