Models 44

Muse Ember

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
23.5 s
Cost
$0.0065
Output tokens
13,001
Spent thinking
2,224 tokens
Speed
607.1 tok/s
Console errors
0
First token after
2.0 s
First visible text after
8.0 s
Prompt tokens
379
Code size
33.6 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"xhigh"}
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 · 479 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 — Korean Tacos That Hit Different</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#E8321E;--orange:#FF8A00;--yellow:#FFC928;--cream:#FFF7E8;--black:#111110;--green:#147A4A;--pink:#FFD9D1}
html{scroll-behavior:smooth}
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;border:none}
.topbar{background:var(--black);color:#fff;font-size:12px;letter-spacing:.08em;font-weight:700;text-transform:uppercase;padding:9px 16px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center}
.topbar span{color:var(--yellow)}
nav{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--black);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:46px;height:46px;background:var(--red);border:2.5px solid var(--black);border-radius:12px;display:grid;place-items:center;font-size:26px;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--black)}
.logo-text{line-height:.9}
.logo-text b{font-family:Impact,'Arial Black',sans-serif;font-size:26px;letter-spacing:.02em;display:block}
.logo-text small{font-size:10px;letter-spacing:.28em;font-weight:900;color:var(--red)}
.nav-links{display:flex;gap:22px;font-weight:800;font-size:13px;letter-spacing:.06em}
.nav-links a:hover{color:var(--red)}
.order-btn{background:var(--black);color:#fff;padding:11px 18px;border-radius:999px;font-weight:900;font-size:13px;display:flex;gap:8px;align-items:center;box-shadow:3px 3px 0 var(--red)}
.order-btn:hover{transform:translateY(-1px)}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}
/* HERO */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:38px 0 28px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--black);padding:7px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em;box-shadow:3px 3px 0 var(--black)}
.hero h1{font-family:Impact,'Arial Black',sans-serif;font-size:76px;line-height:.88;letter-spacing:-.01em;text-transform:uppercase;margin:18px 0 16px}
.hero h1 em{font-style:normal;color:var(--red);position:relative}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2.5px var(--black)}
.hero p.lead{font-size:18px;line-height:1.55;color:#3a3632;max-width:540px}
.hero p.lead b{color:var(--black)}
.ctas{display:flex;gap:12px;margin:22px 0 16px;flex-wrap:wrap}
.btn-red{background:var(--red);color:#fff;padding:15px 24px;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:.04em;border:2px solid var(--black);box-shadow:4px 4px 0 var(--black);display:inline-flex;gap:8px}
.btn-red:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--black)}
.btn-white{background:#fff;padding:15px 22px;border-radius:999px;font-weight:900;font-size:14px;border:2px solid var(--black);box-shadow:4px 4px 0 var(--black)}
.trust{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;flex-wrap:wrap}
.stars{color:var(--orange);font-size:16px;letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.stat{background:#fff;border:2px solid var(--black);border-radius:16px;padding:12px}
.stat b{font-size:22px;display:block}
.stat span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#666}
.scarcity{margin-top:14px;background:#111;color:#fff;border-radius:16px;padding:14px 16px}
.scarcity-top{display:flex;justify-content:space-between;font-size:12px;font-weight:900;letter-spacing:.06em}
.scarcity-top span:last-child{color:var(--yellow)}
.bar{height:10px;background:#333;border-radius:999px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:72%;background:linear-gradient(90deg,var(--orange),var(--red));border-radius:999px}
.scarcity p{font-size:12px;color:#ccc;margin-top:8px}
/* Visual */
.visual{position:relative}
.visual-bg{background:var(--yellow);border:3px solid var(--black);border-radius:32px;padding:28px 22px 22px;box-shadow:8px 8px 0 var(--black);position:relative;overflow:hidden}
.visual-bg:before{content:"";position:absolute;width:340px;height:340px;background:#fff;border-radius:50%;right:-70px;top:-70px;opacity:.9}
.visual-bg:after{content:"SEOUL × CDMX";position:absolute;left:18px;top:16px;font-family:Impact,sans-serif;font-size:12px;letter-spacing:.24em;transform:rotate(-3deg)}
.taco-wrap{position:relative;z-index:2;text-align:center;padding-top:28px}
.taco-stage{background:#fff;border:3px solid var(--black);border-radius:50%;width:340px;height:340px;margin:0 auto;display:grid;place-items:center;position:relative;box-shadow:6px 6px 0 var(--black)}
.taco-stage .big-taco{font-size:168px;line-height:1;filter:drop-shadow(0 10px 0 rgba(0,0,0,.12));animation:float 3.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.chip{position:absolute;background:#fff;border:2px solid var(--black);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900;box-shadow:3px 3px 0 var(--black);z-index:3}
.chip.c1{left:8px;top:120px;transform:rotate(-8deg)}
.chip.c2{right:8px;top:150px;transform:rotate(7deg);background:var(--red);color:#fff}
.chip.c3{left:26px;bottom:92px;transform:rotate(5deg);background:var(--black);color:var(--yellow)}
.badge-spin{position:absolute;right:18px;top:18px;width:104px;height:104px;z-index:4}
.badge-spin svg{width:100%;height:100%;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge-spin text{font-size:9.5px;font-weight:900;letter-spacing:2.2px;fill:var(--black)}
.badge-center{position:absolute;inset:0;display:grid;place-items:center;font-size:26px}
.now-card{position:absolute;left:14px;right:14px;bottom:14px;background:var(--black);color:#fff;border-radius:18px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:4}
.now-card b{font-size:13px;letter-spacing:.05em}
.now-card p{font-size:12px;color:#bbb;margin-top:2px}
.live{display:flex;align-items:center;gap:7px;background:#1f4d2e;color:#7CFF9A;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}
.live i{width:8px;height:8px;background:#2EFF6B;border-radius:50%;display:block;animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,255,107,.6)}100%{box-shadow:0 0 0 9px rgba(46,255,107,0)}}
/* ticker */
.ticker{background:var(--red);color:#fff;border-top:3px solid var(--black);border-bottom:3px solid var(--black);overflow:hidden;padding:11px 0;transform:rotate(-.6deg) scale(1.02)}
.ticker-track{display:flex;gap:28px;white-space:nowrap;font-family:Impact,sans-serif;font-size:18px;letter-spacing:.08em;animation:marquee 18s linear infinite;width:max-content}
@keyframes marquee{to{transform:translateX(-50%)}}
/* sections */
.section{padding:56px 0 20px}
.kicker{font-size:12px;font-weight:900;letter-spacing:.22em;color:var(--red);text-transform:uppercase}
.section h2{font-family:Impact,'Arial Black',sans-serif;font-size:48px;line-height:.95;text-transform:uppercase;margin:8px 0 10px}
.section h2 span{color:var(--red)}
.sub{color:#555;font-size:16px;line-height:1.5;max-width:640px}
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:#fff;border:2px solid var(--black);padding:9px 14px;border-radius:999px;font-weight:900;font-size:12px}
.filters button.active{background:var(--black);color:#fff}
.picker{background:var(--black);color:#fff;padding:13px 18px;border-radius:999px;font-weight:900;font-size:13px;box-shadow:4px 4px 0 var(--red)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.card{background:#fff;border:2.5px solid var(--black);border-radius:22px;overflow:hidden;box-shadow:5px 5px 0 var(--black);transition:.2s}
.card:hover{transform:translateY(-4px)}
.card.highlight{outline:4px solid var(--yellow);transform:scale(1.02)}
.card-top{height:150px;display:grid;place-items:center;font-size:82px;position:relative;border-bottom:2.5px solid var(--black)}
.card-top .tag{position:absolute;top:12px;left:12px;background:var(--yellow);border:2px solid var(--black);padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em}
.card-top .price{position:absolute;top:12px;right:12px;background:#fff;border:2px solid var(--black);padding:6px 10px;border-radius:999px;font-weight:900}
.card-body{padding:16px}
.card-body h3{font-size:20px;line-height:1.1}
.card-body p{font-size:13.5px;line-height:1.5;color:#555;margin:8px 0 12px}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.heat{font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--red)}
.add{background:var(--red);color:#fff;padding:10px 14px;border-radius:999px;font-weight:900;font-size:13px;border:2px solid var(--black)}
.add:hover{background:var(--black)}
/* builder */
.builder{background:var(--black);color:#fff;border-radius:28px;padding:26px;margin-top:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;border:3px solid var(--black);box-shadow:8px 8px 0 var(--red)}
.builder h3{font-family:Impact,sans-serif;font-size:32px;line-height:.95;text-transform:uppercase}
.builder h3 span{color:var(--yellow)}
.builder label{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#aaa;display:block;margin:16px 0 8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opts button{background:#222;color:#fff;border:1.5px solid #444;padding:9px 12px;border-radius:999px;font-weight:800;font-size:13px}
.opts button.active{background:var(--yellow);color:#111;border-color:var(--yellow)}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
.checks{display:flex;gap:8px;flex-wrap:wrap}
.checks button{background:#222;color:#fff;border:1.5px solid #444;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:800}
.checks button.active{background:var(--red);border-color:var(--red)}
.preview{background:var(--cream);color:#111;border-radius:22px;padding:20px;text-align:center;border:2px solid #fff}
.preview .emoji{font-size:110px;line-height:1}
.preview .name{font-family:Impact,sans-serif;font-size:24px;margin-top:10px}
.preview .desc{font-size:13px;color:#555;line-height:1.5;margin:6px 0 12px}
.preview-price{font-size:28px;font-weight:900}
.preview-price small{font-size:12px;color:#777}
.builder .add{width:100%;margin-top:14px;padding:14px}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.pillar{background:#fff;border:2.5px solid var(--black);border-radius:20px;padding:20px;box-shadow:5px 5px 0 var(--black)}
.pillar .icon{font-size:34px}
.pillar h4{font-size:18px;margin:10px 0 6px}
.pillar p{font-size:13.5px;line-height:1.5;color:#555}
/* find */
.find{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.days{background:#fff;border:2.5px solid var(--black);border-radius:22px;overflow:hidden;box-shadow:5px 5px 0 var(--black)}
.day{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1.5px solid #eee;cursor:pointer}
.day:hover,.day.active{background:#FFF1C6}
.day b{font-size:14px}
.day span{font-size:12px;color:#666;text-align:right}
.day .dot{color:var(--red)}
.map{background:var(--yellow);border:2.5px solid var(--black);border-radius:22px;padding:20px;box-shadow:5px 5px 0 var(--black);position:relative;overflow:hidden;min-height:340px}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:36px 36px}
.pin{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;z-index:2}
.pin .truck{font-size:62px;animation:float 2.5s infinite}
.pin .ring{width:74px;height:74px;background:var(--red);border:3px solid #fff;border-radius:50%;display:grid;place-items:center;margin:-18px auto 0;box-shadow:0 0 0 12px rgba(232,50,30,.25);font-size:28px}
.map-card{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border:2px solid var(--black);border-radius:16px;padding:14px;z-index:3}
.map-card b{font-size:15px}
.map-card p{font-size:13px;color:#555;margin-top:4px;line-height:1.4}
/* reviews */
.review-box{background:#fff;border:2.5px solid var(--black);border-radius:24px;padding:26px;box-shadow:6px 6px 0 var(--black);margin-top:22px;text-align:center}
.review-box .stars{font-size:22px}
.review-box blockquote{font-size:24px;line-height:1.35;font-weight:800;max-width:760px;margin:12px auto}
.review-box cite{font-style:normal;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#777}
.dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.dots i{width:9px;height:9px;border-radius:50%;background:#ddd;display:block}
.dots i.active{background:var(--red)}
/* footer */
footer{background:var(--black);color:#fff;margin-top:56px;padding:36px 20px 28px;border-top:6px solid var(--red)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot h3{font-family:Impact,sans-serif;font-size:42px;line-height:.9;text-transform:uppercase}
.foot h3 span{color:var(--yellow)}
.foot p{color:#aaa;font-size:13px;margin-top:8px}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,80px);background:var(--black);color:#fff;padding:13px 18px;border-radius:999px;font-weight:900;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:.3s;z-index:99;border:2px solid #fff;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
@media(max-width:900px){
.hero{grid-template-columns:1fr;padding-top:22px}
.hero h1{font-size:56px}
.grid,.pillars{grid-template-columns:1fr 1fr}
.builder,.find{grid-template-columns:1fr}
.nav-links{display:none}
.taco-stage{width:300px;height:300px}
}
@media(max-width:560px){
.hero h1{font-size:44px}
.grid,.pillars{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr 1fr}
.stat b{font-size:17px}
.taco-stage{width:270px;height:270px}
.taco-stage .big-taco{font-size:130px}
.section h2{font-size:36px}
.chip.c1{left:2px}.chip.c2{right:2px}
.review-box blockquote{font-size:19px}
}
</style>
</head>
<body>
<div class="topbar"><div>🚚 <span>NOW SERVING</span> DTLA &nbsp;•&nbsp; Open til 9PM &nbsp;•&nbsp; <span>22 KIMCHI TACOS LEFT TODAY</span></div><div id="countdown">Closes in --:--</div></div>
<nav>
  <a class="logo" href="#"><div class="logo-mark">🌮</div><div class="logo-text"><b>KIMCHI LOCO</b><small>SEOUL ✕ CDMX</small></div></a>
  <div class="nav-links"><a href="#menu">MENU</a><a href="#build">BUILD YOURS</a><a href="#story">WHY LOCO</a><a href="#find">FIND US</a><a href="#reviews">REVIEWS</a></div>
  <button class="order-btn" onclick="showTray()">🧺 Tray <span id="trayCount">0</span> • $<span id="trayTotal">0.00</span></button>
</nav>

<div class="wrap">
<header class="hero">
  <div>
    <div class="pill">🔥 SEOUL MEETS MEXICO CITY — FRESH OFF THE GRILL</div>
    <h1>Tacos that<br><em>hit</em> <span class="outline">different.</span></h1>
    <p class="lead">Double-marinated <b>bulgogi</b>, small-batch <b>fermented kimchi</b>, crispy gochujang chicken &amp; fire-kissed tortillas. One bite and you’ll get why people queue for an hour.</p>
    <div class="ctas"><a href="#menu" class="btn-red">SEE THE LOCO MENU ↓</a><a href="#find" class="btn-white">📍 FIND THE TRUCK</a></div>
    <div class="trust"><span class="stars">★★★★★</span><span><b>4.9</b> • 2,847 reviews</span><span>•</span><span>Sold out 6 days straight</span><span>•</span><span>🌱 Vegan options</span></div>
    <div class="stats">
      <div class="stat"><b>42k+</b><span>Tacos served</span></div>
      <div class="stat"><b>80</b><span>Kimchi batches / day</span></div>
      <div class="stat"><b>12 min</b><span>Avg. wait</span></div>
    </div>
    <div class="scarcity">
      <div class="scarcity-top"><span>🔥 TODAY’S KIMCHI — ALMOST GONE</span><span>58 / 80 CLAIMED</span></div>
      <div class="bar"><i></i></div>
      <p>We ferment in-house every morning. When it’s gone, it’s gone — no shortcuts.</p>
    </div>
  </div>

  <div class="visual">
    <div class="visual-bg">
      <div class="badge-spin"><svg viewBox="0 0 100 100"><defs><path id="circ" d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0"/></defs><text><textPath href="#circ">FRESH KIMCHI DAILY • KIMCHI LOCO • SEOUL × CDMX • </textPath></text></svg><div class="badge-center">🌶️</div></div>
      <div class="taco-wrap"><div class="taco-stage"><div class="big-taco">🌮</div></div></div>
      <div class="chip c1">🥬 Kimchi Slaw</div><div class="chip c2">🔥 Gochujang Crema</div><div class="chip c3">🥩 Bulgogi + Sesame</div>
      <div class="now-card"><div><b>📍 GRAND PARK, DTLA</b><p>200 N Grand Ave • Today 11AM–9PM</p></div><div class="live"><i></i> LIVE NOW</div></div>
    </div>
  </div>
</header>
</div>

<div class="ticker"><div class="ticker-track"><span>BULGOGI 🌮 KIMCHI 🌶️ GOCHUJANG 🔥 SESAME ✨ CARNITAS 🥬 KIMBAP 🍗 FRIED CHICKEN 🌯 LOCO 100% ✦&nbsp;</span><span>BULGOGI 🌮 KIMCHI 🌶️ GOCHUJANG 🔥 SESAME ✨ CARNITAS 🥬 KIMBAP 🍗 FRIED CHICKEN 🌯 LOCO 100% ✦&nbsp;</span></div></div>

<div class="wrap">
<section class="section" id="menu">
  <div class="menu-head">
    <div><div class="kicker">The Loco Lineup</div><h2>Pick your <span>poison.</span></h2><p class="sub">Every taco: warm corn tortilla, house kimchi slaw, gochujang crema, cilantro, sesame &amp; lime. Made to order, torched to finish.</p></div>
    <div style="display:flex;flex-direction:column;gap:12px;align-items:flex-end">
      <button class="picker" onclick="locoPicker()">🎲 CAN’T DECIDE? LOCO PICKER</button>
      <div class="filters" id="filters">
        <button class="active" data-f="all">All</button><button data-f="bestseller">Bestsellers</button><button data-f="spicy">Spicy 🌶️</button><button data-f="veg">Veg / Vegan</button><button data-f="breakfast">Breakfast</button>
      </div>
      <div id="pickerResult" style="font-weight:900;font-size:13px;color:var(--red);min-height:18px"></div>
    </div>
  </div>

  <div class="grid" id="menuGrid">
    <article class="card" data-cat="bestseller spicy" data-name="Seoul Bulgogi Taco" data-price="12">
      <div class="card-top" style="background:#FFD9D1">🌮<span class="tag">★ BESTSELLER</span><span class="price">$12</span></div>
      <div class="card-body"><h3>Seoul Bulgogi Taco</h3><p>Double-marinated bulgogi, kimchi slaw, gochujang crema, sesame, pickled radish. Sweet, smoky, spicy.</p><div class="meta"><span class="heat">🌶️🌶️ • MEDIUM-HOT</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
    <article class="card" data-cat="bestseller" data-name="Kimchi Carnitas Loco" data-price="13">
      <div class="card-top" style="background:#FFE9A8">🥙<span class="tag">STAFF FAVE</span><span class="price">$13</span></div>
      <div class="card-body"><h3>Kimchi Carnitas Loco</h3><p>Slow-braised pork shoulder crisped on the flat-top, fermented kimchi, salsa verde, cotija.</p><div class="meta"><span class="heat">🌶️ • MILD</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
    <article class="card" data-cat="spicy bestseller" data-name="Gochujang Fried Chicken" data-price="13.5">
      <div class="card-top" style="background:#FFC2B3">🍗<span class="tag">🔥 FAMOUS</span><span class="price">$13.50</span></div>
      <div class="card-body"><h3>Gochujang Fried Chicken</h3><p>Crispy Korean fried chicken tossed in gochujang glaze, slaw, ranch crema. Loud crunch, real heat.</p><div class="meta"><span class="heat">🌶️🌶️🌶️ • LOCO HOT</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
    <article class="card" data-cat="veg" data-name="Bibimbap Veggie Taco" data-price="11">
      <div class="card-top" style="background:#CDEBD8">🥗<span class="tag">🌱 VEGAN</span><span class="price">$11</span></div>
      <div class="card-body"><h3>Bibimbap Veggie Taco</h3><p>Bulgogi mushrooms, carrot, spinach, eggplant, kimchi, sesame gochujang. Colourful &amp; craveable.</p><div class="meta"><span class="heat">🌶️🌶️ • MEDIUM</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
    <article class="card" data-cat="spicy" data-name="Spicy Tuna Kimbap Taco" data-price="12.5">
      <div class="card-top" style="background:#DDE7FF">🍣<span class="tag">NEW</span><span class="price">$12.50</span></div>
      <div class="card-body"><h3>Spicy Tuna Kimbap Taco</h3><p>Sushi-grade tuna, sriracha mayo, cucumber, tobiko, nori crunch, gochugaru dust.</p><div class="meta"><span class="heat">🌶️🌶️ • MEDIUM-HOT</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
    <article class="card" data-cat="breakfast spicy" data-name="Spam & Egg Breakfast Taco" data-price="10">
      <div class="card-top" style="background:#FFF0B8">🍳<span class="tag">⏰ 11AM ONLY</span><span class="price">$10</span></div>
      <div class="card-body"><h3>Spam &amp; Egg Breakfast Taco</h3><p>Caramelised Spam, fluffy egg, kimchi, cheese, hot honey hash. Morning upgrade unlocked.</p><div class="meta"><span class="heat">🌶️🌶️ • MEDIUM</span><button class="add" onclick="addToTray(this)">+ ADD</button></div></div>
    </article>
  </div>

  <!-- BUILDER -->
  <div class="builder" id="build">
    <div>
      <div class="kicker" style="color:var(--yellow)">Build Your Own</div>
      <h3>Make it <span>loco.</span></h3>
      <p style="color:#bbb;font-size:14px;line-height:1.5;margin-top:8px">Choose your protein &amp; heat. We’ll price it live — and yes, extra kimchi is always worth it.</p>
      <label>1 — Protein</label>
      <div class="opts" id="proteinOpts">
        <button class="active" data-p="Bulgogi" data-price="12">🥩 Bulgogi $12</button>
        <button data-p="Carnitas" data-price="13">🐷 Carnitas $13</button>
        <button data-p="Fried Chicken" data-price="13.5">🍗 Chicken $13.50</button>
        <button data-p="Mushroom Bibimbap" data-price="11">🍄 Mushroom $11</button>
      </div>
      <label>2 — Heat Level: <span id="heatLabel" style="color:#fff">🌶️🌶️ Medium-Hot</span></label>
      <input type="range" id="heatRange" min="1" max="5" value="3">
      <label>3 — Add Extras</label>
      <div class="checks" id="extras">
        <button data-x="Extra Kimchi" data-price="1.5">+ Extra Kimchi $1.50</button>
        <button data-x="Cheese" data-price="1">+ Cheese $1</button>
        <button data-x="Fried Egg" data-price="2">+ Fried Egg $2</button>
        <button data-x="Avocado" data-price="2.5">+ Avocado $2.50</button>
      </div>
      <label>4 — How many?</label>
      <div class="opts"><button onclick="setQty(-1)">−</button><button id="qtyBtn" style="background:#fff;color:#111;min-width:56px">1</button><button onclick="setQty(1)">+</button></div>
    </div>
    <div class="preview">
      <div style="font-size:11px;font-weight:900;letter-spacing:.18em">YOUR CREATION</div>
      <div class="emoji" id="prevEmoji">🌮</div>
      <div class="name" id="prevName">Bulgogi Loco Taco</div>
      <div class="desc" id="prevDesc">Bulgogi • kimchi slaw • gochujang crema • sesame • lime</div>
      <div id="prevHeat" style="font-weight:900;color:var(--red)">🌶️🌶️🌶️ 🌶️🌶️</div>
      <div class="preview-price">$<span id="prevPrice">12.00</span> <small>per taco</small></div>
      <button class="add" onclick="addCustom()">ADD MY CREATION TO TRAY →</button>
      <p style="font-size:11px;color:#888;margin-top:8px">Ready in ~8 min • Pickup at the truck window</p>
    </div>
  </div>
</section>

<section class="section" id="story">
  <div class="kicker">Why Loco</div><h2>Not fusion. <span>Fire.</span></h2>
  <div class="pillars">
    <div class="pillar"><div class="icon">🥬</div><h4>Kimchi made at 5AM</h4><p>We ferment our own napa cabbage, daikon &amp; gochugaru every morning. Tangy, crunchy, alive — never from a tub.</p></div>
    <div class="pillar"><div class="icon">🔥</div><h4>Tortillas kissed on steel</h4><p>Stone-ground corn tortillas puffed &amp; charred to order. No heat lamps. No soggy tacos. Ever.</p></div>
    <div class="pillar"><div class="icon">🧪</div><h4>Sauces from scratch</h4><p>Gochujang crema, bulgogi glaze, hot honey — small batches, bold flavour, balanced heat.</p></div>
  </div>
</section>

<section class="section" id="find">
  <div class="kicker">Find the truck</div><h2>Follow the <span>smell.</span></h2>
  <p class="sub">Tap a day — we move daily so you never get bored. Follow <b>@kimchiloco.truck</b> for live drops &amp; secret menu alerts.</p>
  <div class="find">
    <div class="days" id="days"></div>
    <div class="map">
      <div class="map-grid"></div>
      <div class="pin"><div class="truck">🚚</div><div class="ring">📍</div></div>
      <div class="map-card"><b id="mapTitle">Grand Park, DTLA</b><p id="mapAddr">200 N Grand Ave, Los Angeles<br>11:00 AM – 9:00 PM • Walk-ins welcome • <span id="mapNote">Look for the red truck &amp; yellow taco</span></p></div>
    </div>
  </div>
</section>

<section class="section" id="reviews">
  <div style="text-align:center"><div class="kicker">Real cravings</div><h2>People are <span>obsessed.</span></h2></div>
  <div class="review-box">
    <div class="stars">★★★★★</div>
    <blockquote id="quote">“I drove 40 minutes for the bulgogi taco. I would drive 40 more. The kimchi crunch + gochujang crema is genius.”</blockquote>
    <cite id="cite">— Maya R., Koreatown • Verified Loco Fan</cite>
    <div class="dots" id="dots"></div>
  </div>
</section>
</div>

<footer>
  <div class="foot wrap" style="padding:0">
    <div><h3>Come <span>hungry.</span><br>Leave loco.</h3><p>@kimchiloco.truck • hello@kimchiloco.com • Catering &amp; events: book 2 weeks ahead</p></div>
    <div style="display:flex;gap:10px;flex-wrap:wrap"><a href="#menu" class="btn-red">ORDER AHEAD</a><a href="#find" class="btn-white">SEE SCHEDULE</a></div>
  </div>
  <p style="text-align:center;color:#666;font-size:12px;margin-top:24px">© 2025 Kimchi Loco • Seoul × CDMX • Made with 🌶️ in Los Angeles</p>
</footer>

<div class="toast" id="toast">Added to tray!</div>

<script>
let tray=0,total=0;
function fmt(n){return n.toFixed(2)}
function toast(msg){let t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2600)}
function addToTray(btn){
  let card=btn.closest('.card');
  let name=card.dataset.name, price=parseFloat(card.dataset.price);
  tray++; total+=price;
  document.getElementById('trayCount').textContent=tray;
  document.getElementById('trayTotal').textContent=fmt(total);
  toast(`✅ ${name} added — $${fmt(price)} • Tray $${fmt(total)}`);
}
function showTray(){
  if(tray===0){toast('🧺 Your tray is empty — add a taco! 🌮');return}
  toast(`🧺 ${tray} item(s) • Total $${fmt(total)} • Show this at the truck window! 🔥`);
}
// filters
document.querySelectorAll('#filters button').forEach(b=>{
  b.onclick=()=>{
    document.querySelectorAll('#filters button').forEach(x=>x.classList.remove('active'));
    b.classList.add('active');
    let f=b.dataset.f;
    document.querySelectorAll('#menuGrid .card').forEach(c=>{
      c.style.display=(f==='all'||c.dataset.cat.includes(f))?'block':'none';
    })
  }
});
// picker
function locoPicker(){
  let cards=[...document.querySelectorAll('#menuGrid .card')];
  cards.forEach(c=>c.classList.remove('highlight'));
  let pick=cards[Math.floor(Math.random()*cards.length)];
  pick.scrollIntoView({behavior:'smooth',block:'center'});
  pick.classList.add('highlight');
  document.getElementById('pickerResult').textContent=`🎲 The Loco Pick: ${pick.dataset.name} — $${pick.dataset.price} • Add it!`;
  toast(`🎲 Loco Picker says: ${pick.dataset.name}!`);
}
// builder
let protein={name:'Bulgogi',price:12}, extras=new Set(), qty=1;
let heatNames=['','🌶️ Mild','🌶️🌶️ Medium','🌶️🌶️🌶️ Medium-Hot','🌶️🌶️🌶️🌶️ Hot','🌶️🌶️🌶️🌶️🌶️ LOCO!'];
function updatePreview(){
  let extraList=[...extras];
  let price=protein.price + extraList.reduce((s,e)=>s+e.price,0);
  document.getElementById('prevName').textContent=protein.name+' Loco Taco';
  document.getElementById('prevDesc').textContent=protein.name+' • kimchi slaw • gochujang crema • sesame • lime'+(extraList.length?' + '+extraList.map(e=>e.name).join(', '):'');
  document.getElementById('prevPrice').textContent=fmt(price);
  document.getElementById('qtyBtn').textContent=qty;
  let h=document.getElementById('heatRange').value;
  document.getElementById('heatLabel').textContent=heatNames[h];
  document.getElementById('prevHeat').textContent='🌶️'.repeat(h)+' '+'☆'.repeat(5-h);
  document.getElementById('prevEmoji').textContent= protein.name.includes('Mushroom')?'🥗': protein.name.includes('Chicken')?'🍗':'🌮';
}
document.querySelectorAll('#proteinOpts button').forEach(b=>{
  b.onclick=()=>{document.querySelectorAll('#proteinOpts button').forEach(x=>x.classList.remove('active'));b.classList.add('active');protein={name:b.dataset.p,price:parseFloat(b.dataset.price)};updatePreview()}
});
document.querySelectorAll('#extras button').forEach(b=>{
  b.onclick=()=>{
    let key=b.dataset.x;
    if(extras.has(key)){extras.delete(key);b.classList.remove('active')}else{extras.add(key);b.classList.add('active')}
    // rebuild set with objects
    extras=new Set([...extras].map(k=>{let el=document.querySelector(`#extras button[data-x="${k}"]`);return{name:k,price:parseFloat(el.dataset.price)}}).map(o=>o.name));
    // simpler: store objects in array via dataset lookup in update - patch:
    // convert back: keep as names, updatePreview will lookup price
    // monkey patch update to lookup
    updatePreview2();
  }
});
function updatePreview2(){
  let extraArr=[...extras].map(name=>{let el=document.querySelector(`#extras button[data-x="${name}"]`);return{name,price:parseFloat(el.dataset.price)}});
  let price=protein.price+extraArr.reduce((s,e)=>s+e.price,0);
  document.getElementById('prevName').textContent=protein.name+' Loco Taco';
  document.getElementById('prevDesc').textContent=protein.name+' • kimchi slaw • gochujang crema • sesame • lime'+(extraArr.length?' + '+extraArr.map(e=>e.name).join(', '):'');
  document.getElementById('prevPrice').textContent=fmt(price);
  document.getElementById('qtyBtn').textContent=qty;
  let h=document.getElementById('heatRange').value;
  document.getElementById('heatLabel').textContent=heatNames[h];
  document.getElementById('prevHeat').textContent='🌶️'.repeat(h)+' '+'☆'.repeat(5-h);
}
document.getElementById('heatRange').oninput=updatePreview2;
function setQty(d){qty=Math.max(1,Math.min(10,qty+d));updatePreview2()}
function addCustom(){
  let extraArr=[...extras].map(name=>{let el=document.querySelector(`#extras button[data-x="${name}"]`);return{name,price:parseFloat(el.dataset.price)}});
  let price=(protein.price+extraArr.reduce((s,e)=>s+e.price,0))*qty;
  tray+=qty; total+=price;
  document.getElementById('trayCount').textContent=tray;
  document.getElementById('trayTotal').textContent=fmt(total);
  toast(`✅ ${qty}× ${protein.name} Loco Taco added • $${fmt(price)}`);
}
updatePreview2();
// schedule
const sched=[
 {d:'Monday',t:'Kimchi Making Day',a:'Kitchen — closed to ferment',h:'Closed',n:'Fresh batch for tomorrow!'},
 {d:'Tuesday',t:'Grand Park, DTLA',a:'200 N Grand Ave, Los Angeles',h:'11AM–9PM',n:'Look for the red truck & yellow taco'},
 {d:'Wednesday',t:'Koreatown',a:'8th & Western, Los Angeles',h:'11AM–8PM',n:'Near the night market lights'},
 {d:'Thursday',t:'Santa Monica',a:'3rd St Promenade, Santa Monica',h:'11AM–8PM',n:'Beach + tacos = perfect day'},
 {d:'Friday',t:'Long Beach Night Mkt',a:'Downtown Long Beach',h:'5PM–10PM',n:'Secret menu after 8PM!'},
 {d:'Saturday',t:'Silver Lake',a:'Sunset Junction, Silver Lake',h:'10AM–9PM',n:'Breakfast tacos til noon'},
 {d:'Sunday',t:'Melrose Trading Post',a:'Melrose Ave, Los Angeles',h:'10AM–6PM',n:'Brunch loco style'},
];
let daysEl=document.getElementById('days');
sched.forEach((s,i)=>{
  let div=document.createElement('div');div.className='day'+(i===1?' active':'');
  div.innerHTML=`<b>${s.d} <span class="dot">${i===1?'● TODAY':''}</span></b><span>${s.t}<br>${s.h}</span>`;
  div.onclick=()=>{
    document.querySelectorAll('.day').forEach(x=>x.classList.remove('active'));div.classList.add('active');
    document.getElementById('mapTitle').textContent=s.t;
    document.getElementById('mapAddr').innerHTML=`${s.a}<br>${s.h} • Walk-ins welcome • <span id="mapNote">${s.n}</span>`;
  };
  daysEl.appendChild(div);
});
// reviews
const reviews=[
 {q:'“I drove 40 minutes for the bulgogi taco. I would drive 40 more. The kimchi crunch + gochujang crema is genius.”',c:'— Maya R., Koreatown • Verified Loco Fan'},
 {q:'“The fried chicken taco ruined all other tacos for me. Crispy, spicy, juicy — insane.”',c:'— Jordan L., DTLA • Eats here 3× a week'},
 {q:'“Vegan bibimbap taco is the best vegan taco in LA. No debate. My non-vegan friends fight me for it.”',c:'— Sofia K., Silver Lake • Plant-based & proud'},
];
let ri=0;
let dotsEl=document.getElementById('dots');
reviews.forEach((_,i)=>{let d=document.createElement('i');if(i===0)d.className='active';dotsEl.appendChild(d)});
setInterval(()=>{
  ri=(ri+1)%reviews.length;
  document.getElementById('quote').textContent=reviews[ri].q;
  document.getElementById('cite').textContent=reviews[ri].c;
  dotsEl.querySelectorAll('i').forEach((d,i)=>d.classList.toggle('active',i===ri));
},4000);
// countdown to 9pm
function tick(){
  let now=new Date();let close=new Date();close.setHours(21,0,0,0);
  if(now>close){document.getElementById('countdown').textContent='Back tomorrow 11AM';return}
  let diff=close-now;let h=Math.floor(diff/3600000),m=Math.floor(diff%3600000/60000);
  document.getElementById('countdown').textContent=`Closes in ${h}h ${m}m`;
}
tick();setInterval(tick,30000);
</script>
</body>
</html>
Reasoning trace (2,224 tokens)
Designing a self-contained responsive HTML demo for a Korean taco truck with inline CSS and JS, using system fonts and no external resources.Adding inline SVG and CSS visuals plus interactive menu, filters, and scarcity elements with a bold Korean street-food palette.Extending the layout with SVG taco visuals, interactive cart, filters, schedule, and responsive styling.