s

My-Website.css → Site/Css/My-Website.css

@@ -298,7 +298,7 @@ img, .custom-menu {
   flex-direction: column;
   align-items: center;
   position: relative;
-  margin-top: 45px;
+  margin-top: 10px;
 
 }
 
@@ -310,13 +310,13 @@ img, .custom-menu {
   border-radius: 7px;
   font-size: 1.1em;
   padding: 15px;
-  top: 65px;
-  position: fixed;
+  top: 0px;
+  position: relative;
   border: 1px var(--couleur) solid;
   background-color: var(--default);
   color: var(--default2);
   backdrop-filter: blur(10px);
-  z-index: 2000;
+  z-index: 100;
 
 }
 
@@ -467,7 +467,7 @@ img, .custom-menu {
   width: 25px;
   height: 25px;
   pointer-events: none;
-  background-image: url(curseur.png);
+  background-image: url(/Site/Image/curseur.png);
   background-size: cover;
   background-position: center;
   z-index: 20000;
@@ -477,7 +477,7 @@ img, .custom-menu {
 
 .curseur.active {
 
-  background-image: url(pointer.png);
+  background-image: url(/Site/Image/pointer.png);
 
 }
 
@@ -869,9 +869,10 @@ img, .custom-menu {
 
   .recherche {
 
-    position: relative;
+    position: initial;
     transition: 0.9s;
     width: 100%;
+    transition: 0s;
     top: 0;
 
   }

My-Website.js → Site/Js/My-Website.js

@@ -1,8 +1,8 @@
 //------Pour que le site soit securise------\\
 
-if (window.location.protocol != "https:") {
+/*if (window.location.protocol != "https:") {
   window.location.protocol="https:";
-}
+}*/
 
 //------Element html------\\
 
@@ -42,7 +42,7 @@ const annuler = document.querySelector('.annuler');
 //-----Afficher la section 1 par defaut----\\
 
 window.addEventListener('load', function() {
-  showSection(section1);
+  showSection(section2);
 });
 
 //------Sauvgarde du Menu contextuel------\\
@@ -133,30 +133,51 @@ btnCustomMenu.onclick =  function() {
   updateMenuContextuelLocalStorage();
 }
 
+
+function scrollTop() {
+  const currentScroll = window.scrollY;
+  const duration = 500;
+  const startTime = performance.now();
+
+  function animateScroll(timestamp) {
+    const elapsedTime = timestamp - startTime;
+    const progress = Math.min(elapsedTime / duration, 1);
+    const newScroll = currentScroll * (1 - progress);
+
+    window.scrollTo(0, newScroll);
+
+    if (progress < 1) {
+      requestAnimationFrame(animateScroll);
+    }
+  }
+  requestAnimationFrame(animateScroll);
+}
+
+
 //-----Changement de page-----\\
 
 function showSection(section) {
   section1.style.display = 'none';
   section2.style.display = 'none';
   section3.style.display = 'none';
   section.style.display = 'block';
-  window.scrollTo(0, 0);
+  scrollTop()
 
 }
 
 btn1.addEventListener('click', function() {
   showSection(section1);
-  window.scrollTo(0, 0);
+  scrollTop()
 });
 
 btn2.addEventListener('click', function() {
   showSection(section2);
-  window.scrollTo(0, 0);
+  scrollTop()
 });
 
 btn3.addEventListener('click', function() {
   showSection(section3);
-  window.scrollTo(0, 0);
+  scrollTop()
 });
 
 //-----Changement du titre quand ton n'est plus sur l'onglet-----\\
@@ -174,13 +195,13 @@ window.addEventListener("focus", () => {
 //-----Barre de navigation qui s'agrandit-----\\
 
 btn.onclick = function ajouterClassNav() {
-   nav.classList.toggle("active"); 
+  nav.classList.toggle("active"); 
 };
 
 //-----Afficher le bouton accueil par defaut-----\\
 
 btn1.classList.add('active');
-image1.src = 'accueil-active.png';
+image1.src = 'Site/Image/accueil-active.png';
 
 //-----Changement des boutons-----\\
 
@@ -189,11 +210,11 @@ btn1.onclick = function() {
     return;
   }
 
-  image1.src = 'accueil-active.png';
+  image1.src = 'Site/Image/accueil-active.png';
   btn1.classList.add('active');
-  image2.src = 'recherche.png';
+  image2.src = 'Site/Image/recherche.png';
   btn2.classList.remove('active');
-  image3.src = 'parametres.png';
+  image3.src = 'Site/Image/parametres.png';
   btn3.classList.remove('active');
 };
 
@@ -202,11 +223,11 @@ btn2.onclick = function() {
     return;
   }
 
-  image2.src = 'recherche-active.png';
+  image2.src = 'Site/Image/recherche-active.png';
   btn2.classList.add('active');
-  image1.src = 'accueil.png';
+  image1.src = 'Site/Image/accueil.png';
   btn1.classList.remove('active');
-  image3.src = 'parametres.png';
+  image3.src = 'Site/Image/parametres.png';
   btn3.classList.remove('active');
 };
 
@@ -215,11 +236,11 @@ btn3.onclick = function() {
     return;
   }
 
-  image3.src = 'parametres-active.png';
+  image3.src = 'Site/Image/parametres-active.png';
   btn3.classList.add('active');
-  image1.src = 'accueil.png';
+  image1.src = 'Site/Image/accueil.png';
   btn1.classList.remove('active');
-  image2.src = 'recherche.png';
+  image2.src = 'Site/Image/recherche.png';
   btn2.classList.remove('active');
 };
 
@@ -285,6 +306,7 @@ Recherche.addEventListener('input', function() {
 
   if (searchTerm === '') {
     txtRecherche.style.display = 'flex';
+    containerRecherche.style.height = "200px";
     clearResults();
   } else {
     txtRecherche.style.display = 'none';
@@ -342,11 +364,13 @@ function displaySearchResults(searchTerm) {
   }
 
   if (resultats.innerHTML === '') {
-    resultats.innerHTML = `<div class="no-results">Aucun résultat trouvé pour "${Recherche.value}".</div>`;
+    resultats.classList.add("no-results")
+    resultats.textContent = `Aucun résultat trouvé pour "${Recherche.value}"`;
     containerRecherche.style.overflow = "hidden";
     containerRecherche.style.height = "200px";
   }
   else {
+    resultats.classList.remove("no-results")
     containerRecherche.style.overflow = "auto";
     containerRecherche.style.height = "auto";
   }  
@@ -600,4 +624,4 @@ annuler.onclick = function() {
     popup.style.opacity = 0;
     section3.style.overflow = "auto";
     isPopupVisible = false;
-};
+};

index.html

@@ -4,11 +4,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" type="text/css" href="My-Website.css">
-    <script defer src="My-Website.js"></script>
-    <link rel="icon" href="icone.ico" type="image/x-icon">
-    <link rel="icon" href="icone.png" type="image/png">
-    <link rel="icon" type="image/svg+xml" href="icone.svg">
+    <link rel="stylesheet" type="text/css" href="Site/Css/My-Website.css">
+    <script defer src="Site/Js/My-Website.js"></script>
+    <link rel="icon" href="Site/ImageSite/icone.ico" type="image/x-icon">
+    <link rel="icon" href="Site/ImageSite/icone.png" type="image/png">
+    <link rel="icon" type="Site/ImageSite/image/svg+xml" href="icone.svg">
     <title>Vital</title>
   </head>
 
@@ -22,33 +22,10 @@
       <p class="btnMenu">Changer de thème</p>
       <p class="btnMenu">Mettre en plein écran</p>
       <p class="btnMenu">Mettre le menu contextuel par défault</p>
-      <a class="lienMenu" href="My-Website-Shortcut-Ubuntu.zip"><p class="btnMenu">Téléchargez le raccourcis pour Ubuntu</p></a>
+      <a class="lienMenu" href="Download/Install-My-Website.zip"><p class="btnMenu">Téléchargez le raccourcis pour Ubuntu</p></a>
       <a class="lienMenu" href="Attente.zip"><p class="btnMenu dernier">Téléchargez le raccourcis pour Windows</p></a>
     </div>
 
-
-    <!-----Barre de navigation----->
-
-    <div class="nav">
-      <div class="btn"></div>
-      <div class="ligne"></div>
-
-      <li id="btn1" class="list">
-        <img class="img" src="accueil.png" alt="Accueil">
-        <p class="txt">Accueil</p>
-      </li>
-
-      <li id="btn2" class="list">
-        <img class="img" src="recherche.png" alt="Recherche">
-        <p class="txt">Recherche</p>
-      </li>
-
-      <li id="btn3" class="list">
-        <img class="img" src="parametres.png" alt="Paramètre">
-        <p class="txt">Paramètres</p>
-      </li>
-    </div>
-
     <!-----Curseur----->
 
     <div class="curseur"></div>
@@ -103,18 +80,40 @@
       <p class="shortcutTitre">Raccourcis pour le site</p>
       <div class="boxShortcut">
         <div class="shortcut">
-          <img class="imgShortcut" src="ubuntu.png" alt="Ubuntu">
+          <img class="imgShortcut" src="Site/Image/ubuntu.png" alt="Ubuntu">
           <p class="titreShortcut">Ubuntu</p>
           <p class="paraShortcut">Sauvegarder-le et exécutez "My-Website-Shortcut-Ubuntu.sh".</p>
-          <a class="lienShortcut" href="My-Website-Shortcut-Ubuntu.zip">Télécharger pour ubuntu</a>
+          <a class="lienShortcut" href="Download/Install-My-Website.zip">Télécharger pour ubuntu</a>
         </div>
         <div class="shortcut">
-          <img class="imgShortcut" src="windows.png" alt="Windows">
+          <img class="imgShortcut" src="Site/Image/windows.png" alt="Windows">
           <p class="titreShortcut">Windows</p>
           <a class="paraShortcut">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem.</p>
           <a class="lienShortcut" href="Attente.zip">attente</a>
         </div>
       </div>
     </div>
+
+    <!-----Barre de navigation----->
+
+    <div class="nav">
+      <div class="btn"></div>
+      <div class="ligne"></div>
+
+      <li id="btn1" class="list">
+        <img class="img" src="Site/Image/accueil.png" alt="Accueil">
+        <p class="txt">Accueil</p>
+      </li>
+
+      <li id="btn2" class="list">
+        <img class="img" src="Site/Image/recherche.png" alt="Recherche">
+        <p class="txt">Recherche</p>
+      </li>
+
+      <li id="btn3" class="list">
+        <img class="img" src="Site/Image/parametres.png" alt="Paramètre">
+        <p class="txt">Paramètres</p>
+      </li>
+    </div>
   </body>
 </html>