Detalii Tehnice
Template food delivery cu meniu interactiv, coș, recenzii și rezervări. Modern, responsive și ușor de folosit.
Acest template gratuit HTML, CSS și JavaScript este ideal pentru restaurante, cafenele și servicii de food delivery care își doresc un site modern și funcțional.
🔹 Funcționalități incluse:
- 🛒 Coș de cumpărături interactiv cu actualizare în timp real
- 🍕 Meniu organizat pe categorii (pizza, sushi, paste, deserturi, băuturi)
- ⭐ Recenzii clienți cu rating și comentarii
- 📅 Formular de rezervări online pentru restaurante
- ℹ️ Secțiune de informații (program, adresă, livrare, taxe)
- 📱 Design responsive, adaptat pentru desktop și mobil
- 🎨 Cod curat și ușor de personalizat pentru orice brand culinar
Acest website template pentru restaurante și livrare mâncare oferă o experiență completă utilizatorilor, combinând design-ul modern cu funcționalități esențiale pentru un business digital de succes. Perfect pentru cei care vor să lanseze rapid un magazin de mâncare online sau să își modernizeze site-ul actual.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Deep Taste — Food Delivery</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<style>
:root{
--brand:#b4342b; --accent:#111; --muted:#6b7280;
--bg:#f2f4f8; --panel:#ffffff; --line:#e5e7eb;
--radius:14px; --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--accent); background:var(--bg)}
/* Header */
.topbar{max-width:var(--container); margin-inline:auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand .logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(140deg,#111,#444)}
.actions{display:flex; gap:16px; align-items:center; font-size:.95rem}
.actions a{color:var(--accent); text-decoration:none}
.actions .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; text-decoration:none}
/* Hero */
.hero{height:360px;color:#fff;position:relative;background:url('https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.45))}
.hero .inner{max-width:var(--container);margin:0 auto;height:100%;position:relative;z-index:1;display:grid;place-items:center;padding:0 16px;text-align:center}
.hero h1{margin:0;font-size:clamp(26px,3.6vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.hero .socials{margin-top:14px;display:flex;gap:10px;justify-content:center}
.hero .socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.25)}
/* Promo */
.promo{background:var(--brand);color:#fff;padding:14px 0;border-bottom:1px solid #991b1b}
.promo .row{max-width:var(--container);margin:auto;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.promo .btn{background:#fff;color:#111;border-radius:8px;padding:8px 12px;text-decoration:none;font-weight:600}
/* Layout */
.wrap{max-width:var(--container);margin:22px auto;padding:0 16px;display:grid;grid-template-columns:230px 1fr 280px;gap:16px}
.sidebar,.cart{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.sidebar{position:sticky;top:16px;align-self:start}
.cart{position:sticky;top:16px;align-self:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
/* Sidebar */
.sidebar h3{margin:0 0 10px;font-size:1rem}
.sidebar .menu{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.sidebar .menu a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;color:var(--accent);text-decoration:none;border:1px solid transparent}
.sidebar .menu a:hover{background:#fafafa;border-color:var(--line)}
.sidebar small{color:var(--muted)}
/* Tabs central */
.tabs{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:10px;padding:8px}
.tab{flex:1;text-align:center;padding:10px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:#fff;font-weight:700}
.tab.active{background:var(--brand);color:#fff;border-color:#a22d26}
.tab-content{margin-top:12px;display:none}
.tab-content.active{display:block}
/* Meniu */
.panel h2{margin:0 0 10px;font-size:1.05rem;color:#b91c1c;letter-spacing:.02em;text-transform:uppercase}
.item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.thumb{width:64px;height:64px;border-radius:8px;background:#eee;background-size:cover;background-position:center}
.item h4{margin:0 0 4px;font-size:1rem}
.item p{margin:0;color:var(--muted);font-size:.92rem}
.price{font-weight:700}
.item .add{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#111;cursor:pointer}
.item .add:hover{background:#111;color:#fff}
/* Cart */
.cart h3{margin:0 0 10px;font-size:1rem}
.cart .line{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.cart .line:last-child{border-bottom:0}
.cart .qty{display:flex;gap:8px;align-items:center}
.cart .qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer}
.cart .total{display:flex;justify-content:space-between;margin-top:12px;font-weight:800}
.cart .checkout{display:block;width:100%;text-align:center;margin-top:12px;background:var(--brand);color:#fff;padding:10px 12px;border-radius:8px;text-decoration:none;font-weight:700}
.cart .info{font-size:.9rem;color:var(--muted);margin-top:8px}
/* Recenzii */
.review{border-top:1px solid var(--line);padding:10px 0}
.rev-head{display:flex;align-items:center;gap:10px}
.rev-head .avatar{width:34px;height:34px;border-radius:50%;background:#eee}
.stars{color:#f59e0b}
.rev-form{display:grid;gap:10px;margin-top:10px}
.rev-form input,.rev-form textarea,.rev-form select{padding:10px;border-radius:10px;border:1px solid var(--line);font-family:inherit}
.rev-form button{justify-self:start}
/* Rezervare */
.res-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.res-form input,.res-form select{padding:10px;border-radius:10px;border:1px solid var(--line);font-family:inherit}
.res-form textarea{grid-column:1/-1;padding:10px;border-radius:10px;border:1px solid var(--line)}
.res-actions{display:flex;gap:10px;margin-top:10px}
/* Info */
.info-list{display:grid;gap:8px}
.info-list div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:6px 0}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
/* Footer */
.footer-top{background:var(--brand);color:#fff;margin-top:26px;padding:14px 0;border-top:1px solid #8b1a18}
.footer-dark{background:#0f1116;color:#c7ced9;padding:26px 0}
.footer-dark .row{max-width:var(--container);margin:auto;padding:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.footer-dark a{color:#e5e7eb;text-decoration:none}
.footer-dark small{color:#9da9bb}
/* Responsive */
@media (max-width:1060px){
.wrap{grid-template-columns:1fr}
.sidebar,.cart{position:static}
}
</style>
</head>
<body>
<!-- HEADER -->
<div class="topbar">
<div class="brand"><span class="logo"></span> Deep Taste</div>
<div class="actions">
<a href="#"><i class="fa-regular fa-clock"></i> 10:00–22:00</a>
<a class="btn" href="#"><i class="fa-regular fa-user"></i> Cont</a>
</div>
</div>
<!-- HERO -->
<section class="hero">
<div class="inner">
<div>
<h1>WE ARE IN THE BUSINESS<br>OF FOOD. WHAT OUR RESTAURANT DO</h1>
<div class="socials">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-tiktok"></i></a>
</div>
</div>
</div>
</section>
<!-- PROMO -->
<div class="promo">
<div class="row">
<b>IT’S NEW YEAR — ORDER NOW GET <span style="text-decoration:underline">40% OFF</span></b>
<a class="btn" href="#menu">ORDER FOOD</a>
</div>
</div>
<!-- MAIN -->
<main class="wrap" id="menu">
<!-- STÂNGA -->
<aside class="sidebar">
<h3>Meniu</h3>
<ul class="menu">
<li><a href="#starters">Starters <small>(6)</small></a></li>
<li><a href="#pizza">Pizza <small>(8)</small></a></li>
<li><a href="#sushi">Sushi <small>(5)</small></a></li>
<li><a href="#salads">Salads <small>(7)</small></a></li>
<li><a href="#pastas">Pastas <small>(6)</small></a></li>
<li><a href="#desserts">Desserts <small>(6)</small></a></li>
<li><a href="#drinks">Drinks <small>(10)</small></a></li>
</ul>
</aside>
<!-- CENTRU: Tabs + Conținut -->
<section>
<!-- Tabs -->
<div class="tabs" role="tablist" aria-label="Secțiuni restaurant">
<button class="tab active" data-tab="tab-menu" role="tab" aria-selected="true">Meniu</button>
<button class="tab" data-tab="tab-reviews" role="tab">Recenzii</button>
<button class="tab" data-tab="tab-reserve" role="tab">Rezervare</button>
<button class="tab" data-tab="tab-info" role="tab">Informații</button>
</div>
<!-- Tab: MENIU -->
<div id="tab-menu" class="tab-content active" role="tabpanel" aria-labelledby="Meniu">
<section class="panel" id="starters">
<h2>Starters</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1544025162-d76694265947?q=80&w=400&auto=format&fit=crop')"></div>
<div><h4>Bruschette</h4><p>Pâine crocantă, roșii, busuioc, ulei de măsline.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">24 RON</div>
<button class="add" type="button" data-name="Bruschette" data-price="24"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
<div class="item">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1552332386-f8dd00dc2f85?q=80&w=400&auto=format&fit=crop')"></div>
<div><h4>Chicken Wings</h4><p>Aripioare picante, sos BBQ, morcovi & țelină.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">32 RON</div>
<button class="add" type="button" data-name="Chicken Wings" data-price="32"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="pizza">
<h2>Pizza</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://tse3.mm.bing.net/th/id/OIF.R4rl2AtDhb7hZ3tDDN8XTg?r=0&cb=thfc1&rs=1&pid=ImgDetMain&o=7&rm=3')"></div>
<div><h4>Margherita</h4><p>Roșii San Marzano, mozzarella, busuioc.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">29 RON</div>
<button class="add" type="button" data-name="Margherita" data-price="29"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
<div class="item">
<div class="thumb" style="background-image:url('https://tse4.mm.bing.net/th/id/OIP.MRxHtvhh3GBLnN27uzIJuQHaFj?r=0&cb=thfc1&rs=1&pid=ImgDetMain&o=7&rm=3')"></div>
<div><h4>Diavola</h4><p>Salam picant, mozzarella, roșii, ardei iute.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">35 RON</div>
<button class="add" type="button" data-name="Diavola" data-price="35"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="sushi">
<h2>Sushi</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1553621042-f6e147245754?q=80&w=400&auto=format&fit=crop')"></div>
<div><h4>Salmon Nigiri (6buc)</h4><p>Orez, somon proaspăt, wasabi.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">42 RON</div>
<button class="add" type="button" data-name="Salmon Nigiri" data-price="42"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="salads">
<h2>Salads</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1551183053-bf91a1d81141?q=80&w=400&auto=format&fit=crop')"></div>
<div><h4>Caesar</h4><p>Salată romană, piept pui, parmezan, crutoane.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">31 RON</div>
<button class="add" type="button" data-name="Caesar" data-price="31"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="pastas">
<h2>Pastas</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://tse3.mm.bing.net/th/id/OIP.jTUuBX8KKW1Wmf7-STrpHAHaFM?r=0&cb=thfc1&rs=1&pid=ImgDetMain&o=7&rm=3')"></div>
<div><h4>Carbonara</h4><p>Guanciale, gălbenuș, pecorino, piper.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">36 RON</div>
<button class="add" type="button" data-name="Carbonara" data-price="36"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="desserts">
<h2>Desserts</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://tse4.mm.bing.net/th/id/OIP.ty4qEQ8gU6PzVF8SAuBiIgHaE7?r=0&cb=thfc1&rs=1&pid=ImgDetMain&o=7&rm=3')"></div>
<div><h4>Tiramisu</h4><p>Pișcoturi, mascarpone, espresso, cacao.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">22 RON</div>
<button class="add" type="button" data-name="Tiramisu" data-price="22"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
<section class="panel" id="drinks">
<h2>Drinks</h2>
<div class="item">
<div class="thumb" style="background-image:url('https://images.unsplash.com/photo-1510626176961-4b57d4fbad03?q=80&w=400&auto=format&fit=crop')"></div>
<div><h4>Limonadă</h4><p>Proaspătă, mentă, gheață.</p></div>
<div style="display:grid;gap:6px;justify-items:end">
<div class="price">12 RON</div>
<button class="add" type="button" data-name="Limonadă" data-price="12"><i class="fa-solid fa-plus"></i></button>
</div>
</div>
</section>
</div>
<!-- Tab: RECENZII -->
<div id="tab-reviews" class="tab-content" role="tabpanel" aria-labelledby="Recenzii">
<section class="panel">
<h2 style="color:#b91c1c">Recenzii clienți</h2>
<div id="reviewsList"></div>
<form id="reviewForm" class="rev-form">
<h3>Lasă o recenzie</h3>
<div style="display:grid;grid-template-columns:1fr 140px;gap:10px">
<input name="name" placeholder="Nume" required />
<select name="rating" required>
<option value="5">5 ★</option><option value="4">4 ★</option>
<option value="3">3 ★</option><option value="2">2 ★</option><option value="1">1 ★</option>
</select>
</div>
<textarea name="text" rows="3" placeholder="Părerea ta..." required></textarea>
<button class="actions btn" type="submit" style="width:max-content;padding:10px 16px;background:var(--brand);color:#fff;border-radius:8px;border:0">Trimite</button>
</form>
</section>
</div>
<!-- Tab: REZERVARE -->
<div id="tab-reserve" class="tab-content" role="tabpanel" aria-labelledby="Rezervare">
<section class="panel">
<h2 style="color:#b91c1c">Rezervare la restaurant</h2>
<form id="reserveForm" class="res-form">
<input type="text" name="nume" placeholder="Nume complet" required />
<input type="tel" name="telefon" placeholder="Telefon" required pattern="[0-9+ ]{6,}" />
<input type="date" name="data" required />
<input type="time" name="ora" required />
<select name="pers" required>
<option value="2">2 persoane</option><option value="3">3 persoane</option><option value="4">4 persoane</option>
<option value="5">5 persoane</option><option value="6+">6+ persoane</option>
</select>
<select name="zona"><option>Oricare</option><option>Interior</option><option>Terasa</option></select>
<textarea name="obs" rows="3" placeholder="Observații (opțional)"></textarea>
<div class="res-actions">
<button class="btn" type="submit" style="background:var(--brand);color:#fff;border:0">Rezervă</button>
<button class="btn" type="reset" style="background:#fff;color:#111;border:1px solid var(--line)">Reset</button>
</div>
</form>
<p id="reserveMsg" class="info" style="margin-top:10px;color:var(--muted)"></p>
</section>
</div>
<!-- Tab: INFORMAȚII -->
<div id="tab-info" class="tab-content" role="tabpanel" aria-labelledby="Informații">
<section class="panel">
<h2 style="color:#b91c1c">Informații restaurant</h2>
<div class="info-list">
<div><span>Adresă</span><span>Str. Exemplu 12, București</span></div>
<div><span>Telefon</span><span>031 234 5678</span></div>
<div><span>Email</span><span>[email protected]</span></div>
<div><span>Program</span><span>L-D 10:00–22:00</span></div>
<div><span>Livrare</span><span><span class="badge">30–45 min</span> <span class="badge">Taxă: 9 RON</span></span></div>
</div>
<p style="margin-top:12px;color:var(--muted)">Preparatele sunt gătite la comandă. Disponibilitatea poate varia în funcție de restaurant.</p>
</section>
</div>
</section>
<!-- DREAPTA: COȘ -->
<aside class="cart" id="cart">
<h3>Comanda ta</h3>
<div id="cartLines"></div>
<div class="total"><span>Total</span><span id="cartTotal">0 RON</span></div>
<a href="#" class="checkout">Checkout</a>
<div class="info"><i class="fa-regular fa-circle-question"></i> Livrare estimată: 30–45 min în zona ta.</div>
</aside>
</main>
<!-- FOOTER -->
<div class="footer-top">
<div class="topbar" style="color:#fff">
<div>Livrăm zilnic 10:00–22:00</div>
<a href="#menu" class="btn" style="background: #fff;
color: #111;
border-radius: 8px;
padding: 8px 12px;
text-decoration: none;
font-weight: 600;">Comandă acum</a>
</div>
</div>
<footer class="footer-dark">
<div class="row">
<div>
<h4>Despre</h4>
<small>Deep Taste oferă preparate proaspete, gătite la comandă. Misiunea noastră: livrare rapidă, sigură și gustoasă.</small>
</div>
<div>
<h4>Politici</h4>
<a href="#">Termeni & condiții</a><br />
<a href="#">Politica de confidențialitate</a>
</div>
<div>
<h4>Contact</h4>
<div>031 234 5678</div>
<div>[email protected]</div>
</div>
</div>
</footer>
<script>
/* ---------- Tabs ---------- */
document.querySelectorAll('.tab').forEach(btn=>{
btn.addEventListener('click', ()=>{
document.querySelectorAll('.tab').forEach(b=>b.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active'));
btn.classList.add('active');
const pane = document.getElementById(btn.dataset.tab);
if(pane) pane.classList.add('active');
});
});
/* ---------- Coș (robust cu fallback de stocare) ---------- */
const CART_KEY = 'deepTaste_cart';
const SafeStore = {
get(){
try { return JSON.parse(sessionStorage.getItem(CART_KEY) || '{}'); }
catch(e){ console.warn('Storage indisponibil, rulez în RAM', e); return {}; }
},
set(v){
try { sessionStorage.setItem(CART_KEY, JSON.stringify(v)); }
catch(e){ /* ok */ }
}
};
let cart = SafeStore.get();
function saveCart(){ SafeStore.set(cart); }
function renderCart(){
const lines = document.getElementById('cartLines');
const tot = document.getElementById('cartTotal');
if(!lines || !tot) return;
lines.innerHTML = '';
let total = 0;
const entries = Object.entries(cart);
if(entries.length===0){
lines.innerHTML = '<small class="info">Coșul tău este gol.</small>';
} else {
entries.forEach(([name, it])=>{
total += (Number(it.price)||0) * (Number(it.qty)||0);
const row = document.createElement('div');
row.className = 'line';
row.innerHTML = `
<span>${name}</span>
<span class="qty">
<button type="button" aria-label="minus">−</button>
<b>${it.qty}</b>
<button type="button" aria-label="plus">+</button>
<span style="width:56px; text-align:right">${((Number(it.price)||0)*(Number(it.qty)||0)).toFixed(0)} RON</span>
</span>`;
const buttons = row.querySelectorAll('button');
const minus = buttons[0];
const plus = buttons[1];
if(minus) minus.addEventListener('click', ()=>{
it.qty = Math.max(0, (Number(it.qty)||0) - 1);
if(it.qty===0) delete cart[name];
saveCart(); renderCart();
});
if(plus) plus.addEventListener('click', ()=>{
it.qty = (Number(it.qty)||0) + 1;
saveCart(); renderCart();
});
lines.appendChild(row);
});
}
tot.textContent = total.toFixed(0) + ' RON';
}
function addToCart(name, price){
const p = Number(price);
if(!name || isNaN(p)) return;
if(!cart[name]) cart[name] = {price:p, qty:0};
cart[name].qty = (Number(cart[name].qty)||0) + 1;
saveCart(); renderCart();
}
/* Delegare GLOBALĂ pentru toate butoanele .add (prinde click pe icon și margini) */
document.addEventListener('click', (e)=>{
const btn = e.target.closest('button.add');
if(btn){
e.preventDefault();
addToCart(btn.dataset.name, btn.dataset.price);
}
});
renderCart();
/* ---------- Recenzii ---------- */
const reviewsEl = document.getElementById('reviewsList');
if(reviewsEl){
const sampleReviews = [
{name:'Andreea', rating:5, text:'Mâncare excelentă, a ajuns caldă și rapid!'},
{name:'Vlad', rating:4, text:'Foarte bun. Livrare conform ETA.'}
];
const starStr = n => '★'.repeat(n) + '☆'.repeat(5-n);
const renderReviews = list => reviewsEl.innerHTML = list.map(r=>`
<div class="review">
<div class="rev-head"><div class="avatar"></div><b>${r.name}</b> <span class="stars">${starStr(r.rating)}</span></div>
<div style="margin-top:6px">${r.text}</div>
</div>`).join('');
renderReviews(sampleReviews);
const rf = document.getElementById('reviewForm');
if(rf) rf.addEventListener('submit', e=>{
e.preventDefault();
const fd = new FormData(e.target);
const r = { name: fd.get('name').trim(), rating: Number(fd.get('rating')), text: fd.get('text').trim() };
if(!r.name || !r.text) return;
sampleReviews.unshift(r); renderReviews(sampleReviews); e.target.reset();
alert('Mulțumim pentru recenzie!');
});
}
/* ---------- Rezervare ---------- */
const reserveForm = document.getElementById('reserveForm');
if(reserveForm){
reserveForm.addEventListener('submit', e=>{
e.preventDefault();
const fd = new FormData(e.target);
const nume = fd.get('nume'), tel = fd.get('telefon'), data = fd.get('data'), ora = fd.get('ora'), pers = fd.get('pers');
const msg = document.getElementById('reserveMsg');
if(msg) msg.textContent = `Rezervare trimisă: ${nume}, ${pers}, ${data} ${ora}. Te contactăm la ${tel}.`;
e.target.reset();
});
}
</script>
</body>
</html>
