Ajout d'un système de notification pour alerter les pro et finition

13 files changed, 198 insertions, 48 deletions

diff --git a/Static/Css/admin.css b/Static/Css/admin.css
index 96d9c03..91a04c1 100644
--- a/Static/Css/admin.css
+++ b/Static/Css/admin.css
@@ -7,12 +7,13 @@
 ############################################################################ 
 */
 
+
 /* BUTTONS */
 #adminButtons {
     display:         flex;
     justify-content: space-around;
     gap:             1em;
-    width:           80%;
+    max-width:       80%;
     margin-left:     auto;
     margin-right:    auto;
     padding:         2em;
@@ -61,4 +62,4 @@
     #secAdminMissions form {
         flex-direction: column;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/footer.css b/Static/Css/footer.css
index d0e4c02..ecbc25e 100644
--- a/Static/Css/footer.css
+++ b/Static/Css/footer.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 /* FOOTER */
 footer {
     min-height:         10vh;
diff --git a/Static/Css/login.css b/Static/Css/login.css
index 0b373b1..2c3b2cc 100644
--- a/Static/Css/login.css
+++ b/Static/Css/login.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 /* MAIN */
 #mainLogin form {
     display:         flex;
diff --git a/Static/Css/main.css b/Static/Css/main.css
index ff1e229..7614cd3 100644
--- a/Static/Css/main.css
+++ b/Static/Css/main.css
@@ -6,7 +6,6 @@
 #                                                                          #
 ############################################################################ 
 
-
 Sites web utilisés pour le CSS:
 https://css-tricks.com/guides/
 https://stackoverflow.com/
@@ -16,51 +15,60 @@ Toutes les recherches sont effectuées en anglais
 sur mon instance SearX https://searx.debulois.fr
 */
 
+
 :root {
     /* Global */
-    --mainSiteColor:           #c0392b;
-    --bodyBg:                  #fafafa;  
-    --separatorBg:              var(--bodyBg);
-    --bg:                      white;
-    --text:                    black;
+    --mainSiteColor:             #c0392b;
+    --bodyBg:                    #fafafa;  
+    --separatorBg:                var(--bodyBg);
+    --bg:                        white;
+    --text:                      black;
     /* Header & navbar */
-    --navbarTextColor:          var(--text);
-    --headerBg:                 var(--bg);
-    --navBg:                   #f8f8f8;
+    --navbarTextColor:            var(--text);
+    --headerBg:                   var(--bg);
+    --navBg:                     #f8f8f8;
     /* Slideshow */
-    --slideText:               whitesmoke;
-    --slideBg:                 black;
-    --slideStroke:             black;
+    --slideText:                 whitesmoke;
+    --slideBg:                   black;
+    --slideStroke:               black;
     /* Footer */
-    --footerTextColor:         #636e72;
-    --footerBgColor:           #2d3436;
+    --footerTextColor:           #636e72;
+    --footerBgColor:             #2d3436;
     /* Tableaux */
-    --tableText:                var(--text);
-    --tableBg:                  var(--bodyBg);
-    --tdBorderColor:           rgba(0, 0, 0, 0.2);
-    --tableStarUnchecked:      darkgray;
-    --tableStarChecked:        orange;
+    --tableText:                   var(--text);
+    --tableBg:                     var(--bodyBg);
+    --tdBorderColor:              rgba(0, 0, 0, 0.2);
+    --tableStarUnchecked:         darkgray;
+    --tableStarChecked:           orange;
     /* Messages */
-    --messageTextErrorColor:   red;
-    --messageTextSuccessColor: green;
+    --messageTextErrorColor:      red;
+    --messageTextSuccessColor:    green;
     /* Input icon et button */
-    --iconColor:               white;
-    --btnHoverBg:              #e74c3c;
+    --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;
+    --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;
+    /* Notification */
+    --notifAsideBg:               #f8f8f8;
+    --notifAsideBorder:            4px solid #cf7e39;
+    --notifButtonCloseColor:      #1a1a1a;
+    --notifButtonCloseBg:         #d3c9c3c9;
+    --notifButtonCloseBorder:      solid 1px #6e5e5e;
+    --notifButtonCloseHoverColor: #e7e7e7;
+    --notifButtonCloseHoverBg:    #ff5959;
     /* Fonts size */
-    --fontSizeI:                20px;
-    --fontSizeSlideP:           34px;
-    --fontSizeSmallPhone:       12px;
-    --fontSizeSmallLess:        14px;
-    --fontSizeSmall:            16px;
-    --fontSizeSmallPlus:        18px;
-    --fontSizeMedium:           26px;
-    --fontSizeLarge:            28px;
+    --fontSizeI:                   20px;
+    --fontSizeSlideP:              34px;
+    --fontSizeSmallPhone:          12px;
+    --fontSizeSmallLess:           14px;
+    --fontSizeSmall:               16px;
+    --fontSizeSmallPlus:           18px;
+    --fontSizeMedium:              26px;
+    --fontSizeLarge:               28px;
 }
 
 @font-face {
@@ -184,6 +192,7 @@ main table {
 main th {
     border:           var(--thBorder);
     background-color: var(--tableBg);
+
 }
 
 main td {
@@ -203,7 +212,7 @@ main input[type="email"],
 main input[type="password"] {
     padding:       2px;
     height:        2.5em;
-    font-size:     calc(32px / 2.5);
+    font-size:     calc(32px / 2.5); /* nécessaire par rapport à quand c'est une div */
     border:        var(--inputBorder);
     border-radius: var(--inputBorderRadius);
 }
@@ -237,4 +246,4 @@ main button:hover {
     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 d2276ea..22d27cd 100644
--- a/Static/Css/message.css
+++ b/Static/Css/message.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .success {
     font-weight:     bold;
     text-decoration: underline;
@@ -23,4 +24,4 @@
 
 #mainMessage h3 {
     border: none;
-}
\ No newline at end of file
+}
diff --git a/Static/Css/mission.css b/Static/Css/mission.css
index b9383d9..944227e 100644
--- a/Static/Css/mission.css
+++ b/Static/Css/mission.css
@@ -8,6 +8,7 @@
 ############################################################################ 
 */
 
+
 #mainMission form {
     display:         flex;
     flex-direction:  column;
@@ -21,6 +22,12 @@
     width: 70%;
 }
 
+#mainMission select {
+    height:        3em;
+    font-size:     calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
+    border-radius: var(--inputBorderRadius);
+}
+
 #mainMission input[type="text"] {
     width: inherit;
 }
diff --git a/Static/Css/myMission.css b/Static/Css/myMission.css
index 34afff3..ca22ddb 100644
--- a/Static/Css/myMission.css
+++ b/Static/Css/myMission.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 #myMissionButtons {
     display:         flex;
     justify-content: space-around;
diff --git a/Static/Css/navbar.css b/Static/Css/navbar.css
index 6887f0d..91b102b 100644
--- a/Static/Css/navbar.css
+++ b/Static/Css/navbar.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .showNav {
     top: 0vh !important;
 }
@@ -127,4 +128,4 @@ nav p {
     header a:first-child {
         min-width: 20%;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/notification.css b/Static/Css/notification.css
new file mode 100644
index 0000000..beddf4a
--- /dev/null
+++ b/Static/Css/notification.css
@@ -0,0 +1,123 @@
+
+/* 
+############################################################################
+#                                                                          #
+# Description: CSS du message de notification                              #
+#                                                                          #
+############################################################################ 
+https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
+https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+*/
+
+
+.show_notif {
+    left: 2em;
+}
+
+/* Div de la notification */
+aside {
+    z-index:           2;                       /* Position en profondeur */
+    position:          fixed;                   /* Comment vas être positionné l'élément */
+    left:              -75%;                    /* position à gauche de l'écran (démarre masqué) */
+    bottom:            2em;                     /* position en bas de l'écran */
+    width:             350px;                   /* largeur de la div définie selon le contenu */
+    padding:           0.3em;                   /* marge interne de 1 fois la taille du texte */
+    background-color:  var(--notifAsideBg);     /* couleur du fond */
+    border:            var(--notifAsideBorder); /* taille type et couleur de la bordure */
+    border-radius:     10px;                    /* arrondie des angles de la bordure */
+    text-align:        center;                  /* le texte est centré */
+    box-shadow:        4px 4px 9px black;     /* Ombre, déportation x, deportation y, diffusion, couleur */
+    transition:        all 0.6s ease-in-out;    /* ajout d'un effet acceleration/decerelation de l'animation */
+}
+
+/* Zone clickable */ 
+aside a {
+    cursor: pointer; /* le curseur deviens un pointeur quand on le survole */
+}
+
+/* Boutton pour fermer */
+aside button {
+    position:          absolute; /* Position fixe relative */
+    right:             0px;      /* tout à droite */
+    top:               0px;      /* tout en haut */
+    border:            none;     /* sans bordure*/
+    padding:           0px;
+    margin-top:        4px;
+    margin-right:      4px;
+    color:             var(--notifButtonCloseColor);
+    background-color:  var(--notifButtonCloseBg);
+    border-radius:     4px;
+    font-size:         19px;
+    width:             23px;
+    line-height:       23px;
+    height:            23px;
+    border:            var(--notifButtonCloseBorder);
+    transition:        all 0.05s ease-in-out;
+}
+
+aside button:hover {
+    cursor:            pointer; /* le curseur deviens un pointeur quand on le survole */
+    color:            var(--notifButtonCloseHoverColor);
+    background-color: var(--notifButtonCloseHoverBg);
+}
+
+aside span {
+    float:                     left;                      /* float à gauche */
+    position:                  absolute;                  /* position fixe relative  */
+    left:                      0.5em;                     /* distance a gauche */
+                                                          /* (espace totale(h3, p pad & marg + font-size) - cloche font-size) / 2*/
+    top:                       calc((52.8px - 32px) / 2); /* centré  */
+    font-size:                 32px;                      /* taille de la cloche */
+    animation-name:            cloche;                    /* nom animation keyframe */
+    animation-timing-function: ease-in-out;               /* vitesse et style de transition */
+    animation-iteration-count: infinite;                  /* répété à l'infini */
+    animation-duration:        2.7s;                      /* duréé de l'animation */
+}
+
+/* Titre de la fenetre */
+aside h3 {
+    font-size:     17px;
+    margin-top:    0px;   /* on supprime la marge du haut */
+    padding-top:   0.3em; /* on la remplace avec du padding pour que la zone soit clickable */
+    margin-bottom: 0.3em;
+}
+
+/* Contenu */
+aside p {
+    font-style:      italic; /* le texte est en italic */
+    text-decoration: underline;
+    margin-bottom:   0px;
+    padding-bottom:  0.3em;
+    margin-top:      0.3em;
+}
+
+/* Etapes de l'animation */
+@keyframes cloche {
+    0% {transform:   rotate(5deg)   scale(1.1);}
+    4% {transform:   rotate(-10deg) scale(1.2);}
+    8% {transform:   rotate(10deg)  scale(1.2);}
+    12% {transform:  rotate(-10deg) scale(1.2);}
+    16% {transform:  rotate(10deg)  scale(1.2);}
+    20% {transform:  rotate(-10deg) scale(1.2);}
+    24% {transform:  rotate(10deg)  scale(1.2);}
+    28% {transform:  rotate(-10deg) scale(1.2);}
+    32% {transform:  rotate(10deg)  scale(1.2);}
+    36% {transform:  rotate(-5deg)  scale(1.1);}
+    40%  {transform: rotate(0deg)   scale(1);}
+    100% {transform: rotate(0deg);}
+}
+
+/* MOBILE */
+@media screen and (max-width: 768px) {
+    .show_notif {
+        bottom: 1em;
+        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+    }
+    
+    /* Div de la notification */
+    aside {
+        bottom: -300px; 
+        width:  90%;
+        left:   calc(5% - 0.3em - 4px); /* espace gauche, aside padding, aside border*/
+    }
+}
diff --git a/Static/Css/register.css b/Static/Css/register.css
index 56808af..9324ad3 100644
--- a/Static/Css/register.css
+++ b/Static/Css/register.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .valid {
     color: #338533;
 }
@@ -53,6 +54,7 @@
     flex-direction: column;
     align-items: center;
     gap: 0.5em;
+    width: 100%;
 }
 
 #mainRegister input[type="email"],
@@ -67,4 +69,4 @@
         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 7362ac9..be96775 100644
--- a/Static/Css/search.css
+++ b/Static/Css/search.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .star {
     width:            1.2em !important;
     background-color: var(--tableBg) !important;
@@ -51,7 +52,7 @@
 
 #mainSearch select {
     height:        3em;
-    font-size:     calc((var(--fontSizeI) * 2) / 3);
+    font-size:     calc((var(--fontSizeI) * 2) / 3); /* Pour avoir la même taille qu'un logo */
     border-radius: var(--inputBorderRadius);
 }
 
@@ -78,4 +79,4 @@
     #divSearch {
         flex-direction: column;
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/slideshow.css b/Static/Css/slideshow.css
index d2cdaa3..8dd6f39 100644
--- a/Static/Css/slideshow.css
+++ b/Static/Css/slideshow.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .slideDotSelected {
     color:     var(--mainSiteColor);
     transform: scale(1.4);
@@ -72,4 +73,4 @@
     #secSlides p {
         font-size: var(--fontSizeMedium);
     }
-}
\ No newline at end of file
+}
diff --git a/Static/Css/userInfo.css b/Static/Css/userInfo.css
index 45d1133..c9113df 100644
--- a/Static/Css/userInfo.css
+++ b/Static/Css/userInfo.css
@@ -7,6 +7,7 @@
 ############################################################################ 
 */
 
+
 .jobsListElem {
     border-radius:     10px;
     background-color: rgb(243, 201, 201);
@@ -51,7 +52,7 @@
 
 #userJob div {
     width:           70%;
-    font-size:       calc(36px / 2.5);
+    font-size:       calc(36px / 2.5); /* Pour avoir la meme hauter qu'un input */
     height:          2.5em;
     line-height:     2.5em;
     display:         flex;
@@ -86,4 +87,4 @@
     #userJob div span{
         display: none;
     }
-}
\ No newline at end of file
+}