stiti/SAE_S1.05_S1.06
stiti/SAE_S1.05_S1.06
1
6
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout de FAQ

Browse Source
This commit is contained in:
Moncef STITI 2024-01-15 18:32:55 +01:00
parent c79bf1fac8
commit 7cacf9f3ff
10 changed files with 334 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/contact.css
View File

@ -48,4 +48,3 @@
border-radius: 8px;
overflow: hidden;
}

37
css/faq.css Normal file
View File

@ -0,0 +1,37 @@
.faq-section {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
margin-bottom: 20px;
}
.faq-question-btn {
background-color: #FFB039;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
text-align: left;
}
.faq-answer {
display: none;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
}
.faq-answer p {
margin: 0;
}
.faq-item.active .faq-question-btn {
background-color: #4A305A;
}

1
css/index.css Normal file
View File

@ -0,0 +1 @@
/*enlever les trucs supplémentaires dans styles.css de index.html et les mettre ici */

2
css/reservation.css
View File

@ -1,4 +1,3 @@
/* Ajoutez les styles nécessaires pour le formulaire de réservation */
.content {
text-align: center;
}
@ -47,4 +46,3 @@
.reservation-form {
text-align: center; /* Centre le formulaire */
}
/* Ajoutez les styles nécessaires pour le formulaire de réservation */

109
css/styles.css
View File

@ -10,7 +10,6 @@ body {
padding-top: 80px;
font-family: 'Arial', sans-serif;
background-color: #F2F2F2;
display: flex;
flex-direction: column;
min-height: 100vh;
}
@ -35,18 +34,6 @@ body {
margin-left: 1cm;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-link {
color: white;
text-decoration: none;
margin: 0 15px;
transition: color 0.3s ease;
}
.reserve-btn {
background-color: #FFB039;
padding: 10px 20px;
@ -66,9 +53,6 @@ body {
margin: 6px 0;
}
.nav-link:hover {
color: #87CEEB;
}
@media screen and (max-width: 768px) {
.nav-links {
@ -94,6 +78,14 @@ body {
.burger-menu {
display: block;
}
.footer-content {
flex-wrap: wrap;
}
.footer-section {
flex: 1;
}
}
.content {
@ -179,6 +171,7 @@ p {
width: 80%; /* largeur de la fenêtre de la vidéo */
max-height: 400px;
margin-bottom: 20px;
margin-top: 10px;
}
.plats-populaires {
@ -246,6 +239,10 @@ p {
text-align: center;
}
.footer p {
color: white;
}
.footer-content {
display: flex;
justify-content: space-around;
@ -260,14 +257,14 @@ p {
order: 1;
}
.social-icons {
.logo-reseaux {
display: flex;
align-items: center;
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 */
justify-content: center; /* Centrer les icônes sur les petits écrans */
margin-top: 10px; /* Ajouter une marge pour séparer les icônes du texte */
}
.social-icon img {
.logo-reseaux img {
width: 30px;
height: 30px;
}
@ -282,33 +279,19 @@ p {
margin-right: 5px;
}
/* Style pour les petits écrans */
@media screen and (max-width: 768px) {
.footer-content {
flex-wrap: wrap;
}
.footer-section {
flex: 1;
}
}
.client-reviews {
.client-evaluations {
text-align: center;
padding: 20px 0;
}
.client-review-container {
.client-evaluation-container {
display: flex;
overflow-x: auto;
justify-content: center;
margin-top: 20px;
}
.client-review {
.client-evaluation {
flex: 1;
max-width: 300px;
margin: 10px;
@ -319,19 +302,19 @@ p {
padding: 15px;
}
.client-review img {
.client-evaluation img {
max-width: 100%;
border-radius: 50%;
margin-bottom: 10px;
}
.client-review p {
.client-evaluation p {
color: #333;
font-size: 16px;
line-height: 1.5;
}
.client-review h3 {
.client-evaluation h3 {
margin-top: 10px;
color: #4A305A;
}
@ -347,3 +330,49 @@ p {
margin-top: 20px;
border-radius: 8px;
}
/* MENU DROPDOWN -> Pour à propos*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #FFB039;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
}
.dropdown-content a {
text-decoration: none;
padding: 12px 16px;
display: block;
transition: background-color 0.3s, color 0.3s;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*Couleur des éléments de la nav bar Accueil, Menu, À propos ... */
.nav-links a {
color: white;
text-decoration: none; /*Enlève le soulignement hyperlink*/
margin: 0 15px;
}
/* Couleur de survol de Accueil, Menu, À propos, and Contact */
.nav-links a:hover,
.dropdown:hover .dropdown-btn {
color: #FFB039;
}
/* Couleur du survol de Réserver une table, FAQ, Nos chefs, Nos fournisseurs, Nos équipes */
.nav-link.reserve-btn:hover,
.dropdown-content a:hover {
color: #4A305A;
}

19
html/contact.html
View File

@ -13,9 +13,17 @@
<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="index.html">Accueil</a>
<a href="#">Menu</a>
<div class="dropdown">
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-content">
<a href="faq.html">FAQ</a>
<a href="#">Nos chefs</a>
<a href="#">Nos fournisseurs</a>
<a href="#">Notre équipe</a>
</div>
</div>
<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>
@ -80,7 +88,7 @@
</div>
<div class="footer-section horizontally-aligned">
<h3>Réseaux sociaux</h3>
<div class="social-icons">
<div class="logo-reseaux">
<p>
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
@ -108,13 +116,10 @@
</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>

154
html/faq.html Normal file
View File

@ -0,0 +1,154 @@
<!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/faq.css">
<title>FAQ - 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="index.html">Accueil</a>
<a href="#">Menu</a>
<div class="dropdown">
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-content">
<a href="faq.html">FAQ</a>
<a href="#">Nos chefs</a>
<a href="#">Nos fournisseurs</a>
<a href="#">Notre équipe</a>
</div>
</div>
<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="faq-section">
<h1>Foire aux questions</h1>
<div class="faq-item">
<button class="faq-question-btn">1. Question 1 ?</button>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar libero vel ligula ultrices, eget accumsan velit congue.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">2. Question 2 ?</button>
<div class="faq-answer">
<p>Maecenas eu lectus vitae nulla consectetur fermentum. Aliquam auctor, elit vel tincidunt molestie, purus elit placerat ex.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">3. Question 3 ?</button>
<div class="faq-answer">
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">4. Question 4 ?</button>
<div class="faq-answer">
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">5. Question 5 ?</button>
<div class="faq-answer">
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">6. Question 6 ?</button>
<div class="faq-answer">
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question-btn">7. Question 7 ?</button>
<div class="faq-answer">
<p>Vestibulum sed ligula non arcu feugiat ultrices. Duis fermentum ultrices urna, at feugiat tortor bibendum id.</p>
</div>
</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="logo-reseaux">
<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>
</div>
</footer>
<script src="../js/script.js"></script>
<script src="../js/faq.js"></script>
<button id="scrollTopBtn" onclick="scrollToTop()">
<span>&#x1F680;</span>
</button>
</body>
</html>

36
html/index.html
View File

@ -4,6 +4,7 @@
<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/index.css">
<title>Neo Eat</title>
</head>
<body>
@ -12,9 +13,17 @@
<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="index.html">Accueil</a>
<a href="#">Menu</a>
<div class="dropdown">
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-content">
<a href="faq.html">FAQ</a>
<a href="#">Nos chefs</a>
<a href="#">Nos fournisseurs</a>
<a href="#">Notre équipe</a>
</div>
</div>
<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>
@ -30,16 +39,15 @@
<div class="content">
<!-- Vidéo et message de bienvenue -->
<section class="bienvenue-section">
<h1>Bienvenue chez Neo Eat !</h1>
<video controls autoplay class="bienvenue-video">
<source src="../video/VideoExplicationConcept.mp4" type="video/mp4">
Votre navigateur ne supporte pas les vidéos.
</video>
</section>
<section class="restaurant-context">
<h2>Notre Concept</h2>
<h2>Bienvenue chez Neo Eat !</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.
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.
</p>
<img src="../img/Restaurant/tables.png" alt="Tables du restaurant" class="restaurant-tables">
@ -105,10 +113,10 @@
</section>
<!-- Section des avis clients -->
<section class="client-reviews">
<section class="client-evaluations">
<h2>Avis de nos clients</h2>
<div class="client-review-container">
<div class="client-review">
<div class="client-evaluation-container">
<div class="client-evaluation">
<img src="../img/Avis_clients/client1.png" alt="Client 1">
<h3>Marie Dubois</h3>
<p>
@ -117,7 +125,7 @@
<span class="evaluation">★★★★★</span>
</p>
</div>
<div class="client-review">
<div class="client-evaluation">
<img src="../img/Avis_clients/client2.png" alt="Client 2">
<h3>Lucas Martin</h3>
<p>
@ -126,7 +134,7 @@
<span class="evaluation">★★★★★</span>
</p>
</div>
<div class="client-review">
<div class="client-evaluation">
<img src="../img/Avis_clients/client3.png" alt="Client 3">
<h3>Sophie Leroux</h3>
<p>
@ -136,6 +144,9 @@
</p>
</div>
</div>
<div class="voir-plus">
<a href="https://www.tripadvisor.com/neoeat/" class="voir-plus-btn">Voir plus d'évaluations</a>
</div>
</section>
</div>
@ -156,7 +167,7 @@
</div>
<div class="footer-section horizontally-aligned">
<h3>Réseaux sociaux</h3>
<div class="social-icons">
<div class="logo-reseaux">
<p>
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
@ -188,7 +199,6 @@
<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>

19
html/reservation.html
View File

@ -13,9 +13,17 @@
<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="index.html">Accueil</a>
<a href="#">Menu</a>
<div class="dropdown">
<a href="#" class="dropdown-btn">À propos <i class="ri-arrow-down-s-line"></i></a>
<div class="dropdown-content">
<a href="faq.html">FAQ</a>
<a href="#">Nos chefs</a>
<a href="#">Nos fournisseurs</a>
<a href="#">Notre équipe</a>
</div>
</div>
<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>
@ -89,7 +97,7 @@
</div>
<div class="footer-section horizontally-aligned">
<h3>Réseaux sociaux</h3>
<div class="social-icons">
<div class="logo-reseaux">
<p>
<a href="https://www.instagram.com/neoeat75/" target="_blank" class="social-icon">
<img src="../img/RéseauxSociaux/Instagram.png" alt="Instagram">
@ -117,13 +125,10 @@
</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>

22
js/faq.js Normal file
View File

@ -0,0 +1,22 @@
document.addEventListener("DOMContentLoaded", function() {
const faqItems = document.querySelectorAll('.faq-item');
faqItems.forEach(item => {
const questionBtn = item.querySelector('.faq-question-btn');
questionBtn.addEventListener('click', () => {
// Ferme toutes les autres réponses
faqItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.classList.remove('active');
otherItem.querySelector('.faq-answer').style.display = 'none';
}
});
// Affiche ou masque la réponse de la question actuelle
item.classList.toggle('active');
const answer = item.querySelector('.faq-answer');
answer.style.display = item.classList.contains('active') ? 'block' : 'none';
});
});
});