<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>McDonaldus Antica Roma</title>
<style>
body {
background: #f5e6ca url('https://upload.wikimedia.org/wikipedia/commons/f/fb/Ancient_Roman_pattern.svg') repeat;
font-family: 'Cinzel', serif;
color: #4b2e05;
margin: 0;
padding: 0;
}
header {
background: linear-gradient(135deg, #800000, #b8860b);
color: gold;
text-align: center;
padding: 20px;
border-bottom: 5px solid #d4af37;
}
header img {
height: 80px;
}
h1 { font-size: 2.5em; text-shadow: 2px 2px 4px #000; }
nav {
background: #c19a6b;
display: flex;
justify-content: space-around;
padding: 10px;
border-bottom: 3px solid #654321;
}
nav button {
background: gold;
border: 2px solid #800000;
border-radius: 5px;
padding: 8px 12px;
cursor: pointer;
font-weight: bold;
}
section {
padding: 20px;
display: none;
}
section.active {
display: block;
background: rgba(255,255,255,0.9);
border: 3px solid #d4af37;
border-radius: 10px;
margin: 20px;
}
.menu-item {
display: flex;
align-items: center;
margin: 15px 0;
border-bottom: 1px dashed #b8860b;
padding-bottom: 10px;
}
.menu-item img {
width: 80px;
height: 80px;
margin-right: 15px;
border-radius: 50%;
border: 2px solid #800000;
}
.menu-item span {
font-size: 1.1em;
}
.carrello {
position: fixed;
bottom: 0;
right: 0;
background: #fff8dc;
border: 2px solid #b8860b;
padding: 10px;
max-width: 300px;
font-size: 0.9em;
}
.button {
background: #800000;
color: gold;
padding: 5px 10px;
margin-top: 5px;
border: none;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4e/SPQR_banner.svg" alt="Logo Roma">
<h1>
🍔
McDonaldus Antica Roma
🍷
</h1>
</header>
<nav>
<button onclick="showSection(0)">Panini Compositi</button>
<button onclick="showSection(1)">Crea Panino</button>
<button onclick="showSection(2)">Sfiziosità</button>
<button onclick="showSection(3)">Bevande</button>
<button onclick="showSection(4)">Dolci</button>
</nav>
<!-- SEZIONE 0 -->
<section id="s0" class="active">
<h2>Panini Compositi</h2>
<div class="menu-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Theater_mask_-_Roman.jpg" alt="Gran Maccus">
<span><b>Gran Maccus</b> — Panis sigilineus, porcina caro, lactuca e garum. <br>
💰
1 sesterzio e 2 assi</span>
</div>
<div class="menu-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/76/Maccus_mask.jpg" alt="Mc Pappus">
<span><b>Mc Pappus</b> — Panis plebeius, ficatum, pisum, defrutum.<br>
💰
2 sesterzi e 3 assi</span>
</div>
<div class="menu-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Buccus_mask.jpg" alt="Big Buccus">
<span><b>Big Buccus</b> — Panis focaccius, pullus, brassica e moretum.<br>
💰
2 sesterzi e 1 asse</span>
</div>
<div class="menu-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Ancient_Roman_theatre_mask.jpg" alt="Big Dossennus">
<span><b>Big Dossennus</b> — Panis sigilineus, uovo, lactuca, cucumis e oenogarum.<br>
💰
3 assi</span>
</div>
<div class="menu-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Tragic_mask_Roman.jpg" alt="Vegetariano">
<span><b>Vegetariano</b> — Verdure varie.<br>
💰
2 assi</span>
</div>
</section>
<!-- SEZIONE 1: CREA PANINO -->
<section id="s1">
<h2>Crea il tuo Panino</h2>
<p>Seleziona passo per passo oppure salta una fase.</p>
<div id="builder"></div>
</section>
<!-- SEZIONE 2 -->
<section id="s2">
<h2>Sfiziosità</h2>
<ul>
<li>Apium (sedano) —
💰
1 asse</li>
<li>Pastinaca (carote) —
💰
1 asse e mezzo</li>
<li>Foeniculum (finocchio) —
💰
1 asse</li>
<li>Placenta cum caseo (focaccia con formaggio) —
💰
1 sesterzio e 1 asse</li>
</ul>
</section>
<!-- SEZIONE 3 -->
<section id="s3">
<h2>Bevande</h2>
<ul>
<li>Aqua —
💰
mezza asse</li>
<li>Hydromeli —
💰
2 assi</li>
<li>Vinum —
💰
3 assi</li>
</ul>
</section>
<!-- SEZIONE 4 -->
<section id="s4">
<h2>Dolci</h2>
<ul>
<li>Placenta con miele —
💰
1 sesterzio e 1 asse</li>
<li>Dulcis domestica —
💰
1 sesterzio</li>
<li>Globuli —
💰
3 assi e mezzo</li>
<li>Libum —
💰
3 assi</li>
</ul>
</section>
<div class="carrello" id="carrello">
<h3>Carrello</h3>
<div id="contenutoCarrello">Nessun elemento ancora.</div>
<p><b>Totale:</b> <span id="totale">0 assi</span></p>
</div>
<script>
const sezioni = document.querySelectorAll("section");
function showSection(i) {
sezioni.forEach(s => s.classList.remove("active"));
sezioni[i].classList.add("active");
}
let totaleAssi = 0;
function aggiungi(nome, prezzo) {
const cont = document.getElementById('contenutoCarrello');
if (cont.textContent.includes("Nessun")) cont.innerHTML = "";
cont.innerHTML += `<div>
🍞
${nome} —
💰
${prezzo} assi</div>`;
totaleAssi += prezzo;
document.getElementById('totale').innerText = totaleAssi + " assi";
}
</script>
</body>
</html>
