Models 44

Claude Haiku 5.5

by AnthropicReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
2 min 13 s
Cost
$0.016
Output tokens
32,633
Spent thinking
17,739 tokens
Speed
249.1 tok/s
Console errors
0
First token after
1.8 s
First visible text after
1 min 27 s
Prompt tokens
543
Code size
31.0 KB
Finish reason
stop
Served by
Claude Platform on AWS
Model id
anthropic/claude-haiku-5.5
Reasoning sent
{"effort":"high"}
Max output
128,000 tokens
Generated
Nov 11, 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 · 656 lines

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kimchi Loco | Korean Tacos on Wheels</title>
<meta name="description" content="Kimchi Loco: Korean-Mexican street tacos from a food truck. Bulgogi, gochujang chicken, kimchi fries and more.">
<style>
:root{
  --red:#d7261e; --deep:#7d0f14; --cream:#fff3dc; --paper:#fff9ee; --ink:#1f1410;
  --yellow:#ffc53a; --green:#2e9a57; --orange:#f5802b; --muted:#6d5a50;
  --display: Impact, "Haettenschweiler", "Franklin Gothic Bold", "Arial Black", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);overflow-x:hidden;line-height:1.5;padding-bottom:110px}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--cream)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{font-family:var(--display);font-size:1.6rem;letter-spacing:.03em;text-decoration:none;display:flex;align-items:center;gap:10px;text-transform:uppercase;white-space:nowrap}
