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
- 16.1 s
- Cost
- $0.0045
- Output tokens
- 8,851
- Spent thinking
- 423 tokens
- Speed
- 634.5 tok/s
- Console errors
- 0
- First token after
- 2.2 s
- First visible text after
- 2.2 s
- Prompt tokens
- 379
- Code size
- 25.5 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"low"}- 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 — Korean Tacos That Hit Different | Food Truck LA</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--red:#FF2D20;--orange:#FF7A00;--yellow:#FFC700;--black:#111111;--cream:#FFF6E5;--green:#00C853}
body{font-family:Inter,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{font-family:inherit;cursor:pointer;border:none}
.topbar{background:var(--black);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;gap:10px;flex-wrap:wrap}
.topbar b{color:var(--yellow)}
.topbar .live{display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;background:#00E676;border-radius:50%;box-shadow:0 0 0 0 rgba(0,230,118,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(0,230,118,0)}100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}}
nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--black);display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-.03em}
.logo-mark{width:44px;height:44px;background:var(--red);border:3px solid var(--black);border-radius:12px;display:grid;place-items:center;font-size:24px;box-shadow:3px 3px 0 var(--black);transform:rotate(-3deg)}
.logo span em{font-style:normal;color:var(--red)}
.logo small{display:block;font-size:9px;letter-spacing:.22em;color:#666;font-weight:800}
.navlinks{display:flex;gap:18px;font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.navlinks a:hover{color:var(--red)}
.order-btn{background:var(--black);color:#fff;padding:11px 18px;border-radius:999px;font-weight:900;font-size:13px;letter-spacing:.05em;text-transform:uppercase;box-shadow:4px 4px 0 var(--red);transition:.2s}
.order-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
.cart-pill{background:var(--yellow);border:2px solid var(--black);border-radius:999px;padding:8px 12px;font-weight:900;font-size:13px;margin-left:8px}
/* HERO */
.hero{background:linear-gradient(135deg,#FF2D20 0%,#FF7A00 52%,#FFC700 100%);position:relative;overflow:hidden;padding:28px 20px 0}
.hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center;position:relative;z-index:2}
.pill{display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--black);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;box-shadow:3px 3px 0 var(--black)}
.hero h1{font-size:clamp(52px,8vw,96px);line-height:.86;font-weight:900;letter-spacing:-.04em;color:#fff;text-transform:uppercase;margin:16px 0 10px;text-shadow:4px 4px 0 var(--black)}
.hero h1 i{font-style:normal;color:var(--black);-webkit-text-stroke:2px #fff}
.hero h1 u{text-decoration:none;color:var(--yellow)}
.korean{font-size:clamp(20px,3vw,30px);font-weight:900;color:#fff;letter-spacing:.08em}
.hero p{font-size:17px;line-height:1.5;font-weight:600;color:#fff;max-width:540px;margin:14px 0 20px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta{padding:15px 22px;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border:3px solid var(--black)}
.cta.primary{background:var(--black);color:#fff;box-shadow:5px 5px 0 #fff}
.cta.secondary{background:#fff;color:var(--black);box-shadow:5px 5px 0 var(--black)}
.stats{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.stat{background:rgba(255,255,255,.95);border:2px solid var(--black);border-radius:16px;padding:10px 14px;min-width:108px;box-shadow:3px 3px 0 var(--black)}
.stat b{font-size:20px;display:block}
.stat span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#555}
.float{position:absolute;font-size:42px;animation:float 3.5s ease-in-out infinite;z-index:1;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.18))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.truck-wrap{position:relative;padding-top:10px}
.truck-card{background:#fff;border:3px solid var(--black);border-radius:24px;padding:14px;box-shadow:8px 8px 0 var(--black);transform:rotate(1deg)}
.truck-card svg{width:100%;height:auto;display:block}
.badge-row{display:flex;gap:10px;margin-top:12px}
.badge{flex:1;background:var(--black);color:#fff;border-radius:14px;padding:10px;text-align:center;font-weight:900;font-size:12px;line-height:1.3}
.badge:nth-child(2){background:#fff;color:var(--black);border:2px solid var(--black)}
.badge small{display:block;font-weight:700;opacity:.8;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.wave{height:28px;background:var(--cream);border-radius:50% 50% 0 0/100% 100% 0 0;margin-top:22px;transform:scaleX(1.2)}
/* MARQUEE */
.marquee{background:var(--black);color:#fff;overflow:hidden;padding:12px 0;border-top:3px solid var(--black);border-bottom:3px solid var(--black);transform:rotate(-.6deg) scale(1.02);margin-top:-14px;position:relative;z-index:3}
.marquee-track{display:flex;gap:28px;white-space:nowrap;animation:scroll 18s linear infinite;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.marquee-track span{color:#fff}
.marquee-track b{color:var(--yellow)}
@keyframes scroll{to{transform:translateX(-50%)}}
/* SECTIONS */
.section{max-width:1180px;margin:0 auto;padding:42px 20px 10px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.section-head h2{font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:.95;text-transform:uppercase}
.section-head h2 em{font-style:normal;color:var(--red)}
.section-head p{color:#555;font-weight:600;max-width:420px;line-height:1.5}
/* MENU */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filter{padding:9px 16px;border-radius:999px;border:2px solid var(--black);background:#fff;font-weight:900;font-size:13px}
.filter.active{background:var(--black);color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:3px solid var(--black);border-radius:20px;overflow:hidden;box-shadow:5px 5px 0 var(--black);transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:7px 8px 0 var(--black)}
.card-top{height:150px;display:grid;place-items:center;font-size:72px;position:relative}
.card-top .price{position:absolute;top:10px;right:10px;background:#fff;border:2px solid var(--black);border-radius:999px;padding:5px 10px;font-weight:900;font-size:13px;box-shadow:2px 2px 0 var(--black)}
.card-top .tag{position:absolute;top:10px;left:10px;background:var(--black);color:#fff;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.card-body{padding:14px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:18px;line-height:1.1;font-weight:900}
.card-body p{font-size:13px;color:#555;line-height:1.45;margin:7px 0 10px;flex:1}
.meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.spice{font-size:12px;font-weight:900;color:#FF2D20}
.kcal{font-size:11px;font-weight:800;color:#888}
.add{width:100%;padding:12px;border-radius:12px;background:var(--yellow);border:2px solid var(--black);font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.add:active{transform:scale(.98)}
/* BUILDER + INFO */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.builder{background:var(--black);color:#fff;border-radius:24px;padding:22px;border:3px solid var(--black);box-shadow:6px 6px 0 var(--red)}
.builder h3{font-size:26px;font-weight:900;text-transform:uppercase;line-height:1}
.builder p{opacity:.8;line-height:1.5;margin:8px 0 16px;font-size:14px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.opt label{display:block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:6px}
.opt select{width:100%;padding:12px;border-radius:12px;border:2px solid #fff;background:#222;color:#fff;font-weight:700;font-size:14px}
.taco-stage{background:#fff;color:var(--black);border-radius:18px;padding:16px;display:flex;gap:16px;align-items:center}
.taco-emoji{font-size:64px;line-height:1;animation:float 2.8s ease-in-out infinite}
.taco-stage b{font-size:17px;display:block;line-height:1.2}
.taco-stage span{font-size:13px;color:#666;line-height:1.4;display:block;margin-top:4px}
.build-btn{margin-top:14px;width:100%;padding:14px;border-radius:999px;background:var(--red);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border:2px solid #fff}
.info-stack{display:flex;flex-direction:column;gap:16px}
.info{background:#fff;border:3px solid var(--black);border-radius:20px;padding:18px;box-shadow:5px 5px 0 var(--black)}
.info h4{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.loc{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed #ddd;font-size:13px}
.loc:last-child{border:none}
.loc b{display:block}
.loc span{color:#666}
.day{font-weight:900;background:var(--cream);border:1px solid #eee;padding:5px 8px;border-radius:999px;white-space:nowrap;height:fit-content}
.review{background:linear-gradient(135deg,#FFF3C4,#FFE0B2);border:3px solid var(--black);border-radius:20px;padding:18px;box-shadow:5px 5px 0 var(--black)}
.stars{color:#FF7A00;font-size:18px;letter-spacing:2px}
.review p{font-weight:800;font-size:16px;line-height:1.4;margin:8px 0}
.review small{color:#666;font-weight:700}
.big-cta{background:var(--red);color:#fff;border-radius:24px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:3px solid var(--black);box-shadow:6px 6px 0 var(--black);margin:26px 0 0}
.big-cta h3{font-size:clamp(26px,4vw,38px);line-height:.95;font-weight:900;text-transform:uppercase}
.big-cta p{opacity:.9;font-weight:600;margin-top:6px}
.big-cta button{background:#fff;color:var(--black);padding:16px 22px;border-radius:999px;font-weight:900;border:3px solid var(--black);text-transform:uppercase}
footer{background:var(--black);color:#fff;padding:28px 20px;margin-top:36px}
.foot{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot small{opacity:.7;line-height:1.6}
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:100;background:#fff;border:3px solid var(--black);border-radius:999px;padding:8px 10px 8px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:720px;margin:0 auto}
.sticky b{font-size:14px}
.sticky span{display:block;font-size:11px;color:#\\n666;font-weight:700}
.sticky button{background:var(--red);color:#fff;padding:12px 18px;border-radius:999px;font-weight:900;text-transform:uppercase;font-size:13px}
.toast{position:fixed;top:76px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--black);color:#fff;padding:12px 18px;border-radius:999px;font-weight:900;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.3);white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero-inner{grid-template-columns:1fr}.split{grid-template-columns:1fr}.navlinks{display:none}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.opts{grid-template-columns:1fr}.hero h1{font-size:52px}.stat{flex:1}.sticky b{font-size:12px}}
</style>
</head>
<body>
<div class="topbar"><div class="live"><span class="dot"></span> NOW SERVING — <b id="todayLoc">DTLA • Grand Park</b> 11AM–9PM</div><div>🌶️ First taco FREE with code <b>LOCOFIRST</b> • 📍 Follow @kimchiloco.la</div></div>
<nav><a class="logo" href="#"><div class="logo-mark">🌮</div><span>KIMCHI <em>LOCO</em><small>KOREAN • MEXICAN • LOCO</small></span></a><div class="navlinks"><a href="#menu">Menu</a><a href="#build">Build Yours</a><a href="#find">Find Us</a><a href="#reviews">Reviews</a></div><div><button class="order-btn" onclick="scrollToId('menu')">Order Ahead ↗</button><button class="cart-pill" id="cartPill">🛒 0 • $0</button></div></nav>
<header class="hero">
<span class="float" style="left:4%;top:18%">🌶️</span><span class="float" style="right:5%;top:14%;animation-delay:.6s">🧄</span><span class="float" style="left:46%;top:8%;animation-delay:1s;font-size:30px">🔥</span>
<div class="hero-inner">
<div>
<div class="pill">⭐ 4.9 • 2,400+ tacos sold this month</div>
<h1>KIMCHI<br><i>LOCO</i><br><u>TASTES<br>INSANE.</u></h1>
<div class="korean">김치 타코 • 매운맛 • 중독</div>
<p>Bulgogi sizzling on the grill. Tongbaechu kimchi crunch. Gochujang crema that hits sweet, then <b>BOOM</b> — spicy. This is Seoul street food crashed into LA taco culture. One bite and you'll get it.</p>
<div class="cta-row"><button class="cta primary" onclick="scrollToId('menu')">🔥 See The Menu — $7+</button><button class="cta secondary" onclick="scrollToId('find')">📍 Where's The Truck?</button></div>
<div class="stats"><div class="stat"><b>🔥 3 hrs</b><span>To sell out daily</span></div><div class="stat"><b>⏱️ 6 min</b><span>Avg. wait time</span></div><div class="stat"><b>🌱 Vegan</b><span>Options always</span></div></div>
</div>
<div class="truck-wrap">
<div class="truck-card">
<!-- Truck SVG -->
<svg viewBox="0 0 520 300" role="img" aria-label="Kimchi Loco food truck">
<rect x="10" y="20" width="500" height="200" rx="22" fill="#111"/><rect x="18" y="28" width="484" height="184" rx="18" fill="#FF2D20"/>
<rect x="28" y="58" width="300" height="86" rx="12" fill="#FFF6E5" stroke="#111" stroke-width="5"/>
<text x="44" y="92" font-size="28" font-weight="900" fill="#111" font-family="Arial Black,Arial">KIMCHI LOCO</text>
<text x="44" y="118" font-size="15" font-weight="800" fill="#FF2D20" font-family="Arial">김치 로코 • KOREAN TACOS</text>
<text x="44" y="136" font-size="11" font-weight="700" fill="#555" font-family="Arial">BULGOGI • GOCHUJANG • KIMCHI CRUNCH</text>
<text x="352" y="105" font-size="52">🌮</text><text x="402" y="92" font-size="34">🌶️</text>
<rect x="360" y="150" width="120" height="34" rx="17" fill="#FFC700" stroke="#111" stroke-width="3"/><text x="372" y="172" font-size="13" font-weight="900" fill="#111" font-family="Arial">OPEN LATE →</text>
<rect x="0" y="212" width="520" height="14" fill="#111"/><circle cx="110" cy="238" r="34" fill="#111"/><circle cx="110" cy="238" r="18" fill="#fff"/><circle cx="110" cy="238" r="8" fill="#111"/><circle cx="400" cy="238" r="34" fill="#111"/><circle cx="400" cy="238" r="18" fill="#fff"/><circle cx="400" cy="238" r="8" fill="#111"/>
<rect x="70" y="220" width="380" height="10" rx="5" fill="#FF7A00"/>
</svg>
<div class="badge-row"><div class="badge">🌮 BULGOGI LOCO<small>Best Seller • $9</small></div><div class="badge">🔥 GOCHU FIRE<small>Extra Spicy • $8</small></div><div class="badge">🧀 KIMCHI QUESA<small>Cheese Pull • $10</small></div></div>
</div>
</div>
</div><div class="wave"></div>
</header>
<div class="marquee"><div class="marquee-track" id="mq"></div></div>
<section class="section" id="menu">
<div class="section-head"><div><h2>The <em>Loco</em> Menu</h2><p>Made fresh on the truck. No freezer, no shortcuts. Just fire, crunch, and Seoul soul.</p></div><div class="pill">🔥 Order ahead — skip the line</div></div>
<div class="filters" id="filters"><button class="filter active" data-f="all">All 🔥</button><button class="filter" data-f="beef">Beef</button><button class="filter" data-f="chicken">Chicken</button><button class="filter" data-f="veg">Veggie</button><button class="filter" data-f="spicy">🌶️ Spicy</button></div>
<div class="grid" id="grid"></div>
</section>
<section class="section" id="build">
<div class="split">
<div class="builder">
<h3>Build Your<br>Loco Taco 🤪</h3>
<p>Pick your combo — we'll name it, price it, and it'll be waiting on the grill.</p>
<div class="opts">
<div class="opt"><label>Protein</label><select id="protein"><option value="Bulgogi Beef|2.5">🥩 Bulgogi Beef</option><option value="Gochujang Chicken|2">🍗 Gochujang Chicken</option><option value="Spicy Pork|2.2">🐷 Spicy Pork</option><option value="Tofu Loco|1.8">🌱 Tofu Loco (Vegan)</option></select></div>
<div class="opt"><label>Base</label><select id="base"><option value="Corn Tortilla|0">🌽 Corn Tortilla</option><option value="Flour Tortilla|0.3">🫓 Flour Tortilla</option><option value="Lettuce Wrap|0">🥬 Lettuce Wrap</option><option value="Kimchi Fried Rice|1">🍚 Kimchi Fried Rice</option></select></div>
<div class="opt"><label>Crunch Topper</label><select id="topping"><option value="Tongbaechu Kimchi|0.5">🥬 Tongbaechu Kimchi</option><option value="Pickled Radish|0.3">🫚 Pickled Radish</option><option value="Cucumber Slaw|0.3">🥒 Cucumber Slaw</option><option value="Danmuji Crunch|0.4">🟡 Danmuji Crunch</option></select></div>
<div class="opt"><label>Sauce</label><select id="sauce"><option value="Gochujang Crema|0.4">🌶️ Gochujang Crema</option><option value="Mild Mayo|0.2">🤍 Mild Mayo</option><option value="Ssamjang Fire|0.6">🔥 Ssamjang Fire</option><option value="Sesame Soy|0.3">🫘 Sesame Soy</option></select></div>
</div>
<div class="taco-stage"><div class="taco-emoji" id="tEmoji">🌮</div><div><b id="tName">The Bulgogi Loco</b><span id="tDesc">Bulgogi Beef on Corn Tortilla, Tongbaechu Kimchi, Gochujang Crema</span><span style="margin-top:8px;font-weight:900;color:#FF2D20"><span id="tPrice">$10.70</span> • <span id="tKcal">520</span> kcal • 🌶️🌶️</span></div></div>
<button class="build-btn" onclick="addBuild()">+ Add My Loco Taco to Order — <span id="bPrice2">$10.70</span></button>
</div>
<div class="info-stack">
<div class="info" id="find"><h4>📍 Find The Truck This Week</h4>
<div class="loc"><div><b>Mon — Grand Park, DTLA</b><span>11AM–3PM • Lunch rush!</span></div><span class="day">TODAY</span></div>
<div class="loc"><div><b>Tue — K-Town Night Market</b><span>5PM–10PM • DJ + Tacos</span></div><span class="day">TUE</span></div>
<div class="loc"><div><b>Wed — Silver Lake</b><span>11AM–9PM • Sunset Park</span></div><span class="day">WED</span></div>
<div class="loc"><div><b>Thu — Arts District</b><span>11AM–9PM • Brewery Row</span></div><span class="day">THU</span></div>
<div class="loc"><div><b>Fri–Sun — Santa Monica Pier</b><span>11AM–11PM • Beach Tacos</span></div><span class="day">WEEKEND</span></div>
</div>
<div class="review" id="reviews"><div class="stars">★★★★★</div><p id="revText">"The Bulgogi Loco is LIFE-CHANGING. Crunchy kimchi, sweet bulgogi, spicy crema — I dream about it."</p><small id="revWho">— Maya R., DTLA • Verified Taco Addict</small><button class="add" style="margin-top:12px" onclick="nextReview()">Next Review →</button></div>
</div>
</div>
<div class="big-cta"><div><h3>Hungry? Don't wait.<br>We sell out by 2PM.</h3><p>Order ahead, get a text when it's ready. First-timers get a FREE kimchi cucumber cracker.</p></div><button onclick="scrollToId('menu')">Order Now — Pickup in 10 Min →</button></div>
</section>
<footer><div class="foot"><div><b style="font-size:20px">🌮 KIMCHI LOCO</b><p style="margin-top:8px;max-width:320px;font-size:13px;line-height:1.6;opacity:.8">Seoul meets LA. A Korean taco truck on a mission to make every bite loud, crunchy, and unforgettable.</p></div><div style="font-size:13px;line-height:1.8"><b>HOURS</b><br>Mon–Sun 11AM–9PM<br>Fri–Sat till 11PM<br><br><b>CONTACT</b><br>hello@kimchiloco.la<br>@kimchiloco.la</div><div style="font-size:13px;line-height:1.8"><b>CATERING</b><br>Parties • Offices • Weddings<br>Min. 20 tacos<br><br><small>© 2026 Kimchi Loco. Made with 🔥 in LA.</small></div></div></footer>
<div class="sticky"><div><b id="stickyText">Your order is empty — add a taco! 🌮</b><span id="stickySub">Pickup: Grand Park • Ready in ~10 min</span></div><button onclick="checkout()">Pickup Order →</button></div>
<div class="toast" id="toast">Added! 🎉</div>
<script>
const menu=[
{n:"Bulgogi Loco",e:"🌮",p:9,cat:"beef",spicy:2,tag:"BEST SELLER",d:"Marinated bulgogi, tongbaechu kimchi, gochujang crema, sesame oil drizzle.",k:480,c:"linear-gradient(135deg,#FFE8A3,#FFB74D)"},
{n:"Gochu Fire Chicken",e:"🍗",p:8,cat:"chicken spicy",spicy:3,tag:"🔥 SPICY",d:"Char-grilled chicken tossed in gochujang fire sauce, pickled radish, ranch slaw.",k:440,c:"linear-gradient(135deg,#FFCDD2,#FF8A80)"},
{n:"Kimchi Fried Rice Taco",e:"🍚",p:7,cat:"veg chicken",spicy:2,tag:"OG FAVE",d:"Our famous kimchi fried rice in a warm tortilla with fried egg + sriracha mayo.",k:390,c:"linear-gradient(135deg,#C8E6C9,#A5D6A7)"},
{n:"Spicy Pork Jeyuk",e:"🐷",p:8.5,cat:"spicy",spicy:3,tag:"NEW",d:"Jeyuk-bokkeum spicy pork, danmuji crunch, ssamjang, fresh cilantro.",k:510,c:"linear-gradient(135deg,#F8BBD0,#FF8A65)"},
{n:"Tofu Loco Vegan",e:"🌱",p:7.5,cat:"veg",spicy:1,tag:"VEGAN",d:"Crispy gochujang tofu, kimchi, cucumber slaw, vegan crema. Zero regrets.",k:360,c:"linear-gradient(135deg,#DCEDC8,#9CCC65)"},
{n:"Cheese Kimchi Birria",e:"🧀",p:10,cat:"beef spicy",spicy:2,tag:"CHEESE PULL",d:"Birria beef + melted cheese + kimchi dip. Dunk it. Thank us later.",k:620,c:"linear-gradient(135deg,#FFF9C4,#FFD54F)"},
{n:"Sesame Shrimp",e:"🍤",p:9.5,cat:"chicken",spicy:1,tag:"CRISPY",d:"Crispy sesame shrimp, mango kimchi salsa, lime crema.",k:430,c:"linear-gradient(135deg,#FFE0B2,#FFAB91)"},
{n:"Loco Combo + Fries",e:"🍟",p:13,cat:"beef chicken veg",spicy:2,tag:"COMBO DEAL",d:"Any 2 tacos + loaded kimchi fries + drink. Best value in LA, period.",k:820,c:"linear-gradient(135deg,#FFECB3,#FFB300)"},
];
const grid=document.getElementById('grid');
let cart=0,total=0;
function render(f='all'){
grid.innerHTML=menu.filter(m=>f==='all'||m.cat.includes(f)).map((m,i)=>`
<div class="card" data-cat="${m.cat}">
<div class="card-top" style="background:${m.c}"><span class="tag">${m.tag}</span><span class="price">$${m.p.toFixed(2)}</span>${m.e}</div>
<div class="card-body"><h3>${m.n}</h3><p>${m.d}</p><div class="meta"><span class="spice">${'🌶️'.repeat(m.spicy)}</span><span class="kcal">${m.k} kcal</span></div>
<button class="add" onclick="addItem('${m.n}',${m.p})">+ Add ${m.n.split(' ')[0]} — $${m.p.toFixed(2)}</button></div>
</div>`).join('');
}
render();
document.getElementById('filters').addEventListener('click',e=>{
if(e.target.dataset.f){document.querySelectorAll('.filter').forEach(b=>b.classList.remove('active'));e.target.classList.add('active');render(e.target.dataset.f)}
});
function addItem(n,p){cart++;total+=p;updateCart();toast(`✅ ${n} added!`)}
function updateCart(){document.getElementById('cartPill').textContent=`🛒 ${cart} • $${total.toFixed(2)}`;document.getElementById('stickyText').textContent=cart?`Your Loco order: ${cart} item${cart>1?'s':''} — $${total.toFixed(2)}`:'Your order is empty — add a taco! 🌮'}
function toast(t){const el=document.getElementById('toast');el.textContent=t;el.classList.add('show');setTimeout(()=>el.classList.remove('show'),1800)}
function scrollToId(id){document.getElementById(id).scrollIntoView({behavior:'smooth'})}
function checkout(){if(!cart){toast('Add a taco first! 🌮');scrollToId('menu');return} toast(`🎉 Order confirmed! ${cart} tacos — pickup in 10 min at Grand Park!`);cart=0;total=0;updateCart()}
// Builder
const emojis=['🌮','🔥','🤪','🌶️','😍'];
function calc(){
const p=document.getElementById('protein').value.split('|'), b=document.getElementById('base').value.split('|'), t=document.getElementById('topping').value.split('|'), s=document.getElementById('sauce').value.split('|');
const price=6+parseFloat(p[1])+parseFloat(b[1])+parseFloat(t[1])+parseFloat(s[1]);
document.getElementById('tName').textContent=`The ${p[0].split(' ')[0]} Loco`;
document.getElementById('tDesc').textContent=`${p[0]} on ${b[0]}, ${t[0]}, ${s[0]}`;
document.getElementById('tPrice').textContent='$'+price.toFixed(2);document.getElementById('bPrice2').textContent='$'+price.toFixed(2);
document.getElementById('tKcal').textContent=Math.round(380+price*14);
document.getElementById('tEmoji').textContent=emojis[Math.floor(Math.random()*emojis.length)];
return price;
}
['protein','base','topping','sauce'].forEach(id=>document.getElementById(id).addEventListener('change',calc));calc();
function addBuild(){addItem('Custom Loco Taco',calc())}
// Reviews
const revs=[['"The Bulgogi Loco is LIFE-CHANGING. Crunchy kimchi, sweet bulgogi, spicy crema — I dream about it."','— Maya R., DTLA'],['"I drove 40 minutes for the Kimchi Birria. Worth every mile. That cheese pull???"','— James K., K-Town'],['"Finally, tacos with a kick that actually kicks. Gochu Fire is no joke 🔥"','— Sofia L., Silver Lake'],['"Brought the truck to our office party. 80 people, zero leftovers. Book them NOW."','— David P., Arts District']];
let ri=0;function nextReview(){ri=(ri+1)%revs.length;document.getElementById('revText').textContent=revs[ri][0];document.getElementById('revWho').textContent=revs[ri][1]}
setInterval(nextReview,5000);
// Marquee
const items='🌮 BULGOGI LOCO <b>$9</b> • 🔥 GOCHU FIRE • 🧀 KIMCHI BIRRIA • 🌱 VEGAN OPTIONS • 📍 GRAND PARK TODAY • ⭐ 4.9 STARS • ';
document.getElementById('mq').innerHTML=`<span>${items.repeat(3)}</span><span>${items.repeat(3)}</span>`;
// Today location
const days=['Santa Monica Pier','Grand Park, DTLA','K-Town Night Market','Silver Lake','Arts District','Santa Monica Pier','Santa Monica Pier'];
document.getElementById('todayLoc').textContent=days[new Date().getDay()];
</script>
</body>
</html>Reasoning trace (423 tokens)
Designing a single-file HTML site with CSS art and emoji for Korean-Mexican fusion branding, responsive layout, and interactive menu filters.