Merge pull request #5 from groupe1cir1n/Felix

Change the design of the loader (RGB my boy)
2026-01-18 16:37:25 +01:00 · 2023-05-15 22:37:46 +02:00
parent f1d2b18fea 47f8742f92
commit cc57888bad
13 changed files with 129 additions and 86 deletions
--- a/contacts.html
+++ b/contacts.html
@@ -14,7 +14,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+   <div id="loader"></div>
+ </div>
 <div id="pageContent">
 <nav>
   <div class="burger-menu">
--- a/emplois.html
+++ b/emplois.html
@@ -12,7 +12,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
 <div id="pageContent">
   <nav>
     <div class="burger-menu">
--- a/index.html
+++ b/index.html
@@ -13,7 +13,9 @@
   <script type="module" src="src/js/index/index.js" defer></script>
 </head>
 <body>
-    <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
    <div id="pageContent">
    <nav>
       <div class="burger-menu">
--- a/membres.html
+++ b/membres.html
@@ -13,7 +13,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+  <div id="loader"></div>
+ </div>
 <div id="pageContent">
   <nav>
     <div class="burger-menu">
--- a/partenaires.html
+++ b/partenaires.html
@@ -12,7 +12,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+   <div id="loader"></div>
+ </div>
 <div id="pageContent">
  <nav>
   <div class="burger-menu">
--- a/plan.html
+++ b/plan.html
@@ -12,7 +12,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
 <div id="pageContent">
  <nav>
   <div class="burger-menu">
--- a/platoformetecho.html
+++ b/platoformetecho.html
@@ -12,7 +12,9 @@
    <link rel="stylesheet" href="src/css/footer.css">
  </head>
  <body>
-  <div id="loader"></div>
+  <div id="loaderContainer">
+      <div id="loader"></div>
+  </div>>
  <div id="pageContent">
    <nav>
    <div class="burger-menu">
--- a/projets.html
+++ b/projets.html
@@ -14,7 +14,9 @@
     <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
 <div id="pageContent">
  <nav>
   <div class="burger-menu">
--- a/publications.html
+++ b/publications.html
@@ -12,7 +12,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
 <div id="pageContent">
  <nav>
   <div class="burger-menu">
--- a/recherche.html
+++ b/recherche.html
@@ -12,7 +12,9 @@
   <link rel="stylesheet" href="src/css/footer.css">
 </head>
 <body>
- <div id="loader"></div>
+ <div id="loaderContainer">
+     <div id="loader"></div>
+ </div>
 <div id="pageContent">
  <nav>
   <div class="burger-menu">
--- a/src/css/loader.css
+++ b/src/css/loader.css
@@ -1,20 +1,40 @@
-#loader {
-    border: 16px solid #f3f3f3;
-    border-top: 16px solid #3498db;
+#loader{
+    background-color: purple;
+    width: 250px;
+    height: 250px;
    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
+    position: relative;
+    background: conic-gradient(#3dffc9, #f7c723, #eb0ea5, #3dffc9);
+    animation: 2s spin linear infinite;
+    box-shadow:  0px 0px 150px -75px black;
 }

-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+#loader::before{
+    content: '';
+    position: absolute;
+    background-color:white;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    top: 50%;
+    left: 50%;
+    box-shadow: inset 0px 0px 110px -70px black;
+    border: 4px solid white;
+    transform: translate(-50%,-50%);
+
+}
+
+#loaderContainer{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+@keyframes spin{
+    100%{
+        transform: rotate(360deg);
+    }
 }

 #pageContent {
