Modification de bugs + ajouts de nouvelles fonctionnalités

css/reservation.css

@@ -0,0 +1,50 @@
+/* Ajoutez les styles nécessaires pour le formulaire de réservation */
+.content {
+    text-align: center;
+}
+
+.reservation-section {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 20px 0;
+}
+
+.reservation-form {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.reservation-form label {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.reservation-form input,
+.reservation-form select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.reservation-form button {
+    margin-top: 10px; /* Ajoute un espace en haut du bouton */
+    background-color: #FFB039;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    cursor: pointer;
+}
+
+.reservation-form button:hover {
+    background-color: #E59800;
+}
+
+.reservation-form {
+    text-align: center; /* Centre le formulaire */
+}
+/* Ajoutez les styles nécessaires pour le formulaire de réservation */

css/styles.css

@@ -239,11 +239,10 @@ p {
     position: relative;
     margin-bottom: 120px; 
 }
-
 .footer {
-    background-color: #4A305A;
+    background-color: #4A305A; /* Couleur de fond du pied de page */
     color: white;
-    padding: 20px; /*hauteur du pied de page*/
+    padding: 20px; /* Hauteur du pied de page */
     text-align: center;
 }
 
@@ -252,15 +251,20 @@ p {
     justify-content: space-around;
 }
 
-.footer-section.horizontally-aligned {
+.footer-section {
-    display: flex;
+    text-align: center;
-    align-items: center;
+    margin: 10px;
+}
+
+.footer-signature {
+    order: 1;
 }
 
 .social-icons {
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center; /* Centrez les icônes sur les petits écrans */
+    margin-top: 10px; /* Ajoutez une marge pour séparer les icônes du texte */
 }
 
 .social-icon img {
@@ -268,37 +272,29 @@ p {
     height: 30px;
 }
 
-
-.footer-section {
-    flex: 1;
-}
-
-.footer-section p {
-    color:white;
-}
-
-.footer-section img {
-    width: 30px; /* taille logo*/
-    height: 30px;
-    margin-right: 5px; /* Ajoute de l'espace entre les logos et les noms */
-}
-
 .footer-section h3 {
     margin-bottom: 10px;
 }
 
-.footer-signature {
+.footer-section img {
-    margin-top: 20px;
+    width: 30px;
+    height: 30px;
+    margin-right: 5px;
 }
 
-.footer-signature p {
+/* Style pour les petits écrans */
-    color:white;
+@media screen and (max-width: 768px) {
+    .footer-content {
+        flex-wrap: wrap;
+    }
+
+    .footer-section {
+        flex: 1;
+    }
 }
 
-.footer-signature img {
+
-    width: 200px; /* taille du logo */
+
-    margin-bottom: 10px;
-}
 
 .client-reviews {
     text-align: center;

html/contact.html

@@ -17,7 +17,7 @@
             <a href="#" class="nav-link">Menu</a>
             <a href="#" class="nav-link">À propos</a>
             <a href="../html/contact.html" class="nav-link">Contact</a>
-            <a href="#" class="nav-link reserve-btn">Réserver une table</a>
+            <a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
         </nav>
 
         <!-- BARRE DU MENU BURGER -->

html/index.html

@@ -12,11 +12,11 @@
             <img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
         </div>
         <nav class="nav-links">
-            <a href="#" class="nav-link">Accueil</a>
+            <a href="../html/index.html" class="nav-link">Accueil</a>
             <a href="#" class="nav-link">Menu</a>
             <a href="#" class="nav-link">À propos</a>
             <a href="../html/contact.html" class="nav-link">Contact</a>
-            <a href="#" class="nav-link reserve-btn">Réserver une table</a>
+            <a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
         </nav>
 
         <!-- BARRE DU MENU BURGER -->
@@ -37,6 +37,7 @@
             </video>
         </section>
         <section class="restaurant-context">
+            <h2>Notre Concept</h2>
             <p>
             Bienvenue chez Neo Eat, où la créativité des chefs étoilés s'unit à la précision de la technologie. Nos chefs renommés imaginent des recettes exceptionnelles, harmonisant saveurs raffinées et innovations culinaires. Dans nos cuisines, des robots de pointe, guidés par ces recettes d'exception, assurent une expérience gastronomique unique.
             <br>Découvrez l'alliance parfaite entre l'art culinaire humain et la précision technologique des robots. Vous avez la chance de voir ces machines à l'œuvre, créant vos plats sous vos yeux. Laissez-vous séduire par cette fusion unique de talent culinaire et d'innovation. Chez Neo Eat, chaque plat est une expérience mémorable, alliant la passion des chefs au futur de la cuisine.
@@ -103,12 +104,12 @@
             </div>
         </section>
 
-<!-- Section des avis clients -->
+        <!-- Section des avis clients -->
-<section class="client-reviews">
+        <section class="client-reviews">
             <h2>Avis de nos clients</h2>
             <div class="client-review-container">
                 <div class="client-review">
-            <img src="../img/Avis clients/client1.png" alt="Client 1">
+                    <img src="../img/Avis_clients/client1.png" alt="Client 1">
                     <h3>Marie Dubois</h3>
                     <p>
                         "Délicieux ! J'ai adoré chaque bouchée. Une expérience culinaire exceptionnelle."
@@ -117,7 +118,7 @@
                     </p>
                 </div>
                 <div class="client-review">
-            <img src="../img/Avis clients/client2.png" alt="Client 2">
+                    <img src="../img/Avis_clients/client2.png" alt="Client 2">
                     <h3>Lucas Martin</h3>
                     <p>
                         "Le service était impeccable, et les plats étaient à la hauteur de mes attentes. Bravo Neo Eat !"
@@ -126,7 +127,7 @@
                     </p>
                 </div>
                 <div class="client-review">
-            <img src="../img/Avis clients/client3.png" alt="Client 3">
+                    <img src="../img/Avis_clients/client3.png" alt="Client 3">
                     <h3>Sophie Leroux</h3>
                     <p>
                         "Une explosion de saveurs dans chaque plat. Certainement l'un des meilleurs restaurants de la ville."
@@ -135,11 +136,8 @@
                     </p>
                 </div>
             </div>
-</section>
+        </section>
-
+    </div>
-
-
-
 
     <footer class="footer">
         <div class="footer-content">
@@ -186,8 +184,6 @@
                     </p>
                 </div>
             </div>
-            
-            
         </div>
         <div class="footer-signature">
             <img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
@@ -196,11 +192,9 @@
         </div>
     </footer>
 
-
     <script src="../js/script.js"></script>
     <button id="scrollTopBtn" onclick="scrollToTop()">
         <span>&#x1F680;</span>
     </button>
-
 </body>
 </html>

html/reservation.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/reservation.css">
+    <title>Réserver une table - Neo Eat</title>
+</head>
+<body>
+    <header class="navbar">
+        <div class="logo">
+            <img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
+        </div>
+        <nav class="nav-links">
+            <a href="../html/index.html" class="nav-link">Accueil</a>
+            <a href="#" class="nav-link">Menu</a>
+            <a href="#" class="nav-link">À propos</a>
+            <a href="../html/contact.html" class="nav-link">Contact</a>
+            <a href="../html/reservation.html" class="nav-link reserve-btn">Réserver une table</a>
+        </nav>
+
+        <!-- BARRE DU MENU BURGER -->
+        <div class="burger-menu">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+        </div>
+    </header>
+
+    <div class="content">
+        <section class="reservation-section">
+            <h1>Réserver une table</h1>
+            <p>Choisissez une date et une heure parmi les disponibilités ci-dessous pour réserver une table.</p>
+
+            <!-- Formulaire de réservation avec sélecteur de plage horaire -->
+            <form action="https://dwarves.iut-fbleau.fr/requete.php" method="post" class="reservation-form" onsubmit="showReservationConfirmation()">
+                <label for="name">Nom :</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Email :</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="phone">Téléphone :</label>
+                <input type="tel" id="phone" name="phone" required>
+
+                <label for="date">Date :</label>
+                <input type="date" id="date" name="date" required>
+
+                <label for="time">Heure :</label>
+                <select id="time" name="time" required>
+                    <option value="" disabled selected>Choisissez une heure</option>
+                    <option value="18:00">11:30</option>
+                    <option value="19:00">12:00</option>
+                    <option value="20:00">13:00</option>
+                    <option value="18:00">18:00</option>
+                    <option value="19:00">19:00</option>
+                    <option value="20:00">20:00</option>
+                    <option value="18:00">21:00</option>
+                    <!-- Ajoutez d'autres options selon vos disponibilités -->
+                </select>
+
+                <label for="guests">Nombre de convives :</label>
+                <input type="number" id="guests" name="guests" min="1" required>
+
+                <button type="submit">Réserver</button>
+            </form>
+
+            <div id="confirmation-message" style="display: none;">
+                Merci pour votre réservation ! Votre table a bien été réservée.
+            </div>
+        </section>
+    </div>
+
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>Plan du site</h3>
+                <!-- Ajoutez ici les liens vers les différentes sections du site -->
+            </div>
+            <div class="footer-section">
+                <h3>Mentions légales</h3>
+                <!-- Ajoutez ici les informations légales nécessaires -->
+            </div>
+            <div class="footer-section">
+                <h3>Contact</h3>
+                <p>Email : <a href="mailto:neoeat.sav@gmail.com">neoeat.sav@gmail.com</a></p>
+                <p>Téléphone : <a href="tel:+33175489632">+33 01 75 48 96 32</a></p>
+            </div>
+            <div class="footer-section horizontally-aligned">
+                <h3>Réseaux sociaux</h3>
+                <div class="social-icons">
+                    <p>
+                        <a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.facebook.com/neoeat75/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Facebook.png" alt="Facebook">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.X.com/neoeat75/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/X.png" alt="X">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.youtube.com/channel/UCNSi53sTJ7LYqgonJ4CfCCQ" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Youtube.png" alt="Youtube">
+                        </a>
+                    </p>
+                    <p>
+                        <a href="https://www.TripAdvisor.com/neoeat/" target="_blank" class="social-icon">
+                            <img src="../img/RéseauxSociaux/Tripadvisor.png" alt="TripAdvisor">
+                        </a>
+                    </p>
+                </div>
+            </div>
+            
+            
+        </div>
+        <div class="footer-signature">
+            <img src="../img/Logo/LogoNeoEat.png" alt="Neo Eat Logo">
+            <p>&copy; 2024 Neo Eat. Tous droits réservés.</p>
+            <p>Une bouchée dans le futur.</p>
+        </div>
+    </footer>
+
+    <script src="../js/script.js"></script>
+    <script src="../js/reservation.js"></script>
+    <button id="scrollTopBtn" onclick="scrollToTop()">
+        <span>&#x1F680;</span>
+    </button>
+</body>
+</html>

js/reservation.js

@@ -0,0 +1,12 @@
+// Pour que la date de réservation ne soit jamais inférieur à celle d'aujourd'hui
+document.addEventListener('DOMContentLoaded', function () {
+    const today = new Date().toISOString().split('T')[0];
+    document.getElementById('date').min = today;
+});
+
+
+// Pour afficher un message de confirmation que la table à bien été réserver 
+function showReservationConfirmation() {
+    var confirmationMessage = document.getElementById("confirmation-message");
+    confirmationMessage.style.display = "block";
+}

js/script.js

@@ -1,3 +1,4 @@
+// Menu burger
 document.addEventListener('DOMContentLoaded', function () {
     const burgerMenu = document.querySelector('.burger-menu');
     const navLinks = document.querySelector('.nav-links');
@@ -7,6 +8,7 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Scroll jusqu'en au de la page
 function scrollToTop() {
     window.scrollTo({
         top: 0,
@@ -14,7 +16,7 @@ function scrollToTop() {
     });
 }
 
-// Afficher ou masquer le bouton en fonction de la position de défilement
+// Afficher ou masquer le bouton de scroll en fonction de la position dans la page
 document.addEventListener('scroll', function () {
     const scrollTopBtn = document.getElementById('scrollTopBtn');
     if (window.scrollY > 200) {
@@ -23,3 +25,4 @@ document.addEventListener('scroll', function () {
         scrollTopBtn.style.display = 'none';
     }
 });
+