Lundi

public/assets/css/style.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 /* Sommaire :
 - body et html
 - Header et ses contenues
@@ -14,6 +15,7 @@ html, body{
     height: 100%;
     text-align: center;
     /*font-size: 98%;*/
+    font-family: "Roboto", sans-serif;
 }
 
 
@@ -43,6 +45,11 @@ html, body{
     box-shadow: 1px 1px 1px black;
 }
 
+.logo:hover{
+    box-shadow: 1px 1px 2px #0bbd90;
+    border: 1px solid #0bbd90;
+}
+
 nav {
     flex: 9;
     text-align: initial;
@@ -64,6 +71,25 @@ nav {
 .nav-element {
     line-height: 2.5;
     padding: 10px;
+    text-decoration: none;
+    color: black;
+}
+
+.nav-list{
+    li:nth-of-type(3){
+        position: fixed;
+        right: 25px;
+    }
+}
+
+#login {
+    border: 1px solid black;
+    border-radius: 6px;
+    background-color: #ffc478;
+}
+
+#login:hover {
+    background-color: #0bbd90;
 }
 
 /*Body et son contenu */
@@ -77,21 +103,93 @@ body {
 }
 
 .sidebar {
-    background-color: aquamarine;
+    background-color: #caecd6;
     border: 1px solid rgba(0,0,0,.125);
-    border-radius: 10px;
+    border-radius: 6px;
     width: 128px;
+    display: flex;
+    flex-direction: column;
+    overflow: scroll;
 }
 
