From d127d1971a78060f2e7961916fde2c89b1b79d85 Mon Sep 17 00:00:00 2001
From: Vital Vuillaume <vitalvuillaume@proton.me>
Date: Wed, 27 Dec 2023 21:16:38 +0100
Subject: [PATCH] Add files via upload

---
 My-Website.css | 26 ++++++++++++++++----------
 My-Website.js  | 27 +++++++++++----------------
 index.html     |  6 +++---
 3 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/My-Website.css b/My-Website.css
index 1a1f2f5..9f7f4c0 100644
--- a/My-Website.css
+++ b/My-Website.css
@@ -134,7 +134,7 @@ img, .custom-menu {
   transition: background-color 0s, width 1.1s;
   overflow-x: hidden;
   border-radius: 15px;
-  z-index: 2000;
+  z-index: 20000;
 }
 
 
@@ -495,11 +495,10 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
 }
 
-
 .popup {
 
   background-color: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(25px);
+  backdrop-filter: blur(8px);
   z-index: 2000;
   width: max-content;
   padding: 30px;
@@ -509,7 +508,9 @@ body.active ::placeholder, body.active ::-moz-placeholder {
   top: 50%;
   transform: translate(-42.5%, -50%);
   font-size: 1.4em;
-  display: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: 1s;
 
 }
 
@@ -519,7 +520,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
   gap: 100px;
   position: absolute;
   left: 50%;
-  top: 100%;
+  top: 130%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: max-content;
@@ -531,12 +532,13 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
   text-align: center;
   background-color: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(25px);
+  backdrop-filter: blur(8px);
+  z-index: 2000;
   border-radius: 20px;
   width: max-content;
   padding: 7px 17px;
   border: 1px solid var(--couleur);
-  transition: background-color 2s, backdrop-filter 2s, letter-spacing 1.7s;
+  transition: letter-spacing 1.2s;
   font-size: 0.8em;
   cursor: pointer;
 
@@ -544,8 +546,6 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
 .btnPopup:hover {
   
-  background-color: rgba(133, 133, 133, 0.2);
-  backdrop-filter: blur(250px);
   letter-spacing: 7px;
 
 }
@@ -735,6 +735,12 @@ body.active ::placeholder, body.active ::-moz-placeholder {
     transform: translate(-39%, -50%);
 
   }
+
+  .sectionBtn {
+
+    top: 140%;
+
+  }
 }
 
 /*-----Vu pour mobile-----*/
@@ -880,7 +886,7 @@ body.active ::placeholder, body.active ::-moz-placeholder {
 
   .sectionBtn {
 
-    top: 110%;
+    top: 150%;
     gap: 80px;
 
   }
diff --git a/My-Website.js b/My-Website.js
index 50f209e..422cab2 100644
--- a/My-Website.js
+++ b/My-Website.js
@@ -553,9 +553,10 @@ reset.onclick = function() {
   btnPopup.addEventListener('click', btnPopupClickHandler);
 
   if (isPopupVisible === true) {
-    popup.style.display = "block";
+    popup.style.visibility = "visible";
+    popup.style.opacity = 1;
     body.style.overflow = "hidden";
-  }
+  };
 };
 
 function btnPopupClickHandler(event) {
@@ -564,23 +565,17 @@ function btnPopupClickHandler(event) {
   isPopupConfirmed = true;
 
   if (isPopupConfirmed === true) {
-    popup.style.display = "none";
+    popup.style.visibility = "hidden";
+    popup.style.opacity = 0;
     location.reload();
     localStorage.clear();
     isPopupConfirmed = false;
-  }
-}
-
-document.addEventListener('click', function(event) {
-  if (!popup.contains(event.target) && event.target !== btnPopup && event.target !== reset) {
-    popup.style.display = "none";
-    body.style.overflow = "auto";
-    isPopupVisible = false;
-  }
+  };
+};
   
-  if (event.target === annuler) {
-    popup.style.display = "none";
+annuler.onclick = function() {
+    popup.style.visibility = "hidden";
+    popup.style.opacity = 0;
     body.style.overflow = "auto";
     isPopupVisible = false;
-  }
-});
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index 4a3892b..9724d72 100644
--- a/index.html
+++ b/index.html
@@ -89,14 +89,14 @@
       <div class="btnParametres ecran">Test2</div>
       <div class="btnParametres MenuCustom">Test3</div>
       <div class="btnParametres fenetre">Test4</div>
+      <div class="btnParametres curseurCustom">Test5</div>
       <div class="btnParametres">
         <input type="color" class="colorPicker">
       </div>
-      <div class="btnParametres curseurCustom">Test5</div>
       <div class="btnParametres reset">Reset</div>
-      <div class="popup">Les paramètres seront remis par défault.
+      <div class="popup">Les paramètres seront remis par défaut.
         <div class="sectionBtn">
-          <div class="btnPopup ok">Ok</div>
+          <div class="btnPopup ok">Valider</div>
           <div class="btnPopup annuler">Annuler</div>
         </div>
       </div>