test

WEB/View/src/CSS/Main2.css

@@ -67,25 +67,45 @@ button:focus {
   opacity: 0;
   height: 100%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: all 0.6s;
+  -webkit-transition: all 0.6s;
+  -moz-transition: all 0.6s;
+  -ms-transition: all 0.6s;
+  -o-transition: all 0.6s;
 }
 
 #profil.open {
   left: 0;
   opacity: 1;
   display: flex;
-  transition: all 0.3s;
+  transition: all 0.6s;
-  -webkit-transition: all 0.3s;
+  -webkit-transition: all 0.6s;
-  -moz-transition: all 0.3s;
+  -moz-transition: all 0.6s;
-  -ms-transition: all 0.3s;
+  -ms-transition: all 0.6s;
-  -o-transition: all 0.3s;
+  -o-transition: all 0.6s;
+}
+
+#profilIcon {
+  font-size: 40px;
+  color: white;
+  transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transition: transform 0.8s;
+  -webkit-transition: transform 0.8s;
+  -moz-transition: transform 0.8s;
+  -ms-transition: transform 0.8s;
+  -o-transition: transform 0.8s;
 }
 
 #profilIcon.open {
-  transition: transform 0.5s;
+  transition: transform 0.8s;
-  -webkit-transition: transform 0.5s;
+  -webkit-transition: transform 0.8s;
-  -moz-transition: transform 0.5s;
+  -moz-transition: transform 0.8s;
-  -ms-transition: transform 0.5s;
+  -ms-transition: transform 0.8s;
-  -o-transition: transform 0.5s;
+  -o-transition: transform 0.8s;
   background: none;
   transform: rotate(180deg) !important;
   -webkit-transform: rotate(180deg) !important;

WEB/View/src/pages/Main2.html

@@ -40,13 +40,12 @@
         <button
           class="d-flex p-0"
           id="btnProfil"
-          style="background: transparent; border: none; z-index: 10"
+          style="background: transparent; border: none; z-index: 10;"
           onclick="displayProfil()"
         >
           <span
             class="material-symbols-outlined p-1 neonBg"
             id="profilIcon"
-            style="font-size: 40px; color: white; transform: rotate(90deg)"
           >
             clear_all
           </span>
@@ -61,8 +60,8 @@
             z-index: 2;
           "
         >
-          <!-- If connected this, else nothing (don't display the img) -->
           <div class="row py-5 d-flex justify-content-center mx-0">
+            <!-- If connected this -->
             <img
               src="../../assets/img/CyberpunkGirl4.png"
               alt="Profil"
@@ -80,7 +79,10 @@
             />
             <p class="d-flex justify-content-center">Pseudo</p>
 
-            <div class="d-flex justify-content-center align-self-end p-0 m-0" id="container">
+            <div
+              class="d-flex justify-content-center align-self-end p-0 m-0"
+              id="container"
+            >
               <button class="logButton">
                 <span class="circle" aria-hidden="true">
                   <span class="icon arrow"></span>
@@ -88,7 +90,18 @@
                 <span class="button-text">Logout</span>
               </button>
             </div>
+            <!-- End if -->
 
+            <!-- If not connected this -->
+            <!-- <div class="d-flex justify-content-center align-self-center p-0 m-0" id="container">
+              <button class="logButton">
+                <span class="circle" aria-hidden="true">
+                  <span class="icon arrow"></span>
+                </span>
+                <span class="button-text">Login</span>
+              </button>
+            </div> -->
+            <!-- End if -->
           </div>
         </div>
       </div>