445 lines
24 KiB
HTML
Executable File
445 lines
24 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; }
|
|
header .booking-btn { background: #e94560; color: white; padding: 10px 20px; border-radius: 25px; border: none; cursor: pointer; font-weight: bold; }
|
|
|
|
/* 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-primary:hover { background: #ff6b6b; transform: scale(1.05); }
|
|
.hero .btn-secondary { background: transparent; border: 2px solid #7cb342; color: #7cb342; }
|
|
.hero .btn-secondary:hover { background: #7cb342; color: white; }
|
|
|
|
/* 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: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
|
|
.menu-item { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #333; }
|
|
.menu-item:last-child { border: none; }
|
|
.menu-item .img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; margin-right: 20px; flex-shrink: 0; }
|
|
.menu-item .info { flex: 1; }
|
|
.menu-item .name { font-size: 20px; font-weight: bold; margin-bottom: 5px; color: #fff; }
|
|
.menu-item .desc { color: #888; font-size: 14px; }
|
|
.menu-item .price { font-size: 24px; font-weight: bold; color: #7cb342; margin-left: 20px; }
|
|
|
|
@media (max-width: 500px) {
|
|
.menu-item .img { width: 60px; height: 60px; }
|
|
.menu-item .name { font-size: 16px; }
|
|
}
|
|
|
|
/* 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 */
|
|
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
|
|
.review-card { background: #16213e; padding: 30px; border-radius: 16px; }
|
|
.review-card .stars { color: #ffd700; margin-bottom: 15px; }
|
|
.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; display: flex; align-items: center; gap: 10px; }
|
|
.map { background: #0f3460; height: 400px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #666; }
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Calendar & Time picker */
|
|
.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 input:focus, .contact-form textarea:focus { outline: none; border-color: #7cb342; }
|
|
.contact-form button { background: #7cb342; color: white; border: none; padding: 18px; font-size: 18px; border-radius: 12px; cursor: pointer; font-weight: bold; }
|
|
|
|
/* Footer */
|
|
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; }
|
|
footer .copy { color: #666; font-size: 14px; }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.hero h2 { font-size: 32px; }
|
|
.hero .tagline { font-size: 16px; }
|
|
.hero .cta { flex-direction: column; padding: 0 20px; }
|
|
.hero button { width: 100%; }
|
|
.menu-grid, .gallery, .reviews, .contact-grid { grid-template-columns: 1fr; }
|
|
.info-bar { flex-direction: column; gap: 20px; padding: 15px; }
|
|
header .container { flex-direction: column; gap: 10px; }
|
|
header nav { margin-top: 10px; }
|
|
header nav a { margin: 0 10px; font-size: 12px; }
|
|
.section-title { font-size: 28px; }
|
|
.menu-item { flex-direction: column; align-items: flex-start; }
|
|
.menu-item .price { margin-left: 0; margin-top: 10px; }
|
|
}
|
|
|
|
.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>🍽️ Le Jardin Secret</h1>
|
|
<nav>
|
|
<a href="#menu">Menu</a>
|
|
<a href="#galerie">Galerie</a>
|
|
<a href="#avis">Avis</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
<button class="booking-btn" onclick="document.getElementById('contact').scrollIntoView({behavior: 'smooth'})">Réserver</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<h2>Le Jardin Secret</h2>
|
|
<p class="tagline">Cuisine française raffinée au cœur de Paris</p>
|
|
<p class="address">📍 42 Rue de la Paix, 75002 Paris</p>
|
|
<div class="cta">
|
|
<button class="btn-primary" onclick="document.getElementById('contact').scrollIntoView({behavior: 'smooth'})">Réserver une table</button>
|
|
<button class="btn-secondary" onclick="document.getElementById('menu').scrollIntoView({behavior: 'smooth'})">Voir le menu</button>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="info-bar">
|
|
<div class="info-item">
|
|
<div class="icon">📅</div>
|
|
<div class="label">Ouvert</div>
|
|
<div class="value">Mardi - Dimanche</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="icon">🕐</div>
|
|
<div class="label">Service</div>
|
|
<div class="value">12h-14h / 19h-22h</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="icon">📞</div>
|
|
<div class="label">Réservation</div>
|
|
<div class="value">01 42 86 00 00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="section" id="menu">
|
|
<h2 class="section-title">Notre <span>Menu</span></h2>
|
|
|
|
<div class="menu-categories">
|
|
<button class="menu-cat active">Entrées</button>
|
|
<button class="menu-cat">Plats</button>
|
|
<button class="menu-cat">Desserts</button>
|
|
</div>
|
|
|
|
<div class="menu-grid">
|
|
<div class="menu-column">
|
|
<h3 style="color:#7cb342;margin-bottom:30px;">🥗 Entrées</h3>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1625943553852-781c6dd46faa?w=200" alt="Foie gras">
|
|
<div class="info">
|
|
<div class="name">Foie gras maison</div>
|
|
<div class="desc">Toasts de foie gras, chutney de fruits rouges</div>
|
|
</div>
|
|
<div class="price">24€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1547592166-23ac45744acd?w=200" alt="Soupe homard">
|
|
<div class="info">
|
|
<div class="name">Soupe de homard</div>
|
|
<div class="desc">Bisque de homard, brunoise de légumes</div>
|
|
</div>
|
|
<div class="price">19€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=200" alt="Salade">
|
|
<div class="info">
|
|
<div class="name">Salade verte</div>
|
|
<div class="desc">Vinaigrette maison, parmesan, croûtons</div>
|
|
</div>
|
|
<div class="price">14€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1535399831218-d5bd36d1a6b3?w=200" alt="Ceviche">
|
|
<div class="info">
|
|
<div class="name">Céviches du moment</div>
|
|
<div class="desc">Poisson frais, agrumes, avocat</div>
|
|
</div>
|
|
<div class="price">18€</div>
|
|
</div>
|
|
</div>
|
|
<div class="menu-column">
|
|
<h3 style="color:#7cb342;margin-bottom:30px;">🍖 Plats</h3>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1544025162-d76694265947?w=200" alt="Boeuf">
|
|
<div class="info">
|
|
<div class="name">Filet de bœuf</div>
|
|
<div class="desc">Pommes purée, sauce bordelaise</div>
|
|
</div>
|
|
<div class="price">34€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=200" alt="Saumon">
|
|
<div class="info">
|
|
<div class="name">Pavé de saumon</div>
|
|
<div class="desc">Étagère de légumes, beurre blanc</div>
|
|
</div>
|
|
<div class="price">28€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=200" alt="Canard">
|
|
<div class="info">
|
|
<div class="name">Magret de canard</div>
|
|
<div class="desc">Purée de patates douces, miel</div>
|
|
</div>
|
|
<div class="price">29€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1476124369491-e7addf5db371?w=200" alt="Risotto">
|
|
<div class="info">
|
|
<div class="name">Risotto aux champignons</div>
|
|
<div class="desc">Parmesan, truffe, persil frit</div>
|
|
</div>
|
|
<div class="price">22€</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desserts -->
|
|
<div class="menu-grid" style="margin-top:50px;">
|
|
<div class="menu-column">
|
|
<h3 style="color:#7cb342;margin-bottom:30px;">🍰 Desserts</h3>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1470324161839-ce2bb6fa6bc3?w=200" alt="Tarte">
|
|
<div class="info">
|
|
<div class="name">Tarte Tatin</div>
|
|
<div class="desc">Tarte caramélisée, glace vanilla</div>
|
|
</div>
|
|
<div class="price">12€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1488477181946-6428a0291777?w=200" alt="Mousse">
|
|
<div class="info">
|
|
<div class="name">Mousse au chocolat</div>
|
|
<div class="desc">Chocolat noir 70%, crème fouettée</div>
|
|
</div>
|
|
<div class="price">10€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=200" alt="Crème">
|
|
<div class="info">
|
|
<div class="name">Crème brûlée</div>
|
|
<div class="desc">Vanille Madagascar, caramel croquant</div>
|
|
</div>
|
|
<div class="price">11€</div>
|
|
</div>
|
|
<div class="menu-item">
|
|
<img class="img" src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200" alt="Sorbet">
|
|
<div class="info">
|
|
<div class="name">Sorbets artisanaux</div>
|
|
<div class="desc">3 boules, fruits de saison</div>
|
|
</div>
|
|
<div class="price">9€</div>
|
|
</div>
|
|
</div>
|
|
</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-1414235077428-338989a2e8c0?w=400" alt="Jardin"><div class="overlay">Vue jardín</div></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="avis">
|
|
<h2 class="section-title">Nos <span>Avis</span></h2>
|
|
<div class="reviews">
|
|
<div class="review-card">
|
|
<div class="stars">⭐⭐⭐⭐⭐</div>
|
|
<p class="text">"Une expérience culinaire exceptionnelle. Le foie gras est divin et le service impeccable. Je recommande!"</p>
|
|
<p class="author">- Marie D.</p>
|
|
</div>
|
|
<div class="review-card">
|
|
<div class="stars">⭐⭐⭐⭐⭐</div>
|
|
<p class="text">"Le meilleur restaurant gastronomique du quartier. Rapport qualité-prix excellent pour cette gamme."</p>
|
|
<p class="author">- Jean-Pierre M.</p>
|
|
</div>
|
|
<div class="review-card">
|
|
<div class="stars">⭐⭐⭐⭐⭐</div>
|
|
<p class="text">"Décor magnifique, cuisine raffinée. Réservation obligatoire le week-end!"</p>
|
|
<p class="author">- Sophie L.</p>
|
|
</div>
|
|
</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">
|
|
<h3>📍 Adresse</h3>
|
|
<p>42 Rue de la Paix</p>
|
|
<p>75002 Paris, France</p>
|
|
<a href="https://www.google.com/maps/dir/?api=1&destination=42+Rue+de+la+Paix+75002+Paris"
|
|
target="_blank"
|
|
style="display:inline-block;margin-top:15px;background:#7cb342;color:white;padding:12px 25px;border-radius:25px;text-decoration:none;font-weight:bold;">
|
|
📍 Itinéraire
|
|
</a>
|
|
<div style="margin-top:20px;border-radius:12px;overflow:hidden;height:200px;">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.2158783613695!2d2.32950031567453!3d48.86987637928746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2f8a3b2b4b%3A0x4a8c8c8c8c8c8c8c!2s42%20Rue%20de%20la%20Paix%2C%2075002%20Paris!5e0!3m2!1sfr!2sfr!4v1600000000000!5m2!1sfr!2sfr"
|
|
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
<br>
|
|
<h3>📞 Réservation</h3>
|
|
<p>📞 01 42 86 00 00</p>
|
|
<p>✉️ contact@lejardinsecret.fr</p>
|
|
<br>
|
|
<h3>🕐 Horaires</h3>
|
|
<p>Mardi - Samedi: 12h-14h / 19h-22h</p>
|
|
<p>Dimanche: 12h-15h</p>
|
|
<p>Lundi: Fermé</p>
|
|
</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 personne</option>
|
|
<option value="2">2 personnes</option>
|
|
<option value="3">3 personnes</option>
|
|
<option value="4">4 personnes</option>
|
|
<option value="5+">5+ personnes</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">
|
|
<span class="time-slot" onclick="selectTime(this)">12:00</span>
|
|
<span class="time-slot" onclick="selectTime(this)">12:30</span>
|
|
<span class="time-slot" onclick="selectTime(this)">13:00</span>
|
|
<span class="time-slot" onclick="selectTime(this)">13:30</span>
|
|
<span class="time-slot" onclick="selectTime(this)">19:00</span>
|
|
<span class="time-slot" onclick="selectTime(this)">19:30</span>
|
|
<span class="time-slot" onclick="selectTime(this)">20:00</span>
|
|
<span class="time-slot" onclick="selectTime(this)">20:30</span>
|
|
<span class="time-slot" onclick="selectTime(this)">21:00</span>
|
|
<span class="time-slot" onclick="selectTime(this)">21:30</span>
|
|
</div>
|
|
<textarea placeholder="Votre message..." rows="4"></textarea>
|
|
<button type="button" onclick="window.location.href='mailto:ronanyves26@gmail.com?subject=Reservation Le Jardin Secret'">Envoyer la demande</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="hours">
|
|
<div><span class="hours-day">Lun:</span> <span class="hours-time">Fermé</span></div>
|
|
<div><span class="hours-day">Mar-Sam:</span> <span class="hours-time">12h-14h / 19h-22h</span></div>
|
|
<div><span class="hours-day">Dim:</span> <span class="hours-time">12h-15h</span></div>
|
|
</div>
|
|
<p class="copy">© 2026 Le Jardin Secret. Tous droits réservés.</p>
|
|
</footer>
|
|
<script>
|
|
// Date picker - min today, max 3 months
|
|
const dateInput = document.getElementById('res-date');
|
|
const today = new Date().toISOString().split('T')[0];
|
|
const maxDate = new Date();
|
|
maxDate.setMonth(maxDate.getMonth() + 3);
|
|
dateInput.min = today;
|
|
dateInput.max = maxDate.toISOString().split('T')[0];
|
|
|
|
// Time slots selection
|
|
function selectTime(el) {
|
|
document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
|
|
el.classList.add('selected');
|
|
document.getElementById('res-time').value = el.textContent;
|
|
}
|
|
|
|
// Fill time select from slots
|
|
const timeSelect = document.getElementById('res-time');
|
|
document.querySelectorAll('.time-slot').forEach(slot => {
|
|
let option = document.createElement('option');
|
|
option.value = slot.textContent;
|
|
option.textContent = slot.textContent;
|
|
timeSelect.appendChild(option);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|