Models 44

Nemotron 3.5 Super VL (free)

by NVIDIAReasoningClean
Open in new window

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

How it went

Total time
1 min 49 s
Cost
$0
Output tokens
14,193
Spent thinking
5,895 tokens
Speed
131.2 tok/s
Console errors
0
First token after
411 ms
First visible text after
57.6 s
Prompt tokens
381
Code size
23.0 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3.5-super-vl:free
Reasoning sent
model default
Max output
32,000 tokens
Generated
Nov 9, 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.0">
<title>Kimchi Loco | Korean Taco Truck</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #0b1120;
    color: #f1f5f9;
    line-height: 1.6;
    overflow-x: hidden;
  }
  :root {
    --red: #ef4444;
    --red-dark: #b91c1c;
    --lime: #a3e635;
    --amber: #f59e0b;
    --charcoal: #111827;
    --card: rgba(30, 41, 59, 0.6);
    --muted: #94a3b8;
    --glass: rgba(255, 255, 255, 0.05);
  }
  .container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

  /* Background ambience */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(circle at 20% 30%, rgba(239, 68, 68, 0.12), transparent 35%),
      radial-gradient(circle at 80% 70%, rgba(163, 230, 53, 0.08), transparent 35%);
    pointer-events: none;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 17, 32, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    text-decoration: none;
    color: #fff;
  }
  .logo-mark { width: 32px; height: 32px; }
  .logo-mark path { stroke: var(--red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .logo span { color: var(--lime); }
  .nav-links {
    display: none;
    gap: 1.75rem;
    align-items: center;
  }
  .nav-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: #fff; }
  .nav-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    font-size: 0.95rem;
  }
  .btn:active { transform: scale(0.96); }
  .btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-dark); }
  .btn-primary:hover { background: #fb7185; transform: translateY(-1px); box-shadow: 0 7px 0 var(--red-dark); }
  .btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.25); }
  .btn-outline:hover { background: rgba(255,255,255,0.1); }

  /* Hero */
  .hero {
    padding: 5rem 0 4rem;
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
  }
  .chip-open { background: rgba(163, 230, 53, 0.15); color: var(--lime); border: 1px solid rgba(163, 230, 53, 0.35); }
  .chip-closed { background: rgba(239, 68, 68, 0.15); color: var(--red); border: 1px solid rgba(239, 68, 68, 0.35); }
  .hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: 1rem;
    letter-spacing: -2px;
  }
  .highlight { color: var(--lime); }
  .subtitle {
    font-size: 1.15rem;
    color: #cbd5e1;
    margin-bottom: 1.75rem;
    max-width: 42ch;
  }
  .countdown {
    font-size: 1rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
    font-weight: 600;
  }
  .hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
  .hero-art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .taco-hero { width: clamp(200px, 45vw, 360px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); }
  .steam {
    position: absolute;
    width: 6px;
    height: 50px;
    background: linear-gradient(transparent, rgba(255,255,255,0.35));
    border-radius: 3px;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: steamRise 3s ease-in-out infinite;
  }
  .steam:nth-child(2) { left: 42%; animation-delay: 0.6s; animation-duration: 3.5s; }
  .steam:nth-child(3) { left: 58%; animation-delay: 1.2s; animation-duration: 2.8s; }
  @keyframes steamRise {
    0% { transform: translate(-50%, 0) scale(1); opacity: 0; }
    40% { opacity: 0.5; }
    100% { transform: translate(-50%, -100%) scale(1.4); opacity: 0; }
  }
  .art-caption {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  /* Sections */
  section { padding: 5rem 0; }
  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: -1px;
  }
  .section-subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 3rem;
    font-size: 1.05rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* Menu */
  .menu-filters {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
  }
  .filter {
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.1);
    color: #cbd5e1;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
  }
  .filter.active { background: var(--red); color: #fff; border-color: var(--red); }
  .filter:hover:not(.active) { border-color: rgba(255,255,255,0.3); color: #fff; }
  .menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
  .menu-item {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }
  .menu-item.visible { opacity: 1; transform: translateY(0); }
  .menu-item svg { flex-shrink: 0; width: 44px; height: 44px; color: var(--red); }
  .menu-item-content { flex: 1; }
  .menu-item-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
  .menu-item h3 { font-size: 1.1rem; color: #fff; }
  .price { font-weight: 900; color: var(--lime); font-size: 1.1rem; }
  .desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.5; }
  .add-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
  }
  .add-btn:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

  /* Location */
  .location {
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
  }
  .status-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  @media (min-width: 768px) { .status-card { grid-template-columns: 2fr 1fr; } }
  .open-indicator { font-size: 1.25rem; font-weight: 900; display: flex; align-items: center; gap: 0.5rem; }
  .open-indicator.open { color: var(--lime); }
  .open-indicator.closed { color: var(--red); }
  .truck-info h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
  .truck-info p { color: var(--muted); margin-bottom: 0.25rem; font-size: 0.95rem; }
  .truck-info strong { color: #fff; }
  .map-placeholder {
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    background: #1e293b;
    border: 2px dashed rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 700;
    font-size: 0.95rem;
  }

  /* About */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } }
  .about img-placeholder {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: #1e293b;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 700;
  }
  .about p { color: #cbd5e1; margin-bottom: 1rem; font-size: 1.05rem; }
  .about ul { list-style: none; color: #cbd5e1; }
  .about li { margin-bottom: 0.6rem; padding-left: 1.4rem; position: relative; }
  .about li::before { content: "🌶️"; position: absolute; left: 0; top: 0; }

  /* Footer */
  footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 3rem 0 2rem;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
  }
  .footer-grid { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
  .social { display: flex; gap: 1rem; }
  .social a { color: var(--muted); text-decoration: none; font-weight: 700; }
  .social a:hover { color: #fff; }

  /* Reveal animation */
  .reveal { opacity: 0; transform: translateY(24px); transition: all 0.7s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay { transition-delay: 0.15s; }

  /* Mobile nav */
  @media (min-width: 768px) {
    .nav-toggle { display: none; }
    .nav-links { display: flex; }
  }
  @media (max-width: 767px) {
    .nav-links {
      position: absolute;
      top: 72px;
      left: 0; right: 0;
      background: rgba(11, 17, 32, 0.95);
      flex-direction: column;
      padding: 1.5rem;
      gap: 1rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: none;
    }
    .nav-links.open { display: flex; }
    .hero-actions { flex-direction: column; }
    .btn-lg { width: 100%; }
  }
</style>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <a href="#" class="logo">
      <svg class="logo-mark" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 6 L16 2 L24 6 M8 26 L16 30 L24 26 M6 12 L10 12 L10 20 L6 20 Z M22 12 L26 12 L26 20 L22 20 Z"/>
      </svg>
      <div class="logo-text">KIMCHI<span> LOCO</span></div>
    </a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">☰</button>
    <nav class="nav-links" id="navLinks">
      <a href="#menu">Menu</a>
      <a href="#location">Find Us</a>
      <a href="#about">Story</a>
      <a href="#order">Order</a>
    </nav>
    <a href="#location" class="btn btn-primary">Today's Spot</a>
  </div>
</header>

<section class="hero" id="hero">
  <div class="container hero-grid">
    <div class="hero-text">
      <span class="chip" id="statusChip">Checking...</span>
      <h1>Kimchi <span class="highlight">Loco</span></h1>
      <p class="subtitle">Seoul fire meets Mexican soul. Kimchi tacos that will ruin every other taco for you.</p>
      <div class="countdown" id="countdown"></div>
      <div class="hero-actions">
        <a href="#menu" class="btn btn-lg btn-primary">See the Menu</a>
        <a href="#location" class="btn btn-lg btn-outline">Find the Truck</a>
      </div>
    </div>
    <div class="hero-art">
      <div class="steam"></div>
      <div class="steam"></div>
      <div class="steam"></div>
      <svg class="taco-hero" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="shellGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#f59e0b"/>
            <stop offset="100%" stop-color="#b45309"/>
          </linearGradient>
        </defs>
        <path d="M40,160 Q100,35 160,160 Z" fill="url(#shellGrad)" stroke="#92400e" stroke-width="6"/>
        <circle cx="72" cy="122" r="17" fill="#ef4444" opacity="0.95"/>
        <circle cx="100" cy="112" r="14" fill="#fbbf24" opacity="0.95"/>
        <circle cx="130" cy="132" r="16" fill="#ef4444" opacity="0.9"/>
        <circle cx="92" cy="142" r="12" fill="#22c55e" opacity="0.9"/>
        <circle cx="112" cy="152" r="10" fill="#facc15" opacity="0.9"/>
        <circle cx="76" cy="152" r="9" fill="#22c55e" opacity="0.8"/>
      </svg>
      <p class="art-caption">Signature kimchi bulgogi taco</p>
    </div>
  </div>
</section>

<section id="menu" class="menu">
  <div class="container">
    <h2 class="section-title reveal">Today's Menu</h2>
    <p class="section-subtitle reveal">Fresh off the grill. Order at the window — we keep it fast, loud, and delicious.</p>

    <div class="menu-filters">
      <button class="filter active" data-cat="all">All</button>
      <button class="filter" data-cat="tacos">Tacos</button>
      <button class="filter" data-cat="sides">Sides</button>
      <button class="filter" data-cat="drinks">Drinks</button>
    </div>

    <div class="menu-grid">
      <!-- Tacos -->
      <div class="menu-item reveal reveal-delay" data-cat="tacos">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M8,24 Q16,8 24,24 Z" fill="none" stroke="#ef4444" stroke-width="2.5"/><circle cx="12" cy="20" r="3" fill="#ef4444"/><circle cx="16" cy="18" r="2.5" fill="#fbbf24"/><circle cx="20" cy="22" r="3" fill="#ef4444"/><circle cx="14" cy="24" r="2" fill="#22c55e"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Bulgogi Beef Taco</h3><span class="price">$5</span></div>
          <p class="desc">Marinated ribeye, kimchi slaw, gochujang aioli, cilantro, lime.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>
      <div class="menu-item reveal reveal-delay" data-cat="tacos">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M8,24 Q16,8 24,24 Z" fill="none" stroke="#ef4444" stroke-width="2.5"/><circle cx="12" cy="20" r="3" fill="#ef4444"/><circle cx="16" cy="18" r="2.5" fill="#94a3b8"/><circle cx="20" cy="22" r="3" fill="#ef4444"/><circle cx="14" cy="24" r="2" fill="#22c55e"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Spicy Pork Taco</h3><span class="price">$5</span></div>
          <p class="desc">Gochujang pork, pickled daikon, green onion, sesame.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>
      <div class="menu-item reveal reveal-delay" data-cat="tacos">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M8,24 Q16,8 24,24 Z" fill="none" stroke="#ef4444" stroke-width="2.5"/><circle cx="12" cy="20" r="3" fill="#ef4444"/><circle cx="16" cy="18" r="2.5" fill="#fbbf24"/><circle cx="20" cy="22" r="3" fill="#ef4444"/><circle cx="14" cy="24" r="2" fill="#22c55e"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Kimchi Jackfruit Taco</h3><span class="price">$6</span></div>
          <p class="desc">Vegan. BBQ jackfruit, kimchi, avocado crema, pickled onion.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>

      <!-- Sides -->
      <div class="menu-item reveal reveal-delay" data-cat="sides">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="20" height="16" rx="4" fill="#fbbf24"/><path d="M10 12 L12 14 M20 12 L18 14 M10 20 L12 22 M20 20 L18 22" stroke="#b45309" stroke-width="2" stroke-linecap="round"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Kimchi Fries</h3><span class="price">$7</span></div>
          <p class="desc">Crispy fries, cheese sauce, kimchi, scallions, spicy mayo.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>
      <div class="menu-item reveal reveal-delay" data-cat="sides">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="8" fill="#fbbf24"/><circle cx="16" cy="16" r="4" fill="#ef4444"/><path d="M12 16 Q16 20 20 16" stroke="#92400e" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Korean Fried Chicken</h3><span class="price">$9</span></div>
          <p class="desc">Gochugaru-dusted bites with ranch dip.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>

      <!-- Drinks -->
      <div class="menu-item reveal reveal-delay" data-cat="drinks">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="6" width="8" height="20" rx="2" fill="#facc15"/><rect x="10" y="4" width="12" height="4" fill="#94a3b8"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Soju Margarita</h3><span class="price">$8</span></div>
          <p class="desc">Soju, lime, triple sec, salt rim.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>
      <div class="menu-item reveal reveal-delay" data-cat="drinks">
        <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="6" width="8" height="20" rx="2" fill="#22c55e"/><rect x="10" y="4" width="12" height="4" fill="#94a3b8"/><circle cx="16" cy="22" r="2" fill="#22c55e"/></svg>
        <div class="menu-item-content">
          <div class="menu-item-header"><h3>Yuzu Ade</h3><span class="price">$4</span></div>
          <p class="desc">Fresh yuzu, sparkling water, mint.</p>
          <button class="add-btn">Add</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="location" class="location">
  <div class="container">
    <h2 class="section-title reveal">Find the Truck</h2>
    <div class="status-card reveal reveal-delay">
      <div>
        <div class="open-indicator" id="openStatus">Checking...</div>
        <div class="truck-info">
          <h3>Today's Location</h3>
          <p><strong>Downtown Food Truck Row</strong></p>
          <p>123 Main Street</p>
          <p>Daily 11:00 AM – 9:00 PM</p>
        </div>
      </div>
      <div class="map-placeholder">🗺️ Tap for directions</div>
    </div>
    <a href="https://www.google.com/maps/search/?api=1&query=123+Main+Street" target="_blank" rel="noopener" class="btn btn-primary" style="display:inline-flex; margin:0 auto;">Get Directions</a>
  </div>
</section>

<section id="about" class="about">
  <div class="container">
    <div class="about-grid">
      <div class="about-text reveal">
        <h2 class="section-title" style="text-align:left;">Our Story</h2>
        <p>Kimchi Loco started in a tiny Seoul kitchen and a battered food truck in LA. We marry the funk of fermented kimchi with the bold, street-smart swagger of Mexican tacos.</p>
        <p>Every tortilla is pressed fresh. Every batch of kimchi is made in-house. Come hungry. Leave loco.</p>
        <ul>
          <li>Locally sourced pork and beef</li>
          <li>House-made kimchi daily</li>
          <li>Vegan &amp; veggie options available</li>
          <li>Cash &amp; card accepted</li>
        </ul>
      </div>
      <div class="img-placeholder reveal reveal-delay" style="grid-column:1;"></div>
    </div>
  </div>
</section>

<div id="order" style="padding:4rem 0; text-align:center;">
  <div class="container">
    <h2 class="section-title reveal">Planning an Event?</h2>
    <p class="section-subtitle reveal">We cater offices, parties, and pop-ups. Email us to book the truck.</p>
    <a href="mailto:hello@kimchiloco.example" class="btn btn-lg btn-primary reveal reveal-delay">hello@kimchiloco.example</a>
  </div>
</section>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div style="font-weight:900; font-size:1.25rem; color:#fff;">KIMCHI LOCO</div>
      <div class="social">
        <a href="#">Instagram</a>
        <a href="#">Twitter</a>
        <a href="#">TikTok</a>
      </div>
      <p>© 2024 Kimchi Loco Korean Taco Truck. Made with hunger.</p>
    </div>
  </div>
</footer>

<script>
  /* ---- Mobile Menu ---- */
  const toggle = document.getElementById('navToggle');
  const links = document.getElementById('navLinks');
  toggle.addEventListener('click', () => {
    links.classList.toggle('open');
  });
  links.querySelectorAll('a').forEach(a => {
    a.addEventListener('click', () => links.classList.remove('open'));
  });

  /* ---- Open / Closed Status + Countdown ---- */
  function updateStatus() {
    const now = new Date();
    const h = now.getHours();
    const chip = document.getElementById('statusChip');
    const countdown = document.getElementById('countdown');
    const openStatus = document.getElementById('openStatus');
    const isOpen = h >= 11 && h < 21;

    if (isOpen) {
      chip.textContent = '🔥 OPEN NOW';
      chip.className = 'chip chip-open';
      countdown.style.display = 'block';

      const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 21, 0, 0);
      let diff = end - now;
      if (diff < 0) {
        end.setDate(end.getDate() + 1);
        diff = end - now;
      }
      const hrs = Math.floor(diff / 3600000);
      const mins = Math.floor((diff % 3600000) / 60000);
      countdown.textContent = `Closes in ${hrs}h ${mins}m • 123 Main Street`;

      openStatus.textContent = '🔥 OPEN NOW';
      openStatus.className = 'open-indicator open';
    } else {
      chip.textContent = '🌙 CLOSED — See you tomorrow';
      chip.className = 'chip chip-closed';
      countdown.style.display = 'none';

      openStatus.textContent = '🌙 CLOSED';
      openStatus.className = 'open-indicator closed';
    }
  }
  updateStatus();
  setInterval(updateStatus, 1000);

  /* ---- Menu Filtering ---- */
  const filters = document.querySelectorAll('.filter');
  filters.forEach(btn => {
    btn.addEventListener('click', () => {
      filters.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const cat = btn.getAttribute('data-cat');
      document.querySelectorAll('.menu-item').forEach(item => {
        if (cat === 'all' || item.getAttribute('data-cat') === cat) {
          item.style.display = 'flex';
          void item.offsetHeight; // reflow
          item.style.animation = 'none';
          item.offsetHeight;
          item.style.animation = '';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });

  /* ---- Scroll Reveal ---- */
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>

</body>
</html>
Reasoning trace (5,895 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". It needs to be a self-contained HTML file with inline CSS/JS, no external dependencies except allowed CDN URLs (but probably best to avoid external entirely to be safe, or use Google Fonts? The rules say no external files/images/fonts/network requests except CDN URLs explicitly allowed by the task. The task doesn't explicitly allow any CDN URLs, so I should stick to inline everything, maybe system fonts).

Key requirements:
- One fenced code block ```html ... ```
- No text before/after
- Inline CSS and JS
- No localStorage, etc.
- No alert/confirm/prompt
- Look good in 1280x800 and adapt to 375px, no horizontal scroll
- Something meaningful visible on first paint (screenshot at 3s)
- Games must start in self-playing demo mode - but this is not a game, it's a food truck website. So that rule doesn't apply directly, but "something meaningful must be visible on first paint" does.
- Keyboard events only after click - not really applicable unless I have keyboard navigation. I'll avoid keyboard dependency.

Goal: Make people really want to come. So it should be mouth-watering, vibrant, appetizing, with clear info: menu, location/hours, story, maybe a countdown or "we're open" indicator, online order placeholder, mouthwatering descriptions.

Since no external images allowed, I need to create visual interest with CSS, SVG, or maybe emoji. I can use inline SVG for graphics (taco, chili, etc.) or use CSS gradients and shapes. Emoji can work but might look cheap. Better: pure CSS food illustrations? That's hard but doable with simple shapes. Or inline SVG icons (taco, chili pepper, kimchi jar). SVG is inline so allowed.

Structure:
- Header: Kimchi Loco logo (text + SVG), nav links (Menu, Location, Order, About)
- Hero section: Big bold "Kimchi Loco", tagline "Korean BBQ meets Mexican street food", CTA button "See Today's Location", maybe an animated "NOW SERVING" badge.
- Menu section: Featured items with CSS/SVG illustrations, descriptions, prices. Kimchi bulgogi taco, spicy pork taco, kimchi quesadilla, kimchi fries, soju margarita?
- Location/Hours: "Find us today" with a map placeholder (CSS grid representing city blocks?), hours.
- Social proof / vibes: "As seen on..." fake badges, customer quotes.
- Footer: contact, instagram handle placeholder.

Interactivity (vanilla JS):
- Mobile menu toggle
- Smooth scroll
- Tab switching for menu categories
- "Open/Closed" status based on time (simulate current time or just say "Open until 9 PM")
- Maybe a particle effect or floating kimchi bubbles? Keep it light.
- A "Build your taco" playful interaction? Could be fun but must be visible immediately.
- Countdown to next service?

Visual style:
- Colors: Korean red (#E63946 or kimchi red), lime green, black, white, yellow accents. Vibrant street food vibe.
- Typography: system fonts, bold display.
- Background: subtle pattern or gradient.
- Glassmorphism cards.

Let's design:

HTML structure:
<header>
  <div class="container nav">
    <div class="logo">KIMCHI LOCO <span>•</span> KOREAN TACOS</div>
    <button class="mobile-menu">☰</button>
    <nav>
      <a href="#menu">Menu</a>
      <a href="#location">Find Us</a>
      <a href="#about">Story</a>
      <a href="#order">Order</a>
    </nav>
    <a href="#" class="btn">Today's Spot</a>
  </div>
</header>

<section class="hero">
  <div class="hero-content">
    <span class="badge">🔥 NOW SERVING</span>
    <h1>Kimchi <span class="loc">Loco</span></h1>
    <p>Where Seoul's heat meets Mexico's soul.</p>
    <div class="hero-cta">
      <a href="#menu" class="btn-primary">View Menu</a>
      <a href="#location" class="btn-outline">Find the Truck</a>
    </div>
    <div class="hero-visual">
      <!-- CSS taco or SVG -->
    </div>
  </div>
</section>

<section id="menu" class="menu">
  <h2 class="section-title">Today's Menu</h2>
  <div class="menu-filters">
    <button class="filter active" data-cat="all">All</button>
    <button class="filter" data-cat="tacos">Tacos</button>
    <button class="filter" data-cat="sides">Sides</button>
    <button class="filter" data-cat="drinks">Drinks</button>
  </div>
  <div class="menu-grid">
    <!-- items injected by JS or static -->
  </div>
</section>

<section id="location" class="location">
  <div class="status-card">
    <div class="open-indicator" id="openStatus">Opening soon</div>
    <div class="truck-info">
      <h3>Today's Location</h3>
      <p><strong>Downtown Food Truck Row</strong></p>
      <p>123 Main Street • 11:00 AM – 9:00 PM</p>
    </div>
  </div>
  <div class="map-placeholder"></div>
</section>

<section id="about" class="about">
  <h2>Our Story</h2>
  <p>...</p>
</section>

<footer>...</footer>

JS:
- Determine open status: random or based on time? Let's say if current hour between 11 and 21, "OPEN NOW", else "Closed, see you tomorrow". But screenshot at 3s might catch any time. Let's just hardcode a friendly message: "OPEN UNTIL 9 PM TONIGHT" with a countdown? Could do countdown to 21:00 local time. That's dynamic and meaningful.
- Filter menu items.
- Mobile menu toggle.
- Smooth scroll.

Images: No external. I'll draw a taco with CSS or inline SVG. Let's do inline SVG icons for menu items: taco, chili, bowl, drink. And a hero graphic using CSS div shapes (taco shell, meat, kimchi). CSS food art is fun and loads instantly.

Hero visual CSS taco:
- .taco: wrapper
- .shell: semicircle or curved border
- .meat: brown blobs
- .kimchi: red/pink blobs
- .cilantro: green dots
- .lime: yellow wedge

This will look cute and appetizing enough.

Colors:
- --kimchi-red: #EF4444
- --kimchi-dark: #991B1B
- --lime: #A3E635
- --charcoal: #1F2937
- --cream: #FEF9C3
- --white: #FFFFFF

Responsive: single column below 640px, flexbox/grid, no horizontal scroll. Use max-width containers, padding.

Font: system-ui, -apple-system, sans-serif.

Let's write the code.

Self-contained, one file.

I'll include:
- CSS reset
- Variables
- Layout
- Animations (float, pulse, slide-in)
- SVG icons inline
- JS for:
  - Countdown timer to close
  - Menu filtering
  - Mobile nav
  - Intersection observer for reveal animations
  - "Order" button scroll

Hero badge "NOW SERVING" with pulsing animation.

Menu items static in HTML (simpler, no JS dependency for first paint). But JS can filter.

Let's draft menu items:
1. Bulgogi Beef Taco - $5 - Marinated beef, kimchi slaw, gochujang aioli, cilantro. (Tacos)
2. Spicy Pork Taco - $5 - Gochujang pork, pickled daikon, green onion. (Tacos)
3. Kimchi Quesadilla - $8 - Cheese, kimchi, bulgogi, sesame crema. (Tacos? maybe Sides)
4. Kimchi Fries - $7 - Crispy fries, kimchi, cheese sauce, scallions, spicy mayo. (Sides)
5. Korean Fried Chicken Bites - $9 - Gochugaru dusted, ranch dip. (Sides)
6. Soju Margarita - $8 - Soju, lime, triple sec, salt rim. (Drinks)
7. Yuzu Ade - $4 - Fresh yuzu, sparkling water, mint. (Drinks)

Each item card:
- SVG icon (small)
- Name
- Price badge
- Description
- "Add" button (just visual, no backend)

Location card:
- Big "TODAY'S SPOT"
- Address
- Hours
- Countdown: "Closes in Xh Xm"
- Button "Get Directions" (mailto/tel placeholder)

About: short story.

Footer: social links (Instagram placeholder), email, phone.

Ensure no horizontal scroll: box-sizing border-box, overflow-x hidden on body, max-width containers.

Let's write it all.

Potential issue: The "Games must start in self-playing demo mode" doesn't apply, but the site should be lively. I can add subtle CSS animations (floating elements, pulsing buttons) so it looks alive on first paint.

Countdown logic:
const end = today 21:00; if now > end, end = tomorrow 21:00. Update every second. Display "Closes in 4h 23m". If closed, "Closed. Tomorrow 11 AM – 9 PM".

Open status:
if now between 11 and 21: "🔥 OPEN NOW" else "🌙 CLOSED".

First paint: hero with text and CSS taco, menu visible? Menu might be below fold but that's okay. "Something meaningful" is hero.

Let's ensure CSS taco looks decent:

.taco-hero {
  position: relative;
  width: 200px;
  height: 160px;
  margin: 0 auto;
}
.shell {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 100px;
  background: #D97706;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  transform: rotate(-10deg);
  box-shadow: inset -5px -5px 0 #B45309;
}
.meat { ... } blabs with border-radius.

Actually drawing a taco purely in CSS might look abstract. Inline SVG might be better. I can create a simple SVG taco inline. Let's do a simple flat SVG taco:

<svg viewBox="0 0 100 100" class="taco-icon">
  <path d="M20,80 Q50,20 80,80 L20,80" fill="#f59e0b" stroke="#92400e" stroke-width="3"/>
  <!-- filling -->
  <circle cx="35" cy="60" r="8" fill="#ef4444" opacity="0.9"/>
  <circle cx="50" cy="55" r="6" fill="#fbbf24"/>
  <circle cx="65" cy="65" r="7" fill="#ef4444"/>
  <circle cx="45" cy="70" r="5" fill="#22c55e"/>
</svg>

That's recognizable enough.

Hero visual can be a large version of this SVG with animation.

I'll also add floating kimchi bubbles (red circles) in background for vibe.

Let's write the code now. Keep it clean.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco | Korean Taco Truck</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0f172a;
    color: #f8fafc;
    line-height: 1.6;
    overflow-x: hidden;
  }
  ...
</style>
</head>
<body>
...
<script>
  // countdown, filters, mobile menu, reveal
</script>
</body>
</html>

I need to be careful with inline SVG and CSS.

Let's go section by section in code.

CSS variables:
:root {
  --red: #ef4444;
  --red-dark: #b91c1c;
  --lime: #a3e635;
  --lime-dark: #65a30d;
  --amber: #f59e0b;
  --charcoal: #111827;
  --card: rgba(30, 41, 59, 0.7);
  --text: #f1f5f9;
  --muted: #94a3b8;
}

Background: maybe radial gradient circles for depth:
body::before { content:""; position:fixed; ... }

Let's write it.

Header:
<header class="site-header">
  <div class="container header-inner">
    <div class="logo">
      <svg class="logo-mark" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 2L6 14L10 14L10 22L22 22L22 14L26 14L16 2Z" fill="var(--red)"/><path d="M10 14L16 2L22 14M10 22L16 30L22 22" stroke="var(--red)" stroke-width="2" stroke-linecap="round"/></svg>
      <div class="logo-text">KIMCHI LOCO</div>
    </div>
    <button class="nav-toggle" aria-label="Open menu">☰</button>
    <nav class="nav-links">
      <a href="#menu">Menu</a>
      <a href="#location">Find Us</a>
      <a href="#about">Story</a>
      <a href="#order">Order</a>
    </nav>
    <a href="#location" class="btn btn-primary">Today's Spot</a>
  </div>
</header>

Hero:
<section class="hero" id="hero">
  <div class="container hero-grid">
    <div class="hero-text">
      <span class="chip" id="statusChip">Checking...</span>
      <h1>Kimchi <span class="highlight">Loco</span></h1>
      <p class="subtitle">Seoul fire, Mexican soul. Kimchi tacos that will ruin all other tacos for you.</p>
      <div class="countdown" id="countdown"></div>
      <div class="hero-actions">
        <a href="#menu" class="btn btn-lg btn-primary">See the Menu</a>
        <a href="#location" class="btn btn-lg btn-outline">Find the Truck</a>
      </div>
    </div>
    <div class="hero-art">
      <div class="floating"></div>
      <svg class="taco-hero" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs><linearGradient id="shellGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f59e0b"/><stop offset="100%" stop-color="#b45309"/></linearGradient></defs>
        <path d="M40,160 Q100,40 160,160 Z" fill="url(#shellGrad)" stroke="#92400e" stroke-width="6"/>
        <circle cx="70" cy="120" r="18" fill="#ef4444" opacity="0.95"/>
        <circle cx="100" cy="110" r="14" fill="#fbbf24" opacity="0.95"/>
        <circle cx="130" cy="130" r="16" fill="#ef4444" opacity="0.9"/>
        <circle cx="90" cy="140" r="12" fill="#22c55e" opacity="0.9"/>
        <circle cx="110" cy="150" r="10" fill="#facc15" opacity="0.9"/>
        <circle cx="75" cy="150" r="9" fill="#22c55e" opacity="0.8"/>
      </svg>
      <p class="art-caption">Our signature kimchi bulgogi taco</p>
    </div>
  </div>
</section>

Menu section...

Menu grid items static. Let's write them with data-category.

Countdown JS:

function updateStatus() {
  const now = new Date();
  const h = now.getHours();
  const chip = document.getElementById('statusChip');
  const countdown = document.getElementById('countdown');
  const open = h >= 11 && h < 21;
  if (open) {
    chip.textContent = '🔥 OPEN NOW';
    chip.className = 'chip chip-open';
    const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 21, 0, 0);
    const diff = end - now;
    const hrs = Math.floor(diff / 3600000);
    const mins = Math.floor((diff % 3600000) / 60000);
    countdown.textContent = `Closes in ${hrs}h ${mins}m — 123 Main Street`;
    countdown.style.display = 'block';
  } else {
    chip.textContent = '🌙 CLOSED — See you tomorrow';
    chip.className = 'chip chip-closed';
    countdown.style.display = 'none';
  }
}
setInterval(updateStatus, 1000);
updateStatus();

Menu filter JS:
const filters = document.querySelectorAll('.filter');
filters.forEach(btn => {
  btn.addEventListener('click', () => {
    filters.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const cat = btn.dataset.cat;
    document.querySelectorAll('.menu-item').forEach(item => {
      if (cat === 'all' || item.dataset.cat === cat) {
        item.style.display = 'block';
        item.style.animation = 'none';
        item.offsetHeight; // trigger reflow
        item.style.animation = 'fadeIn 0.4s ease';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

Mobile nav toggle.

Reveal animation on scroll using Intersection Observer for .reveal items.

Make sure no external requests.

Check viewport: use max-width: 1200px container, padding: 0 1rem. Grid columns: 1fr on mobile, 2fr 1fr or repeat(3, 1fr) on desktop.

No horizontal scroll: body { overflow-x: hidden; } and ensure images/SVG don't overflow.

Let's write the full HTML now.

I'll include an "Order" section that's just a placeholder form? Better not to imply real ordering if it's a demo. Maybe "Order via DM" link to instagram. Keep it simple: "Place your order at the window — we don't take online orders yet. Follow us for drops."

Footer with contact.

I need to ensure "meaningful visible on first paint": hero is top, yes.

No alert, etc.

Let's compose final code. I'll keep it moderately long but complete.

One concern: CSS taco/food art. The SVG is fine.

Let's make hero-art have multiple stacked SVGs or just one nice one. Add some CSS animated steam lines above taco.

Steam:
<div class="steam"></div>
.steam { position: absolute; top: -20px; left: 50%; width: 4px; height: 40px; background: rgba(255,255,255,0.4); border-radius: 2px; animation: steamRise 2s ease-in-out infinite; }

@keyframes steamRise { 0% { transform: translateY(0) scale(1); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: translateY(-40px) scale(1.5); opacity: 0; } }

Add two steam elements with delays.

Also background pattern: repeating-linear-gradient or subtle dots.

body {
  background: #0b1120;
  background-image: radial-gradient(circle at 50% 50%, rgba(239,68,68,0.08) 0%, transparent 40%), linear-gradient(to bottom, #0b1120, #020617);
}

Okay, let's write it all out. I'll be thorough but not overly verbose.

Font sizes: h1 3rem on desktop, 2rem mobile.

Section titles: uppercase, tracking wider, red accent underline.

Cards:
.menu-item {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.menu-item svg { flex-shrink: 0; width: 48px; height: 48px; color: var(--red); }

.menu-item h3 { color: #fff; margin-bottom: 0.25rem; }
.price { font-weight: 700; color: var(--lime); margin-left: auto; }
.desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.75rem; }

Button styles:
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 0 var(--red-dark); }
.btn-primary:hover { background: #fb7185; transform: translateY(-1px); box-shadow: 0 6px 0 var(--red-dark); }
.btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3); }
.btn-outline:hover { background: rgba(255,255,255,0.1); }

Location section:
.location { background: linear-gradient(135deg, var(--charcoal) 0%, #0f172a 100%); }
.status-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .status-card { grid-template-columns: 2fr 1fr; } }
.open-indicator { font-size: 1.25rem; font-weight: 800; }
.open-indicator.open { color: var(--lime); }
.open-indicator.closed { color: var(--red); }

Map placeholder:
.map-placeholder {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-weight: 600;
  border: 2px dashed rgba(255,255,255,0.1);
}

About section: two columns on desktop.

Footer: simple.

JavaScript for scroll reveal:
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

Add class reveal to menu items, section titles, etc.

Let's finalize code. I will write it in the response as one fenced html block.

Double-check: no external fonts. Use system-ui. No network requests.

Let's write.