--- a/src/js/membres/membres.js
+++ b/src/js/membres/membres.js
@@ -1,75 +1,77 @@

 let editMode = false;
 document.addEventListener('DOMContentLoaded', function() {
+    setTimeout(function () {

-    const editButton = document.createElement('button');
-    editButton.innerText = 'Mode édition';
+        const editButton = document.createElement('button');
+        editButton.innerText = 'Mode édition';

-    editButton.style.position = 'fixed';
-    editButton.style.top = '150px';
-    editButton.style.right = '20px';
-    editButton.style.padding = '10px';
-    editButton.style.background = '#48435C';
-    editButton.style.color = 'white';
-    editButton.style.border = 'none';
-    editButton.style.borderRadius = '5px';
-    editButton.style.boxShadow = '1px 1px 5px grey';
-    editButton.style.cursor = 'pointer';
+        editButton.style.position = 'fixed';
+        editButton.style.top = '70px';
+        editButton.style.right = '20px';
+        editButton.style.padding = '10px';
+        editButton.style.background = '#48435C';
+        editButton.style.color = 'white';
+        editButton.style.border = 'none';
+        editButton.style.borderRadius = '5px';
+        editButton.style.boxShadow = '1px 1px 5px grey';
+        editButton.style.cursor = 'pointer';

-    editButton.addEventListener('click', function() {
+        editButton.addEventListener('click', function() {


-        if (editMode === true) {
-            const confirmation = confirm('Voulez vous vraiment quitter le mode édition?');
-            if (confirmation === true) {
-                console.log("Désactivation du mode édition");
-                editMode = false;
-                editButton.style.background = '#48435C';
-                const removeMemberButton = document.getElementById('addMemberButton');
-                removeMemberButton.remove();
-                const MembersJS = document.querySelectorAll('.NewMembresJS')
-                MembersJS.forEach(function(element) {
-                    const deleteButton = document.getElementById('deleteButton')
-                    deleteButton.remove();
-                });
-
-            }
-        }
-        else{
-            const adminName = prompt('Entrez le nom du profil administrateur :');
-            if (adminName === 'admin') {
-                const adminPwd = prompt('Entrez le mot de passe du profil administrateur :');
-                if (adminPwd === 'admin_pwd') {
-                    editMode = true;
-                    console.log('Mode édition activé !');
-                    editButton.style.background = 'red';
-                    const addMemberButton = document.createElement('button');
-                    addMemberButton.innerText = 'Ajouter un membre';
-                    addMemberButton.id = 'addMemberButton';
-                    addMemberButton.style.position = 'fixed';
-                    addMemberButton.style.top = '200px';
-                    addMemberButton.style.right = '20px';
-                    addMemberButton.style.padding = '10px';
-                    addMemberButton.style.background = '#48435C';
-                    addMemberButton.style.color = 'white';
-                    addMemberButton.style.border = 'none';
-                    addMemberButton.style.borderRadius = '5px';
-                    addMemberButton.style.boxShadow = '1px 1px 5px grey';
-                    addMemberButton.style.cursor = 'pointer';
-                    addMemberButton.addEventListener('click', function() {
-                        addMember();
+            if (editMode === true) {
+                const confirmation = confirm('Voulez vous vraiment quitter le mode édition?');
+                if (confirmation === true) {
+                    console.log("Désactivation du mode édition");
+                    editMode = false;
+                    editButton.style.background = '#48435C';
+                    const removeMemberButton = document.getElementById('addMemberButton');
+                    removeMemberButton.remove();
+                    const MembersJS = document.querySelectorAll('.NewMembresJS')
+                    MembersJS.forEach(function(element) {
+                        const deleteButton = document.getElementById('deleteButton')
+                        deleteButton.remove();
                    });
-                    document.body.appendChild(addMemberButton);
-                } else {
-                    alert('Mot de passe du profil administrateur incorrect !');
-                }
-            } else {
-                alert('Nom de profil administrateur incorrect !');
-            }
-        }
-    });

-    document.body.appendChild(editButton);
+                }
+            }
+            else{
+                const adminName = prompt('Entrez le nom du profil administrateur :');
+                if (adminName === 'admin') {
+                    const adminPwd = prompt('Entrez le mot de passe du profil administrateur :');
+                    if (adminPwd === 'admin_pwd') {
+                        editMode = true;
+                        console.log('Mode édition activé !');
+                        editButton.style.background = 'red';
+                        const addMemberButton = document.createElement('button');
+                        addMemberButton.innerText = 'Ajouter un membre';
+                        addMemberButton.id = 'addMemberButton';
+                        addMemberButton.style.position = 'fixed';
+                        addMemberButton.style.top = '200px';
+                        addMemberButton.style.right = '20px';
+                        addMemberButton.style.padding = '10px';
+                        addMemberButton.style.background = '#48435C';
+                        addMemberButton.style.color = 'white';
+                        addMemberButton.style.border = 'none';
+                        addMemberButton.style.borderRadius = '5px';
+                        addMemberButton.style.boxShadow = '1px 1px 5px grey';
+                        addMemberButton.style.cursor = 'pointer';
+                        addMemberButton.addEventListener('click', function() {
+                            addMember();
+                        });
+                        document.body.appendChild(addMemberButton);
+                    } else {
+                        alert('Mot de passe du profil administrateur incorrect !');
+                    }
+                } else {
+                    alert('Nom de profil administrateur incorrect !');
+                }
+            }
+        });
+
+        document.body.appendChild(editButton);
+    }, 2000);

 /*
    document.addEventListener('mouseover', function(e){
--- a/src/js/navbarAndFooter.js
+++ b/src/js/navbarAndFooter.js
@@ -94,6 +94,7 @@ document.getElementById('pageContent').classList.add('hidden');
 window.addEventListener('load', function() {
    setTimeout(function () {
        document.getElementById('loader').style.display = 'none';
+        document.getElementById('loaderContainer').style.display = 'none';
        document.getElementById('pageContent').style.visibility = 'visible';
    }, 2000);
 });