Skip to content

GitLab

Commit 6ad4475d authored by piks3l's avatar piks3l
Browse files

Bougé le css dans un /css et le js dans un /js

parent 2925f55f
Hide whitespace changes
Inline Side-by-side
css/main.css 0 → 100644
View file @ 6ad4475d
/* 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
index.html
View file @ 6ad4475d
......@@ -6,78 +6,9 @@
<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">
<script src="js/main.js"></script>
<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
......@@ -684,4 +615,4 @@
</p>
</footer>
</body>
</html>
\ No newline at end of file
</html>
js/main.js 0 → 100644
View file @ 6ad4475d
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
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment