Modification de bugs + ajouts de nouvelles fonctionnalités
This commit is contained in:
parent
8f4051ce8e
commit
c79bf1fac8
50
css/reservation.css
Normal file
50
css/reservation.css
Normal file
@ -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 */
|
||||
@ -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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.footer-section {
|
||||
text-align: 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 {
|
||||
margin-top: 20px;
|
||||
.footer-section img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.footer-signature p {
|
||||
color:white;
|
||||
/* Style pour les petits écrans */
|
||||
@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;
|
||||
|
||||
@ -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 -->
|
||||
|
||||
@ -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 class="client-reviews">
|
||||
<!-- Section des avis clients -->
|
||||
<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>🚀</span>
|
||||
</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
136
html/reservation.html
Normal file
136
html/reservation.html
Normal file
@ -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>© 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>🚀</span>
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
12
js/reservation.js
Normal file
12
js/reservation.js
Normal file
@ -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";
|
||||
}
|
||||
@ -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';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user