Version 0.1.1 - Ajout d'une page de login et de style

public/images/FormatLogo_BLACK.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.43 481.43">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 40px;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke: #1d1d1b;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-3, .cls-5 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2, .cls-4 {
+        fill: #1d1d1b;
+      }
+
+      .cls-5 {
+        stroke-width: 10px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="190.13"/>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="112.42"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="52"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="36"/>
+  <circle class="cls-3" cx="240.78" cy="240.65" r="17.5"/>
+  <line class="cls-2" x1="240.78" y1="187.65" x2="240.78" y2="204.13"/>
+  <line class="cls-2" x1="293.78" y1="240.65" x2="276.29" y2="240.65"/>
+  <path class="cls-2" d="m228.23,252.44c-3.81,3.81-7.62,7.62-11.43,11.43"/>
+  <path class="cls-4" d="m240.05,7.01c7.99,14.68,16.4,32.59,23.67,53.57,6.88,19.85,11.25,38.14,14.07,53.93-9.15-2.76-22.44-5.68-38.61-5.59-15.41.08-28.12,2.87-37.04,5.55,2.78-15.73,7.13-34.02,14.04-53.88,7.32-21.05,15.82-38.96,23.86-53.57Z"/>
+  <path class="cls-4" d="m240.86,474.3c7.99-14.68,16.4-32.59,23.67-53.57,6.88-19.85,11.25-38.14,14.07-53.93-9.15,2.76-22.44,5.68-38.61,5.59-15.41-.08-28.12-2.87-37.04-5.55,2.78,15.73,7.13,34.02,14.04,53.88,7.32,21.05,15.82,38.96,23.86,53.57Z"/>
+  <path class="cls-4" d="m7.05,240.83c14.68-7.99,32.59-16.4,53.57-23.67,19.85-6.88,38.14-11.25,53.93-14.07-2.76,9.15-5.68,22.44-5.59,38.61.08,15.41,2.87,28.12,5.55,37.04-15.73-2.78-34.02-7.13-53.88-14.04-21.05-7.32-38.96-15.82-53.57-23.86Z"/>
+  <path class="cls-4" d="m474.27,240.61c-14.68-7.99-32.59-16.4-53.57-23.67-19.85-6.88-38.14-11.25-53.93-14.07,2.76,9.15,5.68,22.44,5.59,38.61-.08,15.41-2.87,28.12-5.55,37.04,15.73-2.78,34.02-7.13,53.88-14.04,21.05-7.32,38.96-15.82,53.57-23.86Z"/>
+  <line class="cls-2" x1="203.8" y1="240.69" x2="186.31" y2="240.69"/>
+  <line class="cls-2" x1="240.78" y1="275.18" x2="240.78" y2="291.66"/>
+  <path class="cls-2" d="m264.13,216.54c-3.94,3.94-7.87,7.87-11.81,11.81"/>
+  <g>
+    <path class="cls-2" d="m253.02,253.15c3.81,3.81,7.62,7.62,11.43,11.43"/>
+    <path class="cls-2" d="m217.12,217.25c3.94,3.94,7.87,7.87,11.81,11.81"/>
+  </g>
+</svg>

public/images/FormatLogo_WHITE.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 481.43 481.43">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 40px;
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+        stroke: #ffffff;
+        stroke-miterlimit: 10;
+      }
+
+      .cls-1, .cls-3, .cls-5 {
+        fill: none;
+      }
+
+      .cls-2, .cls-3 {
+        stroke-width: 2px;
+      }
+
+      .cls-2, .cls-4 {
+        fill: #ffffff;
+      }
+
+      .cls-5 {
+        stroke-width: 10px;
+      }
+    </style>
+  </defs>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="190.13"/>
+  <circle class="cls-1" cx="240.78" cy="240.65" r="112.42"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="52"/>
+  <circle class="cls-5" cx="240.78" cy="240.65" r="36"/>
+  <circle class="cls-3" cx="240.78" cy="240.65" r="17.5"/>
+  <line class="cls-2" x1="240.78" y1="187.65" x2="240.78" y2="204.13"/>
+  <line class="cls-2" x1="293.78" y1="240.65" x2="276.29" y2="240.65"/>
+  <path class="cls-2" d="m228.23,252.44c-3.81,3.81-7.62,7.62-11.43,11.43"/>
+  <path class="cls-4" d="m240.05,7.01c7.99,14.68,16.4,32.59,23.67,53.57,6.88,19.85,11.25,38.14,14.07,53.93-9.15-2.76-22.44-5.68-38.61-5.59-15.41.08-28.12,2.87-37.04,5.55,2.78-15.73,7.13-34.02,14.04-53.88,7.32-21.05,15.82-38.96,23.86-53.57Z"/>
+  <path class="cls-4" d="m240.86,474.3c7.99-14.68,16.4-32.59,23.67-53.57,6.88-19.85,11.25-38.14,14.07-53.93-9.15,2.76-22.44,5.68-38.61,5.59-15.41-.08-28.12-2.87-37.04-5.55,2.78,15.73,7.13,34.02,14.04,53.88,7.32,21.05,15.82,38.96,23.86,53.57Z"/>
+  <path class="cls-4" d="m7.05,240.83c14.68-7.99,32.59-16.4,53.57-23.67,19.85-6.88,38.14-11.25,53.93-14.07-2.76,9.15-5.68,22.44-5.59,38.61.08,15.41,2.87,28.12,5.55,37.04-15.73-2.78-34.02-7.13-53.88-14.04-21.05-7.32-38.96-15.82-53.57-23.86Z"/>
+  <path class="cls-4" d="m474.27,240.61c-14.68-7.99-32.59-16.4-53.57-23.67-19.85-6.88-38.14-11.25-53.93-14.07,2.76,9.15,5.68,22.44,5.59,38.61-.08,15.41-2.87,28.12-5.55,37.04,15.73-2.78,34.02-7.13,53.88-14.04,21.05-7.32,38.96-15.82,53.57-23.86Z"/>
+  <line class="cls-2" x1="203.8" y1="240.69" x2="186.31" y2="240.69"/>
+  <line class="cls-2" x1="240.78" y1="275.18" x2="240.78" y2="291.66"/>
+  <path class="cls-2" d="m264.13,216.54c-3.94,3.94-7.87,7.87-11.81,11.81"/>
+  <g>
+    <path class="cls-2" d="m253.02,253.15c3.81,3.81,7.62,7.62,11.43,11.43"/>
+    <path class="cls-2" d="m217.12,217.25c3.94,3.94,7.87,7.87,11.81,11.81"/>
+  </g>
+</svg>

public/javascripts/basics.js

@@ -0,0 +1,35 @@
+// Get Document ID
+
+function getID(string) {
+
+    return document.getElementById(string)
+}
+
+class InfoPop {
+    constructor(name) {
+        this.name = name
+        this.element = getID(this.name)
+        this.element.style.fontSize = "14px"
+
+    }
+
+    clear() {
+
+        this.element.innerHTML = ""
+    }
+    
+    err(text) {
+     
+        this.element.classList.add("yellow")
+        this.element.innerHTML = "<i class='fa fa-warning'></i> " + text
+
+    }
+
+    info(text) {
+   
+        this.element.classList.remove("yellow")
+
+        this.element.innerHTML = "<i class='fa fa-info-circle'></i> " + text
+    }
+
+}

public/javascripts/loginscript.js

@@ -0,0 +1,22 @@
+const username = getID("username")
+const password = getID("password")
+const submit = getID("submit")
+
+const loginInfo = new InfoPop("login-info")
+
+loginInfo.clear()
+
+submit.addEventListener("click", () => {
+
+    if(!username.value) {
+
+        loginInfo.err("Le nom d'utilisateur est nécéssaire pour se connecter !")
+
+    } else if(!password.value) {
+
+        loginInfo.err("Le mot de passe est nécéssaire pour se connecter !")
+    } else {
+
+        loginInfo.clear()
+    }
+})

public/stylesheets/style.css

@@ -1,11 +1,17 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
 
 body {
   padding: 2%;
-  background-color: #323031;
+  background: linear-gradient(120deg, #323031 40%, rgba(241,0,0,1) 100%);
   color: white;
-  font-size: 1vw;
+  font-size: 20px;
   font-family: 'Roboto', sans-serif !important;
+  
+}
+
+html {
+  min-height: 100%;
+  margin: 0;
 }
 
 /*Button*/
@@ -19,7 +25,7 @@ body {
   color: currentColor;
   padding: 0.5vw;
   transition: 0.2s;
-  
+  cursor: pointer;
 }
 
 .btn span {
@@ -48,20 +54,27 @@ body {
  
 }
 
+.btn span a {
+  text-decoration: none;
+}
+
 /* Miniaturiez Button */
 
 .min {
 
-  width: 2vw !important;
-  height: 2vw !important;
+  width: 40px !important;
+  height: 40px !important;
   border-radius: 100% !important;
   font-size: 1vw !important;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   transition: 0.2s;
+  padding: 0 !important;
 }
   
+.min span {
+
+  font-size: 20px !important;
+
+}
 
 
 
@@ -69,7 +82,7 @@ body {
 
 .red {
 
-  color: rgb(255, 63, 63) !important; 
+  color: #f01000!important; 
 }
 
 .blue {
@@ -85,4 +98,185 @@ body {
 .green {
 
   color: rgb(64, 248, 64) !important;
+}
+
+/*Balise Properties*/
+
+code {
+
+  background-color: #3D3B3C;
+  padding: 0.3vw;
+  border-radius: 0.5vw;
+}
+
+p {
+  margin-block-start: 0.5em !important;
+  margin-block-end: 0.5em !important;
+}
+
+a {
+  color: currentColor;
+}
+
+/*Lists*/
+
+.center {
+
+  text-align: center !important;
+  
+
+}
+
+.col {
+
+  display: flex;
+  flex-direction: column;
+  gap: 2vw;
+
+}
+
+@media (max-width: 500px) {
+
+  .row {
+
+  
+    display: flex;
+    flex-direction: column;
+    gap: 2vw;
+  
+  }
+  
+} 
+
+@media (min-width: 500px) {
+
+.row {
+
+  
+  display: flex;
+  flex-direction: row;
+  gap: 2vw;
+  
+}
+
+}
+
+/* Fields */
+
+.field {
+
+  width: fit-content;
+  border-radius: 5px;
+  padding-bottom: 0.3vw;
+  padding-top: 0.3vw;
+  padding-left: 0.5vw;
+  border: 1px solid white;
+  background-color: transparent;
+  transition: 0.2s;
+  color: white;
+}
+
+.field:focus {
+  color: black;
+  outline: none;
+  background-color: white;
+  box-shadow: 0px 0px 8px #C1BDB3 ;
+}
+
+
+
+
+/* Logo */
+
+@media (max-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+  
+} 
+
+@media (min-width: 640px) {
+
+  .logo {
+
+    font-family: 'Gunship', sans-serif;
+    text-shadow: 0px 0px 10px #ffffff;
+    font-size: 50px;
+    display: flex;
+
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+  }
+  
+  .logo-img {
+  
+    width: 70px;
+    margin-right: 10px;
+  }
+  
+
+}
+
+
+
+/* Form Box */
+
+
+.form-box {
+
+  width: 500px;
+  height: 400px;
+  border-radius: 0.5vw;
+  display: flex;
+  padding: 2%;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #605e5863;
+}
+
+.m-align {
+
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+.t-center {
+
+  text-align: center;
+}
+
+
+/* LOGIN Specs */
+
+.LOG_btn {
+
+  margin-top: 2%;
+  margin-bottom: 2%;
+}
+
+.LOG_body {
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 0 !important;
+    margin: 0 !important;
 }