Skip to content
This repository was archived by the owner on Feb 6, 2026. It is now read-only.

Commit a5acf5e

Browse files
RedHBlackRedHBlack
committed
2 parents 683d7ef + f3205a0 commit a5acf5e

15 files changed

+460
-229
lines changed

glaciers_vulgarisation/api/static/js/script.js renamed to glaciers_vulgarisation/api/static/js/menu-action.js

Lines changed: 4 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ function plusSlides(n) {
2020
//-------- Faire afficher le bon graphe selon le scénario choisi ----------
2121

2222
// Récupérer les éléments de l'animation container
23-
const evolutionContainer1 = document.getElementById("evolution-container-1");
24-
const evolutionContainer2 = document.getElementById("evolution-container-2");
25-
const evolutionContainer3 = document.getElementById("evolution-container-3");
26-
const evolutionContainer4 = document.getElementById("evolution-container-4");
23+
const evolutionContainer1 = document.getElementById("evolutionContainer1");
24+
const evolutionContainer2 = document.getElementById("evolutionContainer2");
25+
const evolutionContainer3 = document.getElementById("evolutionContainer3");
26+
const evolutionContainer4 = document.getElementById("evolutionContainer4");
2727

2828
// Récupérer les éléments d'options de température
2929
const temperatureOptions = document.querySelectorAll(".temperature-option input[type='radio']");
@@ -88,40 +88,3 @@ window.addEventListener("scroll", event => {
8888
});
8989

9090

91-
// ------------------ Fait tourner les graphes -----------------
92-
document.addEventListener("DOMContentLoaded", function() {
93-
const slides = document.querySelectorAll('.slide-container');
94-
const totalSlides = slides.length;
95-
let currentSlide = 0;
96-
97-
// Fonction pour détecter si l'utilisateur a atteint une diapositive
98-
function scrollHandler() {
99-
const windowHeight = window.innerHeight;
100-
const windowcenter = window.innerHeight/2;
101-
const slideBottom = slides[currentSlide].getBoundingClientRect().bottom;
102-
const slideTop = slides[currentSlide].getBoundingClientRect().top;
103-
const slideCenter = slideTop + slides[currentSlide].getBoundingClientRect().height / 2;
104-
105-
// Augmente l'opacité quand on arrive dessus
106-
if(slideCenter >= windowHeight/2){
107-
var opacity = 1 - (slideTop / windowHeight);
108-
// Réduit l'opacité quand on repart
109-
}else if(slideCenter < windowHeight/2){
110-
var opacity = 0 + ((slideTop+slideBottom) / windowHeight);
111-
}
112-
opacity = Math.min(1, Math.max(0, opacity));
113-
slides[currentSlide].style.opacity = opacity;
114-
115-
// Passe à la slide suivante
116-
if (slideCenter < 0 ){
117-
if(currentSlide < totalSlides-1) {currentSlide ++;}
118-
// Revient à la slide précédente
119-
} else if (slideCenter > 0 ){
120-
if(currentSlide > 0) {currentSlide --;}
121-
}
122-
}
123-
124-
// Écoute l'événement de défilement
125-
window.addEventListener('scroll', scrollHandler);
126-
});
127-

‎glaciers_vulgarisation/api/static/js/scroll-slide-content.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
const slides = document.querySelectorAll('.slide-container');
3+
const totalSlides = slides.length;
4+
let currentSlide = 0;
5+
6+
// Fonction pour détecter si l'utilisateur a atteint une diapositive
7+
function scrollHandler() {
8+
const windowHeight = window.innerHeight;
9+
const windowcenter = window.innerHeight/2;
10+
const slideBottom = slides[currentSlide].getBoundingClientRect().bottom;
11+
const slideTop = slides[currentSlide].getBoundingClientRect().top;
12+
const slideCenter = slideTop + slides[currentSlide].getBoundingClientRect().height / 2;
13+
14+
let opacity;
15+
16+
// Calcule l'opacité en fonction de la position de la diapositive par rapport à la fenêtre
17+
if (slideTop > 0.80*windowHeight || slideBottom < 0.15*windowHeight) {
18+
opacity = 0;
19+
} else if (slideBottom < windowHeight && slideBottom > 0.90*windowHeight) {
20+
opacity = 1;
21+
} else {
22+
opacity = -7 * (slideCenter/windowHeight-0.1) * (slideCenter/windowHeight-0.9);
23+
opacity = Math.min(1, Math.max(0, opacity));
24+
}
25+
slides[currentSlide].style.opacity = opacity;
26+
console.log("currentSlide", currentSlide, "windowHeight", windowHeight, "\nwindowcenter", windowcenter, "\nslideBottom", slideBottom, "\nslideCenter", slideCenter, "\nslideTop", slideTop)
27+
28+
// Passe à la slide suivante
29+
if (opacity==0 && slideCenter<windowcenter ){
30+
if(currentSlide < totalSlides-1) {currentSlide ++;}
31+
// Revient à la slide précédente
32+
} else if (opacity==0 && slideCenter>windowcenter){
33+
if(currentSlide > 0) {currentSlide --;}
34+
}
35+
}
36+
37+
// Écoute l'événement de défilement
38+
window.addEventListener('scroll', scrollHandler);
39+
});

