Add files via upload

Vital-Vuillaume · Dec 27, 2023 · d127d19 · d127d19
1 parent a0b2167
commit d127d19
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 29 deletions.
diff --git 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,21 +532,20 @@ 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;
 
 }
 
 .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
@@ -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;
-  }
-});
+};
diff --git 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>