SchoolTask/resto-epi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modif page resto

Browse source
This commit is contained in:
ExostFlash 2025-08-29 10:18:09 +02:00
parent f7441c5560
commit b7e37108cd
5 changed files with 188 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
public/resto.css Normal file
View file

@ -0,0 +1,111 @@
main {
text-align: left !important;
}
.restaurant-page {
width: 90%;
max-width: 1200px;
margin: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
}
.restaurant-info h1 {
margin: 0;
font-size: 24px;
}
.heart {
display: inline-flex;
align-items: center;
justify-content: center;
background: #ececec;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 20px;
margin-left: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.rating {
display: flex;
align-items: center;
margin: 10px 0;
gap: 10px;
}
.btn {
background: #999;
border: none;
color: white;
padding: 5px 10px;
cursor: pointer;
}
.chart-placeholder {
width: 150px;
height: 150px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.main-image {
width: 100%;
height: 200px;
background: #ccc;
margin: 20px 0;
}
.description {
background: #f9f9f9;
padding: 15px;
margin-bottom: 20px;
}
.gallery {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.gallery-item {
width: 32%;
height: 150px;
background: #ddd;
}
.reviews-title {
background: #eee;
padding: 10px;
margin: 0;
}
.reviews {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.review {
background: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
}
.review h3 {
margin-top: 0;
}
.review-rating div {
margin-top: 5px;
}

5
routes.js
View file

@ -3,6 +3,11 @@ const router = express.Router();
// Page d'accueil // Page d'accueil
router.get('/', (req, res) => { router.get('/', (req, res) => {
res.render('index', { user: req.session.user });
});
// Page resto
router.get('/resto/:id', (req, res) => {
res.render('resto', { user: req.session.user }); res.render('resto', { user: req.session.user });
}); });

97
views/index.ejs
View file

@ -1,6 +1,5 @@
<div style="display:flex; justify-content: center; align-items: center;"> <div style="display:flex; justify-content: center; align-items: center;">
<h2 style="margin-right: 20px;">L’EPICURIEN</h2> <h2 style="margin-right: 20px;">L’EPICURIEN</h2>
<!-- Vérification du logo : le fichier "logo.png" doit être présent dans le dossier public ou assets -->
<img style="height: 70px; width: 70px; object-fit: contain;" alt="Logo de l'entreprise" src="logo.png" onerror="this.onerror=null;this.src='https://via.placeholder.com/70?text=Logo';" /> <img style="height: 70px; width: 70px; object-fit: contain;" alt="Logo de l'entreprise" src="logo.png" onerror="this.onerror=null;this.src='https://via.placeholder.com/70?text=Logo';" />
</div> </div>
<div class="sections"> <div class="sections">
@ -8,30 +7,36 @@
<div class="section"> <div class="section">
<h3>Restaurants les plus proches</h3> <h3>Restaurants les plus proches</h3>
<div class="cards"> <div class="cards">
<div class="card"> <a href="/resto/1" style="text-decoration:none; color:inherit;">
<div class="card-info"> <div class="card">
<h4>Le Canard Toulousain</h4> <div class="card-info">
<p>12 Rue du Capitole, 31000 Toulouse</p> <h4>Le Canard Toulousain</h4>
<p>Avis général</p> <p>12 Rue du Capitole, 31000 Toulouse</p>
<p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=1" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=1" /> </a>
</div> <a href="/resto/2" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Chez Pépé Louis</h4> <h4>Chez Pépé Louis</h4>
<p>8 Avenue de la Garonne, 31000 Toulouse</p> <p>8 Avenue de la Garonne, 31000 Toulouse</p>
<p>Avis général</p> <p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=2" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=2" /> </a>
</div> <a href="/resto/3" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>La Table Rose</h4> <h4>La Table Rose</h4>
<p>25 Rue Saint-Rome, 31000 Toulouse</p> <p>25 Rue Saint-Rome, 31000 Toulouse</p>
<p>Avis général</p> <p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=3" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=3" /> </a>
</div>
</div> </div>
</div> </div>
@ -39,29 +44,35 @@
<div class="section"> <div class="section">
<h3>Restaurants les plus populaires</h3> <h3>Restaurants les plus populaires</h3>
<div class="cards"> <div class="cards">
<div class="card"> <a href="/resto/4" style="text-decoration:none; color:inherit;">
<div class="card-info"> <div class="card">
<h4>Bistro Occitan</h4> <div class="card-info">
<p>5 Place Wilson, 31000 Toulouse</p> <h4>Bistro Occitan</h4>
<p>Avis général</p> <p>5 Place Wilson, 31000 Toulouse</p>
<p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=4" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=4" /> </a>
</div> <a href="/resto/5" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>L’Assiette du Sud</h4> <h4>L’Assiette du Sud</h4>
<p>17 Allée Jean Jaurès, 31000 Toulouse</p> <p>17 Allée Jean Jaurès, 31000 Toulouse</p>
<p>Avis général</p> <p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=5" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=5" /> </a>
</div> <a href="/resto/6" style="text-decoration:none; color:inherit;">
<div class="card"> <div class="card">
<div class="card-info"> <div class="card-info">
<h4>Le Petit Cassoulet</h4> <h4>Le Petit Cassoulet</h4>
<p>3 Rue des Filatiers, 31000 Toulouse</p> <p>3 Rue des Filatiers, 31000 Toulouse</p>
<p>Avis général</p> <p>Avis général</p>
</div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=6" />
</div> </div>
<img alt="Photo du restaurant" src="https://source.unsplash.com/100x100/?restaurant=6" /> </a>
</div>
</div> </div>
</div> </div>

4
views/layout.ejs
View file

@ -18,7 +18,9 @@
<a href="/" class="logo-link"> <a href="/" class="logo-link">
<img src="/logo.png" alt="Logo L'EPICURIEN" class="logo" /> <img src="/logo.png" alt="Logo L'EPICURIEN" class="logo" />
</a> </a>
<h1 style="text-decoration: none; color: white;">L'EPICURIEN</h1> <a href="/" class="">
<h1 style="text-decoration: none; color: white;">L'EPICURIEN</h1>
</a>
</div> </div>
<div class="header-center"> <div class="header-center">
<div class="search-bar"> <div class="search-bar">

151
views/resto.ejs
View file

@ -1,13 +1,23 @@
<body> <link rel="stylesheet" href="/resto.css" />
<div class="restaurant-page">
<div class="restaurant-page">
<!-- En-tête restaurant --> <!-- En-tête restaurant -->
<div class="header"> <div class="header">
<div class="restaurant-info"> <div class="restaurant-info">
<h1>Nom restaurant <span class="heart">❤️</span></h1> <h1>
Nom restaurant
<span class="heart">
<% if (user) { %>
❤️
<% } else { %>
🤍
<% } %>
</span>
</h1>
<p class="address">Adresse</p> <p class="address">Adresse</p>
<div class="rating"> <div class="rating">
<span>⭐️⭐️⭐️⭐️⭐️</span> <span>⭐️⭐️⭐️⭐️⭐️</span>
<button class="btn">Voir tous les avis</button> <a href="#avis" class="btn">Voir tous les avis</a>
</div> </div>
</div> </div>
<div class="chart"> <div class="chart">
@ -38,7 +48,7 @@
</div> </div>
<!-- Avis --> <!-- Avis -->
<h2 class="reviews-title">Avis</h2> <h2 class="reviews-title" id="avis">Avis</h2>
<div class="reviews"> <div class="reviews">
<div class="review"> <div class="review">
<h3>Titre avis</h3> <h3>Titre avis</h3>
@ -85,134 +95,3 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Footer -->
<footer>
<a href="#">Mentions légales</a>
<a href="#">Politique de confidentialité</a>
<a href="#">CGU</a>
</footer>
</div>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #fff;
}
.restaurant-page {
width: 90%;
max-width: 1200px;
margin: auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 20px;
}
.restaurant-info h1 {
margin: 0;
font-size: 24px;
}
.heart {
color: red;
}
.rating {
display: flex;
align-items: center;
margin: 10px 0;
gap: 10px;
}
.btn {
background: #999;
border: none;
color: white;
padding: 5px 10px;
cursor: pointer;
}
.chart-placeholder {
width: 150px;
height: 150px;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.main-image {
width: 100%;
height: 200px;
background: #ccc;
margin: 20px 0;
}
.description {
background: #f9f9f9;
padding: 15px;
margin-bottom: 20px;
}
.gallery {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.gallery-item {
width: 32%;
height: 150px;
background: #ddd;
}
.reviews-title {
background: #eee;
padding: 10px;
margin: 0;
}
.reviews {
display: flex;
flex-direction: column;
gap: 20px;
margin: 20px 0;
}
.review {
background: #f5f5f5;
padding: 15px;
border: 1px solid #ddd;
}
.review h3 {
margin-top: 0;
}
.review-rating div {
margin-top: 5px;
}
footer {
background: #eee;
padding: 10px;
text-align: center;
display: flex;
justify-content: space-around;
margin-top: 30px;
}
footer a {
text-decoration: none;
color: black;
}
</style>
</body>