‎glaciers_vulgarisation/api/static/js/scroll-slide-to-slide.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// Init();
2+
3+
4+
// //===============================================================================
5+
// //==== INIT =====================================================================
6+
// //===============================================================================
7+
// function Init(){
8+
// $AnimInProgress=false;//debloque l'animation
9+
// $NbSlide = $('.section-container').length;
10+
// $CurrentSlide=1;
11+
// $Zindex=100;
12+
// vSubtitle=vText=vCompteur=vLeadZero="";
13+
// ct=0;
14+
// $('.section-container').each(function(){
15+
// vSubtitle = vClients+$(this).find('strong').html()+"<br>";
16+
// vText = vProjets+$(this).find('h1').html()+"<br>";
17+
// vLeadZero = vLeadZero+"0<br>";
18+
// vCompteur = vCompteur+ct+"<br>";
19+
// ct=ct+1;
20+
// });
21+
// $('#slclient').find('div').html('<span>client</span> <span class="scroll">'+vClients+'</span>');
22+
// $('#slprojet').find('div').html('<span>projet</span> <span class="scroll">'+vProjets+'</span>');
23+
// $('#slcompteur').find('b>span:nth-child(2),b>span:nth-child(1)').html(vLeadZero);
24+
// $('#slcompteur').find('b>span:nth-child(3)').html(vCompteur);
25+
// $('#more').addClass('hide');
26+
// var indicator = new WheelIndicator({elem:document.querySelector('#slider'),callback: function(e){ ScrollMe(e.direction); }});
27+
// indicator.getOption('preventMouse');
28+
29+
30+
// Jump2Slide(1);
31+
// }
32+
33+
// //===============================================================================
34+
// //==== ON SCROLL ================================================================
35+
// //===============================================================================
36+
// function ScrollMe(Direction){
37+
// if($AnimInProgress==false){
38+
// if(Direction=='down'){
39+
40+
// $AnimInProgress=true;//bloque l'animation
41+
// $ThisSl = $(".section-container:nth-child("+$CurrentSlide+")");//definit panneau sortant
42+
// if($CurrentSlide<$NbSlide){$CurrentSlide+=1;}else if($CurrentSlide==$NbSlide){$CurrentSlide=1;}
43+
// $VisOrigine = '100px';
44+
// $VisOut = '-100px';
45+
// }else if(Direction=='up' && $CurrentSlide>1){
46+
// $AnimInProgress=true;//bloque l'animation
47+
// $ThisSl = $(".section-container:nth-child("+$CurrentSlide+")");//definit panneau sortant
48+
// $CurrentSlide-=1;
49+
// $VisOrigine = '-100px';
50+
// $VisOut = '100px';
51+
// }else{
52+
// $AnimInProgress=false;//debloque l'animation
53+
// exit;
54+
// }
55+
// $Zindex +=1;
56+
// SwitchSlider();
57+
// }
58+
// }
59+
60+
// function Jump2Slide(n){
61+
// if($AnimInProgress==false){
62+
// $AnimInProgress=true;//bloque l'animation
63+
// $ThisSl = $(".section-container:nth-child("+$CurrentSlide+")");//definit panneau sortant
64+
// if($CurrentSlide>n){
65+
// $VisOrigine = '-100px';
66+
// $VisOut = '100px';
67+
// }else{
68+
// $VisOrigine = '100px';
69+
// $VisOut = '-100px';
70+
// }
71+
72+
// $CurrentSlide=n+1;
73+
// $Zindex +=1;
74+
// SwitchSlider();
75+
// }
76+
// }
77+
78+
// //===============================================================================
79+
// //==== SWITCH PANE ==============================================================
80+
// //===============================================================================
81+
// function SwitchSlider(){
82+
// $('#more').addClass('hide');//cache le +
83+
// $SlCible = $(".section-container:nth-child("+$CurrentSlide+")");//definit paneau entrant
84+
// $SlCible.css('z-index',$Zindex);//force le nouveau z-index du panneau cible
85+
// $('#slcontent').css('z-index',$Zindex+20);//force le nouveau z-index du bloc ligne+compteur
86+
// CibleScrollLine = ($CurrentSlide - 1) * 18;//increment ligne
87+
// CibleScrollCompteur = ($CurrentSlide - 1) * 180;//increment compteur
88+
// if($CurrentSlide==1){
89+
// TweenMax.to($('#slcontent').find('div'),0.5,{y:'50px',opacity:0,ease:Power4.easeOut});//Masque les lignes et le compteur
90+
// }else{
91+
// TweenMax.staggerTo($('#slcontent').find('div'),1,{y:'0px',opacity:1,ease:Power4.easeOut},0.05);//Affiche les lignes et le compteur
92+
// }
93+
94+
// TweenMax.fromTo($ThisSl.find('.vis'),1, {y:'0px',ease:Power4.easeOut}, {y:$VisOut});//masque ancien visuel
95+
// TweenMax.fromTo($SlCible.find('.vis'),1, {y:$VisOrigine,ease:Power4.easeOut}, {y:'0px'});//affiche nouveau visuel
96+
// TweenMax.staggerTo($('.line').find('.scroll'),0.6, {scrollTo:{y:CibleScrollLine, x:0},ease:Expo.easeOut},0.1);//scroll les lignes
97+
// TweenMax.staggerTo($('#slcompteur').find('span'),0.6, {scrollTo:{y:CibleScrollCompteur, x:0},ease:Expo.easeOut},0.1);//scroll le compteur
98+
// //change de panneau
99+
// TweenMax.to($SlCible,1.1,{width:'100%',onComplete:function(){
100+
// if($SlCible.find('a').length){
101+
// $('#more').attr('href',$SlCible.find('a').attr('href')).removeClass('hide');
102+
// }//cache le + si pas de lien
103+
// $(".section-container:not(:nth-child("+$CurrentSlide+"))").css('width','0%');//init autres panneaux
104+
// $AnimInProgress=false;//debloque l'animation
105+
// }});
106+
// }
107+
108+
// function LeadingZero(number,width){
109+
// width -= number.toString().length; if (width>0){ return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number; } return number + "";
110+
// }

