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
- 31.4 s
- Cost
- $0.010
- Output tokens
- 19,994
- Spent thinking
- 3,047 tokens
- Speed
- 670.4 tok/s
- Console errors
- 0
- First token after
- 1.6 s
- First visible text after
- 9.2 s
- Prompt tokens
- 379
- Code size
- 53.8 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
model default- 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 · 751 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 Taco Truck | Seoul Flavor, Street Heart</title>
<style>
:root{
--red:#FF2B1F; --orange:#FF7A1A; --yellow:#FFC800; --cream:#FFF6E5; --ink:#111111;
--green:#00C853; --teal:#00B8A9; --pink:#FF6B9D; --white:#FFFFFF;
--shadow:6px 6px 0 #111111; --shadow-sm:4px 4px 0 #111111;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
section{scroll-margin-top:110px}
::selection{background:var(--yellow);color:#111}
/* MARQUEE */
.marquee{background:#111;color:#fff;overflow:hidden;padding:9px 0;white-space:nowrap;font-weight:900;letter-spacing:.06em;font-size:13px;text-transform:uppercase}
.marquee-track{display:inline-block;animation:marquee 22s linear infinite}
.marquee span{margin:0 18px}
.marquee b{color:var(--yellow)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* HEADER */
header{position:sticky;top:0;z-index:90;background:rgba(255,246,229,.94);backdrop-filter:blur(10px);border-bottom:3px solid #111}
.nav{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:1000;font-size:22px;letter-spacing:-.02em;text-transform:uppercase;line-height:1}
.logo-mark{width:46px;height:46px;background:var(--red);border:2px solid #111;border-radius:13px;display:grid;place-items:center;font-size:26px;box-shadow:3px 3px 0 #111;transform:rotate(-4deg)}
.logo small{display:block;font-size:10px;letter-spacing:.18em;color:var(--red);font-weight:900}
.nav-links{display:flex;gap:26px;font-weight:800;font-size:15px}
.nav-links a{position:relative;padding:4px 0}
.nav-links a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--red);transition:.2s}
.nav-links a:hover:after{width:100%}
.nav-right{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:2px solid #111;border-radius:999px;font-weight:900;font-size:13px;background:#fff;box-shadow:3px 3px 0 #111}
.pill.red{background:var(--red);color:#fff}
.pill.yellow{background:var(--yellow)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,200,83,.2);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.cart-btn{position:relative}
.cart-count{position:absolute;top:-8px;right:-8px;background:#111;color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;border:2px solid #fff}
.burger{display:none;width:44px;height:44px;border:2px solid #111;border-radius:12px;background:#fff;font-size:22px;box-shadow:3px 3px 0 #111}
.mobile-menu{display:none;padding:12px 22px 18px;border-top:2px solid #111;background:var(--cream)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:10px 0;font-weight:900;border-bottom:1px dashed #ccc}
/* HERO */
.hero{max-width:1280px;margin:auto;padding:28px 22px 18px;display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:center}
.hero-badge{display:inline-flex;gap:8px;align-items:center;background:#111;color:#fff;padding:8px 13px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.hero-badge i{color:var(--yellow);font-style:normal}
h1{font-size:clamp(44px,6.2vw,78px);line-height:.92;letter-spacing:-.04em;font-weight:1000;text-transform:uppercase}
h1 .red{color:var(--red)}
h1 .outline{color:transparent;-webkit-text-stroke:2.5px #111}
h1 .hl{background:var(--yellow);padding:0 10px;box-shadow:5px 5px 0 #111;display:inline-block;transform:rotate(-1deg);border:2px solid #111;border-radius:8px}
.hero-sub{font-size:18px;line-height:1.6;margin:18px 0 22px;max-width:580px;color:#333}
.hero-sub b{color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 22px;border:2px solid #111;border-radius:999px;font-weight:1000;font-size:16px;box-shadow:var(--shadow-sm);transition:.15s;text-transform:uppercase;letter-spacing:.02em}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.btn-red{background:var(--red);color:#fff}
.btn-yellow{background:var(--yellow)}
.btn-white{background:#fff}
.btn-black{background:#111;color:#fff}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.meta-card{background:#fff;border:2px solid #111;border-radius:14px;padding:10px 13px;font-size:13px;font-weight:800;box-shadow:3px 3px 0 #111;display:flex;gap:8px;align-items:center}
.trust{display:flex;align-items:center;gap:12px;margin-top:22px}
.avatars{display:flex}
.avatars span{width:36px;height:36px;border-radius:50%;border:2px solid #111;display:grid;place-items:center;font-size:18px;margin-left:-8px;background:var(--yellow)}
.avatars span:first-child{margin-left:0}
.trust p{font-size:14px;font-weight:700}
.stars{color:#FF9F00;letter-spacing:1px}
/* HERO VISUAL */
.visual-wrap{position:relative}
.main-card{background:linear-gradient(145deg,#FF2B1F,#FF7A1A 62%,#FFC800);border:3px solid #111;border-radius:28px;box-shadow:10px 10px 0 #111;padding:20px;transform:rotate(1.5deg);overflow:hidden;position:relative}
.main-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 2px,transparent 2px);background-size:22px 22px;opacity:.35}
.main-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.live{background:#111;color:#fff;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.08em}
.live i{color:#00FF88;font-style:normal}
.price-tag{background:#fff;border:2px solid #111;border-radius:14px;padding:8px 12px;text-align:center;box-shadow:3px 3px 0 #111;line-height:1}
.price-tag b{font-size:22px}
.price-tag small{display:block;font-size:10px;font-weight:900;letter-spacing:.1em}
.taco-stage{position:relative;z-index:2;text-align:center;padding:18px 0 6px}
.big-taco{font-size:clamp(110px,14vw,170px);line-height:1;filter:drop-shadow(0 14px 0 rgba(0,0,0,.18));animation:float 3.2s ease-in-out infinite;display:inline-block}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.taco-title{font-size:clamp(28px,4vw,44px);font-weight:1000;color:#fff;text-transform:uppercase;letter-spacing:-.03em;text-shadow:3px 3px 0 #111;line-height:.95}
.taco-title span{color:var(--yellow)}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;position:relative;z-index:2}
.chips span{background:#fff;border:2px solid #111;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;box-shadow:2px 2px 0 #111}
.heat-bar{background:#111;border-radius:999px;padding:6px;display:flex;align-items:center;gap:10px;margin-top:18px;position:relative;z-index:2;color:#fff;font-size:12px;font-weight:900}
.heat-track{flex:1;height:10px;background:#333;border-radius:999px;overflow:hidden}
.heat-fill{height:100%;width:78%;background:linear-gradient(90deg,var(--yellow),var(--red));border-radius:999px}
.float-card{position:absolute;background:#fff;border:2px solid #111;border-radius:16px;box-shadow:var(--shadow-sm);padding:11px 13px;font-weight:900;font-size:13px;z-index:3;line-height:1.2}
.float-card small{display:block;font-weight:700;color:#555}
.fc1{top:-16px;left:-14px;transform:rotate(-5deg)}
.fc2{bottom:52px;right:-12px;transform:rotate(4deg);background:var(--yellow)}
.badge-spin{position:absolute;top:74px;right:22px;width:92px;height:92px;z-index:3;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.badge-spin text{font-size:10.5px;font-weight:1000;letter-spacing:2.5px;fill:#111;text-transform:uppercase}
/* FEATURES */
.features{max-width:1280px;margin:18px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature{background:#fff;border:2px solid #111;border-radius:18px;padding:16px;box-shadow:4px 4px 0 #111;display:flex;gap:12px;align-items:center}
.feature-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;border:2px solid #111;display:grid;place-items:center;font-size:24px;background:var(--yellow)}
.feature:nth-child(2) .feature-icon{background:#FFD6D6}.feature:nth-child(3) .feature-icon{background:#D9F7E8}.feature:nth-child(4) .feature-icon{background:#FFE7C2}
.feature b{display:block;font-size:15px}.feature p{font-size:13px;color:#555;font-weight:600}
/* SECTION HEAD */
.section{max-width:1280px;margin:auto;padding:64px 22px 10px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.eyebrow{font-weight:1000;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--red);margin-bottom:8px}
h2{font-size:clamp(32px,4.5vw,54px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;font-weight:1000}
h2 em{font-style:normal;background:var(--yellow);padding:0 8px;border:2px solid #111;box-shadow:3px 3px 0 #111;border-radius:8px;display:inline-block}
.section-head p{max-width:420px;font-weight:600;color:#444}
/* MENU */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.filter-btn{padding:10px 16px;border:2px solid #111;border-radius:999px;background:#fff;font-weight:900;box-shadow:3px 3px 0 #111;transition:.15s}
.filter-btn.active{background:#111;color:#fff;transform:translateY(-1px)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.menu-card{background:#fff;border:2px solid #111;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column}
.menu-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:8px 8px 0 #111}
.menu-visual{height:150px;display:grid;place-items:center;font-size:84px;position:relative;border-bottom:2px solid #111}
.mv1{background:linear-gradient(135deg,#FFD166,#FF7A1A)}.mv2{background:linear-gradient(135deg,#FF2B1F,#FF6B9D)}.mv3{background:linear-gradient(135deg,#FFE29A,#FFB347)}.mv4{background:linear-gradient(135deg,#A8E063,#56AB2F)}.mv5{background:linear-gradient(135deg,#FF9A8B,#FF6A88)}.mv6{background:linear-gradient(135deg,#FBC2EB,#A6C1EE)}
.badge{position:absolute;top:12px;left:12px;background:#111;color:#fff;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase}
.badge.hot{background:var(--red)}
.cal{position:absolute;right:12px;top:12px;background:#fff;border:2px solid #111;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}
.menu-body{padding:16px;display:flex;flex-direction:column;flex:1}
.menu-body h3{font-size:21px;line-height:1.1;letter-spacing:-.02em}
.menu-body p{font-size:14px;color:#555;margin:8px 0 12px;flex:1}
.heat-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:13px;font-weight:900}
.heat-line span:last-child{color:var(--red)}
.menu-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.price{font-size:24px;font-weight:1000}
.price small{font-size:12px;color:#777;font-weight:800}
.add-btn{background:var(--yellow);border:2px solid #111;border-radius:999px;padding:11px 15px;font-weight:1000;box-shadow:3px 3px 0 #111;transition:.15s}
.add-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #111}
.add-btn.added{background:var(--green);color:#fff}
/* BUILDER */
.builder-sec{max-width:1280px;margin:54px auto 0;padding:0 22px}
.builder{background:#111;border:3px solid #111;border-radius:30px;box-shadow:10px 10px 0 var(--red);color:#fff;padding:28px;overflow:hidden;position:relative}
.builder:before{content:"🌶️ 🔥 🌮 🥬 🌶️ 🔥";position:absolute;top:14px;right:20px;opacity:.14;font-size:28px;letter-spacing:10px}
.builder h2{color:#fff}.builder h2 em{color:#111}
.builder-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;margin-top:24px;position:relative;z-index:2}
.preview{background:linear-gradient(145deg,#FFF6E5,#FFE8A3);border:3px solid #fff;border-radius:24px;color:#111;padding:22px;text-align:center;box-shadow:6px 6px 0 rgba(255,255,255,.25)}
.preview-label{font-size:11px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.preview-taco{font-size:130px;line-height:1.1;animation:float 3s ease-in-out infinite;display:inline-block}
.preview-name{font-size:24px;font-weight:1000;line-height:1.05;text-transform:uppercase}
.preview-desc{font-size:14px;color:#555;margin:8px 0 14px}
.preview-tags{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;min-height:34px}
.preview-tags span{background:#fff;border:2px solid #111;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:900}
.builder-price{margin-top:18px;background:#111;color:#fff;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center}
.builder-price b{font-size:28px;color:var(--yellow)}
.builder-price small{display:block;color:#ccc;font-weight:700}
.builder-heat{margin-top:12px;text-align:left;font-size:12px;font-weight:900}
.builder-heat .bar{height:12px;background:#ddd;border:2px solid #111;border-radius:999px;overflow:hidden;margin-top:6px}
.builder-heat .fill{height:100%;width:30%;background:linear-gradient(90deg,var(--yellow),var(--red));transition:.3s}
.options{display:grid;gap:16px}
.opt-group{background:#fff;color:#111;border-radius:18px;padding:16px;border:2px solid #fff}
.opt-group h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px;display:flex;justify-content:space-between}
.opt-group h4 span{color:var(--red)}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt-btn{padding:10px 12px;border:2px solid #111;border-radius:999px;background:#FFF6E5;font-weight:900;font-size:13px;transition:.15s}
.opt-btn small{opacity:.6;font-weight:800}
.opt-btn.selected{background:#111;color:#fff;transform:translateY(-1px);box-shadow:3px 3px 0 var(--red)}
.check-row{display:flex;gap:8px;flex-wrap:wrap}
.check-btn{padding:9px 12px;border:2px solid #ddd;border-radius:999px;background:#fff;font-weight:800;font-size:13px}
.check-btn.selected{border-color:#111;background:var(--yellow);color:#111}
.build-actions{display:flex;gap:10px;flex-wrap:wrap}
.build-actions .btn{flex:1;justify-content:center}
/* TRUCK */
.truck-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.map-card{background:#DFF7E8;border:3px solid #111;border-radius:24px;box-shadow:var(--shadow);padding:0;overflow:hidden;min-height:360px;position:relative;background-image:linear-gradient(#fff 2px,transparent 2px),linear-gradient(90deg,#fff 2px,transparent 2px);background-size:56px 56px}
.map-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 30%,rgba(255,255,255,.9) 30% 36%,transparent 36% 68%,rgba(255,255,255,.9) 68% 74%,transparent 74%);opacity:.7}
.map-pin{position:absolute;top:42%;left:52%;transform:translate(-50%,-50%);text-align:center;z-index:2}
.pin{width:62px;height:62px;background:var(--red);border:3px solid #111;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;margin:auto;box-shadow:4px 4px 0 #111;animation:pinBounce 1.8s ease-in-out infinite}
.pin span{transform:rotate(45deg);font-size:28px}
@keyframes pinBounce{0%,100%{transform:rotate(-45deg) translate(0,0)}50%{transform:rotate(-45deg) translate(-4px,-4px)}}
.map-pin b{background:#111;color:#fff;padding:7px 11px;border-radius:999px;font-size:12px;display:inline-block;margin-top:10px}
.map-meta{position:absolute;left:14px;bottom:14px;right:14px;background:#fff;border:2px solid #111;border-radius:16px;padding:13px;display:flex;justify-content:space-between;gap:10px;box-shadow:4px 4px 0 #111;z-index:2;font-size:13px;font-weight:800}
.schedule{background:#fff;border:3px solid #111;border-radius:24px;box-shadow:var(--shadow);padding:18px}
.schedule h3{font-size:22px;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:6px}
.schedule p{font-size:14px;color:#555;margin-bottom:12px}
.day{display:flex;justify-content:space-between;align-items:center;padding:11px 10px;border-bottom:1px dashed #ddd;gap:10px}
.day:last-child{border-bottom:none}
.day b{font-size:14px}.day span{font-size:13px;font-weight:700;color:#555;text-align:right}
.day.today{background:var(--yellow);border:2px solid #111;border-radius:12px;margin:4px 0}
.today-tag{background:#111;color:#fff;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:1000;letter-spacing:.08em;white-space:nowrap}
/* REVIEWS */
.reviews-sec{background:var(--yellow);border-top:3px solid #111;border-bottom:3px solid #111;margin-top:64px}
.reviews-inner{max-width:1280px;margin:auto;padding:56px 22px;display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.stat{background:#fff;border:2px solid #111;border-radius:16px;padding:15px;box-shadow:4px 4px 0 #111}
.stat b{font-size:32px;line-height:1}.stat p{font-size:13px;font-weight:800;color:#555}
.review-card{background:#fff;border:3px solid #111;border-radius:24px;box-shadow:8px 8px 0 #111;padding:26px;min-height:230px}
.review-card .stars{font-size:20px}.review-card blockquote{font-size:clamp(21px,2.6vw,30px);font-weight:900;line-height:1.25;letter-spacing:-.02em;margin:12px 0;transition:opacity .3s}
.review-who{display:flex;gap:12px;align-items:center}
.review-who span{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:22px;border:2px solid #111}
.review-who b{display:block}.review-who small{color:#666;font-weight:700}
.review-dots{display:flex;gap:7px;margin-top:18px}
.review-dots button{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #111}
.review-dots button.active{background:#111}
/* CATERING */
.catering{max-width:1280px;margin:auto;padding:64px 22px}
.cater{background:linear-gradient(120deg,var(--red),var(--orange));border:3px solid #111;border-radius:28px;box-shadow:10px 10px 0 #111;padding:30px;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;overflow:hidden}
.cater h2{color:#fff}.cater h2 em{background:#fff;color:#111}
.cater p{margin-top:12px;font-weight:600;opacity:.95}
.cater-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.cater-points span{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.7);padding:8px 11px;border-radius:999px;font-size:13px;font-weight:900}
.cater-form{background:#fff;color:#111;border:3px solid #111;border-radius:20px;padding:20px;box-shadow:6px 6px 0 #111}
.cater-form h3{font-size:22px;margin-bottom:12px;text-transform:uppercase}
.cater-form label{font-size:12px;font-weight:1000;letter-spacing:.06em;text-transform:uppercase;display:block;margin:12px 0 6px}
.cater-form input,.cater-form select{width:100%;padding:12px;border:2px solid #111;border-radius:12px;font-family:inherit;font-weight:700;background:#FFF6E5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.success-msg{display:none;background:#D9F7E8;border:2px solid #111;border-radius:12px;padding:12px;font-weight:900;margin-top:12px}
.success-msg.show{display:block}
/* FOOTER */
footer{background:#111;color:#fff;margin-top:20px}
.footer-inner{max-width:1280px;margin:auto;padding:48px 22px 24px;display:grid;grid-template-columns:1.3fr .8fr .8fr 1.1fr;gap:28px}
footer h4{text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--yellow);margin-bottom:12px}
footer p,footer li{color:#ccc;font-size:14px;font-weight:600;list-style:none}
footer li{margin:8px 0}
.socials{display:flex;gap:8px;margin-top:14px}
.socials a{width:40px;height:40px;border:2px solid #fff;border-radius:12px;display:grid;place-items:center;font-size:18px}
.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{flex:1;min-width:0;padding:12px;border-radius:999px;border:2px solid #fff;background:#222;color:#fff;font-family:inherit}
.newsletter button{background:var(--yellow);color:#111;padding:12px 16px;border-radius:999px;font-weight:1000;border:2px solid var(--yellow)}
.news-ok{color:#00FF88;font-weight:900;margin-top:10px;display:none}
.footer-bottom{border-top:1px solid #333;padding:16px 22px;text-align:center;color:#999;font-size:13px;font-weight:700}
/* CART DRAWER + TOAST */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;opacity:0;pointer-events:none;transition:.25s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);background:#FFF6E5;z-index:110;transform:translateX(105%);transition:.3s;border-left:3px solid #111;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:20px;border-bottom:3px solid #111;display:flex;justify-content:space-between;align-items:center;background:var(--yellow)}
.drawer-head h3{font-size:24px;text-transform:uppercase}
.close-x{width:42px;height:42px;border:2px solid #111;border-radius:50%;background:#fff;font-size:20px;font-weight:1000;box-shadow:3px 3px 0 #111}
.drawer-body{flex:1;overflow:auto;padding:18px}
.empty{text-align:center;padding:40px 10px;color:#666;font-weight:800}.empty span{font-size:60px;display:block}
.cart-item{background:#fff;border:2px solid #111;border-radius:16px;padding:13px;margin-bottom:12px;box-shadow:3px 3px 0 #111}
.cart-item-top{display:flex;justify-content:space-between;gap:10px;font-weight:1000}
.qty{display:flex;align-items:center;gap:9px;margin-top:10px}
.qty button{width:30px;height:30px;border:2px solid #111;border-radius:50%;background:var(--yellow);font-weight:1000}
.remove{color:var(--red);font-weight:900;font-size:12px;text-transform:uppercase;margin-top:8px}
.drawer-foot{padding:18px;border-top:3px solid #111;background:#fff}
.total-row{display:flex;justify-content:space-between;font-size:20px;font-weight:1000;margin-bottom:12px}
.drawer-foot .btn{width:100%;justify-content:center}
.order-done{display:none;text-align:center;padding:24px 8px}
.order-done.show{display:block}.order-done span{font-size:64px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,120px);background:#111;color:#fff;padding:13px 18px;border-radius:999px;font-weight:900;z-index:130;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:.3s;border:2px solid #fff;max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}
/* RESPONSIVE */
@media(max-width:1020px){
.hero{grid-template-columns:1fr;padding-top:22px}
.visual-wrap{max-width:560px;margin:auto;width:100%}
.features{grid-template-columns:1fr 1fr}
.menu-grid{grid-template-columns:1fr 1fr}
.builder-grid,.truck-grid,.reviews-inner,.cater{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr 1fr}
.nav-links{display:none}.burger{display:grid;place-items:center}
.hide-m{display:none}
}
@media(max-width:580px){
.nav{padding:12px 14px}.logo{font-size:18px}.logo-mark{width:40px;height:40px}
.hero,.section,.builder-sec,.catering{padding-left:14px;padding-right:14px}
.features{grid-template-columns:1fr;padding:0 14px}
.menu-grid{grid-template-columns:1fr}
.builder{padding:18px}
.preview-taco{font-size:96px}
.float-card{font-size:11px;padding:9px}.fc1{left:0}.fc2{right:0}
.form-row{grid-template-columns:1fr}
.footer-inner{grid-template-columns:1fr}
.section{padding-top:44px}
.hero-ctas .btn{flex:1;justify-content:center}
.map-meta{flex-direction:column;gap:4px}
}
</style>
</head>
<body>
<div class="marquee" aria-hidden="true"><div class="marquee-track">
<span>🔥 FREE KIMCHI ON EVERY TACO</span><span>•</span><span>HANDMADE TORTILLAS DAILY</span><span>•</span><span><b>GOCHUJANG MAYO = LIFE</b></span><span>•</span><span>SEOUL → YOUR STREET</span><span>•</span><span>🔥 FREE KIMCHI ON EVERY TACO</span><span>•</span><span>HANDMADE TORTILLAS DAILY</span><span>•</span><span><b>GOCHUJANG MAYO = LIFE</b></span><span>•</span><span>SEOUL → YOUR STREET</span><span>•</span>
</div></div>
<header>
<nav class="nav">
<a href="#home" class="logo"><span class="logo-mark">🌮</span><span>Kimchi Loco<small>Korean Taco Truck</small></span></a>
<div class="nav-links">
<a href="#menu">Menu</a><a href="#build">Build Yours</a><a href="#truck">Find Truck</a><a href="#reviews">Reviews</a><a href="#catering">Catering</a>
</div>
<div class="nav-right">
<span class="pill hide-m"><span class="dot" id="openDot"></span><span id="openText">Open Today 11–9</span></span>
<button class="pill red cart-btn" id="cartOpenBtn">🛒 Order <span class="cart-count" id="cartCount">0</span></button>
<button class="burger" id="burgerBtn" aria-label="Open menu">☰</button>
</div>
</nav>
<div class="mobile-menu" id="mobileMenu">
<a href="#menu">🌮 Menu</a><a href="#build">🔥 Build Your Taco</a><a href="#truck">📍 Find the Truck</a><a href="#reviews">⭐ Reviews</a><a href="#catering">🎉 Catering</a>
</div>
</header>
<main>
<!-- HERO -->
<section class="hero" id="home">
<div>
<div class="hero-badge">🇰🇷 Seoul <i>→</i> Street • Est. 2021 • <i>Flavor first</i></div>
<h1>Real Kimchi.<br><span class="red">Real Fire.</span><br><span class="hl">Real Loco.</span></h1>
<p class="hero-sub">Bulgogi, spicy gochujang pork & crispy Seoul chicken piled high with tangy <b>fresh kimchi slaw</b> on warm handmade tortillas. Sweet. Spicy. Sour. Gone in 3 bites — you’ll be back for 3 more.</p>
<div class="hero-ctas">
<a href="#menu" class="btn btn-red">🌮 See the Menu</a>
<a href="#build" class="btn btn-yellow">Build Yours — $8.50</a>
</div>
<div class="hero-meta">
<div class="meta-card">📍 <span id="todayLocation">Arts District Today</span></div>
<div class="meta-card">⏱️ <span id="waitText">~8 min wait</span></div>
<div class="meta-card">🔥 Heat: Mild → LOCO</div>
</div>
<div class="trust">
<div class="avatars"><span>😋</span><span>🤤</span><span>🔥</span><span>🌶️</span></div>
<p><span class="stars">★★★★★</span> <b>4.9</b> from 2,400+ taco lovers<br>This week: 5,000+ tacos served</p>
</div>
</div>
<div class="visual-wrap">
<div class="float-card fc1">🔥 Extra Heat?<br><small>We got you</small></div>
<div class="float-card fc2">⭐ 4.9 Rating<br><small>2.4k reviews</small></div>
<div class="main-card">
<svg class="badge-spin" viewBox="0 0 100 100"><defs><path id="circ" d="M50,50 m-38,0 a38,38 0 1,1 76,0 a38,38 0 1,1 -76,0"/></defs><circle cx="50" cy="50" r="49" fill="#FFC800" stroke="#111" stroke-width="2"/><text><textPath href="#circ">• FRESH KIMCHI • DAILY • FRESH KIMCHI </textPath></text><text x="50" y="56" text-anchor="middle" font-size="16">🌶️</text></svg>
<div class="main-top">
<span class="live"><i>●</i> LIVE • SERVING NOW</span>
<div class="price-tag"><small>FROM</small><b>$8.50</b></div>
</div>
<div class="taco-stage">
<div class="big-taco">🌮</div>
<div class="taco-title">OG Kimchi<br><span>Bulgogi Taco</span></div>
<div class="chips"><span>🥬 Kimchi Slaw</span><span>🌶️ Gochujang</span><span>🧀 Cheese</span><span>🍋 Lime</span><span>🫓 Handmade</span></div>
<div class="heat-bar"><span>HEAT</span><div class="heat-track"><div class="heat-fill"></div></div><span>🔥🔥🔥</span></div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<div class="features">
<div class="feature"><div class="feature-icon">🥬</div><div><b>Kimchi Made Daily</b><p>Fermented in-house, never jarred & boring</p></div></div>
<div class="feature"><div class="feature-icon">🫓</div><div><b>Handmade Tortillas</b><p>Pressed every morning, warm every time</p></div></div>
<div class="feature"><div class="feature-icon">🌶️</div><div><b>Secret Sauces</b><p>Gochujang mayo, soy garlic, fire ranch</p></div></div>
<div class="feature"><div class="feature-icon">⚡</div><div><b>Fast & Fresh</b><p>Order ahead, skip the line, eat loco</p></div></div>
</div>
<!-- MENU -->
<section class="section" id="menu">
<div class="section-head">
<div><div class="eyebrow">The Menu • Fresh Off The Grill</div><h2>Tacos That<br><em>Hit Different</em></h2></div>
<p>Every taco comes with crunchy kimchi slaw, pickled radish, cilantro & our signature sauces. Add extra heat if you dare. 🌶️</p>
</div>
<div class="filters" id="filters">
<button class="filter-btn active" data-filter="all">All Tacos</button>
<button class="filter-btn" data-filter="beef">Beef</button>
<button class="filter-btn" data-filter="chicken">Chicken</button>
<button class="filter-btn" data-filter="veggie">Veggie</button>
<button class="filter-btn" data-filter="spicy">🔥 Spicy</button>
</div>
<div class="menu-grid" id="menuGrid">
<article class="menu-card" data-cat="beef spicy">
<div class="menu-visual mv1"><span class="badge">Bestseller</span><span class="cal">420 kcal</span>🌮</div>
<div class="menu-body"><h3>OG Kimchi Bulgogi</h3><p>Sweet-savory bulgogi beef, kimchi slaw, cheese, gochujang mayo. The one that started the loco.</p><div class="heat-line"><span>🌶️🌶️</span><span>Medium Fire</span></div><div class="menu-foot"><div class="price">$9.50 <small>/ taco</small></div><button class="add-btn" data-name="OG Kimchi Bulgogi" data-price="9.5">+ Add</button></div></div>
</article>
<article class="menu-card" data-cat="spicy">
<div class="menu-visual mv2"><span class="badge hot">🔥 Spicy</span><span class="cal">480 kcal</span>🌮</div>
<div class="menu-body"><h3>Spicy Pork Gochujang</h3><p>Charred spicy pork, fire ranch, pickled radish & crispy garlic. Sweat included, no extra charge.</p><div class="heat-line"><span>🌶️🌶️🌶️🌶️</span><span>LOCO Heat</span></div><div class="menu-foot"><div class="price">$9.00 <small>/ taco</small></div><button class="add-btn" data-name="Spicy Pork Gochujang" data-price="9">+ Add</button></div></div>
</article>
<article class="menu-card" data-cat="chicken">
<div class="menu-visual mv3"><span class="badge">Fan Favorite</span><span class="cal">390 kcal</span>🌮</div>
<div class="menu-body"><h3>Seoul Crispy Chicken</h3><p>Crunchy fried chicken tossed in soy garlic, kimchi slaw, sesame & cool ranch drizzle.</p><div class="heat-line"><span>🌶️</span><span>Mild & Crunchy</span></div><div class="menu-foot"><div class="price">$8.50 <small>/ taco</small></div><button class="add-btn" data-name="Seoul Crispy Chicken" data-price="8.5">+ Add</button></div></div>
</article>
<article class="menu-card" data-cat="veggie">
<div class="menu-visual mv4"><span class="badge">Veggie</span><span class="cal">340 kcal</span>🌮</div>
<div class="menu-body"><h3>Veggie Seoul Taco</h3><p>Tofu bulgogi, roasted veggies, avocado, kimchi slaw & creamy sesame sauce. Zero meat, all flavor.</p><div class="heat-line"><span>🌶️🌶️</span><span>Fresh & Zesty</span></div><div class="menu-foot"><div class="price">$8.00 <small>/ taco</small></div><button class="add-btn" data-name="Veggie Seoul Taco" data-price="8">+ Add</button></div></div>
</article>
<article class="menu-card" data-cat="beef">
<div class="menu-visual mv5"><span class="badge">Premium</span><span class="cal">520 kcal</span>🌮</div>
<div class="menu-body"><h3>LA Galbi Short Rib</h3><p>Slow-grilled galbi short rib, caramelized onions, kimchi & gochujang glaze. Weekend special.</p><div class="heat-line"><span>🌶️🌶️🌶️</span><span>Rich & Smoky</span></div><div class="menu-foot"><div class="price">$12.00 <small>/ taco</small></div><button class="add-btn" data-name="LA Galbi Short Rib" data-price="12">+ Add</button></div></div>
</article>
<article class="menu-card" data-cat="veggie spicy">
<div class="menu-visual mv6"><span class="badge hot">New!</span><span class="cal">460 kcal</span>🍚</div>
<div class="menu-body"><h3>Kimchi Fried Rice Taco</h3><p>Our famous kimchi fried rice in a warm tortilla with fried egg, cheese & spicy mayo. Breakfast? Anytime.</p><div class="heat-line"><span>🌶️🌶️🌶️</span><span>Spicy & Cozy</span></div><div class="menu-foot"><div class="price">$8.50 <small>/ taco</small></div><button class="add-btn" data-name="Kimchi Fried Rice Taco" data-price="8.5">+ Add</button></div></div>
</article>
</div>
</section>
<!-- BUILDER -->
<div class="builder-sec" id="build">
<div class="builder">
<div class="eyebrow" style="color:var(--yellow)">Interactive • Make It Yours</div>
<h2>Build Your<br><em>Loco Taco</em></h2>
<p style="margin-top:10px;font-weight:600;opacity:.9;max-width:560px">Pick your protein, sauce & extras. Watch your price & heat level change live — then add it straight to your order.</p>
<div class="builder-grid">
<div class="preview">
<div class="preview-label">Your Creation</div>
<div class="preview-taco" id="prevEmoji">🌮</div>
<div class="preview-name" id="prevName">Bulgogi Beast</div>
<p class="preview-desc" id="prevDesc">Bulgogi beef on corn tortilla with gochujang mayo</p>
<div class="preview-tags" id="prevTags"><span>🥬 Kimchi Slaw</span><span>🧀 Cheese</span></div>
<div class="builder-price"><div><small>YOUR PRICE</small><b id="buildPrice">$10.50</b></div><div style="text-align:right"><small>HEAT LEVEL</small><b id="buildHeatText" style="font-size:18px;color:#fff">🌶️🌶️ Medium</b></div></div>
<div class="builder-heat">Spice Meter<div class="bar"><div class="fill" id="heatFill"></div></div></div>
</div>
<div class="options">
<div class="opt-group"><h4>1. Protein <span>Base $8</span></h4>
<div class="opt-row" id="proteinRow">
<button class="opt-btn selected" data-protein="Bulgogi Beef" data-price="0" data-heat="2" data-emoji="🌮">🥩 Bulgogi +$0</button>
<button class="opt-btn" data-protein="Spicy Pork" data-price="0" data-heat="4" data-emoji="🌮">🔥 Spicy Pork +$0</button>
<button class="opt-btn" data-protein="Seoul Chicken" data-price="0" data-heat="1" data-emoji="🍗">🍗 Chicken +$0</button>
<button class="opt-btn" data-protein="Galbi Short Rib" data-price="2" data-heat="3" data-emoji="🥩">👑 Galbi +$2</button>
<button class="opt-btn" data-protein="Tofu Veggie" data-price="-0.5" data-heat="2" data-emoji="🥬">🥬 Tofu -$0.50</button>
</div>
</div>
<div class="opt-group"><h4>2. Tortilla / Base</h4>
<div class="opt-row" id="tortillaRow">
<button class="opt-btn selected" data-tortilla="Corn Tortilla" data-price="0">🌽 Corn</button>
<button class="opt-btn" data-tortilla="Flour Tortilla" data-price="0">🫓 Flour</button>
<button class="opt-btn" data-tortilla="Kimchi Rice Base" data-price="1.5">🍚 Kimchi Rice +$1.50</button>
</div>
</div>
<div class="opt-group"><h4>3. Sauce</h4>
<div class="opt-row" id="sauceRow">
<button class="opt-btn selected" data-sauce="Gochujang Mayo" data-heat="3" data-price="0">🌶️ Gochujang Mayo</button>
<button class="opt-btn" data-sauce="Soy Garlic" data-heat="1" data-price="0">🧄 Soy Garlic</button>
<button class="opt-btn" data-sauce="Fire Ranch" data-heat="4" data-price="0.5">🔥 Fire Ranch +$0.50</button>
<button class="opt-btn" data-sauce="Sesame Cream" data-heat="0" data-price="0">🥛 Sesame Cream</button>
</div>
</div>
<div class="opt-group"><h4>4. Extras <span>Tap to toggle</span></h4>
<div class="check-row" id="extrasRow">
<button class="check-btn selected" data-extra="Kimchi Slaw" data-price="0.5" data-heat="1">🥬 Kimchi Slaw +$0.50</button>
<button class="check-btn selected" data-extra="Cheese" data-price="1" data-heat="0">🧀 Cheese +$1</button>
<button class="check-btn" data-extra="Fried Egg" data-price="1.5" data-heat="0">🍳 Fried Egg +$1.50</button>
<button class="check-btn" data-extra="Avocado" data-price="1.5" data-heat="0">🥑 Avocado +$1.50</button>
<button class="check-btn" data-extra="Pickled Radish" data-price="0.5" data-heat="0">🫒 Pickled Radish +$0.50</button>
<button class="check-btn" data-extra="Extra Heat" data-price="0" data-heat="3">💀 Extra Heat</button>
</div>
</div>
<div class="build-actions">
<button class="btn btn-red" id="addCustomBtn">+ Add My Loco Taco</button>
<button class="btn btn-white" id="randomBtn">🎲 Surprise Me</button>
</div>
</div>
</div>
</div>
</div>
<!-- TRUCK -->
<section class="section" id="truck">
<div class="section-head">
<div><div class="eyebrow">Find The Truck</div><h2>Where Are<br><em>We Today?</em></h2></div>
<p>We move every day so you never have to go far for your fix. Follow the red truck — you’ll smell the kimchi & gochujang before you see us.</p>
</div>
<div class="truck-grid">
<div class="map-card">
<div class="map-pin"><div class="pin"><span>🌮</span></div><b>📍 KIMCHI LOCO</b></div>
<div class="map-meta"><span id="mapLocation">📍 Arts District — 7th & Alameda</span><span>🅿️ Street parking</span><span>⏱️ 11AM–9PM</span></div>
</div>
<div class="schedule">
<h3>📅 This Week’s Stops</h3><p>Come hungry. Leave loco. No reservations — just show up.</p>
<div id="scheduleList"></div>
</div>
</div>
</section>
<!-- REVIEWS -->
<section class="reviews-sec" id="reviews">
<div class="reviews-inner">
<div>
<div class="eyebrow">The Hype Is Real</div>
<h2>People Are<br>Obsessed.</h2>
<div class="stats">
<div class="stat"><b><span class="counter" data-target="4.9">0</span>★</b><p>Average rating</p></div>
<div class="stat"><b><span class="counter" data-target="2400">0</span>+</b><p>Happy reviews</p></div>
<div class="stat"><b><span class="counter" data-target="5000">0</span>+</b><p>Tacos this week</p></div>
<div class="stat"><b><span class="counter" data-target="98">0</span>%</b><p>Come back for seconds</p></div>
</div>
</div>
<div class="review-card">
<div class="stars">★★★★★</div>
<blockquote id="reviewText">“I dreamt about the OG Bulgogi taco. I had to come back the next day. The kimchi slaw is genius — tangy, crunchy, perfect.”</blockquote>
<div class="review-who"><span id="reviewEmoji">😋</span><div><b id="reviewName">Maya R. — Regular since 2023</b><small id="reviewMeta">Ordered: OG Kimchi Bulgogi • 🌶️🌶️</small></div></div>
<div class="review-dots" id="reviewDots"></div>
</div>
</div>
</section>
<!-- CATERING -->
<section class="catering" id="catering">
<div class="cater">
<div>
<div class="eyebrow" style="color:#FFC800">Events • Office • Weddings</div>
<h2>Book The Truck.<br><em>Steal The Party.</em></h2>
<p>Birthdays, office lunches, festivals, weddings — if there’s a crowd, we’ll bring the fire. Custom menus, vegan options & our famous kimchi fried rice bar.</p>
<div class="cater-points"><span>👥 50–500 guests</span><span>🎉 Custom menu</span><span>🌱 Veggie friendly</span><span>⚡ 2hr setup</span></div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:22px"><span class="pill" style="background:#111;color:#fff;border-color:#fff">⭐ Eater LA “Best Food Truck”</span><span class="pill" style="background:#fff;color:#111">🏆 Infatuation Pick</span></div>
</div>
<form class="cater-form" id="caterForm">
<h3>🎉 Plan Your Event</h3>
<div class="form-row"><div><label>Your Name</label><input required placeholder="Alex Kim" id="caterName"></div><div><label>Guests</label><select id="caterGuests"><option>50–100</option><option>100–200</option><option>200+</option></select></div></div>
<label>Event Date</label><input type="date" required>
<label>Event Type</label><select><option>Office Party</option><option>Wedding</option><option>Festival</option><option>Birthday</option><option>Other</option></select>
<button class="btn btn-red" style="width:100%;justify-content:center;margin-top:16px">Check Availability →</button>
<div class="success-msg" id="caterSuccess">✅ You’re in! We’ll email you within 24 hours. Get ready to turn up the heat! 🌶️</div>
<p style="font-size:12px;color:#666;margin-top:10px;text-align:center;font-weight:700">No spam. Just tacos. Prefer email? hello@kimchiloco.com</p>
</form>
</div>
</section>
</main>
<footer>
<div class="footer-inner">
<div><div class="logo" style="color:#fff"><span class="logo-mark">🌮</span><span>Kimchi Loco<small style="color:#FFC800">Seoul • Street • Loco</small></span></div><p style="margin-top:12px">Korean tacos with a loco twist. Fresh kimchi, handmade tortillas & sauces that slap. Come hungry, leave happy.</p><div class="socials"><a href="#" aria-label="Instagram">📸</a><a href="#" aria-label="TikTok">🎵</a><a href="#" aria-label="X">𝕏</a><a href="#" aria-label="Yelp">⭐</a></div></div>
<div><h4>Hours</h4><ul><li>Mon–Thu: 11AM – 9PM</li><li>Fri–Sat: 11AM – 11PM</li><li>Sunday: 12PM – 8PM</li><li>🌙 Late night Fri/Sat</li></ul></div>
<div><h4>Visit Us</h4><ul><li id="footerLoc">📍 Arts District, LA</li><li>📞 (213) 555-LOCO</li><li>✉️ hello@kimchiloco.com</li><li>🅿️ Street + lot parking</li></ul></div>
<div><h4>Get The Drop</h4><p>Secret menu drops, free taco days & truck locations. Weekly, no spam.</p><form class="newsletter" id="newsForm"><input type="email" required placeholder="your@email.com" id="newsEmail"><button type="submit">Join</button></form><div class="news-ok" id="newsOk">✅ You’re on the list! First free kimchi is on us. 🥬</div></div>
</div>
<div class="footer-bottom">© 2026 Kimchi Loco • Made with 🌶️ + 🥬 in Los Angeles • Eat Loco.</div>
</footer>
<!-- CART -->
<div class="drawer-overlay" id="overlay"></div>
<aside class="drawer" id="drawer" aria-label="Shopping cart">
<div class="drawer-head"><h3>🛒 Your Order</h3><button class="close-x" id="closeCart">✕</button></div>
<div class="drawer-body" id="cartBody">
<div class="empty" id="emptyCart"><span>🌮</span>No tacos yet.<br>Your stomach is waiting…</div>
<div id="cartItems"></div>
<div class="order-done" id="orderDone"><span>🎉</span><h3 style="font-size:24px;text-transform:uppercase;margin:8px 0">Order Confirmed!</h3><p style="font-weight:700;color:#555">Pickup in ~8 min at the truck.<br>Show code <b style="color:var(--red)">LOCO-2847</b><br>We’ll have it HOT & ready. 🔥</p><button class="btn btn-black" id="doneBtn" style="margin-top:16px">Back to Menu</button></div>
</div>
<div class="drawer-foot" id="drawerFoot">
<div class="total-row"><span>Total</span><span id="cartTotal">$0.00</span></div>
<button class="btn btn-red" id="checkoutBtn">Order Ahead • Pickup →</button>
<p style="text-align:center;font-size:12px;font-weight:800;color:#777;margin-top:9px">Pay at truck • Card & tap accepted • Free kimchi refills</p>
</div>
</aside>
<div class="toast" id="toast">Added to cart! 🌮</div>
<script>
(function(){
"use strict";
const $ = (s, c=document)=>c.querySelector(s);
const $$ = (s, c=document)=>Array.from(c.querySelectorAll(s));
// Toast
const toastEl = $('#toast'); let toastTimer;
function toast(msg){ toastEl.textContent = msg; toastEl.classList.add('show'); clearTimeout(toastTimer); toastTimer=setTimeout(()=>toastEl.classList.remove('show'),2200); }
// Mobile menu
const burger=$('#burgerBtn'), mobile=$('#mobileMenu');
burger.addEventListener('click',()=>mobile.classList.toggle('open'));
$$('#mobileMenu a').forEach(a=>a.addEventListener('click',()=>mobile.classList.remove('open')));
// Open status + today location
const schedule=[
{day:'Monday',loc:'Downtown — 5th & Spring',short:'Downtown'},
{day:'Tuesday',loc:'Silver Lake — Sunset Blvd',short:'Silver Lake'},
{day:'Wednesday',loc:'Culver City — Arts District',short:'Culver City'},
{day:'Thursday',loc:'Koreatown — 8th & Western',short:'Koreatown'},
{day:'Friday',loc:'Arts District — 7th & Alameda',short:'Arts District'},
{day:'Saturday',loc:'Santa Monica — Pier Lot',short:'Santa Monica'},
{day:'Sunday',loc:'Pasadena — Old Town',short:'Pasadena'}
];
const todayIdx = (new Date().getDay()+6)%7; // Mon=0
const today = schedule[todayIdx];
$('#todayLocation').textContent = today.short+' Today';
$('#mapLocation').textContent = '📍 '+today.loc;
$('#footerLoc').textContent = '📍 '+today.loc;
const hour=new Date().getHours();
const isOpen = hour>=11 && hour<22;
$('#openText').textContent = isOpen ? 'Open Now • till 9PM' : 'Opens 11AM Today';
$('#openDot').style.background = isOpen ? '#00C853' : '#FF2B1F';
const list=$('#scheduleList');
schedule.forEach((s,i)=>{
const div=document.createElement('div'); div.className='day'+(i===todayIdx?' today':'');
div.innerHTML=`<b>${s.day}${i===todayIdx?' <span class="today-tag">TODAY</span>':''}</b><span>${s.loc} • 11–9</span>`;
list.appendChild(div);
});
// Wait time ticker
let wait=8;
setInterval(()=>{ wait = 6+Math.floor(Math.random()*7); $('#waitText').textContent='~'+wait+' min wait'; },12000);
// Counters
function animateCounter(el){
const target=parseFloat(el.dataset.target); const isFloat=target===4.9; const dur=1400; const start=performance.now();
function step(now){ const p=Math.min((now-start)/dur,1); const val=target*p; el.textContent=isFloat?val.toFixed(1):Math.round(val).toLocaleString(); if(p<1) requestAnimationFrame(step); }
requestAnimationFrame(step);
}
$$('.counter').forEach((el,i)=>setTimeout(()=>animateCounter(el),400+i*150));
// Menu filters
$$('.filter-btn').forEach(btn=>{
btn.addEventListener('click',()=>{
$$('.filter-btn').forEach(b=>b.classList.remove('active')); btn.classList.add('active');
const f=btn.dataset.filter;
$$('.menu-card').forEach(card=>{
const show = f==='all' || card.dataset.cat.includes(f);
card.style.display = show ? 'flex' : 'none';
});
});
});
// Cart
let cart=[];
const drawer=$('#drawer'), overlay=$('#overlay'), cartItems=$('#cartItems'), emptyCart=$('#emptyCart'), cartCount=$('#cartCount'), cartTotal=$('#cartTotal'), orderDone=$('#orderDone'), drawerFoot=$('#drawerFoot');
function openCart(){ drawer.classList.add('open'); overlay.classList.add('open'); orderDone.classList.remove('show'); drawerFoot.style.display='block'; $('#cartBody').scrollTop=0; }
function closeCart(){ drawer.classList.remove('open'); overlay.classList.remove('open'); }
$('#cartOpenBtn').addEventListener('click',openCart);
$('#closeCart').addEventListener('click',closeCart);
overlay.addEventListener('click',closeCart);
document.addEventListener('keydown',e=>{ if(e.key==='Escape') closeCart(); });
function renderCart(){
cartItems.innerHTML='';
const count=cart.reduce((a,i)=>a+i.qty,0); cartCount.textContent=count;
emptyCart.style.display = cart.length? 'none':'block';
let total=0;
cart.forEach((item,idx)=>{
total+=item.price*item.qty;
const div=document.createElement('div'); div.className='cart-item';
div.innerHTML=`<div class="cart-item-top"><span>${item.name}</span><span>$${(item.price*item.qty).toFixed(2)}</span></div>
<div class="qty"><button data-act="dec" data-i="${idx}">−</button><b>${item.qty}</b><button data-act="inc" data-i="${idx}">+</button><span style="margin-left:auto;font-size:12px;color:#777;font-weight:800">$${item.price.toFixed(2)} each</span></div>
<button class="remove" data-act="rem" data-i="${idx}">Remove</button>`;
cartItems.appendChild(div);
});
cartTotal.textContent='$'+total.toFixed(2);
$$('#cartItems button').forEach(b=>b.addEventListener('click',()=>{
const i=+b.dataset.i, act=b.dataset.act;
if(act==='inc') cart[i].qty++;
if(act==='dec'){ cart[i].qty--; if(cart[i].qty<=0) cart.splice(i,1); }
if(act==='rem') cart.splice(i,1);
renderCart();
}));
}
function addToCart(name,price){
const found=cart.find(i=>i.name===name);
if(found) found.qty++; else cart.push({name,price,qty:1});
renderCart(); toast('✅ '+name+' added! 🌮');
}
$$('.add-btn').forEach(btn=>{
btn.addEventListener('click',()=>{
addToCart(btn.dataset.name, parseFloat(btn.dataset.price));
const old=btn.textContent; btn.textContent='✓ Added'; btn.classList.add('added');
setTimeout(()=>{btn.textContent=old; btn.classList.remove('added');},1400);
});
});
$('#checkoutBtn').addEventListener('click',()=>{
if(!cart.length){ toast('Add a taco first! 🌮'); return; }
orderDone.classList.add('show'); drawerFoot.style.display='none'; cart=[]; renderCart();
});
$('#doneBtn').addEventListener('click',()=>{ closeCart(); document.querySelector('#menu').scrollIntoView({behavior:'smooth'}); });
renderCart();
// Reviews rotator
const reviews=[
{text:'“I dreamt about the OG Bulgogi taco. I had to come back the next day. The kimchi slaw is genius — tangy, crunchy, perfect.”',name:'Maya R. — Regular since 2023',meta:'Ordered: OG Kimchi Bulgogi • 🌶️🌶️',emoji:'😋'},
{text:'“Spicy Pork Gochujang nearly ended me — in the best way. My whole office is addicted. We order every Friday.”',name:'Daniel K. — Office Hero',meta:'Ordered: Spicy Pork Gochujang • 🌶️🌶️🌶️🌶️',emoji:'🔥'},
{text:'“Finally, a truck that gets both worlds. Korean flavors, taco soul. The Galbi taco is a religious experience.”',name:'Sofia L. — Foodie',meta:'Ordered: LA Galbi Short Rib • 🌶️🌶️🌶️',emoji:'🤤'},
{text:'“Veggie Seoul Taco converted my meat-loving husband. Avocado + sesame cream + kimchi = magic. 10/10.”',name:'Priya T. — First-timer',meta:'Ordered: Veggie Seoul Taco • 🌶️🌶️',emoji:'🥑'}
];
let rIdx=0; const rText=$('#reviewText'), rName=$('#reviewName'), rMeta=$('#reviewMeta'), rEmoji=$('#reviewEmoji'), dotsWrap=$('#reviewDots');
reviews.forEach((_,i)=>{ const b=document.createElement('button'); b.className=i===0?'active':''; b.setAttribute('aria-label','Review '+(i+1)); b.addEventListener('click',()=>showReview(i)); dotsWrap.appendChild(b); });
function showReview(i){
rIdx=i; rText.style.opacity=0;
setTimeout(()=>{ rText.textContent=reviews[i].text; rName.textContent=reviews[i].name; rMeta.textContent=reviews[i].meta; rEmoji.textContent=reviews[i].emoji; rText.style.opacity=1; },200);
$$('#reviewDots button').forEach((d,j)=>d.classList.toggle('active',j===i));
}
setInterval(()=>showReview((rIdx+1)%reviews.length),4200);
// Builder
const state={protein:'Bulgogi Beef',proteinPrice:0,proteinHeat:2,emoji:'🌮',tortilla:'Corn Tortilla',tortillaPrice:0,sauce:'Gochujang Mayo',sauceHeat:3,saucePrice:0,extras:new Set(['Kimchi Slaw','Cheese'])};
const extraPrices={'Kimchi Slaw':0.5,'Cheese':1,'Fried Egg':1.5,'Avocado':1.5,'Pickled Radish':0.5,'Extra Heat':0};
const extraHeats={'Kimchi Slaw':1,'Cheese':0,'Fried Egg':0,'Avocado':0,'Pickled Radish':0,'Extra Heat':3};
const extraEmoji={'Kimchi Slaw':'🥬','Cheese':'🧀','Fried Egg':'🍳','Avocado':'🥑','Pickled Radish':'🫒','Extra Heat':'💀'};
function heatLabel(h){
if(h<=1) return ['🌶️ Mild',18];
if(h<=3) return ['🌶️🌶️ Medium',38];
if(h<=5) return ['🌶️🌶️🌶️ Hot',62];
if(h<=7) return ['🌶️🌶️🌶️🌶️ LOCO',84];
return ['💀💀 MAX LOCO',100];
}
function updateBuilder(){
let price=8+state.proteinPrice+state.tortillaPrice+state.saucePrice;
let heat=state.proteinHeat+state.sauceHeat;
state.extras.forEach(e=>{ price+=extraPrices[e]||0; heat+=extraHeats[e]||0; });
$('#prevEmoji').textContent=state.emoji;
$('#prevName').textContent=state.protein.split(' ')[0]+' '+(state.protein.includes('Beef')?'Beast':state.protein.includes('Pork')?'Fire':state.protein.includes('Chicken')?'Crunch':state.protein.includes('Galbi')?'Royale':'Fresh');
$('#prevDesc').textContent=`${state.protein} on ${state.tortilla.toLowerCase()} with ${state.sauce.toLowerCase()}`;
const tags=$('#prevTags'); tags.innerHTML='';
state.extras.forEach(e=>{ const s=document.createElement('span'); s.textContent=(extraEmoji[e]||'✨')+' '+e; tags.appendChild(s); });
if(!tags.children.length) tags.innerHTML='<span>No extras — still loco</span>';
$('#buildPrice').textContent='$'+price.toFixed(2);
const [label,pct]=heatLabel(heat);
$('#buildHeatText').textContent=label; $('#heatFill').style.width=pct+'%';
return price;
}
function bindRow(rowId, cb){
$$('#'+rowId+' .opt-btn').forEach(b=>b.addEventListener('click',()=>{
$$('#'+rowId+' .opt-btn').forEach(x=>x.classList.remove('selected')); b.classList.add('selected'); cb(b);
}));
}
bindRow('proteinRow',b=>{ state.protein=b.dataset.protein; state.proteinPrice=+b.dataset.price; state.proteinHeat=+b.dataset.heat; state.emoji=b.dataset.emoji; updateBuilder(); });
bindRow('tortillaRow',b=>{ state.tortilla=b.dataset.tortilla; state.tortillaPrice=+b.dataset.price; updateBuilder(); });
bindRow('sauceRow',b=>{ state.sauce=b.dataset.sauce; state.sauceHeat=+b.dataset.heat; state.saucePrice=+b.dataset.price; updateBuilder(); });
$$('#extrasRow .check-btn').forEach(b=>b.addEventListener('click',()=>{
const ex=b.dataset.extra;
if(state.extras.has(ex)){ state.extras.delete(ex); b.classList.remove('selected'); } else { state.extras.add(ex); b.classList.add('selected'); }
updateBuilder();
}));
$('#addCustomBtn').addEventListener('click',()=>{
const price=updateBuilder();
const extras=[...state.extras].join(', ')||'no extras';
addToCart(`Custom: ${state.protein} (${state.sauce}, ${extras})`, price);
openCart();
});
$('#randomBtn').addEventListener('click',()=>{
const pick=(id)=>{ const btns=$$('#'+id+' .opt-btn'); const b=btns[Math.floor(Math.random()*btns.length)]; b.click(); };
pick('proteinRow'); pick('tortillaRow'); pick('sauceRow');
$$('#extrasRow .check-btn').forEach(b=>{ const on=Math.random()>0.5; if(on!==b.classList.contains('selected')) b.click(); });
toast('🎲 Random loco created!');
});
updateBuilder();
// Forms
$('#newsForm').addEventListener('submit',e=>{ e.preventDefault(); $('#newsOk').style.display='block'; $('#newsEmail').value=''; toast('✅ Welcome to the Loco list!'); });
$('#caterForm').addEventListener('submit',e=>{ e.preventDefault(); $('#caterSuccess').classList.add('show'); toast('🎉 Event request sent!'); e.target.querySelector('button[type="submit"],button').textContent='Request Sent ✓'; });
})();
</script>
</body>
</html>Reasoning trace (3,047 tokens)
Evaluating layout and styling constraints for a self-contained sandboxed iframe demo with inline CSS, JS, and no external resources.Adding interactive menu builder, cart, and schedule mockups while keeping first-paint content visible.Extending the design with cart state, builder logic, schedule highlighting, and accessibility constraints.Applying neo-brutalist styling and interactive UI logic with viewport and accessibility constraints.