Commit 423fce39 authored by Herdir's avatar Herdir
Browse files

website

parent d14941bf
img/log.png

1023 Bytes

/* A faire : adapter pour Safari et smartphone
bleu-vert: #003948
/*Général*/
body, div, h1, h2, h3, a, bouton, p {
font-family:Verdana, Arial, "Arial Black", "Times New Roman", serif;
font-size:1em;
line-height:1.24em;
color:#003948;
margin:0;
padding:0;
}
body {background-color:white;}
em {font-style:normal;}
bouton {cursor:pointer;}
a {text-decoration:none;}
.color0 p a, .color1 p a, #tutoriel a, .color2 b {text-decoration:underline;}
@media only screen and (max-device-width:980px) {
body {font-size:120%; width:100%;}
}
/* ----------------------------------------------------- */
/* Bande haut --------------------*/
#stripeTop {
width:100%;
height:2em;
background-color: #497ED5;
}
/* Chapeau ------------------------*/
header {
background:url(Illu1.jpg);
background-size:93%;
background-repeat:no-repeat;
background-position: bottom center;
margin:1em auto 0em;
height: 550px;
/* margin-bottom:-20px; */
width:80%;
} @media only screen and (min-width:1000px) {header {width: 800px;}}
header h1 {
text-align:left;
float:left;
font-size:2em;
color:#003948;
line-height:1.1em;
margin-bottom:.1em;
}
header bouton {
float:right;
margin:.2em 0 0 0;
background:url(Illu0.png);
background-size:100%;
background-repeat:no-repeat;
padding:1em 1em 1.3em 3em;
}
header bouton:hover {
opacity:.9;
}
header bouton p {
font-size:1.4em;
line-height:.8em;
float:right;
text-align:center;
margin-right:.2em;
font-weight:bold;
color:#fff;
}
header bouton p span {
font-size:.8em;
}
header h2{
clear:both;
font-size:1em;
color:#497ED5;
font-weight:normal;
}
@media only screen and (max-device-width:980px) {
header {
width:95%;
margin-left: auto;
margin-right: auto;
height:400px;
}
header h1 {
float:none;
font-size: 1.8em;
}
header bouton {
display:none;
}
header h2 {
margin-top:.6em;
}
#header-img {
width:80%
}
}
#textIntro, #Act {
background-color:#497ED5;
padding: 2em;
}
#textIntro p, #textIntro b {
margin:0 auto;
line-height : 1.4em;
width:80%;
font-size:1em;
color:white;
white-space:normal;
} @media only screen and (min-width:1000px) {#textIntro p {width: 800px;}}
#textIntro h1, #Act h1 {
color:white;
line-height : 1em;
text-align:center;
font-size:1.4em;
}
/* ------------------------------------------------------------- */
/*Main --------------------------------------------------------- */
#main, #main2 {
margin: 2em auto 3em;
width:100%;
clear:both;
}@media only screen and (min-width:1000px) {#main {width: 1000px;}#main2 {width: 1000px;}}
@media only screen and (max-device-width:980px) {
#main, #main2 {width:95%; margin:.2em auto;}}
#main p, #main2 p {
text-align:justify;
font-size: .9em;
}
#main ul {
font-size: .9em;
}
/* Intro ---------------------*/
table {
border-collapse:collapse;
margin:0 auto;
}
td {
width : 20em;
padding : 0 2em;
vertical-align:top;
text-align:center;
}
tr td:first-of-type + td {
border-left: 1px solid #e0a63a;
border-right: 1px solid #e0a63a;
}
#intros bouton, #main2 bouton {
font-size:.9em;
padding:.5em 1.5em;
color: #fff;
}
/*Titres*/
#main .titres td {
vertical-align:bottom;
padding-bottom:1em;
transition: border-bottom 0.6s, top 0.3s;
}
#main .titres td:hover {
position:relative;
top:-5px;
cursor:pointer;
transition: border-bottom 0.6s, top 0.3s, opacity 0.3s;
}
.titres h1 {font-size: 1.3em;text-align:center;}
.titres img {width:95%;}
@media only screen and (max-device-width:980px) {
#intros {display:none;}
#main .titres td { width:33%; padding:0; vertical-align:top;}
#main .titres h1 {font-size:.9em; font-weight:normal; padding:.2em; vertical-align:top;}
}
.titreOn {opacity : 1;border-bottom: 1px solid #fff;}
.titreOff {opacity: 0.7;border-bottom: 1px solid #e0a63a;}
.titreOff:hover {opacity:1;}
/* Visibles */
.visible, .hidden {overflow: hidden;}
.visible {visibility: visible; opacity: 1; transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;}
.pageContent .visible {transition: visibility 0s, opacity 0.2s linear;}
.visible td p, .visible .pageContent {transition: margin-top 0s 0.2s;}
.pageContent .visible p, .visble .pageSection {transition: margin-top 0s;}
.hidden {visibility: hidden;opacity: 0;transition: visibility 0s 0.2s, opacity 0.2s linear;}
.hidden td p, .hidden .pageContent, .pageContent .hidden p, .hidden .pageSection {margin-top: -10000em;transition: margin-top 0s 0.2s;}
/*Couleurs*/
h1.color0, .color0 h1, .color0 h2, .color0 bouton, .color0 b, .color0 em {color: #497ED5;}
#intros .color0 bouton, .color0.pageContent h1, #main2 table .color0 bouton {background-color:#497ED5;}
#intros .color0 bouton:hover, #main2 table .color0 bouton:hover {background-color:#4170bd;}
h1.color1, .color1 h1, .color1 h2, .color1 bouton, .color b, .color1 em{color: #d99923;}
#intros .color1 bouton, .color1.pageContent h1, #main2 table .color1 bouton {background-color:#d99923;}
#intros .color1 bouton:hover, #main2 table .color1 bouton:hover {background-color:#bf871f;}
h1.color2, .color2 h1, .color2 h2, .color2 bouton, .color2 b, .color2 em{color: #D45B35;}
#intros .color2 bouton, .color2.pageContent h1, #main2 table .color2 bouton {background-color:#D45B35;}
#intros .color2 bouton:hover, #main2 table .color2 bouton:hover {background-color:#ba502f;}
/*Pages*/
.pageContent {
width:60%;
margin:2em auto 0;
} @media only screen and (min-width:1000px) {.pageContent {width:600px;}}
.pageContent h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
}
.pageContent p {
padding:0 3em;
white-space:pre-line;
}
.pageContent bouton {
display:block;
font-size:.9em;
text-align:center;
}
.pageSection {
margin: 2em 0;
padding:1em 2em;
background-color:#eee;
}
.pageSection h2 {
font-size: 1.1em;
text-align:justify;
}
.pageSection p {
padding:0 1em;
}
.pageSection ul {
padding-right:1em;
}
.pageSection bouton{
text-align:left;
margin:0;
}
.pageSection p bouton {
font-size:1em;
display:inline;
}
@media only screen and (max-device-width:980px) {
.pageContent {width:100%;}
.pageSection {margin:1em 0; padding: 1em .4em;}
.pageSection p {padding: 0 .4em;}
#main h2 {text-align:left; font-size:1em;}
#imgBan img {display:none;}
}
/*Table loi*/
#tLoi td, div.tL{border:solid 1px #bbb;padding:1em 1em;margin:0; white-space:pre-line;}
#tLoi td {line-height : 1.2em;cursor:pointer; text-align:left;font-size:.8em;}
div.tL {text-align:justify; font-size:.85em; padding: 2em;}
.tL a {text-decoration:underline;}
#main div.tL ul {font-size:1em; padding:0 2em;}
#tLoi td:hover, div.tL {background:#fff;}
@media only screen and (max-device-width:980px) {
#tLoi td {display:block; white-space:pre-line; font-size:.7em; line-height : 1em;}
div.tL {font-size:.8em; padding: .4em;}
}
/* Tuto */
/*#fondTuto {
background-color:#ccc;
z-index:10;
height:100%;
opacity : .5;
width:100%;
position:fixed;
}
.tuto {
position:relative;
z-index:20;
background-color:white;
padding: 2em 4em;
margin:2em auto 2em;
border-radius : 2em;
-moz-box-shadow: 0px 0px 20px 10px #bbb;
-webkit-box-shadow: 0px 0px 20px 10px #bbb;
-o-box-shadow: 0px 0px 20px 10px #bbb;
box-shadow: 0px 0px 20px 10px #bbb;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbb, Direction=NaN, Strength=20);
}*/
/*Main2*/
@media only screen and (max-device-width:980px) {
#main2 .titres td {display:block; width:90%; padding:0; margin:0 auto; border:none;}
#main2 td img {width:70%; display:block; margin:0 auto;}
#main2 bouton {display:block; margin:0 2em;}
}
/* Footer */
footer {
margin-top:1em;
background-color: #497ED5;
padding:1.5em 0 3em;
}
footer p {
color:#fff;
margin: 0 auto;
} @media only screen and (min-width:1000px) {footer p {width: 1000px;}}
footer img {width:8em; border:.7em solid #fff; margin:0em 2em; float:left;}
@media only screen and (max-device-width:980px) {footer img{float:none; display:block; margin:0 auto 1em;} footer p {padding: 0 1em;}}
/* Tutoriel ------------------------------------------------------------------ */
#tutoriel {
margin: 0 auto;
padding: 2em 0;
width:60%;
}@media only screen and (min-width:1000px) {#tutoriel {width: 600px;}}
@media only screen and (max-device-width:980px) {
#tutoriel {width:95%; margin:.2em auto;}}
#tutoriel h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
background-color:#D45B35;
}
#tutoriel h2, #tutoriel h3 {
font-size:1.2em; display:inline;
}
#tutoriel h3 {
font-weight:normal;
}
#tutoriel div {
margin: 2em auto;
padding:1em 3em;
background-color:#eee;
font-size:.9em;
text-align:justify;
white-space:pre-line;
}
#tutoriel ul, ol {
white-space: normal;
line-height : 1.4em;
}
#tutoriel b {line-height : 2em;}
#tutoriel div img {margin:0 auto; border:1px solid black; display:block; max-width:100%;}
#tutoriel em, .retourTuto, #tutoriel h2, #tutoriel h3 {color:#D45B35;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:-1em; text-decoration:none;}
#tutoriel #retourSite {margin-left:-4em;font-size:1.2em; color:#fff; text-decoration:none; font-weight:bold; background-color:#d99923; padding: .4em .8em;}
@media only screen and (max-device-width:980px) {
#tutoriel div {padding : .4em;}
#tutoriel #retourSite {margin-left:0em;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:0;}
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Reprenez le contrôle de vos données !</title>
<link rel="shortcut icon" href="img/log.png">
<link rel="stylesheet" href="img/main.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width" />
<script>
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","compteur.php?timer=1",true); xmlhttp.send(null);
function cinq() {xmlhttp.open("GET","compteur.php?timer=2",true); xmlhttp.send(null);}
window.setTimeout(cinq,1000*60*3);
function quinze() {xmlhttp.open("GET","compteur.php?timer=3",true); xmlhttp.send(null);}
window.setTimeout(quinze,1000*60*12);
function home() //fonction pour revenir à l'accueil
{
window.scrollTo(0, document.getElementById("main").offsetTop);
document.getElementById("intros").className="visible"; //affiche les intros
for (var pi=0; pi<3; pi++) {
document.getElementById("page"+pi).className="hidden"; //cache toutes les pages
document.getElementById("t"+pi).className="titreOn";} //rend tous les titres actifs
//à rajouter&nbsp;: ferme tous les textes
}
function navig(numero) //fonction ouvrant ou fermant la page dont le numéro est reçu en parametre
//est appelée en cliquant sur les titres ou les boutons inclus dans les intros
{
if (document.getElementById("page"+numero).className=="hidden" ) //si la page demandée n'est pas encore ouverte
{
document.getElementById("intros").className="hidden"; //cache les intros de main
for (var pi=0; pi<3; pi++) {
document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
document.getElementById("t"+pi).className="titreOff"; //rend tous les titres de main inactifs
}
document.getElementById("page"+numero).className="visible"; //affiche la page demandée
document.getElementById("t"+numero).className="titreOn"; //rend le titre de la page demandée actif
}
else //si la page demandée est déjà ouverte
{
document.getElementById("intros").className="visible"; //affiche les intros de main
for (var pi=0; pi<3; pi++) {
document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
document.getElementById("t"+pi).className="titreOn";//rend tous les titres de main actifs
}
}
}
var idScroll; //id pour clear le timeOut du scroll
var distOnClosure; //point où le scroll doit remonter, à déterminer avant chaque scroll
function moveOnClosure () {window.scrollBy(0, -distOnClosure);} //fonction de déplaceent pour le scroll de fermeture des textes
function openOn(btn) //fonction affichant ou masquant du texte dans les pages
//appelée en cliquant sur un bouton dérouleur, reçu en parametre
{
if (btn.previousSibling.className=='hidden') //si le frère précédent le bouton est caché
{
btn.previousSibling.className='visible'; //le rend visible
btn.innerHTML="<br/>Fermer &#9650"; //change le texte du bouton
}
else //si le frère précédent le bouton est visible
{
distOnClosure=btn.previousSibling.offsetHeight //fixe la distance devant être scrollée
clearTimeout (idScroll); //clear le timeOut du précédent scroll
idScroll = setTimeout(moveOnClosure, 200); //scroll, avec un délai de 0.2s
btn.previousSibling.className='hidden'; //masque le frère
btn.innerHTML="<br/>Continuer &#9660;"; //change le texte du bouton
}
}
</script>
<!-- Base des textes déroulant
<div class="pageSection"><h2>
Titre
</h2><p>
Intro
</p><div class="hidden"><p>
Contenu
</p></div><bouton onclick="openOn(this);"><br/>Continuer &#9660;</bouton>
</div>
-->
</head>
<body>
<div id="stripeTop" style="text-align:right; color:white; line-height;.9em; font-size:.9em;">[<a href="http://controle-tes-donnees.net" style="color:white;">FR</a>] [<a href="http://reclaimyourdata.eu" style="color:white;">EN</a>] &nbsp;</div>
<header style="text-align:justify;">
<h1>REPRENEZ LE CONTRÔLE<br/>DE VOS DONNÉES</h1>
<bouton onclick='window.scrollTo(0, document.getElementById("Act").offsetTop);'><p>Agissez</p></bouton>
<h2>Notre vie privée est en danger&nbsp;: agissons maintenant !</h2>
</header>
<div id="textIntro">
<h1>Agissons maintenant</h1>
<br/>
<p>
<b>Le futur règlement européen</b> protégeant notre vie privée est menacé par le lobby des géants de l'Internet, qui analysent tout ce que nous regardons et disons en ligne.<br/>
<br/>
<bouton onclick='window.scrollTo(0, document.getElementById("main").offsetTop); navig(0)'><b>Découvrez</b></bouton> pourquoi ce règlement est important et <bouton onclick='window.scrollTo(0, document.getElementById("main").offsetTop); navig(1)'><b> comment</b></bouton> ces lobbys sont en train de le changer.<br/>
<!--<bouton onclick='window.scrollTo(0, document.getElementById("Act").offsetTop);'><b>Appelez vos députés</b></bouton> pour leur donner votre opinion avant le <b>vote crucial du 21 octobre</b>.<br/>-->
<bouton onclick='window.scrollTo(0, document.getElementById("main").offsetTop); navig(2)'><b>Apprenez</b></bouton> à échapper à ces entreprises en reprenant le contrôle de vos données.<br/>
</p>
</div>
<div id="main">
<table>
<tr class="titres">
<td id="t0" class="titreOn" onclick="navig(0);" ><h1 class="color0"><img src="img/Illu2.jpg">Pourquoi contrôler <br/>mes données <br/>sur Internet&nbsp;?</h1></td>
<td id="t1" class="titreOn" onclick="navig(1);" ><h1 class="color1"><img src="img/Illu3.jpg">Comment la loi <br/>peut me redonner <br/>le contrôle&nbsp;?</h1></td>
<td id="t2" class="titreOn" onclick="navig(2);" ><h1 class="color2"><img src="img/Illu4.jpg">Comment reprendre <br/>le contrôle par <br/>moi-même&nbsp;?</h1></td>
</tr>
<tr id="intros" class="visible">
<td class="color0">
<p>
Vous avez sûrement déjà remarqué que vous étiez <em>suivi</em> sur Internet, principalement par la publicité.<br/>
<br/>
Mais saviez-vous que, sur Internet, chacun de vos <em>clics</em> et de vos <em>emails</em> étaient analysés afin de dresser un profil de vos opinions et de votre caractère.<br/>
<br/>
<br/>
</p>
<bouton onclick="navig(0);">En savoir plus&nbsp;&#9660;</bouton>
</td>
<td class="color1">
<p>
L'<em>Union européenne</em> s'apprête à voter un règlement qui nous redonnera le contrôle de nos données.<br />
<br />
Mais certaines entreprises veulent en garder le contrôle et mènent une <em>campagne de lobbying sans précédent</em> auprès des institutions européennes.
Si leur action aboutit, le règlement ne servira plus que leurs intérêts et non les nôtres.<br/>
<br/>
<br/>
</p>
<bouton onclick="navig(1);">En savoir plus&nbsp;&#9660;</bouton>
</td>
<td class="color2">
<p>
Dans tous les cas, le futur règlement ne pourra pas résoudre tous les problèmes d'un coup. Il y aura toujours des entreprises ou des gouvernements qui tenteront de le contourner.<br />
<br />
Nous devons apprendre à utiliser les <em>bons outils</em> qui laisseront toutes nos données <em>entre nos mains</em>.<br />
<br/>
<br/>
</p>
<bouton onclick="navig(2);">En savoir plus&nbsp;&#9660;</bouton>
</td>
</tr>
</table>
<div id="page0" class="hidden">
<div class="color0 pageContent">
<bouton onclick="navig(0);">Retour à l'accueil</bouton>
<br/><h1>Pourquoi contrôler mes données&nbsp;?</h1>
<div class="pageSection"><h2>
Les géants de l'Internet savent tout de nous
</h2><p>
Tous les messages transmis sur le Net ainsi que les sites et vidéos consultés par tous les internautes sont analysés par les géants de l'Internet (Google, Facebook, Apple, eBay, Amazon, Microsoft).
Quelles informations ces entreprises en tirent-elles&nbsp;?
</p><div class="hidden"><p>
Une <a href="http://lexpansion.lexpress.fr/high-tech/dis-moi-ce-que-tu-aimes-sur-facebook-je-te-dirais-qui-tu-es_376185.html"> étude</a> de l'université de Cambridge en donne un aperçu&nbsp;: 58.000 personnes ont répondu à un test de personnalité, puis ce test a été recoupé à tous les «&nbsp;j'aime&nbsp;» que ces personnes avaient laissés sur Facebook. En repartant de leurs seuls «&nbsp;j'aime&nbsp;», l'université a alors pu déterminer leur couleur de peau (avec 95% de certitude), leurs orientations politique (85%) et sexuelle (80%), leur confession religieuse (82%), s'ils fumaient (73%), buvaient (70%) ou consommaient de la drogue (65%).
Cette étude aurait été évidemment bien plus précise en se basant sur les 1.15 milliards d'inscrits (en mai 2013) de Facebook.
En outre, Facebook est aussi en mesure de surveiller tout internaute visitant un site Internet proposant un bouton «&nbsp;j'aime&nbsp;», et cela même si cet internaute ne clique pas sur le bouton en question ou <a href="http://papers.ssrn.com/sol3/papers.cfm?abstract_id=1717563">n'est pas inscrit sur Facebook</a> [EN].