ajoutUtilisateurs
This commit is contained in:
462
public/assets/css/style.css
Normal file
462
public/assets/css/style.css
Normal file
@@ -0,0 +1,462 @@
|
||||
@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
|
||||
- Body contenue
|
||||
- Content
|
||||
- Page de présentation des recettes
|
||||
- Page d'une recette
|
||||
- Footer
|
||||
|
||||
*/
|
||||
|
||||
/*Tout*/
|
||||
html, body{
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
/*font-size: 98%;*/
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/*Header et son contenu*/
|
||||
#header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 3px;
|
||||
padding-left: 2%;
|
||||
padding-bottom: 10px;
|
||||
background-color: blanchedalmond;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background-color: aqua;
|
||||
background-image: url("Logo.jpg");
|
||||
/*background:no-repeat;*/
|
||||
height: 103px;
|
||||
width: 141px;
|
||||
}
|
||||
|
||||
.logo{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px white solid;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 1px black;
|
||||
}
|
||||
|
||||
.logo:hover{
|
||||
box-shadow: 1px 1px 2px #0bbd90;
|
||||
border: 1px solid #0bbd90;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex: 9;
|
||||
text-align: initial;
|
||||
letter-spacing: 2px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgb(255, 217, 160);
|
||||
display: flex;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
|
||||
.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 */
|
||||
body {
|
||||
background-color: blanchedalmond;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #caecd6;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
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%;
|
||||
max-width: calc(128px*0.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;
|
||||
flex: 1;
|
||||
background-clip: border-box;
|
||||
padding-right: 2%;
|
||||
padding-left: 2%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* content : le cadre de base du centre de notre site
|
||||
*/
|
||||
.content {
|
||||
background-color: #ffe4bb;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: 6px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
/*Recettes :
|
||||
représente le contenue centrale de la page.
|
||||
*/
|
||||
.recettes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
/* 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;
|
||||
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( 5vh + 5vw );
|
||||
max-height: calc( 5vh + 5vw );
|
||||
border: 1px solid rgb(252, 223, 57);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/*Ici commence le CSS pour la page de chaques recettes */
|
||||
/*contenue*/
|
||||
.recette-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/*titre*/
|
||||
.recette-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*image*/
|
||||
.recette-image {
|
||||
background-color: red;
|
||||
aspect-ratio: 1/1;
|
||||
max-height: calc( 30vh + 30vw );
|
||||
max-width: calc( 30vh + 30vw );
|
||||
border: 1px solid white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.recette-div-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.recette-div-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.recette-div-liste-info{
|
||||
padding: 30px;
|
||||
margin: 10px;
|
||||
width: 100%;
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.recette-list-buttons {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.recette-button {
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
padding : 10px;
|
||||
box-shadow: 1px 1px 1px black;
|
||||
background-color: blanchedalmond;
|
||||
}
|
||||
|
||||
.recette-button:hover{
|
||||
background-color: rgb(243, 215, 174);
|
||||
}
|
||||
|
||||
.recette-liste-info-elem {
|
||||
text-align: left;
|
||||
padding: 4px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
color: #535353bd;
|
||||
border-right: 1px solid #535353bd;
|
||||
border-left: 1px solid #535353bd;
|
||||
}
|
||||
|
||||
.recette-liste-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.recette-liste-tag {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /*trouvé à l'aide de ChatGPT car je n'arrivais pas à trouver*/
|
||||
}
|
||||
|
||||
|
||||
/*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: 4vmin;
|
||||
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;
|
||||
}
|
||||
|
||||
.recette-form-div-desc {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.recette-form {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.recette-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#recette-form-div-desc {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#recette-form-description {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
/*Footer et son contenue*/
|
||||
footer{
|
||||
padding: 25px;
|
||||
background: rgb(11, 189, 144);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
public/assets/images/Logo.jpg
Normal file
BIN
public/assets/images/Logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
66
public/assets/js/login.js
Normal file
66
public/assets/js/login.js
Normal file
@@ -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." );
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
13
public/index.php
Normal file
13
public/index.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
use App\Kernel;
|
||||
|
||||
if( !defined( 'APP_ROOT' ) )
|
||||
|
||||
/**
|
||||
* Définit la racine de l'application en chemin absolue.
|
||||
*/
|
||||
define( 'APP_ROOT', realpath( __DIR__ . '/../') . '/' );
|
||||
|
||||
require_once '../src/Kernel.php';
|
||||
Kernel::start();
|
||||
Reference in New Issue
Block a user