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
- 22.1 s
- Cost
- $0.0060
- Output tokens
- 11,951
- Spent thinking
- 1,207 tokens
- Speed
- 635.5 tok/s
- Console errors
- 0
- First token after
- 3.3 s
- First visible text after
- 5.3 s
- Prompt tokens
- 379
- Code size
- 32.6 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"high"}- 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 · 392 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 | Seoul Meets Mexico</title>
<style>
:root{--red:#ff2e2e;--yellow:#ffc800;--cream:#fff6e5;--ink:#121212;--teal:#00c2a8;--orange:#ff6b00;--pink:#ff4d8d}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none}
header{position:sticky;top:0;z-index:50;background:#121212;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;box-shadow:0 4px 0 var(--yellow)}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.5px;font-size:22px}
.logo-icon{width:44px;height:44px;background:var(--red);border-radius:12px;display:grid;place-items:center;font-size:26px;transform:rotate(-6deg);border:2px solid #fff}
.logo small{display:block;font-size:9px;letter-spacing:3px;color:var(--yellow);font-weight:800}
.logo b span{color:var(--yellow)}
nav{display:flex;gap:22px;font-weight:700;font-size:14px}
nav a{opacity:.9} nav a:hover{color:var(--yellow);opacity:1}
.header-cta{display:flex;gap:10px;align-items:center}
.cart-btn{background:var(--yellow);color:#121212;font-weight:900;padding:10px 16px;border-radius:999px;font-size:14px;display:flex;gap:6px;align-items:center}
.order-btn{background:var(--red);color:#fff;font-weight:900;padding:11px 18px;border-radius:999px;font-size:14px}
@media(max-width:820px){nav{display:none}.logo{font-size:18px}}
/* HERO */
.hero{position:relative;padding:28px 20px 18px;background:radial-gradient(circle at 88% 18%,#ffe58a 0 180px,transparent 181px),radial-gradient(circle at 8% 90%,#ffc8c8 0 140px,transparent 141px),var(--cream);overflow:hidden}
.hero-grid{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.pill{display:inline-flex;gap:8px;align-items:center;background:#121212;color:#fff;padding:8px 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.4px}
.pill em{color:var(--yellow);font-style:normal}
h1{font-size:clamp(44px,7vw,84px);line-height:.88;letter-spacing:-3px;font-weight:1000;margin:16px 0 14px}
h1 .red{color:var(--red);position:relative}
h1 .stroke{-webkit-text-stroke:2.5px #121212;color:transparent}
.hero p.sub{font-size:19px;line-height:1.45;max-width:560px;color:#333}
.hero p.sub b{background:var(--yellow);padding:1px 6px;border-radius:6px}
.korean{font-weight:900;color:var(--red)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 18px}
.cta-main{background:var(--red);color:#fff;padding:16px 22px;border-radius:999px;font-weight:900;font-size:16px;box-shadow:6px 6px 0 #121212;transition:.15s}
.cta-main:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #121212}
.cta-ghost{background:#fff;border:2.5px solid #121212;padding:14px 20px;border-radius:999px;font-weight:900;box-shadow:4px 4px 0 #121212}
.stats{display:flex;gap:22px;flex-wrap:wrap}
.stats b{font-size:22px;display:block}
.stats span{font-size:12px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.6px}
.live{display:flex;align-items:center;gap:8px;margin-top:14px;font-weight:800;font-size:14px}
.live i{width:10px;height:10px;background:#00c853;border-radius:50%;display:inline-block;animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,200,83,.5)}70%{box-shadow:0 0 0 10px rgba(0,200,83,0)}100%{box-shadow:0 0 0 0 rgba(0,200,83,0)}}
.hero-visual{position:relative;min-height:430px}
.main-card{background:#fff;border:3px solid #121212;border-radius:28px;padding:22px;box-shadow:10px 10px 0 #121212;position:relative;z-index:2;transform:rotate(1deg)}
.main-card-top{display:flex;justify-content:space-between;align-items:center}
.main-card-top span{font-size:11px;font-weight:900;letter-spacing:2px;background:var(--yellow);padding:6px 9px;border-radius:999px;border:2px solid #121212}
.main-taco{background:var(--yellow);border:3px solid #121212;border-radius:22px;height:230px;display:grid;place-items:center;font-size:150px;position:relative;margin:16px 0;line-height:1}
.main-taco:after{content:"🌶️";position:absolute;right:12px;top:10px;font-size:36px;transform:rotate(20deg)}
.price-tag{position:absolute;right:-12px;bottom:72px;background:var(--red);color:#fff;font-weight:1000;padding:10px 14px;border-radius:999px;border:3px solid #121212;transform:rotate(8deg);font-size:20px}
.mini-row{display:flex;gap:10px}
.mini{flex:1;background:#fff6e5;border:2px solid #121212;border-radius:16px;padding:12px;text-align:center}
.mini b{font-size:18px}.mini span{display:block;font-size:12px;color:#666;font-weight:700}
.float-card{position:absolute;background:#fff;border:2.5px solid #121212;border-radius:16px;padding:12px 14px;box-shadow:5px 5px 0 #121212;z-index:3;font-weight:900}
.float1{left:-10px;top:18px;transform:rotate(-6deg);font-size:14px}
.float2{right:0;bottom:42px;transform:rotate(5deg);font-size:14px;background:var(--teal);color:#fff}
.smile{position:absolute;left:30px;bottom:8px;font-size:28px;animation:bounce 1.8s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:520px){.float1{left:0}.float2{right:4px}.main-taco{font-size:110px;height:190px}}
/* MARQUEE */
.marquee{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;padding:13px 0;border-top:3px solid #121212;border-bottom:3px solid #121212;transform:rotate(-1deg) scale(1.02)}
.marquee-track{display:inline-block;animation:scroll 18s linear infinite;font-weight:1000;letter-spacing:1px;font-size:16px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* SECTIONS */
.section{max-width:1220px;margin:0 auto;padding:54px 20px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.section-head h2{font-size:clamp(32px,5vw,54px);line-height:.95;letter-spacing:-2px;font-weight:1000}
.section-head p{max-width:520px;color:#444;line-height:1.5}
.kicker{font-size:12px;font-weight:900;letter-spacing:2.5px;color:var(--red);text-transform:uppercase;margin-bottom:8px}
/* MENU */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:11px 18px;border-radius:999px;border:2.5px solid #121212;background:#fff;font-weight:900}
.tab.active{background:#121212;color:#fff;box-shadow:4px 4px 0 var(--red)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.menu-grid{grid-template-columns:1fr}}
.card{background:#fff;border:2.5px solid #121212;border-radius:22px;overflow:hidden;box-shadow:6px 6px 0 #121212;transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:8px 10px 0 #121212}
.card-img{height:150px;display:grid;place-items:center;font-size:78px;position:relative}
.badge{position:absolute;top:10px;left:10px;background:#fff;border:2px solid #121212;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900}
.spice{position:absolute;top:10px;right:10px;background:#121212;color:#fff;padding:5px 9px;border-radius:999px;font-size:11px}
.card-body{padding:16px}
.card-body h3{font-size:20px;letter-spacing:-.5px;margin-bottom:6px}
.card-body p{color:#555;font-size:14px;line-height:1.45;min-height:42px}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.price{font-size:24px;font-weight:1000}
.add{background:var(--red);color:#fff;padding:10px 16px;border-radius:999px;font-weight:900;box-shadow:3px 3px 0 #121212}
.add:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #121212}
/* BUILDER */
.builder{background:#121212;color:#fff;border-radius:32px;padding:28px;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;border:3px solid #121212;box-shadow:10px 10px 0 var(--red)}
@media(max-width:900px){.builder{grid-template-columns:1fr;padding:20px}}
.builder h2{font-size:38px;line-height:.95;letter-spacing:-1.5px}
.builder h2 span{color:var(--yellow)}
.taco-stage{background:linear-gradient(180deg,#ffe58a,#ffc800);border:3px solid #fff;border-radius:24px;padding:22px;text-align:center;color:#121212;position:relative;overflow:hidden}
.taco-visual{font-size:150px;line-height:1;margin:10px 0 6px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.15));transition:.2s}
.taco-stage p{font-weight:800}
.heat{font-size:22px;letter-spacing:2px}
.control-group{margin:18px 0}
.control-group label{font-size:12px;letter-spacing:2px;font-weight:900;color:var(--yellow);text-transform:uppercase;display:block;margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#222;color:#fff;border:2px solid #444;padding:9px 13px;border-radius:999px;font-weight:800;font-size:13px}
.chip.active{background:var(--yellow);color:#121212;border-color:var(--yellow)}
.chip.active.red{background:var(--red);color:#fff;border-color:var(--red)}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
.total-box{background:#fff;color:#121212;border-radius:18px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.total-box b{font-size:28px}
.summary{font-size:13px;color:#555;line-height:1.4;max-width:65%}
.big-add{background:var(--red);color:#fff;padding:16px 20px;border-radius:999px;font-weight:1000;width:100%;margin-top:12px;font-size:16px;box-shadow:0 5px 0 #7a0000}
/* VISIT */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:900px){.visit-grid{grid-template-columns:1fr}}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:14px}
@media(max-width:600px){.days{grid-template-columns:repeat(4,1fr)}}
.day{padding:14px 6px;border-radius:16px;border:2.5px solid #121212;background:#fff;font-weight:900;text-align:center}
.day small{display:block;font-size:11px;color:#777;margin-top:3px}
.day.active{background:var(--yellow);box-shadow:4px 4px 0 #121212}
.day.today{outline:3px solid var(--red)}
.loc-card{background:#fff;border:2.5px solid #121212;border-radius:24px;padding:22px;box-shadow:6px 6px 0 #121212}
.loc-card h3{font-size:28px;letter-spacing:-1px}
.map{background:repeating-linear-gradient(0deg,#e8f5e9 0 22px,#c8e6c9 22px 24px),repeating-linear-gradient(90deg,#e8f5e9 0 22px,#c8e6c9 22px 24px);border:2px solid #121212;border-radius:18px;height:170px;display:grid;place-items:center;font-size:70px;margin:14px 0;position:relative}
.map:after{content:"📍";position:absolute;font-size:48px;animation:bounce 1.4s infinite}
.info-list{display:grid;gap:10px;font-weight:700}
.info-list div{display:flex;justify-content:space-between;border-bottom:1px dashed #ccc;padding-bottom:8px}
.promo{background:var(--red);color:#fff;border-radius:24px;padding:24px;border:3px solid #121212;box-shadow:6px 6px 0 #121212}
.promo h3{font-size:30px;line-height:1;letter-spacing:-1px}
.promo p{margin:10px 0 16px;opacity:.95;line-height:1.5}
.promo input{width:100%;padding:14px;border-radius:999px;border:2px solid #121212;font-size:15px;margin-bottom:10px}
.promo button{width:100%;background:#121212;color:#fff;padding:14px;border-radius:999px;font-weight:900}
/* REVIEWS */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:850px){.reviews{grid-template-columns:1fr}}
.review{background:#fff;border:2.5px solid #121212;border-radius:20px;padding:20px;box-shadow:5px 5px 0 #121212}
.review .stars{color:var(--orange);font-size:18px}
.review p{margin:10px 0;line-height:1.5;font-weight:600}
.review span{font-size:13px;color:#777;font-weight:700}
/* FOOTER */
footer{background:#121212;color:#fff;padding:36px 20px;text-align:center}
footer h2{font-size:42px;letter-spacing:-2px}
footer h2 span{color:var(--yellow)}
/* CART DRAWER */
.drawer{position:fixed;right:0;top:0;width:min(420px,95vw);height:100%;background:#fff;z-index:100;transform:translateX(105%);transition:.3s;box-shadow:-10px 0 30px rgba(0,0,0,.25);padding:22px;overflow:auto}
.drawer.open{transform:translateX(0)}
.drawer h3{font-size:26px;letter-spacing:-1px}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed #ccc}
.cart-item b{font-size:15px}
.qty{display:flex;gap:8px;align-items:center}
.qty button{width:28px;height:28px;border-radius:50%;border:2px solid #121212;background:var(--yellow);font-weight:900}
.checkout{width:100%;background:var(--red);color:#fff;padding:16px;border-radius:999px;font-weight:1000;margin-top:16px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99;display:none}
.overlay.open{display:block}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);background:#121212;color:#fff;padding:14px 20px;border-radius:999px;font-weight:900;z-index:120;transition:.25s;box-shadow:0 10px 25px rgba(0,0,0,.3);text-align:center;max-width:92vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.success{background:var(--teal);color:#fff;border-radius:16px;padding:14px;margin-top:12px;text-align:center;font-weight:900;display:none}
</style>
</head>
<body>
<header>
<div class="logo"><div class="logo-icon">🌮</div><div><small>김치 로코 • FOOD TRUCK</small><b>KIMCHI <span>LOCO</span></b></div></div>
<nav><a href="#menu">Menu</a><a href="#builder">Build Your Taco</a><a href="#visit">Find Us</a><a href="#reviews">Reviews</a></nav>
<div class="header-cta"><button class="cart-btn" onclick="toggleCart(true)">🛒 Cart <span id="cartCount">0</span></button><button class="order-btn" onclick="document.getElementById('menu').scrollIntoView()">Order Now →</button></div>
</header>
<section class="hero">
<div class="hero-grid">
<div>
<div class="pill">🇰🇷 SEOUL × 🇲🇽 MEXICO <em>• EST. 2024 •</em> 🚚</div>
<h1>SEOUL<br><span class="red">MEETS</span> <span class="stroke">MEXICO.</span><br>FIRE MEETS<br>FIESTA. 🔥</h1>
<p class="sub">Crispy kimchi, juicy bulgogi & gochujang heat — stuffed into warm corn tortillas. <b>One bite and you'll go loco.</b> <span class="korean">(맛있어! 진짜 맛있어!)</span></p>
<div class="cta-row">
<button class="cta-main" onclick="document.getElementById('menu').scrollIntoView()">🌮 See The Menu — from $7</button>
<button class="cta-ghost" onclick="document.getElementById('visit').scrollIntoView()">📍 Where's The Truck?</button>
</div>
<div class="stats">
<div><b>⭐ 4.9/5</b><span>2,400+ Reviews</span></div>
<div><b>18,000+</b><span>Tacos Served</span></div>
<div><b>200 / day</b><span>We Sell Out Fast</span></div>
</div>
<div class="live"><i></i> LIVE TODAY: Downtown LA • 11am–9pm • <span style="color:#ff2e2e">Only 63 tacos left!</span></div>
</div>
<div class="hero-visual">
<div class="float-card float1">🔥 EXTRA HOT<br><small style="font-weight:700">Gochujang Mayo</small></div>
<div class="float-card float2">🚚 See you at DTLA<br><small>11AM — 9PM</small></div>
<div class="main-card">
<div class="main-card-top"><span>★ BESTSELLER</span><span style="background:#fff">🇰🇷 × 🇲🇽</span></div>
<div class="main-taco">🌮<div class="price-tag">$9.50</div></div>
<h3 style="font-size:24px;letter-spacing:-1px">The Original Kimchi Loco Taco</h3>
<p style="color:#666;margin:6px 0 14px">Bulgogi beef • House kimchi slaw • Sesame • Gochujang mayo • Crispy shallots</p>
<div class="mini-row">
<div class="mini"><b>🌶️🌶️🌶️</b><span>Spice Level</span></div>
<div class="mini"><b>⏱️ 3 min</b><span>Fresh & Fast</span></div>
<div class="mini"><b>💚 100%</b><span>Halal Options</span></div>
</div>
</div>
<div class="smile">😋</div>
</div>
</div>
</section>
<div class="marquee"><div class="marquee-track">KIMCHI LOCO • SEOUL MEETS MEXICO • BULGOGI TACO • GOCHUJANG CHICKEN • KIMCHI CARNITAS • SPICY TUNA • FRESH DAILY • KIMCHI LOCO • SEOUL MEETS MEXICO • BULGOGI TACO • GOCHUJANG CHICKEN • KIMCHI CARNITAS • SPICY TUNA • FRESH DAILY • </div></div>
<section class="section" id="menu">
<div class="section-head"><div><div class="kicker">🔥 The Menu</div><h2>Pick your<br>poison. <span style="color:#ff2e2e">(It's delicious.)</span></h2></div><p>Everything made fresh to order. Kimchi is fermented in-house every Monday. Tortillas pressed daily. Get here early — we cap at 200 tacos a day and we <b>always</b> sell out by 2pm.</p></div>
<div class="tabs" id="tabs">
<button class="tab active" data-cat="tacos">🌮 Tacos</button>
<button class="tab" data-cat="loaded">🍟 Loaded & Sides</button>
<button class="tab" data-cat="sips">🧋 Sips</button>
</div>
<div class="menu-grid" id="menuGrid"></div>
</section>
<section class="section" id="builder" style="padding-top:10px">
<div class="builder">
<div>
<div class="kicker" style="color:var(--yellow)">✨ Interactive</div>
<h2>BUILD YOUR<br><span>LOCO TACO</span><br>HOW YOU LIKE IT</h2>
<p style="opacity:.85;line-height:1.5;margin:12px 0">Choose your protein, pile on the kimchi, crank the heat. We'll make it fresh while you watch. <b style="color:#ffc800">No wrong answers — only loco ones.</b></p>
<div class="taco-stage">
<div style="font-weight:900;letter-spacing:2px;font-size:12px">YOUR CREATION</div>
<div class="taco-visual" id="tacoVisual">🌮</div>
<div class="heat" id="heatDisplay">🔥🔥🔥</div>
<p id="tacoName">Bulgogi Kimchi Loco</p>
<div style="font-size:13px;opacity:.7" id="tacoDesc">Juicy • Tangy • Spicy</div>
</div>
</div>
<div>
<div class="control-group"><label>1. Choose Protein</label><div class="chips" id="proteinChips"></div></div>
<div class="control-group"><label>2. Spice Level</label><input type="range" id="heatRange" min="0" max="5" value="3"><div style="display:flex;justify-content:space-between;font-size:12px;font-weight:700"><span>Mild 😊</span><span id="heatLabel">Spicy 🌶️🌶️🌶️</span><span>LOCO 🔥🔥🔥🔥🔥</span></div></div>
<div class="control-group"><label>3. Sauce</label><div class="chips" id="sauceChips"></div></div>
<div class="control-group"><label>4. Add Extras ( +$1 each)</label><div class="chips" id="extraChips"></div></div>
<div class="total-box"><div class="summary" id="summaryText">Bulgogi Beef + Gochujang Mayo + Kimchi Slaw</div><div style="text-align:right"><div style="font-size:12px;font-weight:800;color:#777">YOUR TACO</div><b id="builderPrice">$9.50</b></div></div>
<button class="big-add" onclick="addBuilderToCart()">Add My Loco Taco to Cart 🌮 →</button>
</div>
</div>
</section>
<section class="section" id="visit">
<div class="section-head"><div><div class="kicker">📍 Find The Truck</div><h2>Come find<br>the loco truck</h2></div><p>We're rolling all over the city. Tap a day to see where we'll be. <b>Pro tip:</b> Pre-order and skip the line — lunch rush is real.</p></div>
<div class="visit-grid">
<div>
<div class="days" id="days"></div>
<div class="loc-card">
<h3 id="locName">Downtown LA</h3>
<p id="locDesc" style="color:#666;margin:6px 0">Grand Park • Food Truck Row</p>
<div class="map">🗺️</div>
<div class="info-list">
<div><span>📍 Address</span><span id="locAddr">250 S Grand Ave, LA</span></div>
<div><span>🕐 Hours</span><span id="locHours">11:00 AM — 9:00 PM</span></div>
<div><span>🚗 Parking</span><span id="locPark">Garage nearby • $5</span></div>
<div><span>🎵 Vibe</span><span id="locVibe">K-pop • Reggaeton • Street food energy</span></div>
</div>
<button class="big-add" onclick="showToast('📍 Saved! We will text you when we arrive 🗺️')">Notify Me When You Arrive 🔔</button>
</div>
</div>
<div>
<div class="promo">
<div style="font-size:40px">🎉</div>
<h3>Get $2 OFF<br>your first taco</h3>
<p>Join the Loco Club. One text a week: where the truck is, secret menu drops, free taco days. No spam — only fire.</p>
<input id="phoneInput" placeholder="📱 Phone number (555-123-4567)">
<button onclick="joinClub()">Join Loco Club → Get $2 OFF</button>
<div class="success" id="clubSuccess">🎉 You're in! Code: LOCO2 — Show this at the truck!</div>
<p style="font-size:12px;margin-top:12px;opacity:.8">⭐ Free taco on your 5th visit • 🌮 Birthday taco on us • 🔥 Early access to spicy challenges</p>
</div>
<div style="background:#fff;border:2.5px solid #121212;border-radius:20px;padding:18px;margin-top:16px;box-shadow:5px 5px 0 #121212">
<h4 style="font-size:18px">👨🍳 Meet Jin & Mateo</h4>
<p style="color:#555;line-height:1.5;margin-top:6px;font-size:14px">Jin grew up in Seoul making kimchi with his grandmother. Mateo grew up in East LA making tacos with his abuela. One food truck. One crazy idea. <b>Kimchi Loco was born.</b></p>
</div>
</div>
</div>
</section>
<section class="section" id="reviews" style="padding-top:10px">
<div class="section-head"><div><div class="kicker">⭐ Real People. Real Loco.</div><h2>Don't take<br>our word for it</h2></div></div>
<div class="reviews">
<div class="review"><div class="stars">★★★★★</div><p>"I drove 40 minutes for the Bulgogi Taco. I would drive 4 hours. The kimchi slaw + gochujang mayo combo is GENIUS."</p><span>— Sofia R. • DTLA • Verified Loco Fan</span></div>
<div class="review"><div class="stars">★★★★★</div><p>"As a Korean, I was skeptical. As a human who loves tacos, I'm obsessed. This is fusion done RIGHT. 매운맛 최고!"</p><span>— David K. • Koreatown</span></div>
<div class="review"><div class="stars">★★★★★</div><p>"We booked Kimchi Loco for our office lunch. 120 tacos in 2 hours. Everyone still talks about it. Book them NOW."</p><span>— Maya T. • WeWork • Catering Client</span></div>
</div>
</section>
<footer>
<h2>KIMCHI <span>LOCO</span> 🌮🔥</h2>
<p style="opacity:.8;margin:10px 0 16px">Seoul meets Mexico. One truck. Zero regrets. See you at the window.</p>
<p style="font-weight:800">📸 @kimchiloco • 📞 (555) 042-LOCO • 🚚 Book us for events: hello@kimchiloco.com</p>
<p style="opacity:.5;font-size:12px;margin-top:16px">© 2025 Kimchi Loco • Made with 🌶️ in Los Angeles • 김치 로코 — 맛있어!</p>
</footer>
<div class="overlay" id="overlay" onclick="toggleCart(false)"></div>
<aside class="drawer" id="drawer">
<div style="display:flex;justify-content:space-between;align-items:center"><h3>Your Order 🛒</h3><button onclick="toggleCart(false)" style="font-size:24px;background:#eee;width:36px;height:36px;border-radius:50%">×</button></div>
<p style="color:#777;font-size:14px;margin:6px 0 12px">Pickup at the truck • Ready in ~5 min</p>
<div id="cartItems"><p style="color:#999;text-align:center;padding:30px 0">Your cart is empty 🌮<br>Add something loco!</p></div>
<div id="cartFooter" style="display:none">
<div style="display:flex;justify-content:space-between;font-weight:900;font-size:20px;margin-top:14px"><span>Total</span><span id="cartTotal">$0.00</span></div>
<button class="checkout" onclick="checkout()">🔥 Place Pre-Order — Skip The Line</button>
<div class="success" id="orderSuccess">🎉 Order confirmed! Show code <b id="orderCode">LOCO-000</b> at the window. See you soon!</div>
</div>
</aside>
<div class="toast" id="toast">Added! 🌮</div>
<script>
const MENU=[
{name:"Original Kimchi Loco",desc:"Bulgogi beef, kimchi slaw, sesame, gochujang mayo. The one that started it all.",price:9.5,emoji:"🌮",spice:"🌶️🌶️🌶️",cat:"tacos",badge:"★ BESTSELLER"},
{name:"Gochujang Chicken",desc:"Crispy fried chicken tossed in gochujang glaze, pickled radish, cilantro, spicy mayo.",price:9,emoji:"🍗",spice:"🌶️🌶️🌶️🌶️",cat:"tacos",badge:"🔥 SPICY"},
{name:"Kimchi Carnitas",desc:"Slow-roasted pork, house kimchi, onion, cilantro, salsa verde. Tangy, juicy, perfect.",price:9.5,emoji:"🌯",spice:"🌶️🌶️",cat:"tacos",badge:"NEW"},
{name:"Spicy Tuna Crispy",desc:"Spicy tuna poke, crispy rice, avocado, sriracha, jalapeño. For tuna lovers only.",price:10.5,emoji:"🍣",spice:"🌶️🌶️🌶️",cat:"tacos",badge:"PREMIUM"},
{name:"LA Galbi Short Rib",desc:"Marinated short rib, ssamjang, lettuce, garlic chips. Weekend special — get it fast.",price:12,emoji:"🥩",spice:"🌶️🌶️",cat:"tacos",badge:"WEEKEND"},
{name:"Tofu Loco (Vegan)",desc:"Crispy tofu, kimchi, vegan gochujang mayo, avocado. No compromise. All flavour.",price:8.5,emoji:"🥑",spice:"🌶️🌶️",cat:"tacos",badge:"VEGAN 🌱"},
{name:"Kimchi Loaded Fries",desc:"Crispy fries, bulgogi, kimchi, cheese sauce, scallions, gochujang drizzle. Dangerous.",price:11,emoji:"🍟",spice:"🌶️🌶️🌶️",cat:"loaded",badge:"MUST TRY"},
{name:"Corn Ribs — Gochujang",desc:"Charred corn ribs brushed with gochujang butter, cotija, lime. TikTok famous.",price:7.5,emoji:"🌽",spice:"🌶️🌶️",cat:"loaded",badge:"VIRAL"},
{name:"Kimchi Quesadilla",desc:"Three cheeses, kimchi, bulgogi, grilled to crispy perfection. Dipped in salsa.",price:10,emoji:"🧀",spice:"🌶️🌶️",cat:"loaded",badge:""},
{name:"Yuzu Sparkle Soda",desc:"Yuzu, lime, mint, sparkling water. Bright, fizzy, refreshing after the heat.",price:4.5,emoji:"🍋",spice:"",cat:"sips",badge:"REFRESHING"},
{name:"Korean Strawberry Milk",desc:"Creamy strawberry milk, made fresh. Like Seoul in a bottle.",price:5,emoji:"🍓",spice:"",cat:"sips",badge:"KIDS LOVE IT"},
{name:"Makgeolli Margarita",desc:"Makgeolli, tequila, lime, agave. Adult only. Trust us — it's incredible.",price:9,emoji:"🍹",spice:"",cat:"sips",badge:"21+ ONLY"},
];
let cart=[],currentCat='tacos';
function renderMenu(){
const grid=document.getElementById('menuGrid');
grid.innerHTML=MENU.filter(i=>i.cat===currentCat).map(i=>{
const idx=MENU.indexOf(i);
const colors=['#ffe58a','#ffc8c8','#b8f1e6','#d6e8ff','#ffd6a5','#c8f7c5'];
return `<div class="card"><div class="card-img" style="background:${colors[idx%colors.length]}"><span>${i.badge?`<span class="badge">${i.badge}</span>`:''}</span><span>${i.spice?`<span class="spice">${i.spice}</span>`:''}</span>${i.emoji}</div><div class="card-body"><h3>${i.name}</h3><p>${i.desc}</p><div class="card-foot"><span class="price">$${i.price.toFixed(2)}</span><button class="add" onclick="addToCart(${idx})">+ Add</button></div></div></div>`
}).join('');
}
document.getElementById('tabs').addEventListener('click',e=>{
if(e.target.classList.contains('tab')){document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));e.target.classList.add('active');currentCat=e.target.dataset.cat;renderMenu();}
});
function addToCart(idx){const it=MENU[idx];const f=cart.find(c=>c.name===it.name);if(f)f.qty++;else cart.push({name:it.name,price:it.price,emoji:it.emoji,qty:1});renderCart();showToast(`✅ ${it.name} added! 🌮`);}
function renderCart(){
document.getElementById('cartCount').textContent=cart.reduce((a,c)=>a+c.qty,0);
const box=document.getElementById('cartItems'),foot=document.getElementById('cartFooter');
if(!cart.length){box.innerHTML='<p style="color:#999;text-align:center;padding:30px 0">Your cart is empty 🌮<br>Add something loco!</p>';foot.style.display='none';return;}
foot.style.display='block';
box.innerHTML=cart.map((c,i)=>`<div class="cart-item"><div><b>${c.emoji} ${c.name}</b><div style="color:#777;font-size:13px">$${c.price.toFixed(2)}</div></div><div class="qty"><button onclick="chgQty(${i},-1)">−</button><b>${c.qty}</b><button onclick="chgQty(${i},1)">+</button></div></div>`).join('');
document.getElementById('cartTotal').textContent='$'+cart.reduce((a,c)=>a+c.price*c.qty,0).toFixed(2);
}
function chgQty(i,d){cart[i].qty+=d;if(cart[i].qty<=0)cart.splice(i,1);renderCart();}
function toggleCart(open){document.getElementById('drawer').classList.toggle('open',open);document.getElementById('overlay').classList.toggle('open',open);}
function checkout(){document.getElementById('orderCode').textContent='LOCO-'+Math.floor(100+Math.random()*900);document.getElementById('orderSuccess').style.display='block';showToast('🎉 Pre-order confirmed! Skip the line!');}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200);}
function joinClub(){const v=document.getElementById('phoneInput').value.trim();if(v.length<7){showToast('📱 Enter your phone number first!');return;}document.getElementById('clubSuccess').style.display='block';showToast('🎉 Welcome to Loco Club! Code: LOCO2');}
// BUILDER
const proteins=[{n:'Bulgogi Beef',e:'🥩',p:0},{n:'Gochujang Chicken',e:'🍗',p:0},{n:'Carnitas',e:'🐖',p:0.5},{n:'Spicy Tuna',e:'🍣',p:1},{n:'Tofu (Vegan)',e:'🌱',p:-0.5}];
const sauces=[{n:'Gochujang Mayo',e:'🔥'},{n:'Soy Lime',e:'🍋'},{n:'Sriracha',e:'🌶️'},{n:'House Hot',e:'💀'}];
const extras=[{n:'Kimchi Slaw',e:'🥬',p:1},{n:'Fried Egg',e:'🍳',p:1},{n:'Cheese',e:'🧀',p:1},{n:'Pickled Radish',e:'🫒',p:1},{n:'Jalapeño',e:'🌶️',p:1},{n:'Avocado',e:'🥑',p:1}];
let selP=0,selS=0,selE=new Set([0]);
function renderBuilder(){
document.getElementById('proteinChips').innerHTML=proteins.map((p,i)=>`<button class="chip ${i===selP?'active':''}" onclick="selP=${i};renderBuilder()">${p.e} ${p.n}</button>`).join('');
document.getElementById('sauceChips').innerHTML=sauces.map((s,i)=>`<button class="chip ${i===selS?'active red':''}" onclick="selS=${i};renderBuilder()">${s.e} ${s.n}</button>`).join('');
document.getElementById('extraChips').innerHTML=extras.map((x,i)=>`<button class="chip ${selE.has(i)?'active':''}" onclick="toggleExtra(${i})">${x.e} ${x.n}</button>`).join('');
const heat=+document.getElementById('heatRange').value;
document.getElementById('heatDisplay').textContent=heat===0?'😊 No heat': '🔥'.repeat(heat)+(heat<5?' ':'') ;
document.getElementById('heatLabel').textContent=['Mild 😊','Mild+ 🌶️','Medium 🌶️🌶️','Spicy 🌶️🌶️🌶️','Extra Hot 🌶️🌶️🌶️🌶️','LOCO! 🔥🔥🔥🔥🔥'][heat];
document.getElementById('tacoVisual').textContent=heat>=5?'🌮🔥':'🌮';
document.getElementById('tacoName').textContent=proteins[selP].n+' Loco';
document.getElementById('tacoDesc').textContent=sauces[selS].n+' • '+['Mild','Medium','Spicy','Extra Hot','LOCO'][Math.min(heat,4)]+' heat';
let price=8.5+proteins[selP].p+[...selE].reduce((a,i)=>a+extras[i].p,0);
document.getElementById('builderPrice').textContent='$'+price.toFixed(2);
document.getElementById('summaryText').textContent=proteins[selP].n+' + '+sauces[selS].n+([...selE].map(i=>' + '+extras[i].n).join('')||'');
}
function toggleExtra(i){selE.has(i)?selE.delete(i):selE.add(i);renderBuilder();}
document.getElementById('heatRange').addEventListener('input',renderBuilder);
function addBuilderToCart(){
const price=8.5+proteins[selP].p+[...selE].reduce((a,i)=>a+extras[i].p,0);
const name='My Loco Taco ('+proteins[selP].n+')';
const f=cart.find(c=>c.name===name);if(f)f.qty++;else cart.push({name,price,emoji:'🌮',qty:1});
renderCart();showToast('🌮 Your Loco Taco added!');toggleCart(true);
}
// SCHEDULE
const SCHED=[
{n:'Monday',loc:'Koreatown',desc:'Korea Town • 8th & Western',addr:'693 S Western Ave, LA',hours:'11 AM — 8 PM',park:'Street parking',vibe:'K-pop • Korean street food'},
{n:'Tuesday',loc:'Downtown LA',desc:'Grand Park • Food Truck Row',addr:'250 S Grand Ave, LA',hours:'11 AM — 9 PM',park:'Garage nearby • $5',vibe:'K-pop • Reggaeton • Street food energy'},
{n:'Wednesday',loc:'Santa Monica',desc:'Pier • Beachside Lot',addr:'1610 Ocean Ave, Santa Monica',hours:'11 AM — 8 PM',park:'Pier parking',vibe:'Beach • Sunset • Tacos'},
{n:'Thursday',loc:'Silver Lake',desc:'Sunset Junction',addr:'3900 Sunset Blvd, LA',hours:'11 AM — 9 PM',park:'Lot behind venue',vibe:'Indie • Tacos • Good times'},
{n:'Friday',loc:'West Hollywood',desc:'Santa Monica Blvd',addr:'8954 Santa Monica Blvd, WeHo',hours:'11 AM — 10 PM',park:'Valet available',vibe:'Night market • Neon • Loco'},
{n:'Saturday',loc:'Long Beach',desc:'Belmont Shore • Farmers Market',addr:'5230 E 2nd St, Long Beach',hours:'10 AM — 9 PM',park:'Free lots',vibe:'Market • Beach • Family day'},
{n:'Sunday',loc:'Echo Park',desc:'Echo Park Lake • Food Truck Fest',addr:'751 Echo Park Ave, LA',hours:'11 AM — 7 PM',park:'Park & ride',vibe:'Chill • Picnic • Tacos by the lake'},
];
const today=(new Date().getDay()+6)%7;
function renderDays(active){
document.getElementById('days').innerHTML=SCHED.map((d,i)=>`<button class="day ${i===active?'active':''} ${i===today?'today':''}" onclick="renderDays(${i});updateLoc(${i})">${d.n.slice(0,3)}${i===today?'<small>TODAY</small>':'<small>'+d.loc.split(' ')[0]+'</small>'}</button>`).join('');
}
function updateLoc(i){const d=SCHED[i];document.getElementById('locName').textContent=d.loc;document.getElementById('locDesc').textContent=d.desc;document.getElementById('locAddr').textContent=d.addr;document.getElementById('locHours').textContent=d.hours;document.getElementById('locPark').textContent=d.park;document.getElementById('locVibe').textContent=d.vibe;}
renderMenu();renderBuilder();renderDays(today);updateLoc(today);renderCart();
</script>
</body>
</html>Reasoning trace (1,207 tokens)
Designing a single-file responsive HTML site for Kimchi Loco with hero, menu tabs, taco builder interaction, and bold fusion styling.Adding taco builder logic, cart drawer, schedule selector, and CSS art while keeping single-file and zero external resources.