.logo svg{width:34px;height:34px;flex-shrink:0}
.links{display:flex;gap:26px;font-weight:600;font-size:.95rem}
.links a{text-decoration:none;opacity:.85}
.links a:hover{opacity:1;color:var(--yellow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;transition:transform .15s,background .2s,opacity .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-red{background:var(--red);color:#fff}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-sm{padding:9px 16px;font-size:.9rem}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--red);color:var(--cream);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:radial-gradient(rgba(255,255,255,.14) 2px,transparent 2.5px);background-size:22px 22px}
.hero::after{content:"";position:absolute;z-index:-1;width:720px;height:720px;border-radius:50%;background:var(--deep);right:-240px;top:-200px;opacity:.55}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:56px 0 76px}
.kicker{display:inline-block;background:var(--ink);color:var(--yellow);padding:7px 14px;font-weight:900;letter-spacing:.12em;font-size:.78rem;text-transform:uppercase;transform:rotate(-2deg);border-radius:4px}
.hero h1{font-family:var(--display);font-size:clamp(2.9rem,9vw,7.4rem);line-height:.9;text-transform:uppercase;margin:20px 0 18px;text-shadow:4px 4px 0 var(--deep);letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--yellow)}
.lead{font-size:1.2rem;max-width:36ch;opacity:.95}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.live{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);padding:10px 16px;border-radius:999px;font-weight:700;margin-top:26px;font-size:.95rem;max-width:100%}
.led{width:12px;height:12px;border-radius:50%;background:#58e08a;flex-shrink:0;animation:pulse 1.8s infinite}
.live.closed .led{background:#a99790;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(88,224,138,.7)}70%{box-shadow:0 0 0 12px rgba(88,224,138,0)}100%{box-shadow:0 0 0 0 rgba(88,224,138,0)}}

.visual{position:relative;width:min(460px,100%);justify-self:center;aspect-ratio:1}
.taco{width:100%;height:100%;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 18px 20px rgba(0,0,0,.25))}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.badge{position:absolute;right:-4px;top:0;width:150px;height:150px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- TICKER ---------- */
.ticker{background:var(--yellow);color:var(--ink);overflow:hidden;border-block:3px solid var(--ink)}
.track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.group{display:flex;gap:28px;padding:12px 28px 12px 0;flex-shrink:0;font-family:var(--display);font-size:1.4rem;text-transform:uppercase;white-space:nowrap;align-items:center}
.group b{color:var(--red);font-weight:400}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding:88px 0}
.eyebrow{font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--red)}
h2{font-family:var(--display);font-size:clamp(2.3rem,5.5vw,4.2rem);text-transform:uppercase;line-height:.95;margin:8px 0 16px}
.muted{color:var(--muted)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- MENU ---------- */
.menu{background:var(--cream)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:2px solid var(--ink);background:transparent;padding:8px 16px;border-radius:999px;font-weight:800;cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:22px}
.card{background:#fff;border-radius:22px;padding:22px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s;animation:cardIn .4s ease both}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card h3{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;line-height:1;font-weight:400}
.ko{font-size:.9rem;color:var(--muted);font-weight:700;margin-top:4px}
.card p{color:#4a3a33;font-size:.97rem;flex:1}
.tag{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;background:var(--green);color:#fff;padding:5px 8px;border-radius:6px;white-space:nowrap}
.heat{display:flex;gap:4px;align-items:center;font-size:.75rem;font-weight:800;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.heat i{width:10px;height:10px;border-radius:50%;background:#e6d9cc;display:block}
.heat i.on{background:var(--red)}
.heat span{margin-left:6px}
.foot-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:10px}
.price{font-family:var(--display);font-size:1.75rem}
.add{background:var(--ink);color:var(--yellow);border:0;border-radius:999px;padding:10px 16px;font-weight:900;cursor:pointer;white-space:nowrap}
.add:hover{background:var(--red);color:#fff}
.qty{color:var(--cream);background:var(--red);border-radius:999px;padding:1px 7px;margin-left:4px;font-size:.8rem}
.add:hover .qty{background:var(--ink)}

/* ---------- STORY ---------- */
.story-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.story p{font-size:1.1rem;margin-bottom:16px;color:#3d2d26}
.stats{display:grid;gap:16px}
.stat{background:var(--ink);color:var(--cream);border-radius:22px;padding:24px 26px;display:flex;align-items:center;gap:20px;border:2px solid var(--ink);transform:rotate(-1deg)}
.stat:nth-child(2){background:var(--red);transform:rotate(1deg)}
.stat:nth-child(3){background:var(--yellow);color:var(--ink);transform:rotate(-.5deg)}
.stat .big{font-family:var(--display);font-size:3.2rem;line-height:1;min-width:92px}
.stat .lbl{font-weight:700;font-size:1.02rem}

/* ---------- FIND US ---------- */
.find{background:var(--ink);color:var(--cream)}
.find .muted{color:#c7b3a8}
.now{margin:30px 0 26px;background:#2b1e19;border:2px solid #4a3930;border-radius:20px;padding:20px 24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.now .txt{font-size:1.1rem;font-weight:700;min-width:0}
.week{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.day{border:2px solid #4a3930;border-radius:18px;padding:16px;background:#2b1e19;transition:transform .25s,background .25s,color .25s}
.day .dn{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;line-height:1}
.day .time{font-weight:800;margin:8px 0 4px}
.day .spot{opacity:.8;font-size:.92rem}
.day.today{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translateY(-6px)}
.day.today .spot{opacity:1}

/* ---------- CATERING BAND ---------- */
.band{background:var(--red);color:var(--cream);padding:52px 0;position:relative;overflow:hidden}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{margin:0;font-size:clamp(1.9rem,4vw,3rem);max-width:22ch}
.band::before{content:"★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★";position:absolute;left:-20px;top:6px;font-size:1.2rem;letter-spacing:22px;opacity:.2;white-space:nowrap}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-grid p{font-size:1.1rem;color:#3d2d26;margin-bottom:14px}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:26px;box-shadow:6px 6px 0 var(--ink)}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-weight:800;font-size:.88rem}
input,textarea{border:2px solid var(--ink);border-radius:14px;padding:12px 14px;background:var(--paper);color:var(--ink);width:100%;font-size:1rem}
input:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:1px}
textarea{min-height:100px;resize:vertical}
form .btn{grid-column:1/-1;justify-self:start}
#formMsg{grid-column:1/-1;font-weight:700;color:var(--green);min-height:1.4em}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--cream);padding:48px 0 40px;font-size:.95rem}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot .logo{font-size:2rem}
.foot small{opacity:.6;display:block;margin-top:24px}
.foot a{text-decoration:none;opacity:.9}
.foot a:hover{color:var(--yellow)}
.foot ul{list-style:none;display:grid;gap:6px}

/* ---------- CART BAR ---------- */
.cartbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(760px,calc(100% - 24px));z-index:60;background:var(--ink);color:var(--cream);border-radius:20px;padding:12px 14px 12px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);border:2px solid var(--yellow)}
.cartbar strong{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;color:var(--yellow);font-size:1.15rem;display:block;line-height:1.1}
#cartCount{font-size:.95rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.link{background:none;border:0;color:var(--cream);opacity:.7;cursor:pointer;text-decoration:underline;font-weight:600;padding:6px}
.link:hover{opacity:1}

/* ---------- TOAST ---------- */
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);opacity:0;background:var(--green);color:#fff;padding:14px 20px;border-radius:16px;font-weight:800;z-index:70;pointer-events:none;transition:opacity .3s,transform .3s;width:min(560px,calc(100% - 32px));text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr}
  .visual{width:min(380px,100%);order:2}
  .story-grid,.contact-grid{grid-template-columns:1fr}
  .hero::after{width:520px;height:520px;right:-220px;top:-160px}
}
@media (max-width:760px){
  .links{display:none}
  section{padding:64px 0}
  .hero .wrap{padding:36px 0 56px;gap:28px}
  .lead{font-size:1.05rem}
  .badge{width:110px;height:110px;right:0}
  form{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .week{grid-template-columns:1fr 1fr}
  .band .wrap{flex-direction:column;align-items:flex-start}
  .cartbar{bottom:10px}
  .cartbar strong{font-size:1rem}
  .toast{bottom:104px}
}
@media (max-width:420px){
  .week{grid-template-columns:1fr}
  .cb-actions .btn{padding:11px 14px}
  #cartCount{font-size:.85rem}
  .nav .btn{padding:9px 14px;font-size:.88rem}
  .logo{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>

<header class="nav">
  <div class="wrap">
    <a class="logo" href="#top" aria-label="Kimchi Loco home">
      <svg viewBox="0 0 40 40" aria-hidden="true">
        <circle cx="20" cy="20" r="19" fill="#ffc53a"/>
        <path d="M7 24 Q20 6 33 24 Q20 30 7 24Z" fill="#ffe2a0" stroke="#1f1410" stroke-width="2.5"/>
        <path d="M11 22 Q20 12 29 22 Q20 25 11 22Z" fill="#d7261e"/>
        <circle cx="16" cy="20" r="2" fill="#fff"/><circle cx="23" cy="19" r="2" fill="#fff"/>
      </svg>
      Kimchi Loco
    </a>
    <nav class="links" aria-label="Main">
      <a href="#menu">Menu</a>
      <a href="#story">Our Story</a>
      <a href="#find">Find the Truck</a>
      <a href="#contact">Catering</a>
    </nav>
    <a class="btn btn-yellow btn-sm" href="#menu">Order ahead</a>
  </div>
</header>

<main id="top">

<!-- HERO -->
<section class="hero" style="padding:0">
  <div class="wrap">
    <div>
      <span class="kicker">Pop-up street food truck</span>
      <h1>Korean soul.<br><em>Taco</em> swagger.</h1>
      <p class="lead">Sizzling bulgogi, sticky gochujang chicken and kimchi fries that make people walk the long way around the block. Pulled up curbside, cooked fast, eaten with sauce on your chin.</p>
      <div class="hero-actions">
        <a class="btn btn-yellow" href="#menu">See the menu</a>
        <a class="btn btn-ghost" href="#find">Where are you today?</a>
      </div>
      <div class="live" id="live" role="status">
        <span class="led"></span>
        <span id="liveText">Checking the schedule…</span>
      </div>
    </div>

    <div class="visual" aria-hidden="false">
      <svg class="taco" viewBox="0 0 400 400" role="img" aria-label="Illustration of a bulgogi taco with kimchi and scallions">
        <ellipse cx="200" cy="330" rx="150" ry="16" fill="rgba(0,0,0,.25)"/>
        <!-- back taco -->
        <g transform="rotate(-14 200 260)">
          <path d="M40 240 Q200 -30 360 240 Q200 296 40 240Z" fill="#ffb44d" stroke="#1f1410" stroke-width="7"/>
        </g>
        <!-- front taco shell -->
        <path d="M30 230 Q200 -40 370 230 Q200 300 30 230Z" fill="#ffd47a" stroke="#1f1410" stroke-width="7"/>
        <!-- bulgogi filling -->
        <path d="M70 215 Q200 60 330 215 Q200 244 70 215Z" fill="#7a3514" stroke="#1f1410" stroke-width="5"/>
        <path d="M110 205 Q200 120 290 205" fill="none" stroke="#a24d1e" stroke-width="6" stroke-linecap="round" opacity=".7"/>
        <!-- kimchi -->
        <g fill="#e4372b" stroke="#7d0f14" stroke-width="2">
          <circle cx="136" cy="190" r="10"/>
          <circle cx="172" cy="162" r="9"/>
          <circle cx="232" cy="168" r="10"/>
          <circle cx="276" cy="196" r="9"/>
          <circle cx="208" cy="196" r="8"/>
        </g>
        <!-- scallions -->
        <g stroke="#2e9a57" stroke-width="6" stroke-linecap="round">
          <line x1="150" y1="204" x2="160" y2="186"/>
          <line x1="246" y1="150" x2="254" y2="136"/>
          <line x1="196" y1="142" x2="202" y2="126"/>
          <line x1="262" y1="214" x2="270" y2="200"/>
        </g>
        <!-- cilantro -->
        <g fill="#1f8a4a">
          <ellipse cx="118" cy="206" rx="8" ry="4" transform="rotate(-30 118 206)"/>
          <ellipse cx="300" cy="186" rx="8" ry="4" transform="rotate(25 300 186)"/>
        </g>
        <!-- sesame -->
        <g fill="#fff8e6">
          <circle cx="188" cy="176" r="3"/><circle cx="222" cy="150" r="3"/>
          <circle cx="160" cy="170" r="2.5"/><circle cx="254" cy="180" r="2.5"/>
          <circle cx="140" cy="182" r="2.5"/><circle cx="290" cy="165" r="2.5"/>
        </g>
        <!-- lime crema drizzle -->
        <path d="M100 222 Q150 200 190 214 T300 206" fill="none" stroke="#fff8e6" stroke-width="4" stroke-linecap="round" opacity=".85"/>
      </svg>

      <svg class="badge" viewBox="0 0 160 160" aria-hidden="true">
        <defs>
          <path id="badgePath" d="M80 80 m-58 0 a58 58 0 1 1 116 0 a58 58 0 1 1 -116 0"/>
        </defs>
        <circle cx="80" cy="80" r="78" fill="#1f1410"/>
        <circle cx="80" cy="80" r="72" fill="#ffc53a"/>
        <text font-size="13" fill="#1f1410" style="font-family:Impact,'Arial Black',sans-serif;letter-spacing:1.5px">
          <textPath href="#badgePath">KOREAN ★ MEXICAN ★ STREET TACOS ★</textPath>
        </text>
        <circle cx="80" cy="80" r="24" fill="#d7261e"/>
        <text x="80" y="87" text-anchor="middle" fill="#fff3dc" font-size="22" style="font-family:Impact,'Arial Black',sans-serif">KL</text>
      </svg>
    </div>
  </div>
</section>

<!-- TICKER -->
<div class="ticker" aria-hidden="true">
  <div class="track" id="track"></div>
</div>

<!-- MENU -->
<section class="menu" id="menu">
  <div class="wrap">
    <div class="head-row reveal">
      <div>
        <div class="eyebrow">What's cooking</div>
        <h2>The menu,<br>lightly dangerous</h2>
      </div>
      <div class="filters" role="group" aria-label="Filter menu">
        <button class="chip" data-filter="all" aria-pressed="true">All</button>
        <button class="chip" data-filter="tacos" aria-pressed="false">Tacos</button>
        <button class="chip" data-filter="sides" aria-pressed="false">Sides</button>
        <button class="chip" data-filter="drinks" aria-pressed="false">Drinks</button>
      </div>
    </div>
    <div class="grid" id="grid"></div>
  </div>
</section>

<!-- STORY -->
<section id="story" style="background:var(--paper)">
  <div class="wrap story-grid">
    <div class="story reveal">
      <div class="eyebrow">Our story</div>
      <h2>Born in a home kitchen. Raised on the street.</h2>
      <p>Kimchi Loco started where good things usually do: a cramped home kitchen, a family bulgogi recipe nobody was allowed to change, and a stubborn belief that a taco can be Korean and Mexican and completely at home on a Tuesday night.</p>
      <p>Now it's a truck with a flattop, a fryer that has seen some things, and a crew that treats every order like it's for their cousin. Come say hi at the window.</p>
    </div>
    <div class="stats reveal">
      <div class="stat"><div class="big">100%</div><div class="lbl">Sauces made from scratch, every single day</div></div>
      <div class="stat"><div class="big">48h</div><div class="lbl">House kimchi, fermented in-house</div></div>
      <div class="stat"><div class="big">5</div><div class="lbl">Spice levels, zero judgment</div></div>
    </div>
  </div>
</section>

<!-- FIND US -->
<section class="find" id="find">
  <div class="wrap">
    <div class="reveal">
      <div class="eyebrow" style="color:var(--yellow)">This week's stops</div>
      <h2>Where the truck is parked</h2>
      <p class="muted">Follow us on Instagram for last-minute moves. The truck goes where the crowds are.</p>
    </div>
    <div class="now reveal">
      <div class="txt" id="nowText">Checking the schedule…</div>
      <a class="btn btn-yellow btn-sm" href="#menu">Order ahead</a>
    </div>
    <div class="week" id="week"></div>
  </div>
</section>

<!-- CATERING -->
<div class="band">
  <div class="wrap">
    <h2>Birthday, wedding or office lunch? We'll bring the truck to you.</h2>
    <a class="btn btn-yellow" href="#contact">Book catering</a>
  </div>
</div>

<!-- CONTACT -->
<section id="contact">
  <div class="wrap contact-grid">
    <div class="reveal">
      <div class="eyebrow">Catering & private events</div>
      <h2>Let's cook for your crowd.</h2>
      <p>Tell us the date, the headcount and the vibe. We'll send back a menu that fits your guests and your budget.</p>
      <p class="muted">Parties of 20+ get the full truck experience, with live sizzle included.</p>
    </div>
    <form id="cateringForm" class="reveal">
      <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@email.com">
      </div>
      <div class="field">
        <label for="date">Event date</label>
        <input id="date" type="date">
      </div>
      <div class="field">
        <label for="guests">Guests</label>
        <input id="guests" type="number" min="1" placeholder="40">
      </div>
      <div class="field full">
        <label for="msg">Tell us about it</label>
        <textarea id="msg" placeholder="Backyard birthday, spicy-friendly crowd, need vegan options…"></textarea>
      </div>
      <button class="btn btn-red" type="submit">Send request</button>
      <div id="formMsg" role="status"></div>
    </form>
  </div>
</section>

</main>

<footer>
  <div class="wrap foot">
    <div>
      <div class="logo">Kimchi Loco</div>
      <p style="opacity:.75;margin-top:8px;max-width:30ch">Korean-Mexican street tacos, cooked fast and served with a grin.</p>
      <small>© <span id="year"></span> Kimchi Loco. All rights reserved.</small>
    </div>
    <ul>
      <li><a href="#menu">Menu</a></li>
      <li><a href="#find">Find the truck</a></li>
      <li><a href="#contact">Catering</a></li>
      <li><a href="#story">Our story</a></li>
    </ul>
    <ul>
      <li>@kimchiloco on Instagram</li>
      <li>hello@kimchiloco.com</li>
      <li>Tue–Sun, 11AM until the tacos run out</li>
    </ul>
  </div>
</footer>

<div class="toast" id="toast" role="status" aria-live="polite"></div>

<div class="cartbar" id="cartbar">
  <div style="min-width:0">
    <strong>Your order</strong>
    <div id="cartCount">Your order is empty</div>
  </div>
  <div class="cb-actions">
    <button class="link" id="clearBtn" type="button">Clear</button>
    <button class="btn btn-yellow btn-sm" id="orderBtn" type="button" disabled>Order ahead</button>
  </div>
</div>

<script>
(function () {
  'use strict';

  const $ = s => document.querySelector(s);
  const money = n => '$' + n.toFixed(2);
  const SPICE = ['No heat', 'Mild', 'Medium', 'Hot', 'Very hot', 'Fire'];

  const MENU = [
    { id: 'bulgogi',  cat: 'tacos', name: 'Bulgogi Beef',    ko: '소고기 불고기',  price: 6,   spice: 1, tag: 'Crowd fave',
      desc: 'Soy-garlic ribeye, quick-pickled onion, sesame and ssam sauce on a warm corn tortilla.' },
    { id: 'dwaeji',   cat: 'tacos', name: 'Dwaeji Bulgogi',  ko: '돼지불고기',    price: 5.5, spice: 3,
      desc: 'Gochujang-marinated pork shoulder, charred scallion and a crunchy cabbage slaw.' },
    { id: 'gochu',    cat: 'tacos', name: 'Gochu Chicken',   ko: '닭강정',        price: 5.5, spice: 4, tag: 'Hot one',
      desc: 'Double-fried crispy chicken, sticky gochujang glaze, lime crema and cilantro.' },
    { id: 'tofu',     cat: 'tacos', name: 'Kimchi Tofu',     ko: '두부김치',      price: 5,   spice: 2, tag: 'Vegan',
      desc: 'Pan-seared tofu, aged kimchi, toasted sesame and a squeeze of lime.' },
    { id: 'bibim',    cat: 'tacos', name: 'Bibim Shrimp',    ko: '새우 비빔',     price: 6.5, spice: 2,
      desc: 'Garlic shrimp tossed in bibim sauce with cucumber, radish and crushed peanuts.' },
    { id: 'fries',    cat: 'sides', name: 'Kimchi Fries',    ko: '김치 프라이',   price: 8,   spice: 2, tag: 'Must order',
      desc: 'Crispy fries, kimchi, melted cheese, your choice of bulgogi or tofu, scallions.' },
    { id: 'mandu',    cat: 'sides', name: 'Pork Mandu',      ko: '돼지 만두',     price: 6,   spice: 1,
      desc: 'Pan-fried dumplings with pork and glass noodles, served with chili-soy dip.' },
    { id: 'corn',     cat: 'sides', name: 'Corn Cheese',     ko: '옥수수 치즈',   price: 5,   spice: 1,
      desc: 'Sweet corn, butter, mozzarella and toasted nori. Kids love it. So do we.' },
    { id: 'yuzu',     cat: 'drinks', name: 'Yuzu Soda',      ko: '유자 소다',     price: 4,   spice: 0,
      desc: 'Bright citrus fizz with a hint of honey. Cools the heat down nicely.' },
    { id: 'bori',     cat: 'drinks', name: 'Barley Tea',     ko: '보리차',        price: 2.5, spice: 0,
      desc: 'Toasty roasted barley tea, served cold over ice. Free refills at the window.' },
    { id: 'soju',     cat: 'drinks', name: 'Soju Lemonade',  ko: '소주 레몬에이드', price: 9,  spice: 0, tag: '21+',
      desc: 'Soju, fresh lemonade and a salt rim. Ask us about the seasonal flavor.' }
  ];

  // Sun..Sat. null = prep day
  const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const FULL = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  const SCHED = [
    { open: 12, close: 20, spot: 'Sunset Market · Pier 9' },
    null,
    { open: 11, close: 21, spot: 'Dock St & 5th' },
    { open: 11, close: 21, spot: 'Brewery Row' },
    { open: 11, close: 22, spot: 'Riverside Park' },
    { open: 11, close: 23, spot: 'Mission Yard' },
    { open: 12, close: 23, spot: 'Gallery District' }
  ];
  const ORDER = [1, 2, 3, 4, 5, 6, 0];

  const cart = {};

  /* ---------- Ticker ---------- */
  function renderTicker() {
    const items = ['Bulgogi tacos', 'Kimchi fries', 'Gochujang chicken', 'Corn cheese', 'Mandu', 'Tofu kimchi', 'Come hungry'];
    const group = items.map(t => `<span>${t}</span><b>★</b>`).join('');
    $('#track').innerHTML =
      `<div class="group">${group}</div><div class="group" aria-hidden="true">${group}</div>`;
  }

  /* ---------- Menu ---------- */
  function cardHTML(m) {
    const heat = [1, 2, 3, 4, 5].map(i => `<i class="${i <= m.spice ? 'on' : ''}"></i>`).join('');
    return `
      <article class="card">
        <div class="top">
          <div>
            <h3>${m.name}</h3>
            <div class="ko">${m.ko}</div>
          </div>
          ${m.tag ? `<span class="tag">${m.tag}</span>` : ''}
        </div>
        <p>${m.desc}</p>
        <div class="heat" aria-label="Spice ${m.spice} of 5">${heat}<span>${SPICE[m.spice]}</span></div>
        <div class="foot-row">
          <span class="price">${money(m.price)}</span>
          <button class="add" type="button" data-add="${m.id}">+ Add <span class="qty" data-qty="${m.id}"></span></button>
        </div>
      </article>`;
  }

  function renderMenu(filter) {
    const list = MENU.filter(m => filter === 'all' || m.cat === filter);
    $('#grid').innerHTML = list.map(cardHTML).join('');
    updateCart();
  }

  $('#grid').addEventListener('click', e => {
    const b = e.target.closest('[data-add]');
    if (!b) return;
    const id = b.dataset.add;
    cart[id] = (cart[id] || 0) + 1;
    updateCart();
    if (b.animate) b.animate([{ transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: 250 });
  });

  document.querySelectorAll('.chip').forEach(c => {
    c.addEventListener('click', () => {
      document.querySelectorAll('.chip').forEach(x => x.setAttribute('aria-pressed', String(x === c)));
      renderMenu(c.dataset.filter);
    });
  });

  /* ---------- Cart ---------- */
  function updateCart() {
    const ids = Object.keys(cart).filter(k => cart[k] > 0);
    const n = ids.reduce((a, k) => a + cart[k], 0);
    const total = ids.reduce((a, k) => a + cart[k] * MENU.find(m => m.id === k).price, 0);
    $('#cartCount').textContent = n
      ? `${n} item${n > 1 ? 's' : ''} · ${money(total)}`
      : 'Your order is empty. Add something tasty!';
    $('#orderBtn').disabled = !n;
    document.querySelectorAll('[data-qty]').forEach(el => {
      const q = cart[el.dataset.qty] || 0;
      el.textContent = q ? `×${q}` : '';
    });
  }

  function toast(msg) {
    const t = $('#toast');
    t.textContent = msg;
    t.classList.add('show');
    clearTimeout(toast.timer);
    toast.timer = setTimeout(() => t.classList.remove('show'), 3000);
  }

  $('#orderBtn').addEventListener('click', () => {
    const n = Object.keys(cart).reduce((a, k) => a + (cart[k] || 0), 0);
    if (!n) return;
    toast('Order in! Grab it at the window and we\'ll call your name.');
    Object.keys(cart).forEach(k => delete cart[k]);
    updateCart();
  });

  $('#clearBtn').addEventListener('click', () => {
    Object.keys(cart).forEach(k => delete cart[k]);
    updateCart();
  });

  /* ---------- Schedule & live status ---------- */
  const fmt = h => {
    const hr = Math.floor(h);
    return (hr % 12 || 12) + (hr >= 12 ? 'PM' : 'AM');
  };

  function buildWeek() {
    $('#week').innerHTML = ORDER.map(j => {
      const s = SCHED[j];
      const body = s
        ? `<div class="time">${fmt(s.open)} – ${fmt(s.close)}</div><div class="spot">${s.spot}</div>`
        : `<div class="time">Closed</div><div class="spot">Prep day: recipes and rest</div>`;
      return `<div class="day" data-d="${j}"><div class="dn">${DAYS[j]}</div>${body}</div>`;
    }).join('');
  }

  function renderStatus() {
    const now = new Date();
    const d = now.getDay();
    const h = now.getHours() + now.getMinutes() / 60;
    const today = SCHED[d];
    let open = false;
    let msg;

    if (today && h >= today.open && h < today.close) {
      open = true;
      msg = `Open now · parked at ${today.spot} until ${fmt(today.close)}`;
    } else {
      let next = null;
      for (let i = 0; i < 8 && !next; i++) {
        const j = (d + i) % 7;
        const s = SCHED[j];
        if (!s) continue;
        if (i === 0 && h >= s.close) continue;
        next = { i, j, s };
      }
      if (next.i === 0) {
        msg = `Closed right now · back today at ${fmt(next.s.open)} · ${next.s.spot}`;
      } else {
        msg = `Closed right now · next stop ${FULL[next.j]} at ${fmt(next.s.open)} · ${next.s.spot}`;
      }
    }

    $('#live').classList.toggle('closed', !open);
    $('#liveText').textContent = msg;
    $('#nowText').textContent = msg;
    document.querySelectorAll('.day').forEach(el => {
      el.classList.toggle('today', Number(el.dataset.d) === d);
    });
  }

  /* ---------- Misc ---------- */
  $('#cateringForm').addEventListener('submit', e => {
    e.preventDefault();
    $('#formMsg').textContent = 'Thanks! We\'ll reply within 1–2 business days to talk menus and dates.';
    e.target.reset();
  });

  $('#year').textContent = new Date().getFullYear();

  const io = ('IntersectionObserver' in window)
    ? new IntersectionObserver(entries => {
        entries.forEach(en => {
          if (en.isIntersecting) {
            en.target.classList.add('in');
            io.unobserve(en.target);
          }
        });
      }, { threshold: 0.12 })
    : null;
  document.querySelectorAll('.reveal').forEach(el => {
    if (io) io.observe(el); else el.classList.add('in');
  });

  renderTicker();
  buildWeek();
  renderMenu('all');
  renderStatus();
  setInterval(renderStatus, 30000);
})();
</script>
</body>
</html>
Reasoning trace (17,739 tokens)
I'm building a single self-contained HTML page for the Kimchi Loco taco truck, using only system fonts since external resources aren't allowed. It has to look right at both 1280x800 and 375px, with the key content visible on first paint: the menu, hours and location, and an order button. A bit of animation would help it feel lively.

I'm settling on a vibrant street-food palette (kimchi red, gochujang, cilantro lime, yellow) and a heavy system-font stack for the headlines. The page will have a nav with a simple wordmark or SVG icon, a hero with a bold tagline, two CTA buttons, and a scrolling ticker of menu items.

I'm planning the menu section next: taco cards with prices, sides and drinks, and filter chips to switch between categories. I'm also considering a small order builder where each "+ add" click collects items.

I'm adding a bit more interactivity: an order builder where each "+ add" click builds up a running total, plus a confirmation message instead of an alert. I'm also planning spice-level chili icons on each taco, a short founder story, a weekly schedule grid with a live status, and a simple sign-up form for location texts. I'm still weighing whether to include testimonials, since they'd be fabricated for a truck that isn't open yet.

I'm planning the page's visual details now: a hero taco drawn in SVG, scroll reveals that only trigger as elements enter the viewport, and a "what we're known for" section in place of fake reviews.

I'm drawing the taco in SVG, with a cream-yellow shell, bulgogi, red kimchi bits, scallion dots and sesame seeds, plus a rotating badge around it. Next I'm laying out the header and the hero as a two-column grid that stacks on mobile.

I'm moving on to the menu section next, with a cream background, filter chips, and a grid of cards showing each taco's name, description, spice level, price, and an "Add" button. A fixed order bar will track the running total and show a confirmation message when sent.

I'm working out the rest of the page: a schedule grid for the week with today highlighted, and a live open/closed status based on the current day and hour. Then a catering banner pointing to a contact section, and a footer with hours and an email address.

Still writing the page styles...

Still writing menu data...

Still writing menu data...

Still writing menu data...

Still writing the schedule and status logic...

Still writing the schedule and status logic...

Still writing the taco SVG and the hero visual...

Still writing the taco SVG...

Still writing the hero SVG and rotating badge...

I'm wrapping up the story section, meant to be two columns with a heading about home-kitchen roots and a stats card of simple, generic facts about the food.

I'm finishing the story and catering content, then the order bar that pins to the bottom with a running count and total.

Still writing the reveal animations and the reduced-motion fallback...

Still writing the CSS overflow fixes for the page.

Still writing the page's HTML head and the color styles...

Still writing the page's base styles and layout rules...

Still writing the header and nav styles...

Still writing the button styles...

Still writing the hero styles...

Still writing the hero styles...

Still writing the hero styles...

Still writing the hero visual and badge styles...

Still writing the hero badge and ticker styles...

Still writing the marquee ticker styles...

Still writing the section and menu styles...

Still writing the chip and card styles...

Still writing the card and footer styles...

Still writing the price, heat-level and add-button styles...

Still writing the story and schedule styles...

Still writing the schedule, status panel and catering styles...

Still writing the footer, cart bar and toast styles...

Still writing the menu rendering and the heat indicators...

Still writing the menu rendering and the heat indicators...

Still writing the cart logic and the status check...

Still writing the schedule data and the live open/closed check...

Still writing the status logic and the next-stop lookup...

Still writing the opening-hours logic...

Still writing the page's ticker and reveal scripts...

Still writing the taco SVG and the hero visual...

Still drawing the taco SVG...

Still drawing the taco's bulgogi filling and kimchi bits...

Still working out the SVG taco geometry: the shell's top curve peaks around y≈95, while the bulgogi mound peaks lower at about y≈137, so the filling sits inside the shell.

Still drawing the taco SVG...

Still writing the badge's circular text and center label...

Still writing the badge's circular text and center label...

I'm writing the footer with the Instagram handle and an email address, then moving on to the story copy: a home-kitchen origin, a family bulgogi recipe, and a truck that treats every order like it's for family. The stats are generic promises for a placeholder site, so I'll keep them light.

I'm now writing the hero copy: a short headline about Korean soul and taco swagger, with a lead line about sizzling bulgogi and kimchi fries. Then a small kicker calling it a pop-up street food truck, and section eyebrows for the menu and the parking location.

I'm writing the catering banner, a contact form with name, email, event date, guest count and a message box, and a "Send request" button. I'm also adding an "Order ahead" button in the header that scrolls to the menu, and making sure the hero, ticker and open status are visible on first paint.

Still writing the responsive breakpoints and the mobile layout...

Still writing the responsive breakpoints and the mobile layout...

Still writing the menu rendering and the helper functions...

Still writing the ticker and marquee render logic...

Still writing the menu card markup and the spice indicators...

Still writing the menu card markup and the cart totals...

Still writing the cart totals and the click handling...

Still writing the order button handler and the cart reset...

Still writing the status logic and the next-stop lookup...

Still writing the live open/closed status logic...

Still writing the status logic and the schedule highlight...

Still writing the schedule grid and the today highlight...

Still writing the day cards and the week grid layout...

Still writing the timers, the form submit handler and the year in the footer...

Still writing the cart bar markup and the order button's disabled state...

Still writing the section anchors and the final layout checks...