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
- 19.3 s
- Cost
- $0.0057
- Output tokens
- 11,290
- Spent thinking
- 808 tokens
- Speed
- 680.7 tok/s
- Console errors
- 0
- First token after
- 2.8 s
- First visible text after
- 4.0 s
- Prompt tokens
- 379
- Code size
- 32.4 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"medium"}- 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 · 388 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 Food Truck | Seoul Meets Mexico</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#ff2e2e;--yellow:#ffc700;--black:#111111;--cream:#fff8ec;--teal:#00b8a9;--pink:#ff6b9d}
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{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none}
.topbar{background:var(--black);color:#fff;text-align:center;padding:9px 12px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.topbar span{color:var(--yellow)}
header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:3px solid var(--black);display:flex;align-items:center;justify-content:space-between;padding:14px 5%;gap:16px}
.logo{display:flex;align-items:center;gap:11px}
.logo-badge{width:52px;height:52px;background:var(--red);border:3px solid var(--black);border-radius:50%;display:grid;place-items:center;font-size:28px;box-shadow:4px 4px 0 var(--black);transform:rotate(-6deg)}
.logo b{font-size:26px;line-height:.85;letter-spacing:-.04em;text-transform:uppercase}
.logo b em{font-style:normal;color:var(--red)}
.logo small{display:block;font-size:10px;letter-spacing:.22em;font-weight:900;margin-top:3px}
nav{display:flex;gap:22px;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
nav a:hover{color:var(--red);text-decoration:underline;text-underline-offset:4px}
.nav-actions{display:flex;align-items:center;gap:10px}
.pill{background:#fff;border:2px solid var(--black);padding:8px 12px;border-radius:999px;font-weight:900;font-size:12px;box-shadow:3px 3px 0 var(--black)}
.pill i{color:#00a651;font-style:normal}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:3px solid var(--black);padding:14px 22px;border-radius:999px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;box-shadow:5px 5px 0 var(--black);transition:.18s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black);background:#e91e1e}
.btn.yellow{background:var(--yellow);color:var(--black)}
.btn.white{background:#fff;color:var(--black)}
.btn.small{padding:10px 16px;font-size:13px;box-shadow:4px 4px 0 var(--black)}
.burger{display:none;width:44px;height:44px;background:#fff;border:3px solid var(--black);border-radius:12px;font-size:20px}
/* HERO */
.hero{position:relative;background:radial-gradient(circle at 85% 20%,#ffe98a 0 170px,transparent 171px),linear-gradient(135deg,#ff2e2e 0%,#ff5a1f 55%,#ff8a00 100%);color:#fff;overflow:hidden}
.hero-inner{max-width:1280px;margin:0 auto;padding:42px 5% 36px;display:grid;grid-template-columns:1.08fr .92fr;gap:30px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--black);padding:8px 13px;border:2px solid var(--black);border-radius:999px;font-weight:900;font-size:12px;letter-spacing:.09em;text-transform:uppercase;box-shadow:3px 3px 0 var(--black)}
.hero h1{font-size:clamp(48px,7.2vw,94px);line-height:.86;letter-spacing:-.055em;text-transform:uppercase;font-weight:1000;margin:18px 0 16px}
.hero h1 .outline{color:transparent;-webkit-text-stroke:3px #fff}
.hero h1 .loco{color:var(--yellow);text-shadow:5px 5px 0 var(--black);display:inline-block;transform:rotate(-2deg)}
.hero p{font-size:18px;line-height:1.55;max-width:580px;font-weight:600}
.hero p b{background:#fff;color:var(--black);padding:2px 7px;border-radius:6px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 20px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px}
.hero-meta div{background:rgba(0,0,0,.88);border:2px solid #fff;padding:10px 13px;border-radius:14px;font-size:13px;font-weight:800}
.hero-meta span{display:block;font-size:11px;opacity:.75;text-transform:uppercase;letter-spacing:.08em}
.hero-visual{position:relative}
.truck-card{background:#fff;color:var(--black);border:4px solid var(--black);border-radius:28px;padding:20px;box-shadow:10px 10px 0 var(--black);transform:rotate(1.2deg);position:relative}
.truck-card:before{content:"TODAY'S TRUCK";position:absolute;top:-16px;right:18px;background:var(--black);color:var(--yellow);padding:7px 11px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em}
.taco-scene{background:linear-gradient(180deg,#b8f1ff 0 58%,#ffe3a3 58% 100%);border:3px solid var(--black);border-radius:20px;padding:18px 14px 8px;text-align:center;overflow:hidden}
.taco-big{font-size:clamp(92px,11vw,150px);line-height:1;filter:drop-shadow(6px 8px 0 rgba(0,0,0,.18));animation:bob 2.6s ease-in-out infinite;display:inline-block}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.truck-strip{display:flex;justify-content:space-between;align-items:center;background:var(--yellow);border:3px solid var(--black);border-radius:14px;padding:10px 12px;margin-top:10px;font-weight:900;font-size:13px;text-transform:uppercase}
.wheels{font-size:22px;letter-spacing:8px;text-align:center;margin-top:2px}
.float-badge{position:absolute;background:#fff;color:var(--black);border:3px solid var(--black);border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px;box-shadow:4px 4px 0 var(--black)}
.b1{top:12px;left:-12px;transform:rotate(-7deg)}
.b2{bottom:120px;right:-10px;transform:rotate(6deg)}
.b3{top:52%;left:-18px;transform:rotate(-4deg)}
.live-row{display:flex;gap:10px;margin-top:16px}
.live-row>div{flex:1;background:var(--cream);border:2px solid var(--black);border-radius:16px;padding:12px}
.live-row small{text-transform:uppercase;font-weight:900;letter-spacing:.08em;font-size:10px;opacity:.6}
.live-row strong{display:block;font-size:20px;margin-top:2px}
.marquee{background:var(--black);color:var(--yellow);overflow:hidden;white-space:nowrap;padding:13px 0;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.marquee-track{display:inline-block;animation:scroll 22s linear infinite;font-weight:1000;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.marquee-track span{margin:0 18px}
@keyframes scroll{to{transform:translateX(-50%)}}
section{max-width:1280px;margin:0 auto;padding:62px 5%}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(36px,5vw,62px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.sec-head h2 em{font-style:normal;color:var(--red)}
.sec-head p{max-width:480px;line-height:1.6;font-weight:600}
.kicker{font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--red);margin-bottom:9px}
/* MENU */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.filter{background:#fff;border:2.5px solid var(--black);padding:10px 16px;border-radius:999px;font-weight:900;box-shadow:3px 3px 0 var(--black)}
.filter.active,.filter:hover{background:var(--yellow)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.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(-.4deg)}
.card-top{height:118px;display:grid;place-items:center;font-size:72px;position:relative}
.tag{position:absolute;top:12px;left:12px;background:var(--black);color:#fff;font-size:10px;font-weight:900;letter-spacing:.08em;padding:6px 9px;border-radius:999px;text-transform:uppercase}
.price{position:absolute;top:10px;right:12px;background:var(--yellow);border:2px solid var(--black);border-radius:999px;padding:6px 10px;font-weight:1000}
.card-body{padding:16px}
.card h3{font-size:21px;line-height:1.05;text-transform:uppercase;letter-spacing:-.02em}
.card p{font-size:14px;line-height:1.5;margin:8px 0 12px;color:#444}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.spice{color:var(--red);letter-spacing:2px;font-size:14px}
.add{background:var(--black);color:#fff;padding:10px 14px;border-radius:999px;font-weight:900}
.add:hover{background:var(--red)}
/* BUILDER */
.builder-wrap{background:var(--black);color:#fff;border-radius:30px;padding:28px;border:3px solid var(--black);box-shadow:8px 8px 0 var(--red);display:grid;grid-template-columns:1fr 1fr;gap:26px}
.builder-wrap h2{font-size:clamp(32px,4vw,52px);line-height:.9;text-transform:uppercase;letter-spacing:-.04em}
.builder-wrap h2 em{color:var(--yellow);font-style:normal}
.builder-wrap p{opacity:.85;line-height:1.6;margin:13px 0 20px}
.opt-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:900;margin:18px 0 8px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{background:#222;color:#fff;border:2px solid #555;padding:10px 13px;border-radius:999px;font-weight:800}
.opt.active{background:var(--yellow);color:#000;border-color:var(--yellow)}
.taco-result{background:#fff;color:#000;border-radius:22px;padding:20px;text-align:center;align-self:center}
.taco-result .big{font-size:110px;line-height:1}
#builderDesc{font-weight:700;line-height:1.5;margin:10px 0}
#builderPrice{font-size:36px;font-weight:1000;color:var(--red)}
#builderSpice{font-size:22px;letter-spacing:4px}
/* STORY / STATS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.story-box{background:#fff;border:3px solid var(--black);border-radius:24px;padding:24px;box-shadow:7px 7px 0 var(--black)}
.story-box p{line-height:1.7;margin:12px 0;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.stat{background:var(--yellow);border:3px solid var(--black);border-radius:18px;padding:16px;text-align:center}
.stat b{font-size:30px;display:block}
.stat span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
/* FIND */
.find-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.map{background:linear-gradient(180deg,#cdefff,#fff3c4);border:4px solid var(--black);border-radius:24px;min-height:380px;position:relative;overflow:hidden;box-shadow:7px 7px 0 var(--black);padding:22px}
.map:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 42px,rgba(0,0,0,.08) 42px 44px),repeating-linear-gradient(90deg,transparent 0 42px,rgba(0,0,0,.08) 42px 44px)}
.pin{position:absolute;background:#fff;border:3px solid var(--black);border-radius:999px;padding:8px 11px;font-weight:900;font-size:12px;box-shadow:3px 3px 0 var(--black);z-index:2}
.pin.truck{background:var(--red);color:#fff;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:14px}
.day{background:#fff;border:2.5px solid var(--black);border-radius:14px;padding:10px 4px;text-align:center;font-weight:900;font-size:13px}
.day small{display:block;font-size:10px;opacity:.6;margin-top:2px}
.day.active{background:var(--yellow);box-shadow:3px 3px 0 var(--black)}
.spot{background:#fff;border:3px solid var(--black);border-radius:18px;padding:16px;display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.spot h3{font-size:18px}
.spot p{font-size:13px;color:#555;margin-top:3px}
.spot time{background:#111;color:var(--yellow);padding:8px 10px;border-radius:12px;font-weight:900;font-size:12px;white-space:nowrap}
/* REVIEWS */
.reviews{background:#fff;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.review-card{max-width:780px;margin:0 auto;text-align:center}
.stars{color:#ff8a00;font-size:26px;letter-spacing:4px}
.review-card blockquote{font-size:clamp(22px,3vw,34px);line-height:1.25;font-weight:900;letter-spacing:-.02em;margin:16px 0}
.review-card p{font-weight:800}
.dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.dot{width:12px;height:12px;border-radius:50%;background:#ccc;border:2px solid #111}
.dot.active{background:var(--red)}
/* SPECIAL */
.special{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.special div{border:3px solid var(--black);border-radius:22px;padding:22px;box-shadow:5px 5px 0 var(--black)}
.special .one{background:var(--yellow)}.special .two{background:#b8f1ff}.special .three{background:#ffd1dc}
.special span{font-size:52px}.special h3{font-size:22px;text-transform:uppercase;margin:8px 0}.special p{line-height:1.5;font-weight:600}
/* FOOTER / CTA */
footer{background:var(--black);color:#fff}
.cta{text-align:center;padding:70px 5%}
.cta h2{font-size:clamp(42px,6vw,78px);line-height:.9;text-transform:uppercase;letter-spacing:-.04em}
.cta h2 em{color:var(--yellow);font-style:normal}
.cta p{max-width:620px;margin:16px auto 24px;opacity:.85;line-height:1.6}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 5%;border-top:1px solid #333;font-size:13px;font-weight:700}
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;background:#fff;border:3px solid var(--black);border-radius:999px;box-shadow:6px 6px 0 var(--black);padding:10px 10px 10px 18px;display:flex;gap:14px;align-items:center;font-weight:900;max-width:94vw}
.tray button{background:var(--red);color:#fff;padding:11px 18px;border-radius:999px;font-weight:900}
.toast{position:fixed;top:86px;right:16px;z-index:80;background:var(--black);color:#fff;border:3px solid var(--yellow);padding:14px 16px;border-radius:16px;font-weight:900;box-shadow:5px 5px 0 rgba(0,0,0,.25);transform:translateY(-18px);opacity:0;pointer-events:none;transition:.3s;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}
@media(max-width:900px){nav{display:none}.burger{display:block}.menu-grid,.special{grid-template-columns:1fr 1fr}.hero-inner,.builder-wrap,.split,.find-grid{grid-template-columns:1fr}.float-badge{display:none}}
@media(max-width:600px){.menu-grid,.special{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}.days{grid-template-columns:repeat(4,1fr)}.hero h1{font-size:52px}.logo b{font-size:20px}.btn{width:100%;justify-content:center}.hero-cta .btn{flex:1}.spot{flex-direction:column;align-items:flex-start}}
</style>
</head>
<body>
<div class="topbar">🔥 Today only: <span>FREE Kimchi Con Queso Frites</span> with any 3 tacos — show this page at the window!</div>
<header>
<a class="logo" href="#top"><span class="logo-badge">🌮</span><span><b>KIMCHI <em>LOCO</em></b><small>SEOUL ✦ MEXICO ✦ FOOD TRUCK</small></span></a>
<nav><a href="#menu">Menu</a><a href="#builder">Build Yours</a><a href="#story">Our Story</a><a href="#find">Find Us</a><a href="#reviews">Reviews</a></nav>
<div class="nav-actions"><span class="pill"><i>●</i> <span id="openText">OPEN NOW</span> · 11–9</span><button class="burger" onclick="document.getElementById('menu').scrollIntoView({behavior:'smooth'})" aria-label="Menu">☰</button></div>
</header>
<main id="top">
<section class="hero" style="padding:0;max-width:none">
<div class="hero-inner">
<div>
<span class="eyebrow">🌶️ Korean Tacos • Est. 2024 • 4.9 ★ (2,847 reviews)</span>
<h1>Seoul meets Mexico.<br><span class="outline">Fire meets</span> <span class="loco">LOCO.</span></h1>
<p>Flame-grilled bulgogi, gochujang crema, crispy kimchi & warm corn tortillas — <b>handmade daily</b>, never frozen, always loud. One bite and you'll understand the name.</p>
<div class="hero-cta">
<a class="btn yellow" href="#find">📍 Find the truck today</a>
<a class="btn white" href="#menu">See the menu ↓</a>
</div>
<div class="hero-meta">
<div><span>Next stop</span><b id="nextStop">Downtown — 11:30 AM</b></div>
<div><span>Lunch rush in</span><b id="countdown">--:--</b></div>
<div><span>Tacos served</span><b>18,400+ & counting</b></div>
</div>
</div>
<div class="hero-visual">
<span class="float-badge b1">🌶️ Gochujang Glaze</span>
<span class="float-badge b2">🥟 Kimchi Crunch</span>
<span class="float-badge b3">🔥 Flame-Grilled</span>
<div class="truck-card">
<div class="taco-scene">
<div style="font-weight:1000;letter-spacing:.12em;font-size:11px">★ THE BULGOGI LOCO ★</div>
<div class="taco-big">🌮</div>
<div class="truck-strip"><span>🚚 KIMCHI LOCO</span><span>OPEN 11–9</span></div>
<div class="wheels">●——○——●</div>
</div>
<div class="live-row">
<div><small>Today's special</small><strong>3 Tacos $15</strong></div>
<div><small>Spice level</small><strong>🔥🔥🔥🔥</strong></div>
</div>
<button class="btn" style="width:100%;justify-content:center;margin-top:14px" onclick="addToTray('Bulgogi Loco Taco', 6.50)">+ Add the Loco to my tray — $6.50</button>
</div>
</div>
</div>
</section>
<div class="marquee"><div class="marquee-track" id="marquee"></div></div>
<section id="menu">
<div class="sec-head">
<div><div class="kicker">The Menu — Made Fresh Every Morning</div><h2>Pick your<br><em>poison.</em> 🌶️</h2></div>
<p>Every taco comes on a warm corn tortilla with our signature crunch slaw, cilantro, lime & a squeeze of grilled pineapple. Choose your heat — we won't judge.</p>
</div>
<div class="filters">
<button class="filter active" data-filter="all">All Tacos</button>
<button class="filter" data-filter="beef">Beef</button>
<button class="filter" data-filter="chicken">Chicken</button>
<button class="filter" data-filter="veg">Veggie</button>
<button class="filter" data-filter="spicy">🔥 Extra Spicy</button>
</div>
<div class="menu-grid" id="menuGrid"></div>
</section>
<section id="builder" style="padding-top:10px">
<div class="builder-wrap">
<div>
<div class="kicker" style="color:var(--yellow)">Interactive — Build Your Own</div>
<h2>Make it <em>LOCO.</em><br>Your way.</h2>
<p>Tap your favorites. We'll stack them, price them, and have them sizzling at the window in under 4 minutes.</p>
<div class="opt-label">1 · Protein</div><div class="opts" id="proteinOpts"></div>
<div class="opt-label">2 · Sauce</div><div class="opts" id="sauceOpts"></div>
<div class="opt-label">3 · Extra Topping</div><div class="opts" id="extraOpts"></div>
</div>
<div class="taco-result">
<div style="font-weight:900;letter-spacing:.12em;font-size:11px">YOUR CUSTOM TACO</div>
<div class="big" id="builderEmoji">🌮</div>
<p id="builderDesc">Bulgogi beef + Gochujang Crema + Crispy Kimchi</p>
<div id="builderSpice">🌶️🌶️🌶️</div>
<div id="builderPrice">$7.50</div>
<button class="btn" style="width:100%;justify-content:center;margin-top:14px" onclick="orderBuilder()">Add my creation →</button>
<p style="font-size:12px;margin-top:10px;opacity:.6">Ready in ~4 min • Calories: worth it</p>
</div>
</div>
</section>
<section id="story">
<div class="split">
<div>
<div class="kicker">Why Kimchi Loco?</div>
<h2 style="font-size:clamp(36px,5vw,60px);line-height:.9;text-transform:uppercase;letter-spacing:-.04em">Two grandmothers.<br><em style="color:var(--red);font-style:normal">One crazy idea.</em></h2>
<div class="story-box">
<p>Our founder Ji-woo grew up on her halmeoni's kimchi in Seoul. Her co-founder Marco grew up on his abuela's tacos in Jalisco. They met in a food truck line, argued about the best street food on earth — then decided to fuse them.</p>
<p>Now we ferment our own kimchi in-house, marinate bulgogi overnight, and press tortillas by hand every morning. No freezers. No shortcuts. Just fire, funk, and flavor that hits different.</p>
<div class="stats">
<div class="stat"><b data-count="18400">0</b><span>Tacos served</span></div>
<div class="stat"><b data-count="4.9" data-dec="1">0</b><span>★ Average</span></div>
<div class="stat"><b data-count="37">0</b><span>Stops / month</span></div>
</div>
</div>
</div>
<div class="menu-grid" style="grid-template-columns:1fr">
<div class="card"><div class="card-top" style="background:#ffe98a">🥟<span class="tag">Secret Weapon</span></div><div class="card-body"><h3>House-Fermented Kimchi</h3><p>Napa cabbage, Korean chili flakes, garlic & fish sauce — fermented 5 days for that perfect tangy crunch. We make 40 lbs a week.</p><div class="card-foot"><span class="spice">Funk level: 10/10</span><b>Free refills</b></div></div></div>
<div class="card"><div class="card-top" style="background:#ffd1dc">🍜<span class="tag">Fan Favorite</span></div><div class="card-body"><h3>Kimchi Con Queso Frites</h3><p>Crispy fries drowned in melted cheese, kimchi, jalapeño & gochujang drizzle. People drive across town for this.</p><div class="card-foot"><span class="spice">🔥🔥🔥</span><b>$8.00</b></div></div></div>
<div class="card"><div class="card-top" style="background:#b8f1ff">🧋<span class="tag">Cool Down</span></div><div class="card-body"><h3>Yuzu Lime Ade</h3><p>Bright, fizzy, refreshing — the perfect fire extinguisher after a spicy taco. Or grab a cold mango bingsu.</p><div class="card-foot"><span class="spice">0 heat</span><b>$4.50</b></div></div></div>
</div>
</div>
</section>
<section id="find">
<div class="sec-head"><div><div class="kicker">Find Us — We Move, We Sizzle</div><h2>Follow the<br><em>smoke signal.</em> 🚚</h2></div><p>Tap a day to see where we'll be. We post every morning on Instagram @kimchiloco — but the fastest way? Just follow the line. There's always a line.</p></div>
<div class="find-grid">
<div class="map" id="map">
<span class="pin truck" style="left:38%;top:42%">🚚 TRUCK LIVE</span>
<span class="pin" style="left:12%;top:18%">🌳 Park</span>
<span class="pin" style="left:68%;top:14%">🏢 Downtown</span>
<span class="pin" style="left:16%;top:70%">🎓 Campus</span>
<span class="pin" style="left:72%;top:72%">🌙 Night Market</span>
<div style="position:absolute;left:18px;bottom:16px;background:#fff;border:3px solid #111;border-radius:14px;padding:12px;z-index:2;max-width:78%"><b id="mapTitle">📍 Downtown — Civic Plaza</b><p id="mapDesc" style="font-size:13px;margin-top:4px;color:#555">Corner of 5th & Main · Look for the red truck & yellow neon</p></div>
</div>
<div>
<div class="days" id="days"></div>
<div id="spots"></div>
<button class="btn yellow" style="width:100%;justify-content:center" onclick="showToast('📍 Saved! We\'ll send you tomorrow\'s stop at 9 AM. See you at the window!')">🔔 Get Tomorrow's Stop</button>
</div>
</div>
</section>
<section class="reviews" id="reviews">
<div class="review-card">
<div class="kicker" style="text-align:center">Real People. Real Cravings.</div>
<div class="stars">★★★★★</div>
<blockquote id="reviewText">"I dream about the Bulgogi Loco. I brought my dad, my coworkers, and a random stranger from the line. 10/10 would wait again."</blockquote>
<p id="reviewAuthor">— Maya R., Downtown Regular</p>
<div class="dots" id="dots"></div>
</div>
</section>
<section>
<div class="sec-head"><div><div class="kicker">Don't Miss</div><h2>This week's<br><em>specials.</em></h2></div></div>
<div class="special">
<div class="one"><span>🍟</span><h3>2-for-1 Frites Tuesday</h3><p>Buy one Kimchi Con Queso Frites, get the second free. Bring a friend — or don't share.</p><b>Every Tuesday 11–3</b></div>
<div class="two"><span>🌮</span><h3>Taco Tuesday: 3 for $15</h3><p>Any 3 tacos, any proteins. Mix, match, go loco. Dine-in at the truck or take it to go.</p><b>All day Tuesdays</b></div>
<div class="three"><span>🎉</span><h3>Abuela's Birthday Bash</h3><p>Free mini taco for everyone this Saturday! Mariachi at noon, face painting, and our new Chamoy Mango Sundae.</p><b>Saturday · Night Market</b></div>
</div>
</section>
<footer>
<div class="cta">
<div style="font-size:64px">🌮🔥</div>
<h2>Hungry?<br><em>We're already cooking.</em></h2>
<p>Skip the line — order ahead and we'll have it hot when you arrive. Or just show up. The line moves fast and the first bite is worth it.</p>
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap"><a class="btn yellow" href="#menu">Order Ahead →</a><a class="btn white" href="#find" style="background:#fff;color:#111">📍 Today's Location</a></div>
</div>
<div class="foot"><span>© 2026 Kimchi Loco Food Truck · Seoul ✦ Mexico</span><span>Mon–Sun 11AM–9PM · (555) 019-LOCO</span><span>@kimchiloco on Instagram</span></div>
</footer>
</main>
<div class="tray" id="tray"><span>🧺 Tray: <b id="trayCount">0 items</b> · <b id="trayTotal">$0.00</b></span><button onclick="checkout()">Send to Truck →</button></div>
<div class="toast" id="toast"></div>
<script>
const menu=[
{name:"Bulgogi Loco",emoji:"🌮",bg:"#ffe98a",price:6.50,cat:"beef spicy",spice:"🌶️🌶️🌶️",tag:"Best Seller",desc:"Flame-grilled bulgogi beef, gochujang crema, crispy kimchi, pickled onion, cilantro & lime."},
{name:"Kimchi Carnitas",emoji:"🥙",bg:"#ffd1dc",price:6.00,cat:"beef",spice:"🌶️🌶️",tag:"Fan Favorite",desc:"Slow-braised carnitas, fermented kimchi, salsa verde, cotija & a squeeze of grilled pineapple."},
{name:"Gochu Chicken Fire",emoji:"🍗",bg:"#ffc4b8",price:5.50,cat:"chicken spicy",spice:"🌶️🌶️🌶️🌶️",tag:"Extra Spicy",desc:"Charred chicken thighs glazed in gochujang-honey, jalapeño slaw, sesame & scallion."},
{name:"Seoul Fried Chicken Taco",emoji:"🍗",bg:"#b8f1ff",price:6.50,cat:"chicken",spice:"🌶️🌶️",tag:"Crunchy",desc:"Korean fried chicken, sweet-spicy yangnyeom sauce, pickled radish & cool ranch crema."},
{name:"Tofu Seoul Style",emoji:"🥗",bg:"#c8f7c5",price:5.00,cat:"veg",spice:"🌶️🌶️🌶️",tag:"Vegan",desc:"Crispy tofu in bulgogi marinade, kimchi, avocado, cucumber & vegan gochujang mayo."},
{name:"Mushroom Miso Taco",emoji:"🍄",bg:"#e8d5ff",price:5.50,cat:"veg spicy",spice:"🌶️🌶️🌶️",tag:"New",desc:"Miso-glazed mushrooms, charred corn, kimchi salsa, lime crema & toasted sesame."}
];
const grid=document.getElementById('menuGrid');
function renderMenu(f='all'){
grid.innerHTML=menu.filter(m=>f==='all'||m.cat.includes(f)).map(m=>`<div class="card"><div class="card-top" style="background:${m.bg}">${m.emoji}<span class="tag">${m.tag}</span><span class="price">$${m.price.toFixed(2)}</span></div><div class="card-body"><h3>${m.name}</h3><p>${m.desc}</p><div class="card-foot"><span class="spice">${m.spice}</span><button class="add" onclick="addToTray('${m.name}',${m.price})">+ Add</button></div></div></div>`).join('');
}
renderMenu();
document.querySelectorAll('.filter').forEach(b=>b.onclick=()=>{document.querySelectorAll('.filter').forEach(x=>x.classList.remove('active'));b.classList.add('active');renderMenu(b.dataset.filter)});
let trayCount=0,trayTotal=0;
function addToTray(name,price){trayCount++;trayTotal+=price;updateTray();showToast(`✅ Added ${name}! See you at the window.`)}
function updateTray(){document.getElementById('trayCount').textContent=trayCount+(trayCount===1?' item':' items');document.getElementById('trayTotal').textContent='$'+trayTotal.toFixed(2)}
function checkout(){if(!trayCount){showToast('🧺 Your tray is empty — add a taco first! 🌮');return}showToast(`🚚 Order sent! ${trayCount} item(s) · $${trayTotal.toFixed(2)} · Ready in 4 min at the window. Order #LOCO-${Math.floor(100+Math.random()*900)}`);trayCount=0;trayTotal=0;updateTray()}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),3400)}
// Builder
const proteins=[{n:'Bulgogi Beef',p:2.5,s:3,e:'🥩'},{n:'Gochu Chicken',p:2,s:4,e:'🍗'},{n:'Carnitas',p:2,s:2,e:'🐖'},{n:'Crispy Tofu',p:1.5,s:3,e:'🥗'}];
const sauces=[{n:'Gochujang Crema',p:0,s:3,e:'🌶️'},{n:'Salsa Verde',p:0,s:1,e:'🌿'},{n:'Yangnyeom Sweet',p:0,s:2,e:'🍯'},{n:'Miso Mayo',p:0,s:1,e:'🍜'}];
const extras=[{n:'Crispy Kimchi',p:0.75,e:'🥟'},{n:'Grilled Pineapple',p:1,e:'🍍'},{n:'Avocado',p:1.5,e:'🥑'},{n:'Cotija Cheese',p:0.75,e:'🧀'}];
let sel={p:0,s:0,x:0};
function renderOpts(id,arr,key){document.getElementById(id).innerHTML=arr.map((o,i)=>`<button class="opt ${sel[key]===i?'active':''}" onclick="sel.${key}=${i};refreshBuilder()">${o.e} ${o.n}</button>`).join('')}
function refreshBuilder(){renderOpts('proteinOpts',proteins,'p');renderOpts('sauceOpts',sauces,'s');renderOpts('extraOpts',extras,'x');const p=proteins[sel.p],s=sauces[sel.s],x=extras[sel.x];const price=5+p.p+s.p+x.p;document.getElementById('builderDesc').textContent=`${p.n} + ${s.n} + ${x.n}`;document.getElementById('builderPrice').textContent='$'+price.toFixed(2);document.getElementById('builderSpice').textContent='🌶️'.repeat(s.s);document.getElementById('builderEmoji').textContent=p.e==='🥗'?'🌯':'🌮'}
function orderBuilder(){const p=proteins[sel.p],s=sauces[sel.s],x=extras[sel.x];addToTray(`Custom: ${p.n}+${s.n}+${x.n}`,5+p.p+s.p+x.p)}
refreshBuilder();
// Schedule
const schedule=[
{day:'Mon',spots:[{t:'📍 University Campus',d:'North Quad · Near the bell tower',time:'11AM–2PM'},{t:'📍 Downtown',d:'Civic Plaza · 5th & Main',time:'5–9PM'}]},
{day:'Tue',spots:[{t:'🌮 Taco Tuesday — Downtown',d:'Civic Plaza · 3 for $15 all day',time:'11AM–9PM'}]},
{day:'Wed',spots:[{t:'📍 River Park',d:'Riverside Walk · By the fountain',time:'11AM–4PM'},{t:'📍 Food Truck Alley',d:'Pier 9 · Neon Row',time:'5–9PM'}]},
{day:'Thu',spots:[{t:'📍 Tech Campus',d:'Innovation Hub · Lunch rush',time:'11AM–3PM'},{t:'📍 Downtown',d:'Civic Plaza · 5th & Main',time:'5–9PM'}]},
{day:'Fri',spots:[{t:'📍 Downtown',d:'Civic Plaza · Friday Night Vibes',time:'11AM–9PM'}]},
{day:'Sat',spots:[{t:'🎉 Night Market — Mariachi Day!',d:'Old Town Square · Free mini taco',time:'12–10PM'}]},
{day:'Sun',spots:[{t:'📍 Sunday Market',d:'Farmers Market · Row C',time:'10AM–6PM'}]}
];
const todayIdx=(new Date().getDay()+6)%7;
document.getElementById('days').innerHTML=schedule.map((s,i)=>`<button class="day ${i===todayIdx?'active':''}" onclick="renderSpots(${i})">${s.day}<small>${i===todayIdx?'TODAY':''}</small></button>`).join('');
function renderSpots(i){document.querySelectorAll('.day').forEach((d,idx)=>d.classList.toggle('active',idx===i));const s=schedule[i];document.getElementById('spots').innerHTML=s.spots.map(x=>`<div class="spot"><div><h3>${x.t}</h3><p>${x.d}</p></div><time>${x.time}</time></div>`).join('');document.getElementById('mapTitle').textContent=s.spots[0].t;document.getElementById('mapDesc').textContent=s.spots[0].d}
renderSpots(todayIdx);
document.getElementById('nextStop').textContent=schedule[todayIdx].spots[0].t.replace('📍 ','').replace('🌮 ','').replace('🎉 ','')+' — '+schedule[todayIdx].spots[0].time;
// Reviews
const reviews=[
{t:'"I dream about the Bulgogi Loco. I brought my dad, my coworkers, and a random stranger from the line. 10/10 would wait again."',a:'— Maya R., Downtown Regular'},
{t:'"The kimchi crunch + gochujang heat is UNMATCHED. I\'ve eaten tacos in Mexico City and Seoul. This rivals both."',a:'— Deshawn K., Food Critic'},
{t:'"As a vegan, I usually get sad tacos. The Tofu Seoul Style made me emotional. Crispy, spicy, perfect."',a:'— Priya S., Campus Student'},
{t:'"Kimchi Con Queso Frites should be illegal. We ordered 4 for our office and there was a fight over the last fry."',a:'— The Tech Hub Team'}
];
let ri=0;
document.getElementById('dots').innerHTML=reviews.map((_,i)=>`<span class="dot ${i===0?'active':''}" onclick="setReview(${i})"></span>`).join('');
function setReview(i){ri=i;document.getElementById('reviewText').textContent=reviews[i].t;document.getElementById('reviewAuthor').textContent=reviews[i].a;document.querySelectorAll('.dot').forEach((d,idx)=>d.classList.toggle('active',idx===i))}
setInterval(()=>setReview((ri+1)%reviews.length),4200);
// Marquee
const items='🌮 BULGOGI LOCO 🔥 GOCHUJANG GLAZE 🥟 HOUSE KIMCHI 🚚 FOOD TRUCK ✦ SEOUL MEETS MEXICO 🌶️ 3 TACOS $15 ⭐ 4.9 STARS ';
document.getElementById('marquee').innerHTML=`<span>${items}</span><span>${items}</span>`;
// Open status + countdown
function tick(){const now=new Date(),h=now.getHours();document.getElementById('openText').textContent=(h>=11&&h<21)?'OPEN NOW':'OPENS 11AM';const target=new Date();target.setHours(12,0,0,0);if(now>target)target.setDate(target.getDate()+1);let diff=target-now;let hh=Math.floor(diff/3600000),mm=Math.floor(diff%3600000/60000);document.getElementById('countdown').textContent=hh+'h '+mm+'m'}
tick();setInterval(tick,60000);
// Counters
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){const el=e.target,target=parseFloat(el.dataset.count),dec=parseInt(el.dataset.dec||0);let cur=0;const iv=setInterval(()=>{cur+=target/40;if(cur>=target){cur=target;clearInterval(iv)}el.textContent=dec?cur.toFixed(dec):Math.floor(cur).toLocaleString()},30);io.unobserve(el)}}),{threshold:.5});
document.querySelectorAll('[data-count]').forEach(el=>io.observe(el));
</script>
</body>
</html>Reasoning trace (808 tokens)
Designing a single-file responsive HTML site for a Korean taco food truck with inline CSS/JS, interactive menu and stylized map.Adding interactive menu, cart, builder, schedule, and live status with CSS-only visuals and system fonts.