‎glaciers_vulgarisation/api/static/styles/font.css‎

Lines changed: 24 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,18 @@ font-weight: 650;
1616
h3 {
1717
font-size: 32px;
1818
margin-top:40px;
19-
margin-bottom: 0px;
19+
margin-bottom: 10px;
2020
font-weight: 650;
2121
}
2222

23+
.illustration-container h3 {
24+
margin-bottom: -10px;
25+
}
26+
27+
.slide-container h3 {
28+
margin-bottom: -10px;
29+
}
30+
2331
h4 {
2432
font-size: 16px;
2533
color: #160f29;
@@ -28,69 +36,23 @@ font-weight: normal;
2836
}
2937

3038
p {
31-
margin-top: 0;
32-
line-height: 1.6;
33-
font-weight: 300;
34-
text-align: justify;
39+
margin: 1rem 0;
40+
line-height: 1.6;
41+
font-weight: 300;
42+
text-align: justify;
3543
}
3644

37-
@media only screen and (max-width: 1200px) {
38-
h1 {
39-
font-size:56px;
40-
}
41-
h2 {
42-
font-size: 40px;
43-
}
44-
h3 {
45-
font-size: 28px;
46-
}
47-
p {
48-
font-size: 18px;
49-
}
45+
img {
46+
max-width: 100%;
47+
height: auto;
48+
display: block;
49+
align-self: center;
5050
}
5151

52-
@media only screen and (max-width: 992px) {
53-
h1 {
54-
font-size:48px;
55-
}
56-
h2 {
57-
font-size: 32px;
58-
}
59-
h3 {
60-
font-size: 24px;
61-
}
62-
p {
63-
font-size: 16px;
64-
}
52+
legend {
53+
line-height: 1.2;
54+
font-weight: 150;
55+
font-style: italic;
56+
text-align : center;
57+
margin: 1rem 0;
6558
}
66-
67-
@media only screen and (max-width: 768px) {
68-
h1 {
69-
font-size:40px;
70-
}
71-
h2 {
72-
font-size: 28px;
73-
}
74-
h3 {
75-
font-size: 20px;
76-
}
77-
p {
78-
font-size: 14px;
79-
}
80-
}
81-
82-
@media only screen and (max-width: 576px) {
83-
h1 {
84-
font-size:32px;
85-
margin: 4%;
86-
}
87-
h2 {
88-
font-size: 20px;
89-
}
90-
h3 {
91-
font-size: 16px;
92-
}
93-
p {
94-
font-size: 14px;
95-
}
96-
}

‎glaciers_vulgarisation/api/static/styles/global.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
html {
2+
scroll-behavior: smooth;
3+
overflow-x: hidden;
4+
}
5+
6+
body {
7+
background-color: #160f29;
8+
color: #f7f7f2;
9+
font-family: "Montserrat", sans-serif;
10+
margin: 0;
11+
display: grid;
12+
}
13+
14+
header {
15+
grid-column: 1 / 3;
16+
background-image: url("https://di262mgurvkjm.cloudfront.net/cf9051ed-452f-4449-a7f4-1e8942a9463a/Aiguilles_de_Chamonix_et_Mont-Blanc_105x35~24_xgaplus.jpg");
17+
background-size:cover;
18+
color: #160f29;
19+
padding: 2rem;
20+
text-align: center;
21+
}
22+
23+
.container {
24+
margin: 2% 12%;
25+
text-align: center;
26+
min-height: 100vh;
27+
}
28+
29+
nav {
30+
white-space: nowrap;
31+
background: #f6e7cf;
32+
}

0 commit comments

Comments
 (0)