+.tag-cont {
+    /*display:none;*/
+}
+
+.ingr-cont {
+    /*display:none;*/
+}
+
+.tag-selected-div {
+    flex: 4;
+}
+
+.tag-unselected-div {
+    flex: 4;
+}
+
+.sidebar-search {
+    flex: 1;
+}
+
+.search-form-tag {
+    width: 85%;
+}
+
+.search-form-recette {
+    width: 100%;
+    height: 25px;
+}
+
+.search-form {
+    border: 1px solid black;
+    border-radius: 20px;
+    box-shadow: 0px 0px 10px rgb(131, 131, 131);
+}
+
+nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.tag {
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 95%;
+    box-shadow: 1px 1px 1px black;
+}
+
+.tag-selected {
+    background-color: #ffa04d;
+}
+
+.tag-selected:hover {
+    background-color: white;
+}
+
+.tag-unselected {
+    background-color: white;
+    
+}
+.tag-unselected:hover {
+    background-color: #ffa04d;
+}
+
+#hr {
+    border: 1px solid #0bbd90;
+    width: 93%;
+    box-shadow: 1px 3px 5px #0bbd90;
+}
 
 .main-body {
     display: flex;
     flex-direction: row;
-    overflow: auto;
     flex: 1;
     background-clip: border-box;
-    padding-right: 5%;
-    padding-left: 5%;
+    padding-right: 2%;
+    padding-left: 2%;
+    overflow: hidden;
 }
 
 /* content : le cadre de base du centre de notre site
@@ -103,37 +201,77 @@ body {
     height: 100%;
     border: 1px solid rgba(0,0,0,.125);
     border-radius: 6px;
-    overflow: auto;
+    overflow: scroll;
 }
 
 /*Recettes :
     représente le contenue centrale de la page.
 */
 .recettes {
-    --UneVariable: calc( 100vw / 500 );
     display: grid;
-    grid-template-columns: repeat(var(--UneVariable), 1fr);
+    grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
-    grid-auto-rows: minmax(300px, auto);
-    grid-auto-columns: auto;
+    /* grid-auto-rows: minmax(300px, auto);
+    grid-auto-columns: auto;*/
+    padding: 10px;
+}
+
+@media screen and (max-width : 1200px) {
+    .recettes {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width : 800px) {
+    .recettes {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+}
+
+@media screen and (max-width : 600px) {
+
+    .sidebar {
+        display: none;
+    }
+}
+
+ul {
+    list-style-type: none;
+    margin-left: 0px;
+    text-align: center;
+    padding : 0px;
 }
 
 /* Classe recette icone :
     C'est la classe de chaques éléments de notre liste de recette
 */
 .recette-icone{
+    display: flex;
     border: 3px solid rgba(0,0,0,.125);
     border-radius: 40px;
     text-align: left;
     padding: 15px;
     vertical-align: middle;
     box-shadow: 3px 5px 5px black;
-    width: 500px;
+    max-width: 400px;
+    text-decoration: none;
+    color: black;
+}
+
+.recette-icone:hover{
+    border-color: #0bbd90;
+}
+
+.recette-icone-content{
+    display: flex;
+    flex-direction: column;
+    padding-left: 10px;
 }
 
 .recette-preview-image{
-    max-width: calc( 10vh + 10vw );
-    max-height: calc( 10vh + 10vw );
+    max-width: calc( 5vh + 5vw );
+    max-height: calc( 5vh + 5vw );
     border: 1px solid rgb(252, 223, 57);
     border-radius: 25px;
 }
@@ -165,11 +303,102 @@ body {
     justify-content: center;
 }
 
-/*description*/
-.recette-desc {
-    padding : 10px;
+.recette-div-info {
+    display: flex;
+    flex-direction: row;
 }
 
+.recette-div-liste-info{
+    padding: 50px;
+    margin: 10px;
+}
+
+.recette-liste-info-elem {
+    text-align: left;
+}
+
+.recette-liste-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.recette-liste-tag {
+    display: flex;
+    flex-direction: row;
+}
+
+
+/*description*/
+.recette-desc {
+    padding : 30px;
+}
+
+/*Login form*/
+.formcont {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.formcont form {
+    width: 50vmin;
+    height: 40vmin;
+    border: 2px solid rgb(0, 0, 0);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5vmin;
+    background:white;
+    border-radius: 12px;
+    box-shadow: 5px 5px 30px #555;
+}
+
+.formcont form .form-group {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.2vmin;
+    padding-left:0px;
+}
+
+.formcont form .form-group label {
+    width: 95%;
+    text-align: center;
+    color:black;
+    font-size:5vmin;
+}
+
+.formcont form .form-group input {
+    width: 95%;
+    box-sizing: border-box;
+        font-size:3vmin;
+        padding:1vmin;
+
+}
+
+.formcont form button {
+    width: 48%;
+    height: 19%;
+    padding:0.5vmin;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background: #ffa04d;
+    color: black;
+    font-size: 5vmin;
+    border-radius: 7px;
+    box-shadow: 2px 2px 0px #000000;
+}
+
+.btn:hover {
+    background-color: #0bbd90;
+}
+
+.form-control {
+    border-radius: 10px;
+    box-shadow: 3px 4px 5px #8c8c8c;
+}
 
 /*Footer et son contenue*/
 footer{

public/assets/js/login.js

@@ -0,0 +1,66 @@
+document.addEventListener( 'DOMContentLoaded', function(){
+    const FORM = document.getElementById( 'login-form' );
+    const FORM_ERROR = document.getElementById( 'login-errors' );
+    if( !FORM )
+        return;
+
+    /**
+     * Permet d'afficher une erreur dans le formulaire.
+     * @param message
+     */
+    FORM.showError = function( message ){
+        FORM_ERROR.style.display = 'block';
+        FORM_ERROR.innerText = message;
+    }
+
+    /**
+     * Permet de retirer l'erreur du formulaire.
+     */
+    FORM.removeError = function(){
+        FORM_ERROR.style.display = 'none';
+        FORM_ERROR.innerText = '';
+    }
+
+    /**
+     * Gère l'envoi du formulaire.
+     * @param e
+     * @returns {boolean}
+     */
+    FORM.onsubmit = function( e ){
+
+        e.preventDefault();
+        FORM.removeError();
+
+        let userField = e.target.username;
+        let passwordField = e.target.password;
+
+        if( !userField || !passwordField || userField.value === "" || passwordField.value === "" ){
+            FORM.showError( "Le nom d'utilisateur ou le mot de passe ne doivent pas être vide.");
+            return false;
+        }
+
+        let formData = new FormData( FORM );
+        let options = {
+            method: "POST",
+            contentType: "application/json",
+            body: formData,
+        }
+
+        fetch( FORM.action, options ).then( ( response ) => {
+            if( response.ok ){
+                response.json().then( ( responseJSON ) => {
+
+                    if( responseJSON.success === true ){
+                        window.location.href = window.location.origin; // Redirection sur la page d'accueil si succès.
+                    } else {
+                        FORM.showError( responseJSON.message || "Mauvais nom d'utilisateur ou mauvais mot de passe." );
+                    }
+
+                })
+            }
+        })
+
+    }
+
+
+})