Food truck websiteOne-line
Claude Haiku 5.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 54.4 s
- Cost
- $0.0076
- Output tokens
- 15,047
- Spent thinking
- 1,252 tokens
- Speed
- 287.3 tok/s
- Console errors
- 0
- First token after
- 2.0 s
- First visible text after
- 9.4 s
- Prompt tokens
- 543
- Code size
- 30.1 KB
- Finish reason
- stop
- Served by
- Claude Platform on AWS
- Model id
anthropic/claude-haiku-5.5- Reasoning sent
{"effort":"medium"}- Max output
- 32,000 tokens
- Generated
- Nov 10, 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 · 658 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 on Wheels</title>
<meta name="description" content="Kimchi Loco serves Korean-inspired tacos from a food truck. Bulgogi, spicy pork belly, crispy tofu and more.">
<style>
:root {
--red: #e4322b;
--gochu: #b3121f;
--cream: #fff4e0;
--lime: #b6e33a;
--yellow: #ffc62e;
--ink: #1d1410;
--muted: #6b5a4f;
--card: #ffffff;
--radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--cream);
color: var(--ink);
line-height: 1.5;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, .display {
font-family: Impact, "Arial Narrow Bold", "Arial Black", system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.02;
}
/* ---------- Header ---------- */
header {
position: sticky; top: 0; z-index: 50;
background: var(--ink);
color: var(--cream);
}
.nav {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px;
}
.logo {
font-family: Impact, system-ui, sans-serif;
font-size: 1.6rem; text-transform: uppercase; text-decoration: none;
color: var(--cream); letter-spacing: 0.02em;
}
.logo span { color: var(--lime); }
.nav-links { display: flex; gap: 22px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: 0.85; }
.nav-links a:hover { opacity: 1; color: var(--yellow); }
.nav-cta {
background: var(--red); color: #fff; border: 0; padding: 10px 18px;
border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none;
font-size: 0.95rem;
}
.nav-cta:hover { background: var(--yellow); color: var(--ink); }
.burger {
display: none; background: none; border: 0; color: var(--cream);
font-size: 1.8rem; cursor: pointer; line-height: 1;
}
@media (max-width: 760px) {
.nav-links, .nav-cta { display: none; }
.nav-links.open {
display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
background: var(--ink); padding: 10px 20px 20px; gap: 14px;
}
.burger { display: block; }
}
/* ---------- Hero ---------- */
.hero {
position: relative; overflow: hidden;
background:
radial-gradient(circle at 15% 20%, rgba(255,198,46,.55), transparent 40%),
radial-gradient(circle at 85% 70%, rgba(182,227,58,.45), transparent 42%),
linear-gradient(135deg, var(--red), var(--gochu));
color: #fff;
padding: 80px 20px 120px;
}
.hero-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
}
.eyebrow {
display: inline-block; background: rgba(0,0,0,.25); padding: 6px 14px;
border-radius: 999px; font-weight: 700; font-size: 0.85rem; letter-spacing: .08em;
text-transform: uppercase; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(3rem, 8vw, 6.2rem); text-shadow: 4px 4px 0 var(--ink); }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero p.lead { font-size: 1.15rem; margin: 20px 0 28px; max-width: 520px; opacity: .95; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
display: inline-block; padding: 15px 26px; border-radius: 999px; font-weight: 800;
text-decoration: none; border: 3px solid var(--ink); cursor: pointer; font-size: 1rem;
transition: transform .15s ease, box-shadow .15s ease;
box-shadow: 4px 4px 0 var(--ink);
font-family: inherit;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-cream { background: var(--cream); color: var(--ink); }
.status-pill {
display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
background: #fff; color: var(--ink); padding: 10px 18px; border-radius: 999px;
font-weight: 700; border: 3px solid var(--ink); font-size: 0.95rem;
}
.dot { width: 12px; height: 12px; border-radius: 50%; background: #999; }
.dot.on { background: #20c24b; box-shadow: 0 0 0 0 rgba(32,194,75,.7); animation: pulse 1.6s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(32,194,75,.7); }
70% { box-shadow: 0 0 0 12px rgba(32,194,75,0); }
100% { box-shadow: 0 0 0 0 rgba(32,194,75,0); }
}
.hero-art {
position: relative; aspect-ratio: 1 / 1; max-width: 460px; width: 100%; justify-self: center;
}
.taco-big {
position: absolute; inset: 8%; display: grid; place-items: center;
font-size: min(30vw, 260px); filter: drop-shadow(8px 12px 0 rgba(29,20,16,.35));
animation: bob 4s ease-in-out infinite;
}
.sticker {
position: absolute; background: var(--lime); color: var(--ink);
border: 3px solid var(--ink); border-radius: 50%; width: 120px; height: 120px;
display: grid; place-items: center; text-align: center; font-family: Impact, system-ui, sans-serif;
text-transform: uppercase; font-size: 1.05rem; line-height: 1.05;
animation: spin 14s linear infinite; box-shadow: 4px 4px 0 var(--ink);
}
.sticker.s1 { top: 2%; right: 0; }
.sticker.s2 { bottom: 4%; left: 0; background: var(--yellow); width: 105px; height: 105px; animation-direction: reverse; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ticker {
position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--yellow);
overflow: hidden; white-space: nowrap; padding: 12px 0; font-family: Impact, system-ui, sans-serif;
font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em;
}
.ticker-track { display: inline-block; animation: scroll 22s linear infinite; }
.ticker span { margin: 0 22px; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; text-align: center; }
.hero p.lead { margin-left: auto; margin-right: auto; }
.btn-row, .status-pill { justify-content: center; }
.hero-art { max-width: 340px; }
.hero { padding-top: 50px; padding-bottom: 110px; }
}
@media (max-width: 420px) {
.sticker { width: 95px; height: 95px; font-size: .85rem; }
.sticker.s2 { width: 85px; height: 85px; }
}
/* ---------- Sections ---------- */
section { padding: 90px 20px; }
.wrap { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head .kicker { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.section-head h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-top: 6px; }
.section-head p { color: var(--muted); max-width: 560px; margin: 12px auto 0; }
/* ---------- Menu ---------- */
.menu-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.tab {
background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 9px 20px;
font-weight: 800; cursor: pointer; font-family: inherit; font-size: .95rem;
}
.tab.active { background: var(--ink); color: var(--yellow); }
.menu-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px;
}
.item {
background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius);
padding: 22px; box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column;
transition: transform .2s ease;
animation: fadeUp .45s ease both;
}
.item:hover { transform: translateY(-4px) rotate(-.4deg); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.item .emoji { font-size: 2.6rem; }
.item h3 { font-size: 1.45rem; margin: 10px 0 6px; }
.item p { color: var(--muted); font-size: .95rem; flex: 1; }
.tags { margin: 10px 0 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--cream); border: 2px solid var(--ink); text-transform: uppercase; }
.tag.hot { background: var(--red); color: #fff; }
.tag.veg { background: var(--lime); }
.item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-family: Impact, system-ui, sans-serif; font-size: 1.7rem; }
.add {
background: var(--red); color: #fff; border: 3px solid var(--ink); border-radius: 999px;
padding: 8px 16px; font-weight: 800; cursor: pointer; font-family: inherit;
transition: background .15s;
}
.add:hover { background: var(--yellow); color: var(--ink); }
/* Cart bar */
.cart-bar {
margin: 40px auto 0; max-width: 620px; background: var(--ink); color: var(--cream);
border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center;
justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 3px solid var(--ink);
box-shadow: 6px 6px 0 var(--red);
}
.cart-bar strong { font-family: Impact, system-ui, sans-serif; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.cart-bar .muted { color: #cbb9a8; font-size: .9rem; }
.cart-msg { text-align: center; margin-top: 14px; font-weight: 700; min-height: 1.5em; color: var(--gochu); }
/* ---------- Story ---------- */
.story { background: var(--ink); color: var(--cream); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.story h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--yellow); }
.story p { margin-top: 16px; font-size: 1.05rem; opacity: .92; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact {
border: 3px solid var(--cream); border-radius: var(--radius); padding: 20px; text-align: center;
}
.fact b { display: block; font-family: Impact, system-ui, sans-serif; font-size: 2.6rem; color: var(--lime); line-height: 1; }
.fact span { font-size: .9rem; opacity: .85; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; } }
/* ---------- Schedule ---------- */
.schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sched {
background: #fff; border: 3px solid var(--ink); border-radius: var(--radius);
box-shadow: 6px 6px 0 var(--ink); overflow: hidden;
}
.sched-row {
display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; padding: 16px 20px;
border-bottom: 2px dashed #e5d6c2; align-items: center;
}
.sched-row:last-child { border-bottom: 0; }
.sched-row .day { font-family: Impact, system-ui, sans-serif; text-transform: uppercase; font-size: 1.1rem; }
.sched-row .spot { font-weight: 600; font-size: .95rem; }
.sched-row .time { font-size: .9rem; color: var(--muted); text-align: right; white-space: nowrap; }
.sched-row.today { background: var(--yellow); }
.sched-row.closed .spot { color: var(--muted); font-weight: 500; font-style: italic; }
.today-badge {
display: inline-block; background: var(--ink); color: var(--yellow); font-size: .7rem;
padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; font-weight: 800;
}
.map {
background: #efe3cf; border: 3px solid var(--ink); border-radius: var(--radius);
min-height: 360px; position: relative; overflow: hidden; box-shadow: 6px 6px 0 var(--ink);
}
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-label {
position: absolute; background: var(--ink); color: var(--cream); padding: 10px 14px;
border-radius: 12px; font-weight: 700; font-size: .9rem; left: 50%; top: 50%;
transform: translate(-50%, -50%); white-space: nowrap; border: 3px solid var(--cream);
animation: ping 2.4s ease-in-out infinite;
}
@keyframes ping { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-56%) scale(1.04); } }
.map-note { position: absolute; bottom: 12px; left: 12px; right: 12px; background: rgba(255,255,255,.92); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: .9rem; font-weight: 600; }
@media (max-width: 860px) { .schedule-grid { grid-template-columns: 1fr; } }
/* ---------- Contact ---------- */
.contact { background: var(--yellow); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.contact-card {
background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); padding: 28px;
box-shadow: 6px 6px 0 var(--ink);
}
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: .9rem; }
.field input, .field textarea, .field select {
width: 100%; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 12px;
font: inherit; background: var(--cream); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: #fff; box-shadow: 0 0 0 4px var(--lime); }
.form-msg { margin-top: 12px; font-weight: 700; color: var(--gochu); min-height: 1.4em; }
.info-list { list-style: none; margin-top: 22px; display: grid; gap: 14px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.info-list .ic { font-size: 1.5rem; line-height: 1; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
/* ---------- Footer ---------- */
footer { background: var(--ink); color: var(--cream); padding: 40px 20px; text-align: center; }
footer .logo { font-size: 2rem; }
footer p { opacity: .7; margin-top: 10px; font-size: .9rem; }
.socials { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.socials a { color: var(--ink); background: var(--lime); padding: 8px 16px; border-radius: 999px; font-weight: 800; text-decoration: none; font-size: .9rem; border: 2px solid var(--cream); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.reveal { opacity: 1; transform: none; }
}
</style>
</head>
<body>
<header>
<nav class="nav">
<a href="#top" class="logo">Kimchi<span>Loco</span></a>
<ul class="nav-links" id="navLinks">
<li><a href="#menu">Menu</a></li>
<li><a href="#story">Our Story</a></li>
<li><a href="#find">Find Us</a></li>
<li><a href="#contact">Catering</a></li>
</ul>
<a href="#menu" class="nav-cta">Order Now</a>
<button class="burger" id="burger" aria-label="Open menu">☰</button>
</nav>
</header>
<main id="top">
<!-- HERO -->
<div class="hero">
<div class="hero-inner">
<div>
<span class="eyebrow">Seoul meets the street · Food truck</span>
<h1>Korean tacos.<br><em>Loud</em> flavor.</h1>
<p class="lead">Smoky bulgogi, fiery gochujang pork, crispy tofu and kimchi slaw, folded into warm tortillas and served straight from our truck. Come hungry. Leave happy.</p>
<div class="btn-row">
<a href="#menu" class="btn btn-yellow">See the Menu</a>
<a href="#find" class="btn btn-cream">Where's the Truck?</a>
</div>
<div class="status-pill" id="statusPill"><span class="dot" id="statusDot"></span><span id="statusText">Checking hours…</span></div>
</div>
<div class="hero-art" aria-hidden="true">
<div class="taco-big">🌮</div>
<div class="sticker s1">Kimchi<br>slaw<br>included</div>
<div class="sticker s2">Spicy?<br>Yes.</div>
</div>
</div>
<div class="ticker" aria-hidden="true">
<div class="ticker-track" id="ticker"></div>
</div>
</div>
<!-- MENU -->
<section id="menu" class="reveal">
<div class="wrap">
<div class="section-head">
<div class="kicker">The Menu</div>
<h2>Tacos That Go Hard</h2>
<p>Every taco comes on two warm corn-and-flour tortillas with our house kimchi slaw. Add to your order and we'll have it ready at the window.</p>
</div>
<div class="menu-tabs" role="tablist">
<button class="tab active" data-filter="all">All</button>
<button class="tab" data-filter="tacos">Tacos</button>
<button class="tab" data-filter="sides">Sides & Bowls</button>
<button class="tab" data-filter="drinks">Drinks</button>
</div>
<div class="menu-grid" id="menuGrid"></div>
<div class="cart-bar">
<div>
<strong id="cartCount">Your order: empty</strong>
<div class="muted" id="cartTotal">Pick something delicious above.</div>
</div>
<button class="btn btn-lime" id="checkout" disabled>Place Pickup Order</button>
</div>
<div class="cart-msg" id="cartMsg"></div>
</div>
</section>
<!-- STORY -->
<section id="story" class="story reveal">
<div class="wrap story-grid">
<div>
<h2>Born in a Dorm Kitchen. Raised on Wheels.</h2>
<p>Kimchi Loco started when two friends who grew up eating their grandmothers' banchan wanted to share that food with everyone in the neighborhood. Mexican street tacos felt like the obvious partner: bold, handheld and made for sharing.</p>
<p>Every sauce is made in-house, every tortilla is pressed to order, and our kimchi is fermented in small batches every week. The truck is a little rough around the edges. The food is not.</p>
</div>
<div class="facts">
<div class="fact"><b>14</b><span>House sauces & pastes</span></div>
<div class="fact"><b>7</b><span>Days of kimchi fermenting</span></div>
<div class="fact"><b>0</b><span>Frozen patties. Ever.</span></div>
<div class="fact"><b>100%</b><span>Napkins we're proud of</span></div>
</div>
</div>
</section>
<!-- FIND US -->
<section id="find" class="reveal">
<div class="wrap">
<div class="section-head">
<div class="kicker">Find the Truck</div>
<h2>Where We're Parked</h2>
<p>Our weekly schedule. Follow us on social for last-minute pop-ups and sold-out alerts.</p>
</div>
<div class="schedule-grid">
<div class="sched" id="schedule"></div>
<div class="map" aria-label="Map showing the Kimchi Loco food truck area">
<svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<rect width="400" height="400" fill="#efe3cf"/>
<path d="M0 120 Q120 90 200 150 T400 130" stroke="#cdbb9f" stroke-width="22" fill="none"/>
<path d="M160 0 Q180 200 140 400" stroke="#cdbb9f" stroke-width="18" fill="none"/>
<path d="M0 300 L400 260" stroke="#cdbb9f" stroke-width="14" fill="none"/>
<rect x="230" y="200" width="70" height="50" rx="8" fill="#d9c7aa"/>
<rect x="40" y="200" width="80" height="60" rx="8" fill="#d9c7aa"/>
<rect x="260" y="20" width="90" height="70" rx="8" fill="#b6e33a" opacity=".5"/>
<circle cx="200" cy="190" r="70" fill="#e4322b" opacity=".12"/>
<circle cx="200" cy="190" r="36" fill="#e4322b" opacity=".2"/>
</svg>
<div class="map-label">🚚 Kimchi Loco Truck</div>
<div class="map-note" id="mapNote">Check the schedule for today's spot.</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="contact reveal">
<div class="wrap contact-grid">
<div>
<h2>Catering, Events & Hungry Friends</h2>
<p style="margin-top:14px;font-size:1.05rem;">Birthday? Office lunch? Block party? We bring the truck, the tacos and the good vibes. Tell us the date and headcount and we'll send a quote.</p>
<ul class="info-list">
<li><span class="ic">📍</span><span>Parked around Eastside. Schedule updates every Sunday.</span></li>
<li><span class="ic">🕚</span><span>Wed – Sun · 11am to 9pm</span></li>
<li><span class="ic">📞</span><span>(555) 014-2024</span></li>
<li><span class="ic">✉️</span><span>hola@kimchiloco.example</span></li>
</ul>
</div>
<div class="contact-card">
<form id="cateringForm">
<div class="field"><label for="name">Your name</label><input id="name" required placeholder="Jin Park"></div>
<div class="field"><label for="email">Email</label><input id="email" type="email" required placeholder="you@example.com"></div>
<div class="field"><label for="event">Event type</label>
<select id="event">
<option>Birthday party</option>
<option>Office lunch</option>
<option>Wedding or private event</option>
<option>Festival or pop-up</option>
<option>Just hungry</option>
</select>
</div>
<div class="field"><label for="guests">Guests (approx.)</label><input id="guests" type="number" min="1" value="30"></div>
<button class="btn btn-red" type="submit" style="background:var(--red);color:#fff;width:100%;">Request a Quote 🌮</button>
<div class="form-msg" id="formMsg"></div>
</form>
</div>
</div>
</section>
</main>
<footer>
<div class="logo">Kimchi<span style="color:var(--lime)">Loco</span></div>
<p>Korean flavors, Mexican street soul. Made fresh, served loud.</p>
<div class="socials">
<a href="#">Instagram</a>
<a href="#">TikTok</a>
<a href="#">Yelp</a>
</div>
<p>© <span id="year"></span> Kimchi Loco Food Truck</p>
</footer>
<script>
(function () {
"use strict";
// ---------- Live open/closed status ----------
const OPEN_DAYS = [0, 3, 4, 5, 6]; // Sun, Wed, Thu, Fri, Sat
const OPEN_HOUR = 11, CLOSE_HOUR = 21;
const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
function nextOpenText(now) {
for (let i = 0; i < 7; i++) {
const d = (now.getDay() + i) % 7;
if (OPEN_DAYS.includes(d) && !(i === 0 && now.getHours() >= OPEN_HOUR)) {
return i === 0 ? "opens today at 11am" : "opens " + DAY_NAMES[d] + " at 11am";
}
}
return "opens soon";
}
function updateStatus() {
const now = new Date();
const isOpen = OPEN_DAYS.includes(now.getDay()) && now.getHours() >= OPEN_HOUR && now.getHours() < CLOSE_HOUR;
const dot = document.getElementById("statusDot");
const txt = document.getElementById("statusText");
if (isOpen) {
dot.classList.add("on");
txt.textContent = "We're open now · closes at 9pm";
} else {
dot.classList.remove("on");
txt.textContent = "Closed right now · " + nextOpenText(now);
}
}
updateStatus();
setInterval(updateStatus, 60000);
// ---------- Ticker ----------
const tickerItems = ["Bulgogi Beef", "Spicy Pork Belly", "Crispy Tofu", "Yangnyeom Chicken", "Kimchi Fries", "Come get some"];
const tickerEl = document.getElementById("ticker");
const tickerHTML = tickerItems.map(t => "<span>🌮 " + t + "</span>").join("");
tickerEl.innerHTML = tickerHTML + tickerHTML;
// ---------- Menu ----------
const MENU = [
{ id: 1, cat: "tacos", emoji: "🥩", name: "Bulgogi Beef Taco", price: 4.5, desc: "Soy-garlic ribeye, caramelized onion, kimchi slaw, sesame crema.", tags: ["Fan favorite"] },
{ id: 2, cat: "tacos", emoji: "🌶️", name: "Spicy Pork Belly", price: 4.5, desc: "Gochujang-glazed pork belly, pickled daikon, cilantro, lime.", tags: ["hot"], hot: true },
{ id: 3, cat: "tacos", emoji: "🍗", name: "Yangnyeom Chicken", price: 5, desc: "Sweet-and-spicy Korean fried chicken, scallion, toasted sesame.", tags: ["hot"], hot: true },
{ id: 4, cat: "tacos", emoji: "🥬", name: "Crispy Tofu Taco", price: 4, desc: "Golden tofu, ssamjang, pickled cucumber, perilla leaf.", tags: ["veg"] },
{ id: 5, cat: "sides", emoji: "🍟", name: "Kimchi Fries", price: 6, desc: "Crispy fries, melted cheese, kimchi, gochujang mayo, scallions.", tags: ["Shareable"] },
{ id: 6, cat: "sides", emoji: "🍚", name: "Bibimbap Bowl", price: 9, desc: "Rice, seasoned veg, fried egg, bulgogi or tofu, chili crisp.", tags: ["veg option"] },
{ id: 7, cat: "drinks", emoji: "🍋", name: "Yuzu Soda", price: 3, desc: "Sparkling citrus soda with a whisper of honey.", tags: ["veg"] },
{ id: 8, cat: "drinks", emoji: "🍵", name: "Roasted Barley Tea", price: 2, desc: "Nutty, toasty, ice cold. Refills are free.", tags: ["veg"] }
];
const cart = {};
let currentFilter = "all";
function renderMenu() {
const grid = document.getElementById("menuGrid");
const items = MENU.filter(m => currentFilter === "all" || m.cat === currentFilter);
grid.innerHTML = items.map((m, i) => `
<article class="item" style="animation-delay:${i * 60}ms">
<div class="emoji">${m.emoji}</div>
<h3>${m.name}</h3>
<p>${m.desc}</p>
<div class="tags">
${m.hot ? '<span class="tag hot">🔥 Spicy</span>' : ""}
${m.tags.filter(t => t !== "hot").map(t => `<span class="tag ${t === "veg" ? "veg" : ""}">${t}</span>`).join("")}
</div>
<div class="item-foot">
<span class="price">$${m.price.toFixed(2)}</span>
<button class="add" data-id="${m.id}" aria-label="Add ${m.name}">+ Add</button>
</div>
</article>
`).join("");
}
function updateCart() {
let count = 0, total = 0;
for (const id in cart) {
const item = MENU.find(m => m.id === Number(id));
count += cart[id];
total += item.price * cart[id];
}
const countEl = document.getElementById("cartCount");
const totalEl = document.getElementById("cartTotal");
const btn = document.getElementById("checkout");
if (count === 0) {
countEl.textContent = "Your order: empty";
totalEl.textContent = "Pick something delicious above.";
btn.disabled = true;
} else {
countEl.textContent = "Your order: " + count + (count === 1 ? " item" : " items");
totalEl.textContent = "Subtotal $" + total.toFixed(2) + " · pay at pickup";
btn.disabled = false;
}
}
document.getElementById("menuGrid").addEventListener("click", e => {
const btn = e.target.closest(".add");
if (!btn) return;
const id = btn.dataset.id;
cart[id] = (cart[id] || 0) + 1;
btn.textContent = "Added ✓";
setTimeout(() => { btn.textContent = "+ Add"; }, 700);
updateCart();
document.getElementById("cartMsg").textContent = "";
});
document.querySelector(".menu-tabs").addEventListener("click", e => {
const tab = e.target.closest(".tab");
if (!tab) return;
document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
tab.classList.add("active");
currentFilter = tab.dataset.filter;
renderMenu();
});
document.getElementById("checkout").addEventListener("click", () => {
const count = Object.values(cart).reduce((a, b) => a + b, 0);
if (!count) return;
for (const k in cart) delete cart[k];
updateCart();
document.getElementById("cartMsg").textContent = "Order received! We'll have it hot at the window in about 10 minutes. 🌮";
});
// ---------- Schedule ----------
const SCHEDULE = [
{ day: 0, name: "Sunday", spot: "Eastside Farmers Market", time: "11am – 6pm" },
{ day: 1, name: "Monday", spot: "Day off. Kimchi is fermenting.", time: "Closed", closed: true },
{ day: 2, name: "Tuesday", spot: "Prep day. Sorry!", time: "Closed", closed: true },
{ day: 3, name: "Wednesday", spot: "Brewery Row, Dock 4", time: "11am – 9pm" },
{ day: 4, name: "Thursday", spot: "Tech Campus Lunch Lot", time: "11am – 3pm" },
{ day: 5, name: "Friday", spot: "Riverside Night Market", time: "5pm – 10pm" },
{ day: 6, name: "Saturday", spot: "Central Park Food Hall", time: "11am – 9pm" }
];
// Reorder so Mon comes first
const ordered = [1, 2, 3, 4, 5, 6, 0].map(d => SCHEDULE.find(s => s.day === d));
const today = new Date().getDay();
document.getElementById("schedule").innerHTML = ordered.map(s => `
<div class="sched-row ${s.closed ? "closed" : ""} ${s.day === today ? "today" : ""}">
<div class="day">${s.name.slice(0, 3)}${s.day === today ? '<span class="today-badge">TODAY</span>' : ""}</div>
<div class="spot">${s.spot}</div>
<div class="time">${s.time}</div>
</div>
`).join("");
const todayStop = SCHEDULE.find(s => s.day === today);
document.getElementById("mapNote").textContent =
todayStop && !todayStop.closed
? "Today: " + todayStop.spot + " · " + todayStop.time
: "We're off today. See you on the next stop!";
// ---------- Catering form ----------
document.getElementById("cateringForm").addEventListener("submit", e => {
e.preventDefault();
const name = document.getElementById("name").value.trim().split(" ")[0] || "friend";
document.getElementById("formMsg").textContent =
"Gracias, " + name + "! We'll send your quote within 24 hours. ✌️";
e.target.reset();
document.getElementById("guests").value = 30;
});
// ---------- Mobile nav ----------
const burger = document.getElementById("burger");
const navLinks = document.getElementById("navLinks");
burger.addEventListener("click", () => navLinks.classList.toggle("open"));
navLinks.addEventListener("click", e => {
if (e.target.tagName === "A") navLinks.classList.remove("open");
});
// ---------- Reveal on scroll ----------
const reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
const io = new IntersectionObserver(entries => {
entries.forEach(en => {
if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
});
}, { threshold: 0.12 });
reveals.forEach(el => io.observe(el));
} else {
reveals.forEach(el => el.classList.add("in"));
}
// ---------- Init ----------
document.getElementById("year").textContent = new Date().getFullYear();
renderMenu();
updateCart();
})();
</script>
</body>
</html>Reasoning trace (1,252 tokens)
I'm planning a single-file website for the Kimchi Loco taco truck, with inline CSS and JS and no external resources, using system fonts. It needs to look good at both desktop and phone widths, show something on first load, and include a hero, menu, location and hours, an order button, and some animation, while avoiding localStorage and alert. I'm settling on a bold palette of kimchi red, gochujang, cream, and lime, with a hero headline, a live open/closed status computed from the clock, a menu with a simple no-storage order counter, and a few CSS-only details to keep the page moving. Now I'm adding the menu prices, the cart with its count and total, and an in-page "Order ahead" confirmation. I'm also setting the live status to Wed–Sun 11am–9pm with a "Today" highlight on the schedule, and planning a hero with a floating taco and a ticker. Next I'm setting the palette and fonts, then wiring the open/closed status to the clock: open Sunday and Wednesday through Saturday from 11 to 9, with the schedule rows highlighting today. I'm wiring up the day-of-week mapping for the schedule, rendering the menu from a data array, and keeping a cart object that drives the summary. I'm also adding the mobile nav toggle and a form handler that prevents default submission and shows a message, plus a global rule to block horizontal overflow on body and cap elements at max-width.