From a9f310a37f42f66a421330cf648f4d7636d2b29d Mon Sep 17 00:00:00 2001
From: Lycano <sebastien.bousquet91@laposte.net>
Date: Fri, 3 Apr 2026 10:23:45 +0200
Subject: [PATCH] ajout et base du formulaire

---
 ajout.php | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------
 index.php |  1 +
 main.css  | 33 ++++++++++++++++++++++++++++++---
 main.js   | 30 ++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 9 deletions(-)
 create mode 100644 main.js

diff --git a/ajout.php b/ajout.php
index ad098b7..8727250 100644
--- a/ajout.php
+++ b/ajout.php
@@ -12,8 +12,8 @@
 
     <div class="main-body">
         <div class="content">
-            <form class="recette-form" action="" method="post">
-                <div class="recette-form-add">
+            <div class="recette-add-form-all">
+                <form class="recette-form recette-form-add" action="" method="post">
                     <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">
@@ -26,18 +26,60 @@
                         <label for="photo">Photo du plat : </label>
                         <input type="file" class="form-control" id="recette-form-photo" name="photo" 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>
-                        <input type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description...">
+                        <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">
+                        <div class="recette-form-group form-group">
+                            <label for="ingr-nom">Nom de l'Ingrédient</label>
+                            <input type="texte" class="form-control" id="recette-form-ingr-nom" name="ingr-nom" placeholder="Nom de l'ingrédient" value="">
+                        </div>
+                        <div class="recette-form-group form-group">
+                            <label for="ingr-photo">Photo de l'Ingrédient</label>
+                            <input type="file" class="form-control" id="recette-form-ingr-photo" name="ingr-photo">
+                        </div>
+                        
+                        <button id="submit-ingr" type='submit' class='btn btn-primary'>Confirmer</button>
+                    </form>
+                    <form class="recette-form recette-form-add-tag" action="" method="post">
+                        <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>
+                    </form>
                 </div>
-            </form>
+            </div>
         </div>
     </div>
 
     <?php include "footer.php"?>
 </body>
+<script src="main.js"></script>
 </html>
\ No newline at end of file
diff --git a/index.php b/index.php
index 044abda..11c336e 100644
--- a/index.php
+++ b/index.php
@@ -21,4 +21,5 @@
 
     <?php include "footer.php"?>
 </body>
+<script src="main.js"></script>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 86bc847..d5aa04a 100644
--- a/main.css
+++ b/main.css
@@ -432,25 +432,52 @@ ul {
 }
 
 .recette-form {
-    height: 100%;
-    width: 100%;
+    height: 80%;
+    width: 80%;
     margin: 10px;
     padding: 10px;
+    border: 1px solid black;
+    background: white;
+    border-radius: 20px;
 }
 
 .recette-form-group {
     display: flex;
     flex-direction: column;
+    padding: 5px;
 }
 
 #recette-form-div-desc {
-    height: 400px;
+    height: 300px;
 }
 
 #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;
+}
+
 /*Footer et son contenue*/
 footer{
     padding: 25px;
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..75a8fd5
--- /dev/null
+++ b/main.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function(){
+
+    function formulaire_ingredient_update(event) {
+        
+        event.preventDefault();
+
+        let form = document.getElementById("recette-form-ingr-add");
+
+        
+        let cible = document.getElementById("recette-form-ingr");
+        
+        let ingr = form.ingr-nom;
+
+        let new_elem = document.createElement("option");
+
+        new_elem.setAttribute("value",ingr.value);
+        new_elem.innerText = ingr.value;
+
+        cible.appendChild(new_elem);
+
+    }
+
+    let ingr_btn = document.getElementById("submit-ingr");
+
+    ingr_btn.addEventListener('click', formulaire_ingredient_update(event));
+
+
+
+
+})
\ No newline at end of file