298 lines
17 KiB
HTML
Executable File
298 lines
17 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Le Jardin Secret - Restaurant Gastronomique Paris</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #1a1a2e; color: #eee; }
|
|
|
|
/* Navigation */
|
|
header { background: rgba(26, 58, 26, 0.95); padding: 15px 20px; position: fixed; width: 100%; top: 0; z-index: 100; backdrop-filter: blur(10px); }
|
|
header .container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
|
|
header h1 { color: #7cb342; font-size: 26px; font-weight: bold; font-family: 'Playfair Display', serif; }
|
|
header nav a { color: #aaa; margin-left: 25px; text-decoration: none; font-size: 14px; transition: color 0.3s; }
|
|
header nav a:hover { color: #7cb342; }
|
|
|
|
/* Hero */
|
|
.hero { padding: 0; height: 100vh; background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%), url('https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?w=1920') center/cover; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
|
|
.hero h2 { font-size: 64px; margin-bottom: 20px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.5); font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: 2px; }
|
|
.hero .tagline { font-size: 24px; color: #a5d6a7; margin-bottom: 15px; font-style: italic; }
|
|
.hero .address { color: #888; margin-bottom: 40px; }
|
|
.hero .cta { display: flex; gap: 20px; }
|
|
.hero button { padding: 18px 45px; font-size: 16px; border-radius: 30px; cursor: pointer; border: none; transition: all 0.3s; }
|
|
.hero .btn-primary { background: #e94560; color: white; }
|
|
.hero .btn-secondary { background: transparent; border: 2px solid #7cb342; color: #7cb342; }
|
|
|
|
/* Info Bar */
|
|
.info-bar { background: #2d5a27; padding: 20px; display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
|
|
.info-item { text-align: center; color: white; }
|
|
.info-item .icon { font-size: 24px; margin-bottom: 5px; }
|
|
.info-item .label { font-size: 12px; color: #a5d6a7; text-transform: uppercase; }
|
|
.info-item .value { font-size: 16px; font-weight: bold; }
|
|
|
|
/* Sections */
|
|
.section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
|
|
.section-title { font-size: 42px; margin-bottom: 50px; text-align: center; color: #fff; }
|
|
.section-title span { color: #7cb342; }
|
|
|
|
/* Menu */
|
|
.menu-categories { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; }
|
|
.menu-cat { padding: 12px 30px; background: #16213e; border: none; border-radius: 25px; color: #888; cursor: pointer; font-size: 14px; transition: all 0.3s; }
|
|
.menu-cat.active { background: #7cb342; color: white; }
|
|
|
|
.menu-grid { display: flex; flex-direction: column; gap: 20px; max-width: 800px; margin: 0 auto; }
|
|
.menu-column { text-align: center; }
|
|
.menu-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; margin: 10px 0; background: #16213e; border-radius: 12px; }
|
|
.menu-item:last-child { border: none; }
|
|
.menu-item .img { width: 100px; height: 100px; border-radius: 10px; object-fit: cover; margin-right: 25px; flex-shrink: 0; }
|
|
.menu-item .info { flex: 1; text-align: left; }
|
|
.menu-item .name { font-size: 22px; font-weight: bold; margin-bottom: 8px; color: #fff; }
|
|
.menu-item .desc { color: #aaa; font-size: 15px; }
|
|
.menu-item .price { font-size: 28px; font-weight: bold; color: #7cb342; margin-left: 25px; white-space: nowrap; }
|
|
|
|
/* Gallery */
|
|
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
|
|
.gallery-item { aspect-ratio: 1; background: #16213e; border-radius: 12px; overflow: hidden; position: relative; }
|
|
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
|
|
.gallery-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 20px; }
|
|
|
|
/* Reviews */
|
|
.review-card { background: #16213e; padding: 30px; border-radius: 16px; }
|
|
.review-card .stars { color: #ffd700; margin-bottom: 15px; font-size: 18px; }
|
|
.review-card .text { color: #ccc; line-height: 1.8; margin-bottom: 20px; font-style: italic; }
|
|
.review-card .author { color: #7cb342; font-weight: bold; }
|
|
|
|
/* Contact */
|
|
.contact { background: #16213e; }
|
|
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
|
|
.contact-info h3 { color: #7cb342; font-size: 24px; margin-bottom: 20px; }
|
|
.contact-info p { color: #aaa; margin-bottom: 15px; }
|
|
|
|
.datetime-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
|
|
.datetime-group > div { display: flex; flex-direction: column; }
|
|
.datetime-group label { color: #aaa; margin-bottom: 8px; font-size: 14px; }
|
|
.datetime-group input, .datetime-group select { padding: 15px; border-radius: 10px; border: 2px solid #333; background: #1a1a2e; color: #fff; font-size: 16px; width: 100%; }
|
|
.time-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
|
|
.time-slot { padding: 8px 14px; background: #1a1a2e; border: 2px solid #444; border-radius: 20px; color: #aaa; cursor: pointer; font-size: 13px; transition: all 0.3s; }
|
|
.time-slot:hover, .time-slot.selected { background: #7cb342; border-color: #7cb342; color: white; }
|
|
|
|
.contact-form { display: grid; gap: 20px; }
|
|
.contact-form input, .contact-form textarea, .contact-form select { padding: 18px; border-radius: 12px; border: 2px solid #333; background: #1a1a2e; color: #fff; font-size: 16px; }
|
|
.contact-form button { background: #7cb342; color: white; border: none; padding: 18px; font-size: 18px; border-radius: 12px; cursor: pointer; font-weight: bold; }
|
|
|
|
footer { background: #0f3460; padding: 40px 20px; text-align: center; }
|
|
footer .hours { display: flex; justify-content: center; gap: 40px; margin-bottom: 30px; flex-wrap: wrap; }
|
|
footer .hours-day { color: #7cb342; font-weight: bold; }
|
|
footer .hours-time { color: #888; }
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h2 { font-size: 32px; }
|
|
.gallery, .contact-grid { grid-template-columns: 1fr; }
|
|
header .container { flex-direction: column; gap: 10px; }
|
|
.menu-item { flex-direction: column; text-align: center; padding: 15px; }
|
|
.menu-item .img { margin-right: 0; margin-bottom: 15px; width: 120px; height: 120px; }
|
|
.menu-item .info { text-align: center; margin-bottom: 10px; }
|
|
.menu-item .price { margin-left: 0; }
|
|
}
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<header>
|
|
<div class="container">
|
|
<h1 id="nom-restaurant">🍽️ Le Jardin Secret</h1>
|
|
<nav>
|
|
<a href="#menu">Menu</a>
|
|
<a href="#galerie">Galerie</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h2 id="hero-nom">Le Jardin Secret</h2>
|
|
<p class="tagline">Cuisine française raffinée au cœur de Paris</p>
|
|
<p class="address" id="hero-adresse">📍 42 Rue de la Paix, 75002 Paris</p>
|
|
<div class="cta">
|
|
<button class="btn-primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Réserver</button>
|
|
<button class="btn-secondary" onclick="document.getElementById('menu').scrollIntoView({behavior:'smooth'})">Menu</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="info-bar" id="info-bar">
|
|
<!-- Loaded from JSON -->
|
|
</div>
|
|
|
|
<section class="section" id="menu">
|
|
<h2 class="section-title">Notre <span>Menu</span></h2>
|
|
<div class="menu-categories" id="menu-categories">
|
|
<button class="menu-cat active" onclick="showCategory('entrees')">Entrées</button>
|
|
<button class="menu-cat" onclick="showCategory('plats')">Plats</button>
|
|
<button class="menu-cat" onclick="showCategory('desserts')">Desserts</button>
|
|
</div>
|
|
|
|
<div class="menu-grid" id="menu-content">
|
|
<!-- Loaded from JSON -->
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="galerie">
|
|
<h2 class="section-title">Notre <span>Galerie</span></h2>
|
|
<div class="gallery">
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400" alt="Salle"><div class="overlay">Salle principale</div></div>
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1559329007-40df8a9345d8?w=400" alt="Terrasse"><div class="overlay">Terrasse</div></div>
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400" alt="Cuisine"><div class="overlay">Cuisine ouverte</div></div>
|
|
<div class="gallery-item"><img src="https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?w=400" alt="Vue"><div class="overlay">Vue exceptionnelle</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="avis">
|
|
<h2 class="section-title">Nos <span>Avis</span></h2>
|
|
<div class="reviews" id="reviews-list" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;">
|
|
<!-- Loaded from JSON -->
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact" id="contact">
|
|
<div class="section">
|
|
<h2 class="section-title">Nous <span>Contacter</span></h2>
|
|
<div class="contact-grid">
|
|
<div class="contact-info" id="contact-info">
|
|
<!-- Loaded from JSON -->
|
|
</div>
|
|
<form class="contact-form">
|
|
<input type="text" placeholder="Votre nom *" required>
|
|
<input type="email" placeholder="Votre email *" required>
|
|
<input type="tel" placeholder="Votre téléphone">
|
|
<select>
|
|
<option value="">Nombre de personnes</option>
|
|
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5+">5+</option>
|
|
</select>
|
|
<div class="datetime-group">
|
|
<div><label>📅 Date</label><input type="date" id="res-date" required></div>
|
|
<div><label>🕐 Horaire</label><select id="res-time" required><option value="">Choisir...</option></select></div>
|
|
</div>
|
|
<div class="time-slots" id="time-slots"></div>
|
|
<textarea placeholder="Votre message..." rows="4"></textarea>
|
|
<button type="button" onclick="window.location.href='mailto:ronanyves26@gmail.com?subject=Reservation'">Envoyer</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="hours" id="footer-hours"></div>
|
|
<p class="copy">© 2026 <span id="footer-nom">Le Jardin Secret</span>. Tous droits réservés.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
let config = {};
|
|
|
|
// Load config
|
|
fetch('config_restaurant.json')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
config = data;
|
|
loadConfig();
|
|
});
|
|
|
|
function loadConfig() {
|
|
const r = config.restaurant;
|
|
const m = config.menu;
|
|
|
|
// Header & Hero
|
|
document.getElementById('nom-restaurant').textContent = '🍽️ ' + r.nom;
|
|
document.getElementById('hero-nom').textContent = r.nom;
|
|
document.getElementById('hero-adresse').textContent = '📍 ' + r.adresse;
|
|
document.getElementById('footer-nom').textContent = r.nom;
|
|
|
|
// Info bar
|
|
document.getElementById('info-bar').innerHTML = `
|
|
<div class="info-item"><div class="icon">📅</div><div class="label">Ouvert</div><div class="value">${r.horaires.mardi_samedi.split('/')[0].trim()}</div></div>
|
|
<div class="info-item"><div class="icon">📞</div><div class="label">Réservation</div><div class="value">${r.telephone}</div></div>
|
|
`;
|
|
|
|
// Contact
|
|
document.getElementById('contact-info').innerHTML = `
|
|
<h3>📍 Adresse</h3>
|
|
<p>${r.adresse}</p>
|
|
<a href="https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(r.adresse)}" target="_blank" style="display:inline-block;margin:15px 0;background:#7cb342;color:white;padding:12px 25px;border-radius:25px;text-decoration:none;">📍 Itinéraire</a>
|
|
<h3>📞 Réservation</h3>
|
|
<p>📞 ${r.telephone}</p>
|
|
<p>✉️ ${r.email}</p>
|
|
`;
|
|
|
|
// Footer hours
|
|
document.getElementById('footer-hours').innerHTML = `
|
|
<div><span class="hours-day">Mar-Sam:</span> <span class="hours-time">${r.horaires.mardi_samedi}</span></div>
|
|
<div><span class="hours-day">Dim:</span> <span class="hours-time">${r.horaires.dimanche}</span></div>
|
|
<div><span class="hours-day">Lun:</span> <span class="hours-time">${r.horaires.lundi}</span></div>
|
|
`;
|
|
|
|
// Reviews
|
|
if (config.avis) {
|
|
document.getElementById('reviews-list').innerHTML = config.avis.map(a => `
|
|
<div class="review-card">
|
|
<div class="stars">${'⭐'.repeat(a.note)}</div>
|
|
<p class="text">"${a.texte}"</p>
|
|
<p class="author">- ${a.auteur}</p>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Time slots
|
|
const slotsContainer = document.getElementById('time-slots');
|
|
const timeSelect = document.getElementById('res-time');
|
|
config.creneaux.forEach(heure => {
|
|
slotsContainer.innerHTML += `<span class="time-slot" onclick="selectTime(this)">${heure}</span>`;
|
|
timeSelect.innerHTML += `<option value="${heure}">${heure}</option>`;
|
|
});
|
|
|
|
// Menu - show entrees by default
|
|
showCategory('entrees');
|
|
|
|
// Date picker
|
|
const dateInput = document.getElementById('res-date');
|
|
dateInput.min = new Date().toISOString().split('T')[0];
|
|
const max = new Date();
|
|
max.setMonth(max.getMonth() + 3);
|
|
dateInput.max = max.toISOString().split('T')[0];
|
|
}
|
|
|
|
function showCategory(cat) {
|
|
// Update buttons
|
|
document.querySelectorAll('.menu-cat').forEach(b => b.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
|
|
// Show items
|
|
const items = config.menu[cat];
|
|
const labels = { entrees: '🥗 Entrées', plats: '🍖 Plats', desserts: '🍰 Desserts' };
|
|
|
|
document.getElementById('menu-content').innerHTML = `
|
|
<div class="menu-column">
|
|
<h3 style="color:#7cb342;margin-bottom:30px;">${labels[cat]}</h3>
|
|
${items.map(item => `
|
|
<div class="menu-item">
|
|
<img class="img" src="${item.img}" alt="${item.nom}">
|
|
<div class="info"><div class="name">${item.nom}</div><div class="desc">${item.desc}</div></div>
|
|
<div class="price">${item.prix}€</div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function selectTime(el) {
|
|
document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
|
|
el.classList.add('selected');
|
|
document.getElementById('res-time').value = el.textContent;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|