From ec22fc8eaaa36528c6804e32eeb1566615dd5bcd Mon Sep 17 00:00:00 2001
From: vautrin33u <vautrin33u@etu.univ-lorraine.fr>
Date: Thu, 23 Dec 2021 16:59:52 +0100
Subject: [PATCH] update css etc
---
Profil.php | 160 +++++++++++++++++++++++++-----------
Requete.php | 56 ++++++-------
connexion.php | 29 +++++++
copie.css | 141 +++++++++++++++++++++++++++++++
inscription.php | 40 ++++++++-
panier.js | 9 +-
panier.php | 62 ++++++--------
recettes.css | 214 ++++++++++++++++++++++++++++++------------------
recettes.js | 16 +++-
suggestion.js | 29 +++----
10 files changed, 543 insertions(+), 213 deletions(-)
create mode 100644 copie.css
diff --git a/Profil.php b/Profil.php
index 715bb91..dafd571 100644
--- a/Profil.php
+++ b/Profil.php
@@ -1,6 +1,42 @@
<?php
include "configuration.php";
session_start();
+
+function afficherGenre($genre){
+ if ($genre == 'h') return 'Homme';
+ if ($genre == 'f') return 'Femme';
+ if ($genre == '') return 'Non-renseigné';
+}
+//Gestion boutons de navigation
+$erreur = false;
+$strerr = "<ul> Erreur : ";
+
+if (!isset($_SESSION['id'])){
+ header("location:Requete.php");
+}
+
+if (isset($_POST['connexion'])){
+ header("location:connexion.php");
+}
+
+if (isset($_POST['inscription'])){
+ header("location:inscription.php");
+}
+
+if (isset($_POST['panier'])){
+ header("location:panier.php");
+}
+
+if (isset($_POST['home'])){
+ header("location:Requete.php");
+}
+
+if (isset($_POST['deconnecter'])){
+ $_SESSION = array();
+ session_destroy();
+ header("location:Requete.php");
+}
+
?>
<!DOCTYPE html>
@@ -13,45 +49,33 @@ session_start();
</head>
<body>
- <form action="" method="post">
- <?php
+ <div id='header'>
+ <form method="POST" id='authentification'>
+ <?php
+ if (isset($_SESSION['pseudo'])){
+ $pseudonyme = ucfirst(strtolower($_SESSION['pseudo']));
+ echo "<p id='bienvenue'> Bienvenue ".$pseudonyme."</p>";
+ echo "<input type='submit' name='deconnecter' value='Déconnexion'/> ";
+ echo "<input type='submit' name='profil' id='profil' value='Profil'/>";
- $erreur = false;
- $strerr = "<ul> Erreur : ";
+ }else{
+ echo "<input type='submit' name='connexion' value='Connexion'/>";
+ echo "<input type='submit' name='inscription' value='Inscription'/>";
+ }
+ echo "<input type='submit' name='home' value='Les recettes'/>";
- if (isset($_POST['connexion'])){
- header("location:connexion.php");
- }
+ ?>
+ </form>
+ </div>
- if (isset($_POST['inscription'])){
- header("location:inscription.php");
- }
- if (isset($_POST['panier'])){
- header("location:panier.php");
- }
- if (isset($_POST['home'])){
- header("location:Requete.php");
- }
- if (isset($_POST['deconnecter'])){
- $_SESSION = array();
- session_destroy();
- header("location:Requete.php");
- }
-
- if (isset($_SESSION['pseudo'])){
- $pseudonyme = ucfirst(strtolower($_SESSION['pseudo']));
- echo "<p id='bienvenue'> Bienvenue ".$pseudonyme."</p>";
- echo "<input type='submit' name='deconnecter' value='Déconnexion'/>";
- }else{
- echo "<input type='submit' name='connexion' value='Connexion'/>";
- echo "<input type='submit' name='inscription' value='Inscription'/>";
- }
- echo "<input type='submit' name='panier' id='panier' value='Votre panier'/>";
- echo "<input type='submit' name='home' value='Les recettes'/></br>";
+ <form action="" method="post" class='formProfil'>
+ <?php
+
+
$mysqli = connect_to_db();
$id = $_SESSION['id'];
@@ -141,22 +165,66 @@ session_start();
}
- echo nl2br("Votre pseudo : ".$pseudo." - Modifier en <input name='pseudo' type='text'/>"."\n");
- echo nl2br("Modifiez votre mot de passe en <input name='password' type='password'/>"."\n");
- echo nl2br("Votre email : ".$email." - Modifier en <input name='email' type='email'/>"."\n");
- echo nl2br("Votre nom : ".$nom." - Modifier en <input name='nom' type='text'/>"."\n");
- echo nl2br("Votre prénom : ".$prenom." - Modifier en <input name='prenom' type='text'/>"."\n");
- echo nl2br("Votre sexe : ".$sexe." - Modifier en <input type='radio' id='Homme' value='h' name='sexe' />Homme <input type='radio' id='Femme' value='f' name='sexe' />Femme"."\n");
- echo nl2br("Votre date de naissance : ".$datenaissance." - Modifier en <input name='datenaissance' type='date'/>"."\n");
- echo nl2br("Votre adresse : ".$adresse." - Modifier en <input name='adresse' type='text'/>"."\n");
- echo nl2br("Votre code postal : ".$codepostal." - Modifier en <input name='codepostal' type='text'/>"."\n");
- echo nl2br("Votre ville : ".$ville." - Modifier en <input name='ville' type='text'/>"."\n");
- echo nl2br("Votre numéro de téléphone : ".$numtelephone." - Modifier en <input name='numtelephone' type='tel'/>"."\n");
+ echo "<div class='formProfil'>
+ <label for='pseudo'>Pseudo actuel : ".$pseudo." - Modifier le : </label>
+ <input type='text' name='pseudo' id='pseudo' />
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='password'>Modifiez votre mot de passe : </label>
+ <input name='password' type='password'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='email'>Email actuelle : ".$email." - Modifier la : </label>
+ <input name='email' type='email'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='nom'>Votre nom : ".$nom." - Modifier le : </label>
+ <input name='nom' type='text'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='prenom'>Votre prénom : ".$prenom." - Modifier le : </label>
+ <input name='prenom' type='text'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='sexe'>Votre sexe : ".afficherGenre($sexe)." - Modifier le : </label>
+ <input name='sexe' type='radio' id='Homme' value='h'/> Homme
+ <input name='sexe' type='radio' id='Femme' value='f'/> Femme
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='datenaissance'>Date de naissance : ".$datenaissance." - Modifier la : </label>
+ <input name='datenaissance' type='date'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='adresse'>Votre adresse : ".$adresse." - Modifier la :</label>
+ <input name='adresse' type='text'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='codepostal'>Votre code postal : ".$codepostal." - Modifier le : </label>
+ <input name='codepostal' type='number'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='ville'>Votre ville : ".$ville." - Modifier la : </label>
+ <input name='ville' type='text'/>
+ </div>";
+
+ echo "<div class='formProfil'>
+ <label for='numtelephone'>Votre n° de téléphone : ".$numtelephone." - Modifier le : </label>
+ <input name='numtelephone' type='tel'/>
+ </div>";
-
-
?>
- <input type="submit" name="modifier" class="button" value="Modifier"/>
+ <div class='formProfil'>
+ <input type="submit" name="modifier" class="button" value="Modifier"/>
+ </div>
</form>
diff --git a/Requete.php b/Requete.php
index 3085604..ce48bdd 100644
--- a/Requete.php
+++ b/Requete.php
@@ -4,6 +4,27 @@
echo "</pre>";
+ if (isset($_POST['connexion'])){
+ header("location:connexion.php");
+ }
+
+ if (isset($_POST['inscription'])){
+ header("location:inscription.php");
+ }
+
+ if (isset($_POST['panier'])){
+ header("location:panier.php");
+ }
+ if (isset($_POST['profil'])){
+ header("location:Profil.php");
+ }
+
+ if (isset($_POST['deconnecter'])){
+ $_SESSION = array();
+ session_destroy();
+ header("location:Requete.php");
+ }
+
?>
<!DOCTYPE html>
@@ -19,31 +40,6 @@
<body>
- <?php
-
- if (isset($_POST['connexion'])){
- header("location:connexion.php");
- }
-
- if (isset($_POST['inscription'])){
- header("location:inscription.php");
- }
-
- if (isset($_POST['panier'])){
- header("location:panier.php");
- }
- if (isset($_POST['profil'])){
- header("location:Profil.php");
- }
-
- if (isset($_POST['deconnecter'])){
- $_SESSION = array();
- session_destroy();
- header("location:Requete.php");
- }
- ?>
-
-
<div id='header'>
<form method="POST" id='authentification'>
<?php
@@ -60,14 +56,14 @@
echo "<input type='submit' name='panier' id='panier' value='Votre panier'/>";
?>
- </form>
+ </form>
<div id='recherche'>
<form method="post" id="form">
- <div id='fil'>
+ <input type='button' id='searchtype' onclick='switchSearch()' value='Changer de mode de recherche'>
+ <div id='fil' hidden=true>
Entrez votre recherche :
<input list='listeNoms' type="text" id="requete" onkeyup="afficherSuggestions()"/>
- </br>
<input type='button' id='pour' name='pour' value='Avec' onclick='inclureIngredient()'/>
<input type='button' id='contre' name='contre' value='Sans' onclick='exclureIngredient()'/>
<input type='button' id='filtre' value='Recherche via filtres' onclick='rechercheFiltres()' disabled/>
@@ -85,11 +81,11 @@
<option value='Aliment'></option>
<option value='Aliment'>Aliment</option>
</select>
-
<button type="button" onclick="remettreAZero()">Remise à zéro</button>
+ <div id="infos"></div>
+
</div>
<br/>
- <div id="infos"></div>
</form>
</div>
</div>
diff --git a/connexion.php b/connexion.php
index 3bb08ad..de19db2 100644
--- a/connexion.php
+++ b/connexion.php
@@ -17,7 +17,36 @@
</head>
+ <?php
+
+ if (isset($_POST['inscription'])){
+ header("location:inscription.php");
+ }
+
+ if (isset($_POST['panier'])){
+ header("location:panier.php");
+ }
+
+?>
<body>
+ <div id='header'>
+ <form method="POST" id='authentification'>
+
+ <?php
+ if (isset($_SESSION['pseudo'])){
+ $pseudonyme = ucfirst(strtolower($_SESSION['pseudo']));
+ echo "<p id='bienvenue'> Bienvenue ".$pseudonyme."</p>";
+ echo "<input type='submit' name='deconnecter' value='Déconnexion'/>";
+ echo "<input type='submit' name='profil' id='profil' value='Profil'/>";
+
+ }else{
+ echo "<input type='submit' name='inscription' value='Inscription'/>";
+ }
+ echo "<input type='submit' name='panier' id='panier' value='Votre panier'/>";
+ ?>
+ </form>
+ </div>
+
<?php // Gestion de l'inscription
$mysqli=install_bd();
diff --git a/copie.css b/copie.css
new file mode 100644
index 0000000..dbb2df3
--- /dev/null
+++ b/copie.css
@@ -0,0 +1,141 @@
+#recherche{
+ display: flex;
+ justify-content: space-evenly;
+ width: 50%;
+ min-width: none;
+ min-height: 30px;
+}
+
+#panier{
+ top: 0;
+ right :0;
+ position: fixed;
+}
+
+#header{
+ display: flex;
+ position: fixed;
+ top:0px;
+ width: 100%;
+ min-width: 600px;
+ height: 100px;
+ background-color: #c483a6;
+
+}
+
+#recettes{
+ padding-top: 5%;
+ width : 90%;
+ min-width: 400px;
+ margin: auto;
+
+}
+
+img {
+ max-width: 100%;
+ height: auto;
+ width: auto\9;
+}
+
+body{
+background-color: #c483a6;
+color: white;
+
+}
+
+h2{
+color: #fec4ae;
+font-weight: bold;
+text-align: center;
+}
+
+img{
+display:block;
+margin-left:auto;
+margin-right:auto;
+border: 2px solid #5e3657;
+}
+
+ul{
+text-align: center;
+}
+
+@keyframes recette {
+ from {background-color: #c483a6;}
+ to {background-color: #743d5a;}
+ from {color: #c483a6;}
+ to {color: #ffffff;}
+}
+
+
+.recetteSolo {
+ background-color: #743d5a;
+ animation-name: recette;
+ animation-duration: 0.4s;
+ border: 2px solid #422852;
+}
+
+/* Correspont au texte + liste de chaque recette */
+.preparation{
+ padding: 50px;
+}
+
+button {
+ background-color:white;
+ border-radius:12px;
+ border: 2px solid black;
+ transition-duration:0.4s;
+}
+
+input{
+background-color:white;
+font-size:16px;
+border-radius:12px;
+border: 2px solid black;
+transition-duration:0.4s;
+}
+
+#requete{
+width: 20%;
+min-width:200px;
+
+}
+
+input:hover, button:enabled:hover{
+background-color:black;
+color:white;
+}
+
+input + input{
+margin-right: 2%;
+margin-left: 2%;
+
+}
+
+.with {
+ padding-left: 2px;
+ padding-right: 2px;
+ margin-left: 2px;
+ margin-right : 2px;
+ background-color: darkgreen;
+ border-radius:12px;
+ border: 2px solid black;
+ transition-duration:0.4s;
+}
+
+.without {
+ padding-left: 2px;
+ padding-right: 2px;
+ margin-left: 2px;
+ margin-right : 2px;
+ background-color: darkred;
+ border-radius:12px;
+ border: 2px solid black;
+}
+
+#profil{
+ position: fixed;
+ margin-right:10em;
+ right:0;
+}
+
diff --git a/inscription.php b/inscription.php
index 92f1eaa..c3e04a8 100644
--- a/inscription.php
+++ b/inscription.php
@@ -2,6 +2,17 @@
session_start(); // début session
include "configuration.php";
+
+ if (isset($_POST['connexion'])){
+ header("location:connexion.php");
+ }
+
+ if (isset($_POST['panier'])){
+ header("location:panier.php");
+ }
+
+
+
?>
@@ -18,15 +29,35 @@
</head>
<body>
+ <div id='header'>
+ <form method="POST" id='authentification'>
+
+ <?php
+ if (isset($_SESSION['pseudo'])){
+ $pseudonyme = ucfirst(strtolower($_SESSION['pseudo']));
+ echo "<p id='bienvenue'> Bienvenue ".$pseudonyme."</p>";
+ echo "<input type='submit' name='deconnecter' value='Déconnexion'/>";
+ echo "<input type='submit' name='profil' id='profil' value='Profil'/>";
+
+ }else{
+ echo "<input type='submit' name='connexion' value='Connexion'/>";
+ }
+ echo "<input type='submit' name='panier' id='panier' value='Votre panier'/>";
+ ?>
+ </form>
+ </div>
+
+
<?php // Gestion de l'inscription
$mysqli=install_bd();
$describe = $mysqli->query('describe Boissons.utilisateurs;');
if ($describe->num_rows > 0) {
$form = '<h1> Inscription </h1>';
- $form .= '<form method="post" id="inscription">';
+ $form .= '<form method="post" id="inscription" class="formProfil">';
while ($row = $describe->fetch_assoc()) {
if ($row["Field"] != "user_id") {
+ $form .= "<div class='formProfil'>";
$form .= "<label for='" . $row["Field"] . "'>";
switch ($row["Field"]){
case "nom":
@@ -47,9 +78,8 @@
break;
case "sexe":
$form.= "Sexe : </label>";
- $form .= "<input type='radio' id='Homme' value='h' name='" . $row["Field"] . "' > <label for='Homme'>Homme </label>";
- $form .= "<input type='radio' id='Femme' value='f' name='" . $row["Field"] . "' > <label for='Femme'>Femme </label>";
- $form .= "</br>";
+ $form .= "<input type='radio' id='Homme' value='h' name='" . $row["Field"] . "' > Homme ";
+ $form .= "<input type='radio' id='Femme' value='f' name='" . $row["Field"] . "' > Femme ";
break;
case "email":
$form.= "E-mail : ";
@@ -79,6 +109,8 @@
if ($row["Field"] != "sexe" && $row["Field"] != "pseudo" && $row["Field"] != "password" && $row["Field"] != "email" && $row["Field"] != "datenaissance" && $row["Field"] != 'numtelephone'){
$form .= "</label> <input type='text' name='" . $row["Field"] . "' > </br>";
}
+ $form .= "</div>";
+
}
}
}
diff --git a/panier.js b/panier.js
index 02ea043..693a1c4 100644
--- a/panier.js
+++ b/panier.js
@@ -49,7 +49,7 @@ function ajoutFormulaire(conteneur, parent, recette){
// Affiche les recettes
function afficheRecettes(recette){
// Récupère l'élément qui va afficher les recettes
- let div = document.getElementById("panierClient");
+ let div = document.getElementById("recettes");
// parcours de toutes les recettes contenu dans l'objet
for (var i = 0; i<recette.length; i++){
@@ -72,6 +72,7 @@ function afficheRecettes(recette){
for (var j = 0; j<ingredients.length; j++){
liste.innerHTML += "<li>"+ingredients[j]+"</li>";
}
+ /*
const search = recette[i].titre;
// Génère l'objet de requête à envoyer au serveur (traiter par Service.php) : le nom de la recette
@@ -88,6 +89,12 @@ function afficheRecettes(recette){
};
xhr.send(JSON.stringify(input));
+ */
+
+ if (recette[i].photo != null){
+ let image = document.createElement('img'); // image
+ image.src = recette[i].photo;
+ }
// Ajout à la div de recettes
div.append(conteneur);
diff --git a/panier.php b/panier.php
index 0b42d12..0d4b2f1 100644
--- a/panier.php
+++ b/panier.php
@@ -20,7 +20,26 @@
echo $requete;
echo '</pre>';
*/
-
+ if (isset($_POST['connexion'])){
+ header("location:connexion.php");
+ }
+
+ if (isset($_POST['inscription'])){
+ header("location:inscription.php");
+ }
+
+ if (isset($_POST['home'])){
+ header("location:Requete.php");
+ }
+
+ if (isset($_POST['deconnecter'])){
+ $_SESSION = array();
+ session_destroy();
+ header("location:Requete.php");
+ }
+ if (isset($_POST['profil'])){
+ header("location:Profil.php");
+ }
?>
@@ -36,37 +55,7 @@
<body>
- <?php
-
- if (isset($_POST['connexion'])){
- header("location:connexion.php");
- }
-
- if (isset($_POST['inscription'])){
- header("location:inscription.php");
- }
-
- if (isset($_POST['inscription'])){
- header("location:panier.php");
- }
-
- if (isset($_POST['home'])){
- header("location:Requete.php");
- }
-
-
- if (isset($_POST['deconnecter'])){
- $_SESSION = array();
- session_destroy();
- header("location:Requete.php");
- }
- if (isset($_POST['profil'])){
- header("location:Profil.php");
- }
- ?>
-
-
- <div id='authentification'>
+ <div id='header'>
<form method="POST" id='authentification'>
<?php
if (isset($_SESSION['pseudo'])){
@@ -74,7 +63,6 @@
echo "<p id='bienvenue'> Bienvenue ".$pseudonyme."</p>";
echo "<input type='submit' name='deconnecter' value='Déconnexion'/> ";
echo "<input type='submit' name='profil' id='profil' value='Profil'/>";
- //echo "<input type='submit' name='panier' value='Votre panier'/> ";
}else{
echo "<input type='submit' name='connexion' value='Connexion'/>";
@@ -82,12 +70,12 @@
}
echo "<input type='submit' name='home' value='Les recettes'/>";
- ?>
- </form>
- </div>
+ ?>
+ </form>
+ </div>
<h1> Votre panier </h1>
- <div id='panierClient'>
+ <div id='recettes'>
</div>
diff --git a/recettes.css b/recettes.css
index 9df088a..da34989 100644
--- a/recettes.css
+++ b/recettes.css
@@ -1,85 +1,142 @@
-#recherche{
- display: flex;
- justify-content: space-evenly;
- width: 50%;
- min-width: none;
- min-height: 30px;
+@keyframes recette {
+ from {background-color: #ffffff;}
+ to {background-color: #b9cecc;}
+ from {color: #ffffff;}
+ to {color: #000000;}
}
-#panier{
- top: 0;
- right :0;
- position: fixed;
+@keyframes gauche {
+ 0% {
+ opacity: 0;
+ transform: translateX(3000px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateX(0px);
+ }
}
-#header{
+#header {
+ border-radius:12px;
+ position: sticky;
+ top: 0;
display: flex;
- position: fixed;
- top:0px;
- width: 100%;
- min-width: 600px;
- height: 100px;
- background-color: #c483a6;
+ flex-direction: row;
+ align-items: center;
+ background-color: rgb(93, 157, 161);
+ justify-content: space-around;
+ box-shadow: -4px -3px 15px 10px rgba(0,0,0,0.25);
-}
+ }
+
+ fieldset{
+ display: inline-block;
+ border-radius:12px;
+
+ }
+
+ #searchtype{
+ right : 0;
+ }
+ #authentification{
+ margin: 20px;
+ flex: 1;
+ }
+
+ #cat, #id {
+ margin: 5px;
+ flex: 2;
+ }
#recettes{
- padding-top: 5%;
- width : 90%;
- min-width: 400px;
- margin: auto;
+ display: flex;
+ flex-flow: row wrap;
+ align-items: stretch;
+ justify-content: space-around;
+ padding-left: 10px;
+ padding-right: 10px;
}
-img {
- max-width: 400px;
- height: auto;
- width: auto\9;
-}
-body{
-background-color: #c483a6;
-color: white;
-}
+.recetteSolo {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: stretch;
+ justify-content: space-around;
-h2{
-color: #fec4ae;
-font-weight: bold;
-text-align: center;
+
+ padding-left: 20px;
+ padding-right: 20px;
+ flex: 1 600px;
+ background-color: #b9cecc;
+ animation-name: recette;
+ animation-duration: 1s;
+ border: 2px solid #ffffff;
+ color: #000000;
+ border-radius:48px;
+ box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.1);
}
-img{
-display:block;
-margin-left:auto;
-margin-right:auto;
-border: 2px solid #5e3657;
+.recetteSolo p {
+ animation : gauche 2s, ease-in;
+ text-align: justify;
}
-ul{
-text-align: center;
+.preparation {
+ height: 100%;
+ min-height: 100px;
+ padding-right: 20px;
+
}
+.RecetteSolo img {
+ border-radius:48px;
+ border: 2px solid black;
+
+ flex: 1;
+ margin: 20px;
+
+ animation : gauche 2s, ease-in;
+ margin : auto;
+ max-height: 100%;
+ max-width: 250px;
+ height: auto;
+ width: auto\9;
+
+ box-shadow: 0px 10px 10px 0px rgba(20, 49, 54, 0.26);
-@keyframes recette {
- from {background-color: #c483a6;}
- to {background-color: #743d5a;}
- from {color: #c483a6;}
- to {color: #ffffff;}
+}
+body {
+ font-size: 100%;
+ background-color: rgb(255, 255, 255);
}
+h2{
+ font-weight: bold;
+ text-align: center;
+ font-size: 2rem;
+ flex: 2;
-.recetteSolo {
- background-color: #743d5a;
- animation-name: recette;
- animation-duration: 0.4s;
- border: 2px solid #422852;
}
-/* Correspont au texte + liste de chaque recette */
-.preparation{
- padding: 50px;
+@media (min-width: 1000px) {
+ body {
+ font-size: 115%;
+ }
+ h2{
+ font-weight: bold;
+ text-align: center;
+ font-size: 3rem;
+ }
+ #recettes{
+ padding-left: 50px;
+ padding-right: 50px;
+
+ }
}
+
button {
background-color:white;
border-radius:12px;
@@ -95,48 +152,49 @@ border: 2px solid black;
transition-duration:0.4s;
}
-#requete{
-width: 20%;
-min-width:200px;
-
+input:hover, button:enabled:hover{
+ background-color:black;
+ color:white;
}
-input:hover, button:enabled:hover{
-background-color:black;
-color:white;
+form.formProfil {
+ display: table;
+ margin : 10px;
}
-input + input{
-margin-right: 2%;
-margin-left: 2%;
+div.formProfil {
+ display: table-row;
+}
+label, input {
+ display: table-cell;
+ margin-bottom: 10px;
+}
+label {
+ padding-right: 10px;
}
.with {
padding-left: 2px;
padding-right: 2px;
-
+ font-size: 14px;
+ margin: auto;
margin-left: 2px;
margin-right : 2px;
- background-color: darkgreen;
+ background-color: lightgreen;
border-radius:12px;
- border: 2px solid black;
+ border: 2px solid white;
transition-duration:0.4s;
}
.without {
padding-left: 2px;
padding-right: 2px;
+ margin: auto;
+ font-size: 14px;
margin-left: 2px;
margin-right : 2px;
- background-color: darkred;
+ background-color: lightcoral;
border-radius:12px;
- border: 2px solid black;
-}
-
-#profil{
- position: fixed;
- margin-right:10em;
- right:0;
- }
-
+ border: 2px solid white;
+}
\ No newline at end of file
diff --git a/recettes.js b/recettes.js
index fef45b0..e294948 100644
--- a/recettes.js
+++ b/recettes.js
@@ -1,3 +1,17 @@
+function switchSearch(){
+ var fil = document.getElementById('fil');
+ var cat = document.getElementById('cat');
+
+ if (cat.hidden){
+ cat.hidden = false;
+ fil.hidden = true;
+ }else if (fil.hidden){
+ cat.hidden = true;
+ fil.hidden = false;
+ }
+
+}
+
// Ajoute un formulaire pour ajouter des recettes aux favoris
function ajoutFormulaire(parent, recette){
@@ -103,7 +117,7 @@ function afficheRecettes(recette){
let paragraph = document.createElement('p'); // paragraphe contenant la liste et description
var liste = document.createElement('ul'); // liste
- liste.innerHTML += "Ingrédients :";
+ liste.innerHTML += "<strong>Ingrédients :</strong>";
// Récupération du contenu
titre.textContent = recette[i].titre;
diff --git a/suggestion.js b/suggestion.js
index 820a2eb..68384d8 100644
--- a/suggestion.js
+++ b/suggestion.js
@@ -111,42 +111,33 @@ function exclureIngredient(){
function updateTags(){
- // Ajout des tags de recherches
- // Ajout des tags de recherches
let tags = document.getElementById('tagIn');
tags.innerHTML = '';
+ tags.style.display = 'inline-block'
+
+ let tagOut = document.getElementById('tagOut');
+ tagOut.innerHTML = '';
+ tagOut.style.display = 'inline-block'
+
if (recherche.avec.length > 0){
let tag = document.createElement('ul');
tags.append(tag);
- let cmpt = 1;
recherche.avec.forEach(element => {
let puce = document.createElement('il');
puce.classList.add('with');
puce.textContent = element;
tag.append(puce);
- puce.addEventListener('click', () =>{
- recherche.avec = recherche.avec.splice(1, cmpt);
- puce.parentNode.removeChild(puce);
- })
- cmpt++;
});
}
- let tagOut = document.getElementById('tagOut');
- tagOut.innerHTML = '';
+
if (recherche.sans.length > 0){
let tag = document.createElement('ul');
tagOut.append(tag);
- let cmpt = 1;
recherche.sans.forEach(element => {
let puce = document.createElement('il');
puce.classList.add('without');
puce.textContent = element;
tag.append(puce);
- puce.addEventListener('click', () =>{
- recherche.sans = recherche.sans.splice(1, cmpt);
- puce.parentNode.removeChild(puce);
- })
- cmpt++;
});
}
}
@@ -167,6 +158,12 @@ function rechercheFiltres(){
if (this.response != null){
var resultat = JSON.parse(xhr.response);
console.log(resultat);
+ recherche = {
+ filtre : 'filtre',
+ avec: [],
+ sans: []
+ };
+ updateTags();
}
}
}
--
GitLab