286 lines
6.8 KiB
Text
286 lines
6.8 KiB
Text
<body>
|
|
<div class="restaurant-page">
|
|
<!-- En-tête restaurant -->
|
|
<div class="header">
|
|
<div class="restaurant-info">
|
|
<h1>Nom restaurant <span class="heart">❤️</span></h1>
|
|
<p class="address">Adresse</p>
|
|
<div class="rating">
|
|
<span>⭐️⭐️⭐️⭐️⭐️</span>
|
|
<button class="btn">Voir tous les avis</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="chart-placeholder">
|
|
<canvas id="radarChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image principale -->
|
|
<div class="main-image"></div>
|
|
|
|
<!-- Description -->
|
|
<div class="description">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
|
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
|
|
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
|
occaecat cupidatat
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Galerie -->
|
|
<div class="gallery">
|
|
<div class="gallery-item"></div>
|
|
<div class="gallery-item"></div>
|
|
<div class="gallery-item"></div>
|
|
</div>
|
|
|
|
<!-- Avis -->
|
|
<h2 class="reviews-title">Avis</h2>
|
|
<div class="reviews">
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="review">
|
|
<h3>Titre avis</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<div class="review-rating">
|
|
<div>Qualité des plats ⭐⭐⭐⭐⭐</div>
|
|
<div>Service ⭐⭐⭐⭐⭐</div>
|
|
<div>Ambiance ⭐⭐⭐⭐⭐</div>
|
|
<div>Accessibilité ⭐⭐⭐⭐⭐</div>
|
|
<div>Tarif ⭐⭐⭐⭐⭐</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: 200px;
|
|
height: 200px;
|
|
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>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const ctx = document.getElementById('radarChart').getContext('2d');
|
|
const radarChart = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['Qualité des plats', 'Ambiance', 'Accessibilité', 'Service', 'Tradition'],
|
|
datasets: [
|
|
{
|
|
label: 'Moyenne des notes',
|
|
data: [4.7, 4.6, 4.4, 4.3, 4.8],
|
|
fill: true,
|
|
backgroundColor: 'rgba(25, 80, 233, 0.2)',
|
|
borderColor: 'rgb(25, 80, 233, 10)',
|
|
pointBackgroundColor: 'rgb(55, 99, 132)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 99, 132)',
|
|
pointStyle: 'circle',
|
|
pointRadius: 5,
|
|
pointRotation: 0,
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
label += context.formattedValue;
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
r: {
|
|
max: 5,
|
|
min: 0,
|
|
ticks: {
|
|
stepSize: 1,
|
|
display: false,
|
|
callback: function(value, index, values) {
|
|
return value.toFixed(1);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 3
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|