Admin page

WEB/View/src/CSS/Admin2.css

@@ -23,6 +23,7 @@ li {
 
 a {
   color: white;
+  text-decoration: none !important;
 }
 a:hover {
   color: white;
@@ -37,6 +38,12 @@ h6 {
   font-family: Equinox;
 }
 
+button{
+  background : transparent;
+  color: white;
+  outline: none;
+}
+
 .legend {
   color: #898989;
   font-weight: bolder;
@@ -105,7 +112,34 @@ h6 {
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
   height: 350px;
-  overflow-y: scroll; /* Switch */
+  /*overflow-y: scroll;*/ /* Switch */
+}
+
+.send {
+  background: rgb(146, 254, 157);
+  background: -moz-linear-gradient(
+    50deg,
+    rgba(146, 254, 157, 1) 0%,
+    rgba(0, 201, 255, 1) 100%
+  );
+  background: -webkit-linear-gradient(
+    50deg,
+    rgba(146, 254, 157, 1) 0%,
+    rgba(0, 201, 255, 1) 100%
+  );
+  background: linear-gradient(
+    50deg,
+    rgba(146, 254, 157, 1) 0%,
+    rgba(0, 201, 255, 1) 100%
+  );
+  box-shadow: 0px 0px 50px -5px rgba(0, 201, 255, 0.3);
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+
+  width: max-content;
 }
 
 .dashboard-card-reversed {
@@ -126,3 +160,53 @@ h6 {
     rgba(0, 0, 0, 1) 30%
   );
 }
+
+.user-box input {
+  width: 100%;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  padding: 8px 0;
+  font-size: 12px;
+  color: #fff;
+  border: none;
+  border-bottom: 1px solid #fff;
+  outline: none;
+  background: transparent;
+}
+
+.user-box label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size: 16px;
+  color: #fff;
+  pointer-events: none;
+  transition: 0.5s;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+  -ms-transition: 0.5s;
+  -o-transition: 0.5s;
+}
+
+.user-box input:focus ~ label,
+.user-box input:valid ~ label {
+  top: -20px;
+  left: 0;
+  color: #be5631;
+  font-size: 12px;
+}
+
+#message {
+  width: auto;
+  height: auto;
+  resize: none;
+}
+
+
+.fullscreen {
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}

WEB/View/src/JS/Admin.js

@@ -0,0 +1,88 @@
+function changeCurrent(element) {
+  document.querySelector(".current").classList.remove("current");
+  oldText = document.querySelector(".currentText");
+  oldText.classList.remove("currentText");
+  oldText.classList.add("nav-button");
+  element.parentElement.classList.add("current");
+  element.classList.remove("nav-button");
+  element.classList.add("currentText");
+
+  transitionChangeCurrentAndExpend(element);
+}
+
+function transitionChangeCurrentAndExpend(element) {
+  expendSolo = document.querySelector("#expendSolo");
+  expendMulti = document.querySelector("#expendMulti");
+  expendMail = document.querySelector("#expendMail");
+  if (element.id == "globalLink") {
+    document.location.reload(true);
+  }
+
+  if (element.id == "soloLink") {
+    expend(expendSolo);
+  }
+  if (element.id == "multiLink") {
+    expend(expendMulti);
+  }
+  if (element.id == "mailLink") {
+    expend(expendMail);
+  }
+}
+
+function expend(element) {
+  if (element.parentElement.parentElement.parentElement.id == "soloEnigme") {
+    
+    if (soloEnigme.parentElement.classList.contains("fullscreen") == false) {
+      soloEnigme.parentElement.classList.add("fullscreen");
+      soloEnigme.classList.add("fullscreen");
+    } else {
+      soloEnigme.parentElement.classList.remove("fullscreen");
+      soloEnigme.classList.remove("fullscreen");
+    }
+
+    if (mail.style.display != "none") {
+      mail.style.display = "none";
+      mail.parentElement.style.display = "none";
+      multiEnigme.style.display = "none";
+    } else {
+      mail.style.display = "flex";
+      mail.parentElement.style.display = "flex";
+      multiEnigme.style.display = "block";
+    }
+  }
+
+  if (element.parentElement.parentElement.parentElement.id == "multiEnigme") {
+    if (multiEnigme.parentElement.classList.contains("fullscreen") == false) {
+      multiEnigme.parentElement.classList.add("fullscreen");
+      multiEnigme.classList.add("fullscreen");
+    } else {
+      multiEnigme.parentElement.classList.remove("fullscreen");
+      multiEnigme.classList.remove("fullscreen");
+    }
+
+    if (mail.style.display != "none") {
+      mail.style.display = "none";
+      mail.parentElement.style.display = "none";
+      soloEnigme.style.display = "none";
+    } else {
+      mail.style.display = "flex";
+      mail.parentElement.style.display = "flex";
+      soloEnigme.style.display = "block";
+    }
+  }
+
+  if (element.parentElement.parentElement.parentElement.id == "mail") {
+    mail.parentElement.classList.toggle("fullscreen");
+    mail.classList.toggle("fullscreen");
+
+    if (multiEnigme.style.display != "none") {
+      multiEnigme.style.display = "none";
+      multiEnigme.parentElement.style.display = "none";
+      soloEnigme.style.display = "none";
+    } else {
+      multiEnigme.style.display = "block";
+      multiEnigme.parentElement.style.display = "flex";
+      soloEnigme.style.display = "block";
+    }
+  }
+}

WEB/View/src/pages/Main.php

@@ -50,7 +50,7 @@
                   width: 125px;
                   height: 125px;
                   padding: 0;
-                  border: 2px solid #44fff6;
+                  border: 2px solid #fff;
                 "
               />
               <p class="d-flex justify-content-center m-0 p-0">' . $_SESSION['pseudo'] . '</p>