Food truck websiteOne-line
Muse Ember
by MetaReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 12.5 s
- Cost
- $0.0034
- Output tokens
- 6,796
- Spent thinking
- 74 tokens
- Speed
- 602.3 tok/s
- Console errors
- 0
- First token after
- 1.2 s
- First visible text after
- 1.2 s
- Prompt tokens
- 379
- Code size
- 20.9 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"minimal"}- Max output
- 943,718 tokens
- Generated
- Nov 12, 2026
What it was asked
The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 259 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KIMCHI LOCO — Seoul Meets Mexico | Korean Taco Truck</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#e6392b;--yellow:#ffb800;--black:#111;--cream:#fff8ec;--teal:#00b4a0;--pink:#ff5a8a}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--black);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
.topbar{background:var(--black);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between;padding:9px 18px;flex-wrap:wrap;gap:6px}
.topbar b{color:var(--yellow)}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:var(--cream);position:sticky;top:0;z-index:20;border-bottom:3px solid var(--black)}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:24px;letter-spacing:-.04em;line-height:.85}
.logo-icon{width:48px;height:48px;background:var(--red);border:3px solid var(--black);border-radius:50% 50% 50% 6px;display:grid;place-items:center;font-size:26px;box-shadow:4px 4px 0 var(--black);transform:rotate(-6deg)}
.logo span{color:var(--red)}
.logo small{display:block;font-size:10px;letter-spacing:.22em;color:#666;font-weight:800}
.navlinks{display:flex;gap:22px;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.navlinks a:hover{color:var(--red)}
.btn{background:var(--yellow);border:3px solid var(--black);padding:11px 18px;border-radius:999px;font-weight:900;font-size:14px;text-transform:uppercase;box-shadow:4px 4px 0 var(--black);transition:.15s}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--black)}
.btn-red{background:var(--red);color:#fff}
.btn-white{background:#fff}
.cart-badge{background:var(--black);color:var(--yellow);border-radius:999px;padding:2px 8px;margin-left:5px;font-size:12px}
.hero{position:relative;background:linear-gradient(135deg,#ff2e1f 0%,#ff7a18 55%,#ffb800 100%);overflow:hidden;padding:28px 28px 0;border-bottom:4px solid var(--black)}
.hero-inner{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--black);border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;box-shadow:3px 3px 0 var(--black);margin-bottom:14px}
.pill i{width:9px;height:9px;background:#00c853;border-radius:50%;display:inline-block;animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.4);opacity:.6}}
h1{font-size:clamp(52px,8vw,96px);line-height:.82;font-weight:1000;letter-spacing:-.05em;text-transform:uppercase;color:#fff;text-shadow:4px 4px 0 var(--black)}
h1 em{color:var(--yellow);font-style:normal;-webkit-text-stroke:2px var(--black)}
.hero p{font-size:19px;line-height:1.4;font-weight:700;margin:18px 0 20px;max-width:540px;color:#231600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.stats div{text-align:center}
.stats b{font-size:28px;display:block;color:#fff;text-shadow:2px 2px 0 var(--black)}
.stats span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.truck-wrap{position:relative;display:flex;justify-content:center}
.truck-art{background:#fff;border:4px solid var(--black);border-radius:28px;padding:14px;box-shadow:10px 10px 0 var(--black);max-width:430px;width:100%}
.truck-card{background:linear-gradient(180deg,#7ee8fa,#fff 55%);border:3px solid var(--black);border-radius:18px;padding:18px;text-align:center;position:relative;overflow:hidden}
.truck-card h3{font-size:32px;letter-spacing:-.03em}
.truck-card h3 span{color:var(--red)}
.tacos{display:flex;justify-content:center;gap:6px;font-size:52px;margin:8px 0;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.2))}
.truck-card p{font-weight:800;font-size:13px;line-height:1.3}
.price-tag{position:absolute;top:10px;right:10px;background:var(--yellow);border:3px solid var(--black);border-radius:12px;padding:6px 8px;font-weight:1000;transform:rotate(8deg);font-size:13px;line-height:1}
.float{position:absolute;font-size:28px;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(8deg)}}
.marquee{background:var(--black);color:var(--yellow);overflow:hidden;white-space:nowrap;padding:11px 0;border-bottom:3px solid var(--black);font-weight:1000;text-transform:uppercase;letter-spacing:.06em}
.marquee div{display:inline-block;animation:scroll 18s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.section{max-width:1180px;margin:auto;padding:42px 22px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sec-head h2{font-size:clamp(34px,5vw,56px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.sec-head h2 span{color:var(--red)}
.sec-head p{max-width:420px;font-weight:600;line-height:1.5;color:#444}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{border:3px solid var(--black);background:#fff;padding:8px 14px;border-radius:999px;font-weight:900;font-size:13px;text-transform:uppercase}
.chip.active{background:var(--black);color:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:3px solid var(--black);border-radius:22px;overflow:hidden;box-shadow:6px 6px 0 var(--black);transition:.2s}
.card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:8px 10px 0 var(--black)}
.card-top{height:150px;display:flex;align-items:center;justify-content:center;font-size:82px;position:relative;border-bottom:3px solid var(--black)}
.card-top .tag{position:absolute;top:10px;left:10px;background:var(--black);color:#fff;font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;text-transform:uppercase}
.card-top .heat{position:absolute;bottom:10px;right:10px;background:#fff;border:2px solid var(--black);border-radius:999px;padding:3px 8px;font-size:12px;font-weight:900}
.card-body{padding:14px}
.card-body h3{font-size:19px;line-height:1.05;letter-spacing:-.02em}
.card-body p{font-size:13px;line-height:1.4;color:#555;margin:7px 0 12px;min-height:36px}
.card-row{display:flex;justify-content:space-between;align-items:center}
.price{font-size:22px;font-weight:1000}
.price small{font-size:12px;color:#888;text-decoration:line-through;font-weight:700}
.add{background:var(--red);color:#fff;border:3px solid var(--black);border-radius:999px;padding:8px 13px;font-weight:900;box-shadow:3px 3px 0 var(--black)}
.add:active{transform:translate(2px,2px);box-shadow:1px 1px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.box{border:4px solid var(--black);border-radius:26px;padding:24px;box-shadow:7px 7px 0 var(--black)}
.box-yellow{background:var(--yellow)}
.box-black{background:var(--black);color:#fff}
.box h3{font-size:32px;line-height:.9;text-transform:uppercase;letter-spacing:-.03em;margin-bottom:10px}
.box p,.box li{line-height:1.5;font-weight:600}
.box ul{margin:12px 0 14px 20px}
.spice{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.spice button{border:3px solid var(--black);background:#fff;border-radius:999px;padding:9px 12px;font-weight:900}
.spice button.on{background:var(--red);color:#fff}
.cart{position:fixed;right:18px;bottom:18px;width:360px;max-width:calc(100vw - 24px);background:#fff;border:4px solid var(--black);border-radius:24px;box-shadow:8px 8px 0 var(--black);z-index:30;overflow:hidden}
.cart-head{background:var(--black);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.cart-head b{text-transform:uppercase;letter-spacing:.05em}
.cart-head span{background:var(--yellow);color:#000;border-radius:999px;padding:3px 9px;font-weight:1000;font-size:12px}
.cart-items{max-height:190px;overflow:auto;padding:10px 14px}
.cart-items div{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px dashed #ddd;font-weight:700;font-size:14px}
.cart-items button{border:none;background:#ffe1de;border-radius:999px;padding:2px 8px;font-weight:900}
.empty{color:#888;text-align:center;padding:16px 0!important;border:none!important}
.cart-foot{padding:14px;border-top:3px solid var(--black);display:flex;justify-content:space-between;align-items:center;gap:10px}
.total{font-size:24px;font-weight:1000}
.checkout{flex:1;background:var(--red);color:#fff;border:3px solid var(--black);border-radius:999px;padding:12px;font-weight:1000;text-transform:uppercase;box-shadow:3px 3px 0 var(--black)}
.toast{position:fixed;left:50%;top:86px;transform:translateX(-50%) translateY(-20px);background:var(--black);color:#fff;padding:12px 18px;border-radius:999px;font-weight:900;opacity:0;pointer-events:none;transition:.3s;z-index:50;border:3px solid var(--yellow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.day{background:#fff;border:3px solid var(--black);border-radius:18px;padding:16px;box-shadow:5px 5px 0 var(--black)}
.day b{font-size:18px}
.day p{color:#555;font-weight:600;margin-top:6px;line-height:1.4;font-size:14px}
.day.today{background:#ffefb0;outline:3px solid var(--red)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{background:#fff;border:3px solid var(--black);border-radius:20px;padding:18px;box-shadow:5px 5px 0 var(--black)}
.review .stars{color:var(--yellow);font-size:18px;text-shadow:1px 1px 0 #000}
.review p{font-weight:700;line-height:1.5;margin:8px 0}
.review small{color:#777;font-weight:800;text-transform:uppercase}
footer{background:var(--black);color:#fff;padding:36px 22px;text-align:center}
footer h2{font-size:clamp(36px,6vw,64px);text-transform:uppercase;letter-spacing:-.04em}
footer h2 span{color:var(--yellow)}
footer p{opacity:.8;margin:10px auto 18px;max-width:560px;line-height:1.5}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero-inner,.split,.schedule,.reviews{grid-template-columns:1fr}.navlinks{display:none}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.cart{left:12px;right:12px;width:auto}h1{font-size:54px}.topbar{justify-content:center;text-align:center}}
</style>
</head>
<body>
<div class="topbar"><span>🔥 Now serving near <b>Downtown LA</b></span><span>Free kimchi slaw on every taco • 11am–10pm</span></div>
<nav>
<a class="logo" href="#"><span class="logo-icon">🌮</span><span>KIMCHI<br><span>LOCO</span><small>SEOUL × MEXICO</small></span></a>
<div class="navlinks"><a href="#menu">Menu</a><a href="#find">Find Us</a><a href="#reviews">Reviews</a><a href="#catering">Catering</a></div>
<button class="btn btn-red" onclick="document.getElementById('menu').scrollIntoView({behavior:'smooth'})">Order Now <span class="cart-badge" id="navCount">0</span></button>
</nav>
<section class="hero">
<div class="hero-inner">
<div>
<div class="pill"><i></i> Open Today • 11AM–10PM • Downtown Arts District</div>
<h1>SEOUL<br>MEETS<br><em>MEXICO.</em></h1>
<p>Flame-grilled bulgogi, crunchy kimchi, gochujang crema & warm corn tortillas pressed fresh. One bite and you’ll understand the name — <b>you’ll go loco.</b></p>
<div class="hero-cta"><button class="btn btn-white" onclick="document.getElementById('menu').scrollIntoView({behavior:'smooth'})">🌶️ See The Menu</button><button class="btn" onclick="document.getElementById('find').scrollIntoView({behavior:'smooth'})">📍 Find The Truck</button></div>
<div class="stats"><div><b>4.9★</b><span>2,400+ reviews</span></div><div><b>60K</b><span>Tacos served</span></div><div><b>15 min</b><span>Avg. wait</span></div><div><b>100%</b><span>Handmade daily</span></div></div>
</div>
<div class="truck-wrap">
<span class="float" style="top:8px;left:8px">🌶️</span><span class="float" style="bottom:30px;right:4px;animation-delay:.7s">🥑</span><span class="float" style="top:55%;left:-4px;animation-delay:1.2s">🧀</span>
<div class="truck-art">
<div class="truck-card">
<div class="price-tag">3 for<br>$16</div>
<h3>KIMCHI <span>LOCO</span> 🚚</h3>
<div class="tacos">🌮 🌮 🌮</div>
<p><b>THE LOCO TRIO</b><br>Bulgogi • Spicy Pork • Crispy Cauliflower<br>with kimchi slaw, pickled onion & gochujang crema</p>
<button class="btn btn-red" style="margin-top:12px" onclick="addItem('Loco Trio (3 Tacos)',16)">Add Trio — $16</button>
</div>
</div>
</div>
</div>
</section>
<div class="marquee"><div> 🌮 BULGOGI TACO • 🌶️ GOCHUJANG CREMA • 🥬 KIMCHI SLAW • 🔥 CHARRED IN-HOUSE • 🌮 BULGOGI TACO • 🌶️ GOCHUJANG CREMA • 🥬 KIMCHI SLAW • 🔥 CHARRED IN-HOUSE • 🌮 BULGOGI TACO • 🌶️ GOCHUJANG CREMA • 🥬 KIMCHI SLAW • 🔥 CHARRED IN-HOUSE</div></div>
<section class="section" id="menu">
<div class="sec-head"><div><h2>THE <span>LOCO</span><br>MENU</h2></div><p>Every taco comes with crunchy kimchi slaw, cilantro, cotija & our secret gochujang crema. Pick your heat — we’ll handle the rest.</p></div>
<div class="filters">
<button class="chip active" data-f="all">All 🔥</button><button class="chip" data-f="beef">Beef</button><button class="chip" data-f="pork">Pork</button><button class="chip" data-f="veg">Veggie</button><button class="chip" data-f="sides">Sides</button>
</div>
<div class="grid" id="grid"></div>
</section>
<section class="section" style="padding-top:0">
<div class="split">
<div class="box box-yellow" id="catering">
<h3>🌶️ Pick Your Heat</h3>
<p>Tap a level — your next taco gets an extra drizzle on us.</p>
<div class="spice"><button onclick="setHeat(this,'Mild 😊')">Mild 😊</button><button class="on" onclick="setHeat(this,'Loco 🌶️🌶️')">Loco 🌶️🌶️</button><button onclick="setHeat(this,'SEOUL FIRE 🔥🔥🔥')">Seoul Fire 🔥🔥🔥</button></div>
<p id="heatText"><b>Your vibe: Loco 🌶️🌶️</b> — Sweet heat, big flavour. Perfect for first-timers.</p>
<button class="btn" style="margin-top:14px" onclick="showToast('✅ Heat level saved to your order!')">Save My Heat</button>
</div>
<div class="box box-black">
<h3>Build Your Own<br>3-Taco Box 🎁</h3>
<p>Mix any three tacos + your choice of loaded fries or elote. Lunch special until 3PM.</p>
<ul><li>✔ Any 3 signature tacos</li><li>✔ 1 side + 2 house salsas</li><li>✔ Free drink with student ID</li></ul>
<div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap"><b style="font-size:28px;color:var(--yellow)">$16 <small style="font-size:13px;color:#aaa;text-decoration:line-through">$21</small></b><button class="btn btn-red" onclick="addItem('3-Taco Box Special',16)">Add Box</button></div>
</div>
</div>
</section>
<section class="section" id="find" style="padding-top:0">
<div class="sec-head"><div><h2>FIND THE <span>TRUCK</span></h2></div><p>Follow the smell of bulgogi and gochujang. We post our live location every morning on Instagram <b>@kimchiloco</b>.</p></div>
<div class="schedule">
<div class="day today"><b>📍 TODAY — Downtown LA</b><p>Arts District • 123 E 6th St<br>11AM – 10PM<br><b style="color:var(--red)">● Serving now — ~10 min wait</b></p></div>
<div class="day"><b>🌴 Friday — Silver Lake</b><p>Sunset Blvd Farmers Market<br>10AM – 8PM<br>Live music from 5PM</p></div>
<div class="day"><b>🎉 Saturday — Night Market</b><p>Grand Park • Free entry<br>4PM – Midnight<br>New limited taco drops!</p></div>
</div>
</section>
<section class="section" id="reviews" style="padding-top:0">
<div class="sec-head"><div><h2>PEOPLE ARE<br><span>LOSING IT</span> 🤯</h2></div><p><b>4.9 stars</b> from 2,400+ hungry humans. Here’s why they keep coming back for more.</p></div>
<div class="reviews">
<div class="review"><div class="stars">★★★★★</div><p>“The bulgogi taco rewired my brain. Kimchi slaw is genius — sweet, sour, crunchy, spicy all at once.”</p><small>— Maya R., Foodie</small></div>
<div class="review"><div class="stars">★★★★★</div><p>“I drove 40 minutes after one Instagram reel. Worth every mile. Ate three, ordered three more.”</p><small>— Jason K., Regular</small></div>
<div class="review"><div class="stars">★★★★★</div><p>“Best elote I’ve had outside Mexico City, with a Seoul twist I didn’t know I needed.”</p><small>— Sofia L., Chef</small></div>
</div>
</section>
<footer>
<h2>COME GET <span>LOCO</span> 🌮</h2>
<p>First time? Get the Loco Trio. Returning? Try Seoul Fire. Either way — bring an appetite and a friend.</p>
<button class="btn" onclick="window.scrollTo({top:0,behavior:'smooth'})">Order Ahead — Skip The Line</button>
<p style="margin-top:20px;font-size:13px">© 2026 Kimchi Loco • Seoul × Mexico • @kimchiloco • hello@kimchiloco.truck</p>
</footer>
<div class="cart" id="cart">
<div class="cart-head"><b>🧺 Your Order</b><span id="cartCount">0 items</span></div>
<div class="cart-items" id="cartItems"><div class="empty">Your cart is empty — add something delicious!</div></div>
<div class="cart-foot"><div class="total" id="total">$0</div><button class="checkout" onclick="checkout()">Pickup Order →</button></div>
</div>
<div class="toast" id="toast">Added!</div>
<script>
const MENU=[
{id:1,name:"Bulgogi Blaze Taco",desc:"Flame-grilled marinated beef, kimchi slaw, gochujang crema, cotija.",price:7,old:9,cat:"beef",emoji:"🌮",tag:"Bestseller",heat:"🌶️🌶️"},
{id:2,name:"Spicy Pork Seoul Taco",desc:"Gochujang-glazed pork, pickled onion, sesame, fresh cilantro.",price:7,cat:"pork",emoji:"🔥",tag:"Fan Favorite",heat:"🌶️🌶️🌶️"},
{id:3,name:"Chicken Gangnam",desc:"Charred chicken, Korean BBQ sauce, cucumber & kimchi crunch.",price:6.5,cat:"beef",emoji:"🍗",tag:"New",heat:"🌶️"},
{id:4,name:"Crispy Cauliflower",desc:"Gochujang-honey cauliflower, cashew, lime crema. Vegan & addictive.",price:6,cat:"veg",emoji:"🥦",tag:"Vegan",heat:"🌶️🌶️"},
{id:5,name:"Elote Loco",desc:"Grilled corn, cotija, tajín, gochujang mayo, lime. Messy in the best way.",price:5,cat:"sides",emoji:"🌽",tag:"Must Try",heat:"🌶️"},
{id:6,name:"Kimchi Loaded Fries",desc:"Fries, bulgogi crumble, kimchi, cheese sauce, scallion.",price:8,old:10,cat:"sides",emoji:"🍟",tag:"Shareable",heat:"🌶️🌶️"},
{id:7,name:"BBQ Short Rib Taco",desc:"Slow-braised short rib, ssamjang BBQ, onion & perilla.",price:8,cat:"beef",emoji:"🥩",tag:"Limited",heat:"🌶️"},
{id:8,name:"Ramen Taco Supreme",desc:"Crispy noodles, spicy pork, soft egg, nori crunch. Insane. Try it.",price:7.5,cat:"pork",emoji:"🍜",tag:"Limited",heat:"🌶️🌶️🌶️"}
];
let cart=[];
function render(filter="all"){
const g=document.getElementById('grid');
g.innerHTML=MENU.filter(m=>filter==="all"||m.cat===filter).map(m=>`
<div class="card">
<div class="card-top" style="background:${m.cat==='veg'?'#d9f7e8':m.cat==='sides'?'#fff1b8':'#ffe3d3'}"><span class="tag">${m.tag}</span>${m.emoji}<span class="heat">${m.heat}</span></div>
<div class="card-body"><h3>${m.name}</h3><p>${m.desc}</p>
<div class="card-row"><span class="price">${m.old?`<small>$${m.old}</small> `:""}$${m.price}</span><button class="add" onclick="addItem('${m.name}',${m.price})">+ Add</button></div></div>
</div>`).join("");
}
render();
document.querySelectorAll('.chip').forEach(c=>c.onclick=()=>{document.querySelectorAll('.chip').forEach(x=>x.classList.remove('active'));c.classList.add('active');render(c.dataset.f)});
function addItem(name,price){cart.push({name,price});updateCart();showToast(`✅ ${name} added!`);}
function removeItem(i){cart.splice(i,1);updateCart();}
function updateCart(){
const total=cart.reduce((s,i)=>s+i.price,0);
document.getElementById('total').textContent="$"+total.toFixed(2);
document.getElementById('cartCount').textContent=cart.length+" items";
document.getElementById('navCount').textContent=cart.length;
document.getElementById('cartItems').innerHTML=cart.length?cart.map((i,idx)=>`<div><span>${i.name}</span><span>$${i.price} <button onclick="removeItem(${idx})">×</button></span></div>`).join(""):`<div class="empty">Your cart is empty — add something delicious!</div>`;
}
function checkout(){
if(!cart.length){showToast("🛒 Add a taco first!");return;}
const total=document.getElementById('total').textContent;
showToast(`🎉 Order placed! ${total} — Ready in 15 min at Downtown LA`);
cart=[];updateCart();
}
function setHeat(btn,label){
document.querySelectorAll('.spice button').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
const msgs={"Mild 😊":"Sweet & smoky, no burn. Great for kids.","Loco 🌶️🌶️":"Sweet heat, big flavour. Perfect for first-timers.","Seoul Fire 🔥🔥🔥":"Warning: real fire. Sign the waiver (not really)."};
document.getElementById('heatText').innerHTML=`<b>Your vibe: ${label}</b> — ${msgs[label]}`;
showToast("🌶️ Heat level updated!");
}
let toastTimer;
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),2600);}
updateCart();
</script>
</body>
</html>