Compare commits
33 Commits
Test
...
Front-End-
| Author | SHA1 | Date | |
|---|---|---|---|
| 159ef1eec7 | |||
| 0ceb856272 | |||
| 23b73512e6 | |||
| 06c606105c | |||
| 5e8f23877d | |||
| 8712caac33 | |||
| 22d80b8a07 | |||
| 553c0e9689 | |||
| 4d34d0c8a0 | |||
| 6349bd4d90 | |||
| a9f310a37f | |||
| 0704caa03f | |||
| bf441546ed | |||
| f81725cbe0 | |||
| aa9337b558 | |||
| f18d95766a | |||
| 6f84d81e1c | |||
| fce15dda39 | |||
| ea1149ba48 | |||
| 97286b6f6a | |||
| 0c958b0c59 | |||
| 867134a3e5 | |||
| b45ef1281a | |||
| 1fe166e95b | |||
| 898b297eee | |||
| 286c7b8c30 | |||
| e1470927ea | |||
| c70b4b0dde | |||
| 4e45014b47 | |||
| 760ab677ee | |||
| c9300a2ff3 | |||
| f998085291 | |||
| 155a4dde42 |
57
acceuil.php
Normal file
57
acceuil.php
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<div class="title-site">
|
||||
<h1 class="title">Les Recettes De Papis</h1>
|
||||
<hr class="line-acceuil">
|
||||
<h3>Proposition de recette :</h3>
|
||||
</div>
|
||||
<div class="random-proposition">
|
||||
|
||||
<a class="recette-icone" href="recette-en-dur.php">
|
||||
<img class="recette-preview-image" src="random-recette.jpg">
|
||||
<div class="recette-icone-content">
|
||||
<h3>Tarte au Pomme</h3>
|
||||
<ul>
|
||||
<li>Temps de préparation : 5ans</li>
|
||||
<li>Nombre d'ingrédient : 48548964</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> <img class="recette-preview-image" src="random-recette.jpg">
|
||||
<div class="recette-icone-content">
|
||||
<h3>Tarte au Pomme</h3>
|
||||
<ul>
|
||||
<li>Temps de préparation : 5ans</li>
|
||||
<li>Nombre d'ingrédient : 48548964</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> <img class="recette-preview-image" src="random-recette.jpg">
|
||||
<div class="recette-icone-content">
|
||||
<h3>Tarte au Pomme</h3>
|
||||
<ul>
|
||||
<li>Temps de préparation : 5ans</li>
|
||||
<li>Nombre d'ingrédient : 48548964</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
94
ajout.php
Normal file
94
ajout.php
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<div class="recette-add-form-all">
|
||||
<form class="recette-form recette-form-add" action="/api/recettes/create.php" method="POST">
|
||||
<legend><h1>Nouvelle Recette : </h1></legend>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="nom">Titre : </label>
|
||||
<input type="texte" class="form-control" id="recette-form-nom" name="nom" placeholder="Titre de votre recette">
|
||||
</div>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="temps">Temps (en min) : </label>
|
||||
<input type="texte" class="form-control" id="recette-form-temps" name="temps" placeholder="Temps de préparation">
|
||||
</div>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="image">Photo du plat : </label>
|
||||
<input type="file" class="form-control" id="recette-form-photo" name="image" placeholder="ajouter votre image">
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-ingr">
|
||||
<label for="ingr">Ingredients</label>
|
||||
<select multiple class="form-control" id="recette-form-ingr" name="ingr" placeholder="Ingredients">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-tag">
|
||||
<label for="tag">Tag</label>
|
||||
<select multiple class="form-control" id="recette-form-tag" name="tag" placeholder="Tag">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-desc">
|
||||
<label for="description">Description</label>
|
||||
<textarea type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
</form>
|
||||
<div class="recette-form-add-additional">
|
||||
<form id="recette-form-ingr-add" class="recette-form recette-form-add-ingr" action="" method="POST">
|
||||
<legend><h2>Nouvelle Ingrédient :</h2></legend>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="name">Nom de l'Ingrédient</label>
|
||||
<input type="texte" class="form-control" id="recette-form-ingr-nom" name="name" placeholder="Nom de l'ingrédient" value="">
|
||||
</div>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="image">Photo de l'Ingrédient</label>
|
||||
<input type="file" class="form-control" id="recette-form-ingr-photo" name="image">
|
||||
</div>
|
||||
|
||||
<button id="submit-ingr" type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
<div id="recette-form-div-err-ingr" class="err">
|
||||
Erreur
|
||||
</div>
|
||||
</form>
|
||||
<form id="recette-form-tag-add" class="recette-form recette-form-add-tag" action="" method="POST">
|
||||
<legend><h2>Nouveau Tag : </h2></legend>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="tag">Tags</label>
|
||||
<input type="texte" class="form-control" id="recette-form-tag" name="tag" placeholder="Nom de l'ingrédient">
|
||||
</div>
|
||||
|
||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
<div id="recette-form-div-err-tag" class="err">
|
||||
Erreur
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
10
footer.php
Normal file
10
footer.php
Normal file
@@ -0,0 +1,10 @@
|
||||
<footer id="footer">
|
||||
<div class="src">
|
||||
<a href="https://code.romhackplaza.org/Benjamin/LesRecettesDePapis" target="_blank">Notre Gitea</a>
|
||||
</div>
|
||||
<div class="Contact">
|
||||
Front end : Bousquet Sébastien
|
||||
--- Back end : Thorel Benjamin
|
||||
--- Base de donné : Glaudis Jordan
|
||||
</div>
|
||||
</footer>
|
||||
18
header.php
Normal file
18
header.php
Normal file
@@ -0,0 +1,18 @@
|
||||
<header id="header">
|
||||
<div id="logo">
|
||||
<a href="index.php">
|
||||
<img src="Logo.jpg" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="nav-list">
|
||||
<li><a id="google" class="nav-element" href="index.php">Acceuil</a></li>
|
||||
<li><a id="unTest" class="nav-element" href="index.php">Liste des recettes</a></li>
|
||||
<li><a id="login" class= "nav-element" href="login.php">Login</a></li>
|
||||
<li><a id="addBouton" class="nav-element" href="ajout.php">Ajouter une Recette</a></li>
|
||||
<li><a id="ingrManage" class="nav-element" href="listeIngr.php">Liste des Ingrédients</a></li>
|
||||
<li><a id="tagManage" class="nav-element" href="listeTag.php">Manage Tag</a></li>
|
||||
</ul>
|
||||
<input type="text" class="search-form search-form-recette" placeholder="Rechercher une recette ...">
|
||||
</nav>
|
||||
</header>
|
||||
11
index.html
11
index.html
@@ -1,11 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
HELLO
|
||||
</body>
|
||||
</html>
|
||||
25
index.php
Normal file
25
index.php
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="sidebar">
|
||||
<?php include "sidebar.php" ?>
|
||||
</div>
|
||||
<div class="content">
|
||||
<?php include "recette.php" ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
48
listeIngr.js
Normal file
48
listeIngr.js
Normal file
@@ -0,0 +1,48 @@
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
|
||||
|
||||
let modifier_button = document.getElementsByClassName("ingr-modifier");
|
||||
|
||||
console.log(modifier_button);
|
||||
|
||||
for (const element of modifier_button) {
|
||||
element.addEventListener('click', function () {
|
||||
let modif = element.parentElement.previousSibling.previousSibling;
|
||||
|
||||
let data = element.getAttribute("data-id");
|
||||
|
||||
let form = document.createElement("form");
|
||||
|
||||
form.setAttribute("method", "POST");
|
||||
form.setAttribute("action", "/ingredient/edit/" + data);
|
||||
form.setAttribute("class","liste-ingr-elem-text")
|
||||
|
||||
let input = document.createElement("input");
|
||||
|
||||
input.setAttribute("type", "text");
|
||||
input.setAttribute("class", "form-control");
|
||||
input.setAttribute("name","modif_ingr");
|
||||
input.setAttribute("placeholder", "modificiation");
|
||||
|
||||
let hidden = document.createElement("input");
|
||||
|
||||
hidden.setAttribute("type","hidden");
|
||||
hidden.setAttribute("name","id");
|
||||
hidden.setAttribute("value", data);
|
||||
|
||||
let button = document.createElement("button");
|
||||
|
||||
button.setAttribute("type", "submit");
|
||||
button.setAttribute("class", "btn btn-primary");
|
||||
button.innerText = "Submit Modification";
|
||||
|
||||
form.append(input)
|
||||
form.append(hidden)
|
||||
form.append(button)
|
||||
|
||||
modif.replaceWith(form);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
67
listeIngr.php
Normal file
67
listeIngr.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
<div class="liste-ingr-elem-modif">
|
||||
<a class="recette-button ingr-modifier" data-id="juh">Modifier</a>
|
||||
<a class="recette-button ingr-suppr">Supprimer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-ingr-elem">
|
||||
<img class="ingr-image" src="pomme.jpeg">
|
||||
<div class="liste-ingr-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="listeIngr.js"></script>
|
||||
</html>
|
||||
62
listeTag.js
Normal file
62
listeTag.js
Normal file
@@ -0,0 +1,62 @@
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
|
||||
|
||||
let modifier_button = document.getElementsByClassName("tag-modifier");
|
||||
|
||||
console.log(modifier_button);
|
||||
|
||||
for (const element of modifier_button) {
|
||||
element.addEventListener('click', function () {
|
||||
let modif = element.parentElement.previousSibling.previousSibling;
|
||||
|
||||
let data = element.getAttribute("data-id");
|
||||
|
||||
let form = document.createElement("form");
|
||||
|
||||
form.setAttribute("method", "POST");
|
||||
form.setAttribute("action", "/tag/edit/" + data);
|
||||
form.setAttribute("class","liste-tag-elem-text")
|
||||
|
||||
let input = document.createElement("input");
|
||||
|
||||
input.setAttribute("type", "text");
|
||||
input.setAttribute("class", "form-control");
|
||||
input.setAttribute("name","modif_tag");
|
||||
input.setAttribute("placeholder", "modificiation");
|
||||
|
||||
let hidden = document.createElement("input");
|
||||
|
||||
hidden.setAttribute("type","hidden");
|
||||
hidden.setAttribute("name","id");
|
||||
hidden.setAttribute("value", data);
|
||||
|
||||
let button = document.createElement("button");
|
||||
|
||||
button.setAttribute("type", "submit");
|
||||
button.setAttribute("class", "btn btn-primary");
|
||||
button.innerText = "Submit Modification";
|
||||
|
||||
form.append(input)
|
||||
form.append(hidden)
|
||||
form.append(button)
|
||||
|
||||
modif.replaceWith(form);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
let suppr = document.getElementsByClassName("tag-suppr");
|
||||
|
||||
for (const element of suppr) {
|
||||
element.addEventListener('click', function () {
|
||||
let confirm = window.confirm("Voulez vous supprimez ?");
|
||||
|
||||
let data = element.getAttribute("data-id");
|
||||
|
||||
if (confirm) {
|
||||
window.location.href = "/tag/delete/" + data;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
67
listeTag.php
Normal file
67
listeTag.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<div class="liste-tag-elem">
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
<div class="liste-tag-elem-modif">
|
||||
<a class="recette-button tag-modifier" data-id="juh">Modifier</a>
|
||||
<a class="recette-button tag-suppr" data-id="juh">Supprimer</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
<div class="liste-tag-elem">
|
||||
|
||||
<div class="liste-tag-elem-text">
|
||||
Un Element
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="listeTag.js"></script>
|
||||
</html>
|
||||
36
login.php
Normal file
36
login.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class=formcont>
|
||||
<form id='user-infos-01' action='".$action."' method='post'>
|
||||
|
||||
<div class='form-group'>
|
||||
<label for='logmsg'>Se Connecter</label>
|
||||
</div>
|
||||
<div class='form-group '>
|
||||
<input type='text' class='form-control' name='username' id='username' value='' placeholder="Pseudo">
|
||||
</div>
|
||||
|
||||
<div class='form-group '>
|
||||
<input type='text' class='form-control' name='password' id='password' value='' placeholder="Mot de Passe">
|
||||
</div>
|
||||
|
||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
</html>
|
||||
654
main.css
Normal file
654
main.css
Normal file
@@ -0,0 +1,654 @@
|
||||
@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-list li {
|
||||
/*border: 1px solid black;*/
|
||||
border-radius: 2000px;
|
||||
}
|
||||
|
||||
.nav-list li:hover {
|
||||
background-color: #00d8a2;
|
||||
}
|
||||
|
||||
|
||||
.nav-element {
|
||||
line-height: 2.5;
|
||||
padding: 10px;
|
||||
margin: 4px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nav-list{
|
||||
li:nth-of-type(3){
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#login {
|
||||
border: 1px solid black;
|
||||
border-radius: 2000px;
|
||||
background-color: #ffc478;
|
||||
}
|
||||
|
||||
#login:hover {
|
||||
background-color: #0bbd90;
|
||||
box-shadow: 1px 1px 7px black;
|
||||
}
|
||||
|
||||
/*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;*/
|
||||
}
|
||||
|
||||
.title-site {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.random-proposition {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recommandation img {
|
||||
max-width: calc( 7vh + 7vw );
|
||||
max-height: calc( 7vh + 7vw );
|
||||
}
|
||||
|
||||
.line-acceuil {
|
||||
color: #03be90;
|
||||
box-shadow: 20px 6px 8px #007054;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin-top: .5%;
|
||||
padding: .5% 0 .5% .5%;
|
||||
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%;
|
||||
padding-bottom: 5px;
|
||||
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;
|
||||
max-height: calc( 20vh + 20vw );
|
||||
max-width: calc( 20vh + 20vw );
|
||||
border: 1px solid white;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.recette-div-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.recette-liste-ingr-div {
|
||||
margin-left: 120px;
|
||||
padding-left: 100px;
|
||||
width: 75%;
|
||||
border: 1px solid black;
|
||||
border-radius: 200px;
|
||||
box-shadow: 7px 4px 7px black;
|
||||
}
|
||||
|
||||
.recette-liste-ingr-elem {
|
||||
display: flex;
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.ingr-image-prev {
|
||||
max-height: 50px;
|
||||
max-width: 50px;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.recette-liste-ingr-elem-nom {
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: .5% 2%;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
margin-top: .5%;
|
||||
margin-left: .5%;
|
||||
background-color: #ffd9a0;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #0bbd90;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 1%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 3px 4px 5px #8c8c8c;
|
||||
}
|
||||
|
||||
.recette-form-div-desc {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.recette-form {
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid black;
|
||||
background: #fff9f1;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 2px 3px #a06100;
|
||||
}
|
||||
|
||||
.recette-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#recette-form-div-desc {
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
#recette-form-description {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.recette-add-form-all {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recette-form-add {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.recette-form-add-ingr {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.recette-form-add-tag {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.recette-form-add-additional{
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: red;
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.liste-ingr-elem {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
padding:5px;
|
||||
background-color: #c6fdefe0;
|
||||
color: #000000;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 1px black;
|
||||
margin-top: .25%;
|
||||
margin-bottom: .25%;
|
||||
}
|
||||
|
||||
.liste-ingr-elem:hover {
|
||||
border:3px solid #007054;
|
||||
box-shadow: 2px 2px 10px black;
|
||||
}
|
||||
|
||||
.liste-ingr-elem-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex:12;
|
||||
padding-left: 20px;
|
||||
line-height: 100px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.liste-ingr-elem-modif {
|
||||
line-height: 100px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.liste-tag-elem {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
padding:5px;
|
||||
background-color: #c6fdefe0;
|
||||
color: #000000;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 1px black;
|
||||
margin-top: .25%;
|
||||
margin-bottom: .25%;
|
||||
}
|
||||
|
||||
.liste-tag-elem:hover {
|
||||
border:3px solid #007054;
|
||||
box-shadow: 2px 2px 10px black;
|
||||
}
|
||||
|
||||
.liste-tag-elem-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex:12;
|
||||
padding-left: 20px;
|
||||
line-height: 40px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.liste-tag-elem-modif {
|
||||
line-height: 40px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.ingr-image {
|
||||
flex: 1;
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/*Footer et son contenue*/
|
||||
footer{
|
||||
padding: 25px;
|
||||
background: rgb(11, 189, 144);
|
||||
color: white;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
96
main.js
Normal file
96
main.js
Normal file
@@ -0,0 +1,96 @@
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
|
||||
function formulaire_ingredient_update(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
console.log(event);
|
||||
|
||||
let form = document.getElementById("recette-form-ingr-add");
|
||||
|
||||
let cible = document.getElementById("recette-form-ingr");
|
||||
|
||||
let ingr = form.nom;
|
||||
|
||||
let form_data = FormData(form);
|
||||
|
||||
fetch("/api/ingredients/create", {
|
||||
method : "POST",
|
||||
body: form_data
|
||||
}).then( reponse => {
|
||||
if (!reponse.ok) {
|
||||
let div_err = document.getElementById("recette-form-div-err-ingr");
|
||||
|
||||
div_err.style.display = "inherit";
|
||||
div_err.innerText = "Erreur de connection au serveur";
|
||||
|
||||
}
|
||||
else {
|
||||
reponse.json().then( data => {
|
||||
if (data.success) {
|
||||
let new_elem = document.createElement("option");
|
||||
|
||||
new_elem.setAttribute("value",ingr.value);
|
||||
new_elem.innerText = ingr.value;
|
||||
|
||||
cible.appendChild(new_elem);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function formulaire_tag_update(event){
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
let form = document.getElementById("recette-form-tag-add");
|
||||
|
||||
let cible = document.getElementById("recette-form-tag");
|
||||
|
||||
let tag = form.tag;
|
||||
|
||||
let form_data = FormData(form);
|
||||
|
||||
fetch("/api/tags/create", {
|
||||
method : "POST",
|
||||
body: form_data
|
||||
}).then( reponse => {
|
||||
if (!reponse.ok) {
|
||||
let div_err = document.getElementById("recette-form-div-err-tag");
|
||||
|
||||
div_err.style.display = "inherit";
|
||||
div_err.innerText = "Erreur de connection au serveur";
|
||||
|
||||
}
|
||||
else {
|
||||
reponse.json().then( data => {
|
||||
if (data.success) {
|
||||
let new_elem = document.createElement("option");
|
||||
|
||||
new_elem.setAttribute("value",tag.value);
|
||||
new_elem.innerText = tag.value;
|
||||
|
||||
cible.appendChild(new_elem);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
let ingr_form = document.getElementById("recette-form-ingr-add");
|
||||
|
||||
ingr_form.addEventListener('submit', formulaire_ingredient_update);
|
||||
|
||||
let tag_form = document.getElementById("recette-form-tag-add");
|
||||
|
||||
tag_form.addEventListener('submit', formulaire_tag_update);
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
BIN
pomme.jpeg
Normal file
BIN
pomme.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
random-recette.jpg
Normal file
BIN
random-recette.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
72
recette-en-dur.php
Normal file
72
recette-en-dur.php
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Test Statique</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<?php include "header.php"?>
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<div class="recette-title">
|
||||
<h1>TARTE AU POMME</h1>
|
||||
</div>
|
||||
<div class="recette-content">
|
||||
<div class="recette-div-info">
|
||||
<div class="recette-div-image">
|
||||
<img class="recette-image" src="random-recette.jpg">
|
||||
</div>
|
||||
<div class="recette-div-liste-info">
|
||||
<ul class="recette-list-buttons">
|
||||
<li><a class="recette-button" href="UneLienSurUneAPI.php">Supprimer</a></li>
|
||||
<li><a class="recette-button" href="UnAutreLienSurUneAPI.php">Modifier</a></li>
|
||||
</ul>
|
||||
<ul class="recette-liste-info">
|
||||
<li class="recette-liste-info-elem">27 mars 2026</li>
|
||||
<li class="recette-liste-info-elem">5 ans</li>
|
||||
<li class="recette-liste-info-elem">458946</li>
|
||||
</ul>
|
||||
<ul class="recette-liste-tag">
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
<li class="tag tag-unselected">tag</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recette-liste-ingr-div">
|
||||
<h3>Liste des ingrédients</h3>
|
||||
<ul class="recette-liste-ingr">
|
||||
<li class="recette-liste-ingr-elem"><img class="ingr-image-prev" src="pomme.jpeg"> <div class="recette-liste-ingr-elem-nom">Une pomme</div></li>
|
||||
<li class="recette-liste-ingr-elem"><img class="ingr-image-prev" src="pomme.jpeg"> <div class="recette-liste-ingr-elem-nom">Une pomme</div></li>
|
||||
<li class="recette-liste-ingr-elem"><img class="ingr-image-prev" src="pomme.jpeg"> <div class="recette-liste-ingr-elem-nom">Une pomme</div></li>
|
||||
<li class="recette-liste-ingr-elem"><img class="ingr-image-prev" src="pomme.jpeg"> <div class="recette-liste-ingr-elem-nom">Une pomme</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class = "recette-desc">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
|
||||
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
|
||||
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies aliquet dignissim. Proin venenatis libero at erat rutrum consectetur. Morbi ut justo ex. Quisque ante mi, feugiat nec turpis ac, feugiat tristique magna. Nunc vitae aliquet mauris, consectetur convallis magna. Suspendisse rutrum sagittis tempor. Sed maximus vulputate vestibulum. Nam arcu enim, finibus id vestibulum in, cursus ac urna. Sed sodales, lacus hendrerit varius sollicitudin, dolor erat porttitor est, fringilla iaculis metus justo et sapien. Ut eget pharetra orci. Morbi at egestas tellus. Praesent porta elit non tempus rhoncus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vitae convallis eros, et tristique leo. Vestibulum vitae ultrices erat.
|
||||
Sed pellentesque tempor purus, eu ullamcorper risus lacinia in. Etiam quis rhoncus risus, quis lobortis sem. Quisque pulvinar faucibus lectus, ut gravida neque aliquam non. Pellentesque ornare blandit imperdiet. Proin sed elit quis dui pharetra volutpat et sagittis tortor. Quisque nec blandit lacus. Nulla varius neque metus, ut feugiat enim commodo a. Phasellus gravida fermentum tortor at lobortis. Nam tellus libero, interdum non mollis ut, faucibus id orci. Suspendisse laoreet lorem ex, vitae maximus tortor tincidunt id. Nullam id enim id lectus egestas commodo sit amet sed est. Phasellus enim est, ornare vitae feugiat at, ornare a sapien. Nullam interdum, lectus vitae commodo vulputate, metus ligula congue massa, quis lobortis lorem nisl quis augue. Nullam vestibulum et odio non luctus. Donec vel molestie nunc, ut ultrices ligula.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
</html>
|
||||
22
recette.php
Normal file
22
recette.php
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="recettes">
|
||||
<a class="recette-icone" href="recette-en-dur.php">
|
||||
<img class="recette-preview-image" src="random-recette.jpg">
|
||||
<div class="recette-icone-content">
|
||||
<h3>Tarte au Pomme</h3>
|
||||
<ul>
|
||||
<li>Temps de préparation : 5ans</li>
|
||||
<li>Nombre d'ingrédient : 48548964</li>
|
||||
</ul>
|
||||
</div>
|
||||
</a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 2 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 3 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 4 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 5 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 6 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 7 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 8 </a>
|
||||
<a class="recette-icone" href="recette-en-dur.php"> 9 </a>
|
||||
</div>
|
||||
|
||||
|
||||
74
sidebar.php
Normal file
74
sidebar.php
Normal file
@@ -0,0 +1,74 @@
|
||||
<script>
|
||||
function test(){
|
||||
let rep = window.confirm("continuer ?");
|
||||
window.alert("rep " + rep);
|
||||
}
|
||||
</script>
|
||||
<div class="tag-cont">
|
||||
<h4>Tag</h4>
|
||||
<div class="tag-selected-div">
|
||||
<ul>
|
||||
<li class="tag tag-selected">Tag 1</li>
|
||||
<li class="tag tag-selected">Tag 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="sidebar-search" action="none">
|
||||
<input type="text" class="search-form search-form-tag" name="search-tag" placeholder="Rechercher..." >
|
||||
</form>
|
||||
<div class="tag-unselected-div">
|
||||
<ul>
|
||||
<li class="tag tag-unselected" onclick="test()">Tag 1</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
<li class="tag tag-unselected">Tag 2</li>
|
||||
<li class="tag tag-unselected">Tag 3</li>
|
||||
<li class="tag tag-unselected">Tag 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr id="hr">
|
||||
<div class="ingr-cont">
|
||||
<h4>Ingrédient</h4>
|
||||
<div class="tag-selected-div">
|
||||
<ul>
|
||||
<li class="tag tag-selected">ingr 1</li>
|
||||
<li class="tag tag-selected">ingr 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="sidebar-search" action="none">
|
||||
<input type="text" class="search-form search-form-tag" name="search-ingr" placeholder="Rechercher..." >
|
||||
</form>
|
||||
<div class="tag-unselected-div">
|
||||
<ul>
|
||||
<li class="tag tag-unselected" onclick="test()">ingr 1</li>
|
||||
<li class="tag tag-unselected">ingr 2</li>
|
||||
<li class="tag tag-unselected">ingr 3</li>
|
||||
<li class="tag tag-unselected">ingr 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user