Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Agnes-
controle-tes-donnees.net
Commits
6ad4475d
Commit
6ad4475d
authored
Oct 06, 2015
by
piks3l
Browse files
Bougé le css dans un /css et le js dans un /js
parent
2925f55f
Changes
3
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 : 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 ▲
"
;
//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 ▼
"
;
//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 : 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 ▲
"
;
//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 ▼
"
;
//change le texte du bouton
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment