Finalisation, affinage du css et ajout d'un système de vérification pour les mdp pour qu'ils soient forts.

12 files changed, 226 insertions, 79 deletions

diff --git a/Static/Css/admin.css b/Static/Css/admin.css
index b92ae2c..96d9c03 100644
--- a/Static/Css/admin.css
+++ b/Static/Css/admin.css
@@ -1,4 +1,12 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique de l'administration                          #
+#                                                                          #
+############################################################################ 
+*/
+
 /* BUTTONS */
 #adminButtons {
     display:         flex;
diff --git a/Static/Css/footer.css b/Static/Css/footer.css
index b806b47..d0e4c02 100644
--- a/Static/Css/footer.css
+++ b/Static/Css/footer.css
@@ -1,4 +1,12 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique du footer                                    #
+#                                                                          #
+############################################################################ 
+*/
+
 /* FOOTER */
 footer {
     min-height:         10vh;
diff --git a/Static/Css/login.css b/Static/Css/login.css
index 915b5f6..0b373b1 100644
--- a/Static/Css/login.css
+++ b/Static/Css/login.css
@@ -1,4 +1,12 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique de la page de login                          #
+#                                                                          #
+############################################################################ 
+*/
+
 /* MAIN */
 #mainLogin form {
     display:         flex;
diff --git a/Static/Css/main.css b/Static/Css/main.css
index a602db3..ff1e229 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -1,4 +1,12 @@
 /* 
+############################################################################
+#                                                                          #
+# Description: Fichier principal regroupant les éléments communs à toutes  #
+#              les pages.                                                  #
+#                                                                          #
+############################################################################ 
+
+
 Sites web utilisés pour le CSS:
 https://css-tricks.com/guides/
 https://stackoverflow.com/
@@ -9,43 +17,46 @@ sur mon instance SearX https://searx.debulois.fr
 */
 
 :root {
+    /* Global */
     --mainSiteColor:           #c0392b;
     --bodyBg:                  #fafafa;  
     --separatorBg:              var(--bodyBg);
     --bg:                      white;
     --text:                    black;
-
+    /* Header & navbar */
     --navbarTextColor:          var(--text);
     --headerBg:                 var(--bg);
     --navBg:                   #f8f8f8;
-
+    /* Slideshow */
     --slideText:               whitesmoke;
     --slideBg:                 black;
     --slideStroke:             black;
-
+    /* Footer */
     --footerTextColor:         #636e72;
     --footerBgColor:           #2d3436;
-
-    --iconColor:               white;
-    --btnHoverBg:              #e74c3c;
-
+    /* Tableaux */
     --tableText:                var(--text);
     --tableBg:                  var(--bodyBg);
     --tdBorderColor:           rgba(0, 0, 0, 0.2);
     --tableStarUnchecked:      darkgray;
     --tableStarChecked:        orange;
-
+    /* Messages */
     --messageTextErrorColor:   red;
     --messageTextSuccessColor: green;
-
+    /* Input icon et button */
+    --iconColor:               white;
+    --btnHoverBg:              #e74c3c;
+    /* Input border */
     --inputBorder:              2px solid var(--mainSiteColor);
     --thBorder:                 2px solid var(--mainSiteColor);
     --tdBorder:                 2px solid var(--tdBorderColor);
     --iBorderRadius:            5px 0px 0px 5px;
     --inputBorderRadius:        0px 5px 5px 0px;
-
+    /* Fonts size */
     --fontSizeI:                20px;
     --fontSizeSlideP:           34px;
+    --fontSizeSmallPhone:       12px;
+    --fontSizeSmallLess:        14px;
     --fontSizeSmall:            16px;
     --fontSizeSmallPlus:        18px;
     --fontSizeMedium:           26px;
@@ -94,15 +105,16 @@ html {
 }
 
 body {
-    font-family:     SourceSansPro;
-    font-size:       var(--fontSizeSmall);
-    margin:          0px;
-    min-height:      100vh;
-    display:         flex;
-    flex-direction:  column;
-    justify-content: space-between;
+
+    min-height:       100vh;
+    font-family:      SourceSansPro;
+    display:          flex;
+    flex-direction:   column;
+    justify-content:  space-between;
+    margin:           0px;
     background-color: var(--bodyBg);
     color:            var(--textColor);
+    font-size:        var(--fontSizeSmall);
 }
 
 main {
@@ -120,24 +132,23 @@ main {
     border-left:       3px solid var(--mainSiteColor);
     border-radius:     3px;
     background-color:  var(--bg);
-    color:             var(--textColor);
 }
 
 main h2 {
     max-width:     80%;
-    font-size:     var(--fontSizeLarge);
     margin-left:   auto;
     margin-right:  auto;
     padding:       1.5% 3%;
+    font-size:     var(--fontSizeLarge);
     border-bottom: var(--mainSiteColor) 3px solid;
 }
 
 main h3 {
     max-width:     80%;
-    font-size:     var(--fontSizeMedium);
     margin-left:   auto;
     margin-right:  auto;
     padding:       0.5% 3%;
+    font-size:     var(--fontSizeMedium);
     border-bottom: var(--mainSiteColor) 2px solid;
 }
 
@@ -161,16 +172,16 @@ main table {
     display:         block;
     Overflow-x:      auto;
     Overflow-y:      auto;
-    color:           var(--textColor);
     padding:         1em;
     border-collapse: collapse;
+    width:           fit-content;
     max-width:       95%;
     margin-left:     auto;
     margin-right:    auto;
+    color:           var(--textColor);
 }
 
 main th {
-    font-size:        var(--fontSizeSmallPlus);
     border:           var(--thBorder);
     background-color: var(--tableBg);
 }
@@ -180,7 +191,6 @@ main td {
     background-color: var(--tableBg);
 }
 
-
 select {
     height:        1.6em;
     line-height:   1.6em;
@@ -191,6 +201,9 @@ select {
 main input[type="text"],
 main input[type="email"],
 main input[type="password"] {
+    padding:       2px;
+    height:        2.5em;
+    font-size:     calc(32px / 2.5);
     border:        var(--inputBorder);
     border-radius: var(--inputBorderRadius);
 }
@@ -198,7 +211,6 @@ main input[type="password"] {
 main input[type="submit"],
 main button {
     color:            var(--textColor);
-    font-size:        var(--fontSizeSmall);
     border:           var(--inputBorder);
     background-color: var(--bg);
     border-radius:    5px;
@@ -212,3 +224,17 @@ main button:hover {
     color:              var(--bg);
     background-color:   var(--btnHoverBg);
 }
+
+@media screen and (max-width: 768px) {
+    body {
+        font-size: var(--fontSizeSmallLess);
+    }
+
+    main h2 {
+        font-size: var(--fontSizeMedium);
+    }
+
+    main h3 {
+        font-size: var(--fontSizeSmallPlus);
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/message.css b/Static/Css/message.css
index 3ea29e3..d2276ea 100644
--- a/Static/Css/message.css
+++ b/Static/Css/message.css
@@ -1,17 +1,24 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique de la page des messages                      #
+#                                                                          #
+############################################################################ 
+*/
+
 .success {
-    color:           var(--messageTextSuccessColor);
     font-weight:     bold;
-
     text-decoration: underline;
     font-size:       var(--fontSizeMedium);
+    color:           var(--messageTextSuccessColor);
 }
 
 .error {
-    color:           var(--messageTextErrorColor);
     font-weight:     bold;
     text-decoration: underline;
     font-size:       var(--fontSizeMedium);
+    color:           var(--messageTextErrorColor);
 }
 
 #mainMessage h3 {
diff --git a/Static/Css/mission.css b/Static/Css/mission.css
index cd37466..b9383d9 100644
--- a/Static/Css/mission.css
+++ b/Static/Css/mission.css
@@ -1,10 +1,20 @@
+
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique de la page d'enregistrement ou de valdation  #
+#              des missions                                                #
+#                                                                          #
+############################################################################ 
+*/
+
 #mainMission form {
     display:         flex;
     flex-direction:  column;
+    align-items:     center;
     justify-content: space-around;
     gap:             1em;
     padding:         1.5% 5%;
-    align-items:     center;
 }
 
 #mainMission label {
diff --git a/Static/Css/myMission.css b/Static/Css/myMission.css
index 5b6ad2a..34afff3 100644
--- a/Static/Css/myMission.css
+++ b/Static/Css/myMission.css
@@ -1,4 +1,12 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique de la page de gestion de ses missions        #
+#                                                                          #
+############################################################################ 
+*/
+
 #myMissionButtons {
     display:         flex;
     justify-content: space-around;
diff --git a/Static/Css/navbar.css b/Static/Css/navbar.css
index 327cde8..6887f0d 100644
--- a/Static/Css/navbar.css
+++ b/Static/Css/navbar.css
@@ -1,11 +1,19 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique au header et à la navbar                     #
+#                                                                          #
+############################################################################ 
+*/
+
 .showNav {
     top: 0vh !important;
 }
 
 .navLinkClicked {
+    color:     var(--mainSiteColor) !important;
     transform: scale(1.2) rotate(90deg);
-    color: var(--mainSiteColor) !important;
 }
 
 .headerInfoAdmin {
@@ -21,30 +29,30 @@
 }
 
 header {
-    z-index: 1;
-    display: flex;
-    justify-content: space-around;
+    z-index:          1;
+    display:          flex;
+    justify-content:  space-around;
     height:           10vh;
-    text-align: center;
+    text-align:       center;
     background-color: var(--headerBg);
     border-top:       var(--mainSiteColor) solid 6px;
     border-bottom:    var(--mainSiteColor) solid 3px;
 }
 
 header h2 {
+    margin:      0px;
     font-family: akira;
     color:       var(--mainSiteColor) !important;
-    margin:      0px;
 }
 
 header a {
-    display: flex;
-    flex-direction: column;
+    display:         flex;
+    flex-direction:  column;
     justify-content: center;
-    text-align:       center;
+    text-align:      center;
     flex-grow:       1;
-    color:           var(--navbarTextColor);
     text-decoration: none;
+    color:           var(--navbarTextColor);
     transition:      all 0.1s ease-in-out;
 }
 
@@ -59,14 +67,8 @@ header a:hover {
     transform: scale(1.1);
 }
 
-header i {
-    all:          revert;
-    margin-right: 0.4em;
-    font-size:    var(--fontSizeI);
-}
-
 header a:first-child {
-    border-right: 3px solid var(--mainSiteColor);
+    border-right:     3px solid var(--mainSiteColor);
     background-color: var(--navBg);
 }
 
@@ -75,9 +77,9 @@ header a:first-child:hover {
 }
 
 header a:first-child i {
-    color:      #404040;
-    font-size:  var(--fontSizeLarge);
     margin:     0px;
+    color:     #404040;
+    font-size:  var(--fontSizeLarge);
     transition: all 0.1s ease-in-out;
 }
 
@@ -91,8 +93,8 @@ nav {
     position:         relative;
     justify-content:  space-around;
     height:           10vh;
-    border-bottom:    var(--mainSiteColor) solid 3px;
     background-color: var(--navBg);
+    border-bottom:    var(--mainSiteColor) solid 3px;
     box-shadow:       0px 0px 6px #0e0e0e;
     transition:       all 0.1s ease-in-out;
 }
@@ -103,8 +105,8 @@ nav a {
     justify-content: center;
     text-align:      center;
     flex-grow:       1;
-    color:           var(--navbarTextColor);
     text-decoration: none;
+    color:           var(--navbarTextColor);
     transition:      all 0.1s ease-in-out;
 }
 
diff --git a/Static/Css/register.css b/Static/Css/register.css
index e9a5009..56808af 100644
--- a/Static/Css/register.css
+++ b/Static/Css/register.css
@@ -1,22 +1,70 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique à la page d'inscription                      #
+#                                                                          #
+############################################################################ 
+*/
+
+.valid {
+    color: #338533;
+}
+
+.valid::before {
+    content: "\2714\0020";
+}
+
+.invalid::before {
+    content: "\2717\0020";
+}
+
+.deactivate {
+    border-color: darkgray !important;
+}
+
+.deactivate:hover {
+    color:            black !important;
+    border-color:     darkgray !important;
+    background-color: white !important;
+}
+
 #mainRegister form {
     display:         flex;
     flex-direction:  column;
     justify-content: space-around;
-    gap:             1em;
-    padding:         1.5% 5%;
     align-items:     center;
+    padding:         1.5% 5%;
 }
 
 #mainRegister label {
     width: 70%;
 }
 
-#mainRegister:last-child {
-    justify-content: center !important;
+#mainRegister p {
+    margin: 0px;
+    font-style: italic;
+    color: #8f8f8f;
+    font-size: var(--fontSizeSmallLess);
+}
+
+#mainRegister div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
 }
 
 #mainRegister input[type="email"],
 #mainRegister input[type="password"] {
     width: inherit;
 }
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    #mainRegister p {
+        display: flex;
+        flex-direction: column;
+        font-size: var(--fontSizeSmallPhone);
+    }
+}
\ No newline at end of file
diff --git a/Static/Css/search.css b/Static/Css/search.css
index c9aa98b..7362ac9 100644
--- a/Static/Css/search.css
+++ b/Static/Css/search.css
@@ -1,3 +1,12 @@
+
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique à la partie recherche de l'index             #
+#                                                                          #
+############################################################################ 
+*/
+
 .star {
     width:            1.2em !important;
     background-color: var(--tableBg) !important;
@@ -14,15 +23,15 @@
 
 /* DIV SEARCH */
 #divSearch {
-    width:           80%;
-    margin-left:     auto;
-    margin-right:    auto;
-    padding-bottom:  1em;
     display:         flex;
     flex-direction:  row;
     flex-wrap:       wrap;
     justify-content: space-around;
     align-items:     center;
+    width:           80%;
+    margin-left:     auto;
+    margin-right:    auto;
+    padding-bottom:  1em;
     border-bottom:   var(--mainSiteColor) 2px solid;;
 }
 
@@ -36,7 +45,7 @@
 }
 
 #mainSearch p {
-    font-size: var(--fontSizeSmallPlus);
+    font-size:  var(--fontSizeSmallPlus);
     font-style: italic;
 }
 
@@ -61,9 +70,11 @@
     .extend {
         display: none;
     }
+
     #mainSearch form {
         flex-direction: column;
     }
+
     #divSearch {
         flex-direction: column;
     }
diff --git a/Static/Css/slideshow.css b/Static/Css/slideshow.css
index c7c2e99..d2cdaa3 100644
--- a/Static/Css/slideshow.css
+++ b/Static/Css/slideshow.css
@@ -1,13 +1,21 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique au slideshow                                 #
+#                                                                          #
+############################################################################ 
+*/
+
 .slideDotSelected {
     color:     var(--mainSiteColor);
     transform: scale(1.4);
 }
 
 #secSlides {
-    display:         flex;
-    flex-direction:  column;
-    text-align:      center;
+    display:             flex;
+    flex-direction:      column;
+    text-align:          center;
     width:               100%;
     height:              70vh;
     background-color:    var(--navbarBg);
@@ -19,8 +27,8 @@
 }
 
 #secSlides p {
-    display:                   none;
     z-index:                   1;
+    display:                   none;
     margin:                    auto;
     max-width:                 80%;
     font-size:                 var(--fontSizeSlideP);
diff --git a/Static/Css/userInfo.css b/Static/Css/userInfo.css
index ceda91a..45d1133 100644
--- a/Static/Css/userInfo.css
+++ b/Static/Css/userInfo.css
@@ -1,7 +1,15 @@
 
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS spécifique à la page de gestion de ses infos            #
+#                                                                          #
+############################################################################ 
+*/
+
 .jobsListElem {
-    background-color: rgb(243, 201, 201);
     border-radius:     10px;
+    background-color: rgb(243, 201, 201);
     transition:        all 0.1s ease-in-out;
 }
 
@@ -11,23 +19,22 @@
 }
 
 .jobsListElem i{
-    background-color: transparent !important;
-    color:           #991e1e !important;
     width:            auto !important;
     height:           auto !important;
     line-height:      normal !important;
-    font-size:        var(--fontSizeSmall) !important;
     border-radius:    0px !important;
-    margin-left:      0.5em;
+    font-size:        var(--fontSizeSmall) !important;
+    color:           #991e1e !important;
+    background-color: transparent !important;
 }
 
 #mainUserInfo form {
     display:         flex;
     flex-direction:  column;
     justify-content: space-around;
+    align-items:     center;
     gap:             1em;
     padding:         1.5% 5%;
-    align-items:     center;
 }
 
 #mainUserInfo label {
@@ -35,20 +42,15 @@
 }
 
 #mainUserInfo input[type="text"] {
-    width: inherit;
+    width: 70%;
 }
 
 #mainUserInfo button {
     padding: 0.13em 0.2em;
 }
 
-#userJob {
-    justify-content: center;
-    width:           70%;
-}
-
 #userJob div {
-    width:           inherit;
+    width:           70%;
     font-size:       calc(36px / 2.5);
     height:          2.5em;
     line-height:     2.5em;
@@ -64,15 +66,16 @@
 }
 
 #jobsListGrid {
+    width:                 70%;
     display:               grid;
+    gap:                   0.5em;
+    grid-template-columns: repeat(3, 1fr);
     min-height:            2em;
     line-height:           2em;
-    padding:               1px 2px;
-    grid-template-columns: repeat(3, 1fr);
+    padding:               2px;
     border:                var(--inputBorder);
     border-radius:         0px 4px 4px 0px;
-    width:                 inherit;
-    gap:                   0.5em;
+    font-size:             var(--fontSizeSmall);
 }
 
 @media screen and (max-width: 768px) {