<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista Nozze - Illuminazione</title>
<style>
body { font-family: Arial, sans-serif; margin:0; background:#fafafa; color:#333; }
header { background:#fff; padding:40px; text-align:center; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
h1 { margin:0; }
.container { max-width:1100px; margin:40px auto; padding:20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.08); position:relative; }
.card img { width:100%; height:200px; object-fit:cover; }
.card-content { padding:15px; }
.btn { display:block; text-align:center; padding:10px; background:#e91e63; color:#fff; border-radius:8px; cursor:pointer; }
.sold { position:absolute; top:10px; left:10px; background:#4caf50; color:#fff; padding:5px 10px; border-radius:6px; font-size:12px; }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; }
.modal-content { background:#fff; padding:20px; border-radius:12px; width:90%; max-width:400px; }
.modal-content input { width:100%; padding:10px; margin-bottom:10px; }
</style>
</head>
<body>
<header>
<h1>Marco & Giulia</h1>
<p>Lista Nozze - Illuminazione</p>
</header>
<div class="container">
<div class="grid" id="grid"></div>
</div>
<div class="modal" id="formModal">
<div class="modal-content">
<h2>Dati Acquirente</h2>
<input type="text" id="name" placeholder="Nome e Cognome">
<input type="email" id="email" placeholder="Email">
<input type="tel" id="phone" placeholder="Telefono">
<button class="btn" onclick="submitForm()">Conferma</button>
</div>
</div>
<script>
const SCRIPT_URL = "https://script.google.com/macros/s/AKfycbyTJ98Tuc0jnuYuaLHgduQke6fX_OMhhzyB7NvVH0gryxFdHhO6xpPnycLTmihjmTE5/exec";
let selectedProduct = null;
let prodotti = [
{ nome: "Lampada da terra", prezzo: "€180", img: "https://via.placeholder.com/400x300" },
{ nome: "Lampadario soggiorno", prezzo: "€320", img: "https://via.placeholder.com/400x300" }
];
function render(prodottiPrenotati=[]) {
const grid = document.getElementById("grid");
grid.innerHTML = "";
prodotti.forEach(p => {
const prenotato = prodottiPrenotati.includes(p.nome);
const card = document.createElement("div");
card.className = "card";
if (prenotato) {
const badge = document.createElement("div");
badge.className = "sold";
badge.innerText = "Prenotato";
card.appendChild(badge);
}
card.innerHTML += `
<img src="${p.img}">
<div class="card-content">
<h3>${p.nome}</h3>
<p>${p.prezzo}</p>
${!prenotato ? `<div class="btn" onclick="openForm('${p.nome}')">Prenota</div>` : ""}
</div>
`;
grid.appendChild(card);
});
}
function openForm(nome) {
selectedProduct = nome;
document.getElementById("formModal").style.display = "flex";
}
function submitForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
fetch(SCRIPT_URL, {
method: "POST",
body: JSON.stringify({
prodotto: selectedProduct,
nome: name,
email,
telefono: phone
})
})
.then(() => {
alert("Prenotazione registrata!");
loadPrenotazioni();
document.getElementById("formModal").style.display = "none";
});
}
function loadPrenotazioni() {
fetch(SCRIPT_URL)
.then(res => res.json())
.then(data => {
const prenotati = data.map(r => r.prodotto);
render(prenotati);
})
.catch(() => render());
}
loadPrenotazioni();
</script>
</body>
</html>
