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
47.8 s
Cost
$0.0067
Output tokens
13,240
Spent thinking
194 tokens
Speed
296.9 tok/s
Console errors
0
First token after
3.2 s
First visible text after
3.2 s
Prompt tokens
543
Code size
28.3 KB
Finish reason
stop
Served by
Claude Platform on AWS
Model id
anthropic/claude-haiku-5.5
Reasoning sent
{"effort":"low"}
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 · 608 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>
<style>
  :root {
    --red: #e83a1e;
    --red-dark: #b82612;
    --orange: #ff8a1f;
    --yellow: #ffd23f;
    --lime: #b6f23a;
    --cream: #fff6e6;
    --ink: #1f1410;
    --pink: #ff4f8b;
  }
  * { 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;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }

  /* NAV */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 6vw;
    background: rgba(31,20,16,0.85);
    backdrop-filter: blur(8px);
    color: var(--cream);
  }
  .logo { font-weight: 900; font-size: 1.4rem; letter-spacing: -0.02em; text-decoration: none; }
  .logo span { color: var(--yellow); }
  nav { display: flex; gap: 26px; align-items: center; }
  nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: 0.9; }
  nav a:hover { color: var(--yellow); opacity: 1; }
  .nav-cta {
    background: var(--red); color: #fff !important; padding: 9px 18px;
    border-radius: 999px; opacity: 1 !important;
  }
  .menu-btn {
    display: none; background: none; border: 0; color: var(--cream);
    font-size: 1.8rem; cursor: pointer;
  }

  /* HERO */
  .hero {
    position: relative; min-height: 100vh;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
    padding: 120px 6vw 80px;
    background:
      radial-gradient(circle at 85% 20%, rgba(255,210,63,0.5), transparent 40%),
      radial-gradient(circle at 10% 90%, rgba(255,79,139,0.35), transparent 45%),
      linear-gradient(135deg, var(--red) 0%, var(--red-dark) 60%, #7a1408 100%);
    color: #fff; overflow: hidden;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
    background-size: 22px 22px; opacity: 0.6;
  }
  .hero-text { position: relative; z-index: 2; }
  .badge {
    display: inline-block; background: var(--yellow); color: var(--ink);
    font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 6px; transform: rotate(-2deg); margin-bottom: 18px;
  }
  .hero h1 {
    font-size: clamp(3rem, 8vw, 6.2rem); line-height: 0.92; font-weight: 900;
    letter-spacing: -0.035em; text-transform: uppercase;
  }
  .hero h1 .loco { color: var(--lime); display: inline-block; animation: wiggle 2.4s ease-in-out infinite; transform-origin: center; }
  @keyframes wiggle { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
  .hero p.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 22px 0 30px; max-width: 34ch; opacity: 0.95; }
  .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 16px 26px; border-radius: 999px; font-weight: 800; text-decoration: none;
    font-size: 1rem; border: 3px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s;
  }
  .btn:hover { transform: translateY(-3px); }
  .btn-primary { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 0 #c99a00; }
  .btn-primary:hover { box-shadow: 0 9px 0 #c99a00; }
  .btn-ghost { border-color: #fff; color: #fff; }
  .status {
    margin-top: 34px; display: inline-flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.25); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;
  }
  .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(182,242,58,.7); animation: pulse 1.8s infinite; }
  .dot.closed { background: #aaa; animation: none; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(182,242,58,.7);} 70% { box-shadow: 0 0 0 12px rgba(182,242,58,0);} 100% { box-shadow: 0 0 0 0 rgba(182,242,58,0);} }

  .hero-art { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; }
  .taco-stack { position: relative; width: min(440px, 90%); aspect-ratio: 1; }
  .taco {
    position: absolute; width: 70%; aspect-ratio: 1.6; border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: #f7c96a; border: 10px solid #fbe3a0; left: 15%; top: 30%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: float 4s ease-in-out infinite;
  }
  .taco::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: -28%; height: 60%;
    background:
      radial-gradient(circle at 20% 50%, #d6261a 0 14%, transparent 15%),
      radial-gradient(circle at 45% 40%, #3f9b2c 0 12%, transparent 13%),
      radial-gradient(circle at 70% 55%, #ff6b1a 0 15%, transparent 16%),
      radial-gradient(circle at 88% 35%, #f2e6c9 0 9%, transparent 10%),
      radial-gradient(circle at 35% 70%, #7a2a0e 0 10%, transparent 11%),
      radial-gradient(circle at 60% 25%, #d6261a 0 10%, transparent 11%);
    border-radius: 50% 50% 40% 40%;
  }
  .taco.t2 { animation-delay: -1.3s; width: 62%; left: 22%; top: 8%; background: #ffe08a; }
  .taco.t3 { animation-delay: -2.6s; width: 56%; left: 30%; top: 58%; }
  @keyframes float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
  .sticker {
    position: absolute; z-index: 3; background: var(--lime); color: var(--ink);
    width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; text-align: center;
    font-weight: 900; line-height: 1; font-size: 0.95rem; transform: rotate(12deg);
    box-shadow: 0 8px 0 rgba(0,0,0,.2); animation: spin 14s linear infinite;
  }
  .sticker b { display: block; font-size: 1.9rem; }
  .sticker.s1 { right: 2%; top: 2%; }
  @keyframes spin { from { transform: rotate(12deg);} to { transform: rotate(372deg);} }

  /* MARQUEE */
  .marquee { background: var(--ink); color: var(--yellow); overflow: hidden; white-space: nowrap; padding: 16px 0; font-weight: 900; text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.06em; }
  .marquee-track { display: inline-block; animation: slide 28s linear infinite; }
  .marquee span { margin: 0 18px; }
  @keyframes slide { from { transform: translateX(0);} to { transform: translateX(-50%);} }

  section { padding: 90px 6vw; }
  .eyebrow { color: var(--red); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
  h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 10px 0 18px; }
  .section-head { max-width: 680px; margin-bottom: 40px; }

  /* ABOUT */
  .about { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
  .about p { font-size: 1.1rem; margin-bottom: 16px; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
  .stat { background: #fff; border-radius: 18px; padding: 18px; text-align: center; box-shadow: 0 6px 0 #f0d9b5; }
  .stat b { display: block; font-size: 2rem; color: var(--red); font-weight: 900; }
  .stat small { font-weight: 600; opacity: .75; }
  .about-card {
    background: var(--yellow); border-radius: 28px; padding: 40px; position: relative;
    transform: rotate(1.5deg); box-shadow: 0 14px 0 var(--orange);
  }
  .about-card h3 { font-size: 1.8rem; font-weight: 900; line-height: 1.1; margin-bottom: 12px; }
  .about-card ul { list-style: none; }
  .about-card li { padding: 10px 0; border-bottom: 2px dashed rgba(0,0,0,.2); font-weight: 600; display: flex; gap: 10px; }
  .about-card li:last-child { border: 0; }

  /* MENU */
  .menu { background: #fff; }
  .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
  .tab {
    border: 2px solid var(--ink); background: transparent; padding: 10px 20px; border-radius: 999px;
    font-weight: 700; cursor: pointer; font-size: 0.95rem; transition: .15s;
  }
  .tab.active, .tab:hover { background: var(--ink); color: var(--yellow); }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
  .item {
    background: var(--cream); border-radius: 22px; padding: 24px; position: relative;
    border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; gap: 10px;
  }
  .item:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
  .item .heat { font-size: 0.85rem; letter-spacing: 2px; }
  .item h3 { font-size: 1.35rem; font-weight: 900; line-height: 1.15; }
  .item p { font-size: 0.95rem; opacity: .8; flex: 1; }
  .item .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
  .price { font-weight: 900; font-size: 1.4rem; color: var(--red); }
  .add {
    background: var(--red); color: #fff; border: 0; padding: 10px 16px; border-radius: 999px;
    font-weight: 800; cursor: pointer; font-size: 0.9rem; transition: transform .1s;
  }
  .add:active { transform: scale(.94); }
  .add:hover { background: var(--red-dark); }
  .tag {
    position: absolute; top: -12px; right: 18px; background: var(--pink); color: #fff;
    font-weight: 800; font-size: 0.75rem; padding: 5px 10px; border-radius: 8px; transform: rotate(4deg);
    border: 2px solid var(--ink);
  }
  .item.hidden { display: none; }

  .cart-bar {
    position: sticky; bottom: 16px; margin-top: 40px; background: var(--ink); color: var(--cream);
    border-radius: 20px; padding: 16px 22px; display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 10;
  }
  .cart-bar strong { color: var(--yellow); font-size: 1.15rem; }
  .cart-bar .btn { padding: 12px 22px; font-size: 0.95rem; }

  /* STORY / QUOTES */
  .story { background: var(--ink); color: var(--cream); }
  .story .eyebrow { color: var(--lime); }
  .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
  .quote { background: rgba(255,255,255,0.06); border-radius: 22px; padding: 28px; border: 1px solid rgba(255,255,255,0.1); }
  .quote p { font-size: 1.1rem; font-style: italic; margin-bottom: 14px; }
  .quote small { color: var(--yellow); font-weight: 700; }
  .stars { color: var(--yellow); letter-spacing: 3px; margin-bottom: 10px; }

  /* VISIT */
  .visit { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: start; }
  .hours { background: #fff; border-radius: 24px; padding: 30px; box-shadow: 0 8px 0 #f0d9b5; }
  .hours table { width: 100%; border-collapse: collapse; }
  .hours td { padding: 12px 6px; border-bottom: 2px dashed #eadcc4; font-weight: 600; }
  .hours td:last-child { text-align: right; color: var(--red); font-weight: 800; }
  .hours tr.today td { background: var(--yellow); }
  .hours tr.today td:first-child { border-radius: 10px 0 0 10px; }
  .hours tr.today td:last-child { border-radius: 0 10px 10px 0; color: var(--ink); }
  .map {
    border-radius: 24px; min-height: 320px; position: relative; overflow: hidden;
    background:
      linear-gradient(0deg, rgba(31,20,16,.05) 1px, transparent 1px) 0 0 / 40px 40px,
      linear-gradient(90deg, rgba(31,20,16,.05) 1px, transparent 1px) 0 0 / 40px 40px,
      #efe3cc;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
  }
  .road { position: absolute; background: #fff; border: 2px solid rgba(0,0,0,.1); }
  .truck-pin {
    position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%);
    background: var(--red); color: #fff; padding: 10px 16px; border-radius: 14px; font-weight: 900; border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink); white-space: nowrap; animation: bob 2s ease-in-out infinite;
  }
  @keyframes bob { 0%,100% { transform: translate(-50%,-50%);} 50% { transform: translate(-50%,-58%);} }
  .map-label { position: absolute; left: 16px; bottom: 16px; background: var(--cream); border: 2px solid var(--ink); padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; }

  /* FOOTER */
  footer { background: var(--red); color: #fff; padding: 60px 6vw 30px; }
  .footer-top { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-end; }
  footer h2 { color: #fff; margin: 0 0 12px; }
  .signup { display: flex; gap: 10px; flex-wrap: wrap; }
  .signup input {
    padding: 14px 18px; border-radius: 999px; border: 3px solid var(--ink); font-size: 1rem; min-width: 240px; font-family: inherit;
  }
  .signup button { background: var(--ink); color: var(--yellow); border: 0; padding: 14px 22px; border-radius: 999px; font-weight: 800; cursor: pointer; font-size: 1rem; font-family: inherit; }
  .signup button:hover { background: #000; }
  .thanks { font-weight: 700; margin-top: 10px; min-height: 1.5em; }
  .footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 2px solid rgba(255,255,255,.3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.9rem; opacity: .9; }

  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 150%); background: var(--lime); color: var(--ink);
    font-weight: 800; padding: 14px 22px; border-radius: 14px; border: 3px solid var(--ink); z-index: 100;
    transition: transform .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 4px 4px 0 var(--ink);
  }
  .toast.show { transform: translate(-50%, 0); }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; text-align: left; padding-top: 110px; min-height: auto; }
    .hero-art { order: -1; }
    .taco-stack { width: min(300px, 80%); }
    .about, .visit { grid-template-columns: 1fr; }
    nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--ink); padding: 20px 6vw; gap: 16px; }
    nav.open { display: flex; }
    .menu-btn { display: block; }
    header { position: fixed; }
  }
  @media (max-width: 480px) {
    section { padding: 64px 5vw; }
    .stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .stat { padding: 12px 6px; }
    .stat b { font-size: 1.5rem; }
    .sticker { width: 96px; height: 96px; font-size: 0.75rem; }
    .sticker b { font-size: 1.4rem; }
    .about-card { padding: 28px; }
    .signup input { min-width: 0; width: 100%; }
    .signup button { width: 100%; }
    .cart-bar { position: fixed; bottom: 10px; left: 10px; right: 10px; }
    .hours td { font-size: 0.95rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
</style>
</head>
<body>

<header>
  <a href="#top" class="logo">KIMCHI <span>LOCO</span></a>
  <nav id="nav">
    <a href="#about">Our Story</a>
    <a href="#menu">Menu</a>
    <a href="#reviews">Reviews</a>
    <a href="#visit">Find Us</a>
    <a href="#menu" class="nav-cta">Order Now</a>
  </nav>
  <button class="menu-btn" id="menuBtn" aria-label="Open menu">&#9776;</button>
</header>

<main>
  <div id="top"></div>
  <!-- HERO -->
  <div class="hero">
    <div class="hero-text">
      <span class="badge">Now serving in Your Neighborhood</span>
      <h1>Korean<br>tacos<br>that <span class="loco">go loco.</span></h1>
      <p class="lede">Sizzling bulgogi, kimchi slaw, and gochujang crema, wrapped hot and handed to you through a window on wheels.</p>
      <div class="btn-row">
        <a href="#menu" class="btn btn-primary">See the Menu &rarr;</a>
        <a href="#visit" class="btn btn-ghost">Find the Truck</a>
      </div>
      <div class="status" id="status">
        <span class="dot" id="statusDot"></span>
        <span id="statusText">Checking today's spot...</span>
      </div>
    </div>
    <div class="hero-art">
      <div class="taco-stack">
        <div class="taco"></div>
        <div class="taco t2"></div>
        <div class="taco t3"></div>
        <div class="sticker s1"><div><b>$4</b>tacos<br>all week</div></div>
      </div>
    </div>
  </div>

  <div class="marquee" aria-hidden="true">
    <div class="marquee-track">
      <span>Bulgogi</span>&#9733;<span>Kimchi Slaw</span>&#9733;<span>Gochujang Crema</span>&#9733;<span>Spicy Pork</span>&#9733;<span>Crispy Tofu</span>&#9733;<span>Cheese Quesadilla</span>&#9733;<span>Bulgogi</span>&#9733;<span>Kimchi Slaw</span>&#9733;<span>Gochujang Crema</span>&#9733;<span>Spicy Pork</span>&#9733;<span>Crispy Tofu</span>&#9733;<span>Cheese Quesadilla</span>&#9733;
    </div>
  </div>

  <!-- ABOUT -->
  <section id="about" class="about">
    <div>
      <div class="eyebrow">Our Story</div>
      <h2>Born in a family kitchen. Raised on the road.</h2>
      <p>Kimchi Loco started with one question at a family dinner: what happens when your grandmother's kimchi meets a Friday night taco craving? Turns out the answer is a line around the block.</p>
      <p>Every bulgogi is marinated overnight. The kimchi is fermented in-house for 21 days. The tortillas are pressed fresh every morning. Then it all goes into a truck that is somehow always parked where you need it.</p>
      <div class="stats">
        <div class="stat"><b>21</b><small>day kimchi</small></div>
        <div class="stat"><b>12h</b><small>marinated</small></div>
        <div class="stat"><b>0</b><small>frozen patties</small></div>
      </div>
    </div>
    <div>
      <div class="about-card">
        <h3>Why people keep coming back</h3>
        <ul>
          <li>&#127790; Fresh tortillas, pressed to order</li>
          <li>&#127789; Kimchi that actually has a kick</li>
          <li>&#127843; Sauces made from scratch daily</li>
          <li>&#127881; Vegan & spicy options, always</li>
          <li>&#128666; Find us every week, same good tacos</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- MENU -->
  <section id="menu" class="menu">
    <div class="section-head">
      <div class="eyebrow">The Menu</div>
      <h2>Pick your heat. Pick your fillings.</h2>
      <p>Tap <b>Add</b> to build your order, then send it to the window.</p>
    </div>

    <div class="tabs" role="tablist">
      <button class="tab active" data-filter="all">All</button>
      <button class="tab" data-filter="meat">Meat</button>
      <button class="tab" data-filter="veg">Veg</button>
      <button class="tab" data-filter="sides">Sides & Drinks</button>
    </div>

    <div class="grid" id="menuGrid">
      <article class="item" data-cat="meat" data-name="Bulgogi Taco" data-price="4.50">
        <span class="tag">Fan Fave</span>
        <div class="heat">&#127798;&#127798;</div>
        <h3>Bulgogi Beef Taco</h3>
        <p>Soy-garlic ribeye, quick-seared on the flat-top, with kimchi slaw and sesame crema.</p>
        <div class="row"><span class="price">$4.50</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="meat" data-name="Spicy Pork Taco" data-price="4.25">
        <div class="heat">&#127798;&#127798;&#127798;</div>
        <h3>Gochu Pork Taco</h3>
        <p>Slow-braised pork shoulder in red chili glaze, pickled radish, cilantro, lime.</p>
        <div class="row"><span class="price">$4.25</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="meat" data-name="Chicken Crunch Taco" data-price="4.25">
        <div class="heat">&#127798;</div>
        <h3>Yangnyeom Chicken</h3>
        <p>Double-fried chicken tossed in sweet-spicy yangnyeom, scallion, crunchy garlic.</p>
        <div class="row"><span class="price">$4.25</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="veg" data-name="Crispy Tofu Taco" data-price="4.00">
        <span class="tag">Vegan</span>
        <div class="heat">&#127798;&#127798;</div>
        <h3>Crispy Tofu Taco</h3>
        <p>Cornstarch-crisped tofu, ssamjang glaze, pickled cucumber, toasted sesame.</p>
        <div class="row"><span class="price">$4.00</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="veg" data-name="Mushroom Bulgogi Taco" data-price="4.00">
        <div class="heat">&#127798;</div>
        <h3>Mushroom Bulgogi</h3>
        <p>King oyster mushrooms in our bulgogi marinade, with kimchi slaw and lime crema.</p>
        <div class="row"><span class="price">$4.00</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="sides" data-name="Kimchi Fries" data-price="6.00">
        <span class="tag">Must Try</span>
        <div class="heat">&#127798;&#127798;</div>
        <h3>Kimchi Cheese Fries</h3>
        <p>Crispy fries, melted cheddar-gouda, kimchi, scallion, gochujang drizzle.</p>
        <div class="row"><span class="price">$6.00</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="sides" data-name="Korean Corn Dog" data-price="5.00">
        <div class="heat">&#127798;</div>
        <h3>Corn Dog Bites</h3>
        <p>Crispy potato-coated sausage bites with honey mustard and a sprinkle of sugar.</p>
        <div class="row"><span class="price">$5.00</span><button class="add">Add +</button></div>
      </article>

      <article class="item" data-cat="sides" data-name="Homemade Soda" data-price="3.00">
        <div class="heat">&#127865;</div>
        <h3>Yuzu Soda</h3>
        <p>Sparkling yuzu, honey, and a hint of basil. Cools the heat, fast.</p>
        <div class="row"><span class="price">$3.00</span><button class="add">Add +</button></div>
      </article>
    </div>

    <div class="cart-bar" id="cartBar">
      <div>Your order: <strong id="cartCount">0 items</strong> &middot; <strong id="cartTotal">$0.00</strong></div>
      <button class="btn btn-primary" id="checkoutBtn">Send to the Window &rarr;</button>
    </div>
  </section>

  <!-- REVIEWS -->
  <section id="reviews" class="story">
    <div class="section-head">
      <div class="eyebrow">Hear it from the line</div>
      <h2>Yes, people really wait for these.</h2>
    </div>
    <div class="quotes">
      <div class="quote">
        <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p>"The bulgogi taco ruined every other taco for me. The kimchi slaw is ridiculous in the best way."</p>
        <small>Dana R., regular since week one</small>
      </div>
      <div class="quote">
        <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p>"I came for the tofu as a skeptic and left planning my whole Saturday around the truck."</p>
        <small>Marcus T., vegan and proud</small>
      </div>
      <div class="quote">
        <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p>"Kimchi cheese fries. I have no words. Only more orders."</p>
        <small>Priya S., fry enthusiast</small>
      </div>
    </div>
  </section>

  <!-- VISIT -->
  <section id="visit" class="visit">
    <div>
      <div class="eyebrow">Find the truck</div>
      <h2>This week's schedule</h2>
      <div class="hours" style="margin-top:22px">
        <table>
          <tbody id="hoursBody">
            <tr data-day="1"><td>Monday</td><td>Closed (prep day)</td></tr>
            <tr data-day="2"><td>Tuesday</td><td>11am - 3pm</td></tr>
            <tr data-day="3"><td>Wednesday</td><td>11am - 3pm</td></tr>
            <tr data-day="4"><td>Thursday</td><td>11am - 8pm</td></tr>
            <tr data-day="5"><td>Friday</td><td>11am - 10pm</td></tr>
            <tr data-day="6"><td>Saturday</td><td>10am - 10pm</td></tr>
            <tr data-day="0"><td>Sunday</td><td>10am - 6pm</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div>
      <div class="map" aria-label="Map placeholder showing truck location">
        <div class="road" style="left:0;right:0;top:55%;height:18px"></div>
        <div class="road" style="top:0;bottom:0;left:38%;width:18px"></div>
        <div class="road" style="top:20%;left:0;right:0;height:10px"></div>
        <div class="truck-pin">&#128666; KIMCHI LOCO</div>
        <div class="map-label">Parked today: Main & 5th</div>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="footer-top">
    <div>
      <h2>Get the schedule before the line does.</h2>
      <p>Join the list for weekly locations and secret menu drops.</p>
    </div>
    <div>
      <form class="signup" id="signupForm">
        <input type="email" id="email" placeholder="you@email.com" required aria-label="Email address">
        <button type="submit">Count me in</button>
      </form>
      <div class="thanks" id="thanks"></div>
    </div>
  </div>
  <div class="footer-bottom">
    <span>&copy; <span id="year"></span> Kimchi Loco. Made with gochujang and questionable jokes.</span>
    <span>@kimchiloco &middot; Catering available</span>
  </div>
</footer>

<div class="toast" id="toast">Added to your order!</div>

<script>
  (function () {
    // Year
    document.getElementById('year').textContent = new Date().getFullYear();

    // Mobile nav
    const nav = document.getElementById('nav');
    document.getElementById('menuBtn').addEventListener('click', () => nav.classList.toggle('open'));
    nav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => nav.classList.remove('open')));

    // Open / closed status and highlight today
    const days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    const now = new Date();
    const day = now.getDay();
    const hour = now.getHours() + now.getMinutes() / 60;
    const hours = {
      0: [10, 18], 1: null, 2: [11, 15], 3: [11, 15], 4: [11, 20], 5: [11, 22], 6: [10, 22]
    };
    const todayHours = hours[day];
    const isOpen = todayHours && hour >= todayHours[0] && hour < todayHours[1];
    const dot = document.getElementById('statusDot');
    const txt = document.getElementById('statusText');
    if (isOpen) {
      txt.textContent = 'Open now at Main & 5th until ' + todayHours[1] % 12 + (todayHours[1] >= 12 ? 'pm' : 'am') + '. Come hungry.';
    } else if (!todayHours) {
      txt.textContent = 'Prep day. Next stop: Tuesday at 11am.';
      dot.classList.add('closed');
    } else {
      txt.textContent = 'Closed right now. Next up: ' + days[(day + 1) % 7] + ' - see schedule below.';
      dot.classList.add('closed');
    }
    document.querySelectorAll('#hoursBody tr').forEach(tr => {
      if (Number(tr.dataset.day) === day) tr.classList.add('today');
    });

    // Menu filter
    const items = document.querySelectorAll('.item');
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', () => {
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        const f = tab.dataset.filter;
        items.forEach(it => {
          it.classList.toggle('hidden', f !== 'all' && it.dataset.cat !== f);
        });
      });
    });

    // Cart
    const cart = {};
    const toast = document.getElementById('toast');
    let toastTimer;
    function renderCart() {
      let count = 0, total = 0;
      Object.values(cart).forEach(c => { count += c.qty; total += c.qty * c.price; });
      document.getElementById('cartCount').textContent = count + (count === 1 ? ' item' : ' items');
      document.getElementById('cartTotal').textContent = '$' + total.toFixed(2);
    }
    items.forEach(it => {
      it.querySelector('.add').addEventListener('click', () => {
        const name = it.dataset.name;
        if (!cart[name]) cart[name] = { qty: 0, price: parseFloat(it.dataset.price) };
        cart[name].qty++;
        renderCart();
        toast.textContent = 'Added ' + name + '!';
        toast.classList.add('show');
        clearTimeout(toastTimer);
        toastTimer = setTimeout(() => toast.classList.remove('show'), 1600);
      });
    });
    document.getElementById('checkoutBtn').addEventListener('click', () => {
      const count = Object.values(cart).reduce((s, c) => s + c.qty, 0);
      toast.textContent = count
        ? 'Order sent to the window! Pick up in about 8 minutes.'
        : 'Add something tasty first!';
      toast.classList.add('show');
      clearTimeout(toastTimer);
      toastTimer = setTimeout(() => toast.classList.remove('show'), 2200);
    });

    // Signup
    document.getElementById('signupForm').addEventListener('submit', e => {
      e.preventDefault();
      document.getElementById('thanks').textContent = "You're in! We'll text you where we're parked.";
      e.target.reset();
    });
  })();
</script>
</body>
</html>
Reasoning trace (194 tokens)
I'm planning a single self-contained HTML page for Kimchi Loco that works at 1280x800 and on mobile, with no external fonts or localStorage. The look should be bold and appetizing in kimchi red, lime, and cream, with a menu, a hours and location placeholder, an order call to action, and a simple script for menu tabs or a cart count. I'm also weighing a hero animation, which I'll keep if it doesn't bloat things.

I'm also checking that the page stays free of errors, keeps the hero animation light, and includes a live-ish open/closed status tied to the day and time, plus a mobile nav toggle.