diff --git a/CSS/Responsive.css b/CSS/Responsive.css index a5ee9fe..da41c8e 100644 --- a/CSS/Responsive.css +++ b/CSS/Responsive.css @@ -30,7 +30,7 @@ color: var(--Second-color); } - .TitreExplicatif{ + .TitreExplicatif { text-align: center; } @@ -93,25 +93,21 @@ z-index: -10; } - .Bouton { color: var(--Black-color); transition: color 0.3s ease-in-out; color: var(--Second-color); } - - .BoxBic{ + + .BoxBic { grid-column: 1/8; } - .img{ + .img { height: 100%; width: auto; } - } - - @media only screen and (min-width: 900px) { .Mobile { display: none; diff --git a/JS/IndexTiming.js b/JS/IndexTiming.js index dffec22..cb95aa4 100644 --- a/JS/IndexTiming.js +++ b/JS/IndexTiming.js @@ -6,43 +6,39 @@ const info = document.querySelector(".TextInformatif"); let Timing = 0; -boutons.forEach(element => { - element.style.opacity = "0%"; +boutons.forEach((element) => { + element.style.opacity = "0%"; }); -Update = setInterval(function(){ - Timing++; - if(Timing == 4) - { - txtExplicatif.style.opacity = "0%"; - pellicule.style.backgroundColor = "var(--Second-color)" - } - if(Timing == 5) - { - pellicule.style.opacity = "0%"; - backgroundvideo.play(); - } - if(Timing == 26) - { - boutons.forEach(element => { - element.style.opacity = "100%"; - }); - info.style.opacity = "0%"; - clearInterval(Update); - } -}, 1000); - -pellicule.addEventListener("click", Skip); -backgroundvideo.addEventListener("click", Skip); - -function Skip() -{ +Update = setInterval(function () { + Timing++; + if (Timing == 4) { txtExplicatif.style.opacity = "0%"; + pellicule.style.backgroundColor = "var(--Second-color)"; + } + if (Timing == 5) { pellicule.style.opacity = "0%"; - boutons.forEach(element => { - element.style.opacity = "100%"; + backgroundvideo.play(); + } + if (Timing == 26) { + boutons.forEach((element) => { + element.style.opacity = "100%"; }); info.style.opacity = "0%"; clearInterval(Update); - backgroundvideo.currentTime = backgroundvideo.duration - 0.1; -} \ No newline at end of file + } +}, 1000); + +pellicule.addEventListener("click", Skip); +backgroundvideo.addEventListener("click", Skip); + +function Skip() { + txtExplicatif.style.opacity = "0%"; + pellicule.style.opacity = "0%"; + boutons.forEach((element) => { + element.style.opacity = "100%"; + }); + info.style.opacity = "0%"; + clearInterval(Update); + backgroundvideo.currentTime = backgroundvideo.duration - 0.1; +} diff --git a/JS/ScrollBicPage.js b/JS/ScrollBicPage.js index 8d4abca..a27f02e 100644 --- a/JS/ScrollBicPage.js +++ b/JS/ScrollBicPage.js @@ -12,100 +12,76 @@ let AntiScrollSave = 0; let PosA = window.innerHeight - 720; let PosB = window.innerHeight - 1850; +main.style.transform = "translateY(" + PosA + "px)"; +BigBox.style.marginTop = window.innerHeight * 0.15 + "px"; - - main.style.transform = "translateY("+PosA+"px)"; - BigBox.style.marginTop = window.innerHeight * 0.15 + "px"; - - - body.addEventListener("wheel", function(event){ - if(AntiScroll == 0) - { - if (event.deltaY > 0) - { - if(w >= 900) - { - ScrollPage(); - } - } - else - { - if(w >= 900) - { - ScrollPage(); - } - } +body.addEventListener( + "wheel", + function (event) { + if (AntiScroll == 0) { + if (event.deltaY > 0) { + if (w >= 900) { + ScrollPage(); } - AntiScroll++; - AntiScrollSave = AntiScroll; - console.log(AntiScroll); - }, false); - - - setInterval(function(){ - if(AntiScrollSave != AntiScroll) - { - AntiScroll = 0; - AntiScrollSave = 0; + } else { + if (w >= 900) { + ScrollPage(); } - AntiScrollSave++; - }, 250); - - - function ScrollPage() - { - console.log("Passé"); - if(scrollBool) - { - main.style.transform = "translateY("+PosA+"px)"; - scrollBool = false; - - } - else if(scrollBool == false) - { - main.style.transform = "translateY("+PosB+"px)"; - scrollBool = true; - } + } } + AntiScroll++; + AntiScrollSave = AntiScroll; + console.log(AntiScroll); + }, + false +); - window.onresize = function(event) { - w = document.body.clientWidth; - PosA = window.innerHeight - 720; - console.log(PosA); - PosB = window.innerHeight - 1850; - if(scrollBool) - { - main.style.transform = "translateY("+PosB+"px)"; +setInterval(function () { + if (AntiScrollSave != AntiScroll) { + AntiScroll = 0; + AntiScrollSave = 0; + } + AntiScrollSave++; +}, 250); - } - else if(scrollBool == false) - { - main.style.transform = "translateY("+PosA+"px)"; - } - if(w >= 900) - { - Mobile = false; - body.classList.add("NoScroll"); - } - else - { - Mobile = true; - body.classList.remove("NoScroll"); - } - }; +function ScrollPage() { + console.log("Passé"); + if (scrollBool) { + main.style.transform = "translateY(" + PosA + "px)"; + scrollBool = false; + } else if (scrollBool == false) { + main.style.transform = "translateY(" + PosB + "px)"; + scrollBool = true; + } +} - function checkMobile() - { - if(w >= 900) - { - Mobile = false; - } - else - { - Mobile = true; - body.classList.remove("NoScroll"); - } - console.log(Mobile); - } +window.onresize = function (event) { + w = document.body.clientWidth; + PosA = window.innerHeight - 720; + console.log(PosA); + PosB = window.innerHeight - 1850; + if (scrollBool) { + main.style.transform = "translateY(" + PosB + "px)"; + } else if (scrollBool == false) { + main.style.transform = "translateY(" + PosA + "px)"; + } + if (w >= 900) { + Mobile = false; + body.classList.add("NoScroll"); + } else { + Mobile = true; + body.classList.remove("NoScroll"); + } +}; + +function checkMobile() { + if (w >= 900) { + Mobile = false; + } else { + Mobile = true; + body.classList.remove("NoScroll"); + } + console.log(Mobile); +} - checkMobile(); \ No newline at end of file +checkMobile(); diff --git a/JS/Shop.js b/JS/Shop.js index 2d9cade..73adaf5 100644 --- a/JS/Shop.js +++ b/JS/Shop.js @@ -22,140 +22,115 @@ let Quantite = 1; let AntiScroll = 0; let AntiScrollSave = 0; - //Ajout des events listener -buy.forEach(element => { - element.addEventListener("click", Pannier); +buy.forEach((element) => { + element.addEventListener("click", Pannier); }); Plus.addEventListener("click", plus); Moins.addEventListener("click", moins); //Ajouter ou soustraire un briquet du panier -function plus() -{ - Quantite++; +function plus() { + Quantite++; + Quantitetxt.innerHTML = Quantite; + let x = ((550 * 7.7) / 100) * Quantite; + let res = x.toFixed(2); + TVA.innerHTML = res + "$"; + Articles.innerHTML = Quantite + " Articles"; + let pA = 540 * Quantite; + prixArticles.innerHTML = pA + "$"; + let pf = pA + ((550 * 7.7) / 100) * Quantite; + let pfFinal = pf.toFixed(2); + prixFinale.innerHTML = pfFinal + "$"; + console.log(pf); +} +function moins() { + if (Quantite > 1) { + Quantite--; Quantitetxt.innerHTML = Quantite; let x = ((550 * 7.7) / 100) * Quantite; let res = x.toFixed(2); TVA.innerHTML = res + "$"; - Articles.innerHTML = Quantite + " Articles"; - let pA =(540 * Quantite); + if (Quantite == 1) { + Articles.innerHTML = Quantite + " Article"; + } else { + Articles.innerHTML = Quantite + " Articles"; + } + let pA = 540 * Quantite; prixArticles.innerHTML = pA + "$"; let pf = pA + ((550 * 7.7) / 100) * Quantite; let pfFinal = pf.toFixed(2); - prixFinale.innerHTML = pfFinal+ "$"; + prixFinale.innerHTML = pfFinal + "$"; console.log(pf); -} -function moins() -{ - if(Quantite > 1) - { - Quantite--; - Quantitetxt.innerHTML = Quantite; - let x = ((550 * 7.7) / 100) * Quantite; - let res = x.toFixed(2); - TVA.innerHTML = res + "$"; - if(Quantite == 1) - { - Articles.innerHTML = Quantite + " Article"; - } - else - { - Articles.innerHTML = Quantite + " Articles"; - } - let pA =(540 * Quantite); - prixArticles.innerHTML = pA + "$"; - let pf = pA + ((550 * 7.7) / 100) * Quantite; - let pfFinal = pf.toFixed(2); - prixFinale.innerHTML = pfFinal + "$"; - console.log(pf); - } + } } -document.addEventListener("wheel", function(event){ - if(AntiScroll == 0) - { - if (event.deltaY > 0) - { - Banniere(); - } - else - { - Banniere(); - } +document.addEventListener( + "wheel", + function (event) { + if (AntiScroll == 0) { + if (event.deltaY > 0) { + Banniere(); + } else { + Banniere(); + } } - AntiScroll++; - AntiScrollSave = AntiScroll; - console.log(AntiScroll); -}, false); - + AntiScroll++; + AntiScrollSave = AntiScroll; + console.log(AntiScroll); + }, + false +); -setInterval(function(){ - if(AntiScrollSave != AntiScroll) - { - AntiScroll = 0; - AntiScrollSave = 0; - } - AntiScrollSave++; +setInterval(function () { + if (AntiScrollSave != AntiScroll) { + AntiScroll = 0; + AntiScrollSave = 0; + } + AntiScrollSave++; }, 250); - //Ouvrir/fermer la Banniere -function Banniere() -{ - if(BanOpen == false) - { - banniere.style.transform = "translateY(0px)"; - BanOpen = true; - } - else - { - banniere.style.transform = "translateY(152px)"; - BanOpen = false; - if(Open == true) - { - Pannier(); - } +function Banniere() { + if (BanOpen == false) { + banniere.style.transform = "translateY(0px)"; + BanOpen = true; + } else { + banniere.style.transform = "translateY(152px)"; + BanOpen = false; + if (Open == true) { + Pannier(); } + } } //Ouvrir/fermer le panier -function Pannier() -{ - if(Open) - { - box.style.left = "-900px"; - Open = false; - } - else if(!Open) - { - box.style.left = "0px"; - if(BanOpen == false) - { - Banniere(); - } - Open = true; +function Pannier() { + if (Open) { + box.style.left = "-900px"; + Open = false; + } else if (!Open) { + box.style.left = "0px"; + if (BanOpen == false) { + Banniere(); } + Open = true; + } } -Back.addEventListener("click", function() -{ - console.log("Click"); - box.style.left = "-600px"; - Open = false; +Back.addEventListener("click", function () { + console.log("Click"); + box.style.left = "-600px"; + Open = false; }); +window.onresize = function (event) { + w = document.body.clientWidth; -window.onresize = function(event) { - w = document.body.clientWidth; - - if(w >= 900) - { - txtExplicatif.style.opacity = "100%"; - } - else - { - txtExplicatif.style.opacity = "0%"; - } -}; \ No newline at end of file + if (w >= 900) { + txtExplicatif.style.opacity = "100%"; + } else { + txtExplicatif.style.opacity = "0%"; + } +};