Food truck websiteOne-line

GPT-5 Nano

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 33.2 s
Cost: $0.0020
Output tokens: 4,980
Spent thinking: 320 tokens
Speed: 168.8 tok/s
Console errors: 0

First token after: 3.7 s
First visible text after: 4.9 s
Prompt tokens: 360
Code size: 15.3 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"low"}
Max output: 128,000 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 363 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Kimchi Loco – Korean Taco Truck</title>
  <style>
    :root{
      --bg: #0d0f14;
      --card: #141a22;
      --accent: #ff4d2f;
      --accent2: #ffd300;
      --text: #f5f7fb;
      --muted: #cbd5e1;
      --chip: rgba(255,255,255,.08);
      --green: #2bd2a0;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--text);
      background: radial-gradient(1200px circle at 10% -10%, rgba(255, 120, 60, .15), transparent 40%),
                  radial-gradient(900px circle at 100% 0%, rgba(0, 200, 170, .10), transparent 40%),
                  linear-gradient(#0b0f14, #0b0f14 60%, #0b1117);
      overflow-x:hidden;
    }
    header.hero{
      position:relative;
      min-height:60vh;
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items:center;
      padding: 48px 48px;
      gap: 28px;
    }
    .brand{
      display:flex; align-items:center; gap:14px;
    }
    .logo{
      width:72px; height:72px; display:grid; place-items:center;
      border-radius:14px;
      background: conic-gradient(from 180deg at 50% 50%, #ff7a50, #ffd24a, #6effa0, #ff7a50);
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }
    .logo svg{width:40px;height:40px}
    h1{margin:0;font-size: clamp(28px, 5vw, 58px); letter-spacing:.5px}
    .tagline{ color:var(--muted); font-size: clamp(14px, 2vw, 18px); margin-top:6px}
    .cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .btn{
      border:none; padding:14px 20px; border-radius:999px;
      font-weight:700; cursor:pointer;
      background: linear-gradient(135deg, #ff5b3a, #ff955b);
      color:white; box-shadow: 0 6px 18px rgba(255,90,50,.4);
    }
    .btn.secondary{
      background: var(--chip);
      color:#f6f6f6; border:1px solid rgba(255,255,255,.15);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    .hero-art{
      position:relative; min-height:340px;
      display:grid; place-items:center;
      overflow:hidden;
    }
    .taco-blob{
      width:100%; height:100%;
      display:grid; place-items:center;
      filter: drop-shadow(0 15px 25px rgba(0,0,0,.25));
    }
    /* floating garnishes for life */
    .orb{
      position:absolute; width:12px; height:12px; border-radius:50%;
      background: radial-gradient(circle at 30% 30%, #fff, #ddd);
      animation: float 6s ease-in-out infinite;
      opacity:.8;
    }
    @keyframes float {
      0%{ transform: translateY(0) translateX(0); opacity:.8}
      50%{ transform: translateY(-14px) translateX(8px); opacity:.6}
      100%{ transform: translateY(0) translateX(0); opacity:.8}
    }

    main{ padding: 28px 48px 60px; max-width:1100px; margin:0 auto; }
    section{ margin: 48px 0; }
    h2{font-size: clamp(22px, 4vw, 32px); margin:0 0 8px}
    p.lead{ color:var(--muted); margin:0 0 12px; font-size: clamp(14px, 2vw, 16px) }

    .grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
    .card{ background: rgba(20,26,34,.75); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; }
    .item-name{ font-weight:700; font-size:16px; display:flex; justify-content:space-between; align-items:center }
    .price{ color:var(--muted); font-weight:700 }
    .badge{ padding:4px 8px; border-radius:999px; font-size:12px; background: rgba(255,255,255,.08); }
    .tag-spicy{ background: rgba(255,80,80,.25); color:#ffd1d1; }

    .map{ height:240px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
      background: linear-gradient(#0b2b3a, #112234);
      display:grid; place-items:center; position:relative; overflow:hidden;
    }
    .map .pin{ width:26px; height:26px; border-radius:50%; background: #ff4d2f; position:absolute; transform: translate(-50%, -50%); animation: ping 1.5s infinite; }
    @keyframes ping { 0% { transform: scale(0.6); opacity:.8 } 70% { transform: scale(1); opacity:.4 } 100% { transform: scale(0.6); opacity:0.0 } }

    footer{ text-align:center; color:var(--muted); padding:40px 0 60px; }

    /* overlay start prompt */
    .start-overlay{
      position: fixed; inset:0; background: rgba(0,0,0,.6);
      display:grid; place-items:center; z-index: 9999;
      padding: 20px;
    }
    .start-card{
      background: rgba(18,23,30,.95);
      border:1px solid rgba(255,255,255,.15);
      border-radius:16px; padding:22px; max-width:520px;
      text-align:center;
      box-shadow: 0 20px 40px rgba(0,0,0,.4);
    }
    .start-card h3{ margin:0 0 8px; font-size:22px }
    .start-card p{ margin:0 0 14px; color:var(--muted) }
    .start-btn{ padding:12px 18px; border-radius:999px; border:none; background: #28d; color:white; font-weight:700; cursor:pointer; }
    .start-hint{ font-size:12px; color:var(--muted); margin-top:6px; }

    @media (max-width: 900px){
      header.hero{ grid-template-columns: 1fr; padding: 32px 20px; }
      .hero-art{ order:-1; height: 260px; }
    }

    @media (prefers-reduced-motion: reduce){
      .orb{ animation: none; }
      .start-overlay{ display:block; }
    }
  </style>
</head>
<body>
  <header class="hero" aria-label="Kimchi Loco hero">
    <div class="content">
      <div class="brand" aria-label="Brand">
        <div class="logo" aria-label="Kimchi Loco logo">
          <!-- inline taco SVG with kimchi accent -->
          <svg viewBox="0 0 64 64" role="img" aria-label="Taco icon" width="40" height="40">
            <defs>
              <linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0" stop-color="#ffd24a"/>
                <stop offset="1" stop-color="#ff6b3d"/>
              </linearGradient>
            </defs>
            <path d="M6 26c2-10 18-16 28-14s22 8 18 20-28 18-42 6z" fill="url(#g1)"/>
            <path d="M8 28c6 12 26 14 38 6-4 4-11 4-16 4-14 0-22-6-22-10z" fill="#fff0" stroke="#fff" stroke-width="2" opacity=".25"/>
            <path d="M6 34s18 8 28 0" stroke="#e85d2c" stroke-width="3" fill="none" stroke-linecap="round"/>
          </svg>
        </div>
        <div>
          <div style="font-weight:900; font-size:20px; letter-spacing:.5px;">Kimchi Loco</div>
          <div class="tagline">Korean tacos that kick with flavor and soul</div>
        </div>
      </div>

      <h1>Spice up your day with Korean taco magic</h1>
      <p class="tagline" style="font-size:16px; margin-top:8px;">
        Fresh kimchi, sizzled proteins, and bold sauces wrapped in warm tortillas.
        Street-food energy. Night-market vibes. Unforgettable flavors on wheels.
      </p>

      <div class="cta" aria-label="Call to action">
        <button class="btn" id="ctaFind" aria-label="Find Kimchi Loco truck">Find the Truck</button>
        <button class="btn secondary" id="ctaMenu" aria-label="View Menu">View Menu</button>
      </div>
    </div>

    <div class="hero-art" aria-label="Decorative taco art">
      <div class="taco-blob" style="position:relative;width:100%;max-width:520px;">
        <!-- simple animated taco SVG -->
        <svg viewBox="0 0 480 320" width="100%" height="100%" role="img" aria-label="Animated taco">
          <defs>
            <linearGradient id="shell" x1="0" x2="1" y1="0" y2="0">
              <stop offset="0" stop-color="#f2a35a"/>
              <stop offset="1" stop-color="#d9893a"/>
            </linearGradient>
          </defs>
          <ellipse cx="240" cy="120" rx="160" ry="60" fill="url(#shell)" opacity=".95"/>
          <ellipse cx="240" cy="140" rx="150" ry="40" fill="#d97f2b" opacity=".9"/>
          <!-- fillings -->
          <circle cx="210" cy="100" r="8" fill="#f66"/>
          <circle cx="250" cy="110" r="6" fill="#f66"/>
          <circle cx="270" cy="100" r="5" fill="#ffd"/>
          <rect x="140" y="140" width="200" height="90" rx="10" fill="#b52e2e" opacity=".25"/>
          <!-- steam -->
          <path d="M180 60 q20 -20 40 0" stroke="#fff" stroke-width="4" fill="none" opacity=".6"/>
          <path d="M210 52 q14 -14 28 0" stroke="#fff" stroke-width="3" fill="none" opacity=".6"/>
        </svg>
      </div>

      <div class="orb" style="left:12%; top:20%; background:#ff6b6b; animation-delay:.2s"></div>
      <div class="orb" style="right:14%; top:28%; background:#ffd86b; animation-delay:.6s"></div>
      <div class="orb" style="left:50%; bottom:14%; background:#6ef2c7; width:10px; height:10px; animation-delay:1s"></div>
    </div>
  </header>

  <main>
    <section aria-labelledby="menu-title">
      <h2 id="menu-title">Menu that makes mouths water</h2>
      <p class="lead">Korean-inspired tacos, burrito-sized flavor with a crunchy bite. All-day cravings, all-day fun.</p>

      <div class="grid" role="list">
        <article class="card" role="listitem" aria-label="Kimchi taco">
          <div class="item-name">
            <span>Kimchi Crunch Taco</span>
            <span class="badge">Hot</span>
          </div>
          <div style="font-size:14px; color:var(--muted); margin-top:6px;">
            seared pork, kimchi slaw, gochujang aioli, sesame crunch
          </div>
          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
            <span class="price">$8.50</span>
            <span class="badge">Popular</span>
          </div>
        </article>

        <article class="card" role="listitem" aria-label="Spicy chicken taco">
          <div class="item-name">
            <span>Spicy Chicken Taco</span>
            <span class="badge tag-spicy" style="margin-left:6px;">Spicy</span>
          </div>
          <div style="font-size:14px; color:var(--muted); margin-top:6px;">
            flame-kissed chicken, kimchi pico, sriracha crema
          </div>
          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
            <span class="price">$8.00</span>
            <span class="badge">Fan Favorite</span>
          </div>
        </article>

        <article class="card" role="listitem" aria-label="Beef bulgogi taco">
          <div class="item-name">
            <span>Bulgogi Beef Taco</span>
            <span class="badge">Savory</span>
          </div>
          <div style="font-size:14px; color:var(--muted); margin-top:6px;">
            marinated beef, pickled veggies, garlic sesame glaze
          </div>
          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
            <span class="price">$9.25</span>
            <span class="badge">Limited</span>
          </div>
        </article>

        <article class="card" role="listitem" aria-label="Kimchi fries">
          <div class="item-name">
            <span>Kimchi Fries</span>
            <span class="badge">Shareable</span>
          </div>
          <div style="font-size:14px; color:var(--muted); margin-top:6px;">
            crispy fries, kimchi, melted cheese, gochujang drizzle
          </div>
          <div style="display:flex; justify-content:space-between; align-items:center; margin-top:8px;">
            <span class="price">$6.75</span>
            <span class="badge">New</span>
          </div>
        </article>
      </div>
    </section>

    <section aria-labelledby="truck-locator-title">
      <h2 id="truck-locator-title">Find Kimchi Loco near you</h2>
      <p class="lead">We roll through popular streets and night markets. Check the map and plan your tasty stop.</p>

      <div class="map" aria-label="Truck location map">
        <div class="pin" style="top:40%; left:52%;"></div>
        <div style="position:absolute; bottom:10px; right:10px; font-size:12px; color:#cbd5e1;">
          Live truck vibes in your city
        </div>
      </div>
      <div style="display:flex; justify-content: center; margin-top:12px;">
        <button class="btn" id="ctaLocate" aria-label="Locate next stop">Locate Next Stop</button>
      </div>
    </section>
  </main>

  <footer aria-label="Site footer">
    <div>Open daily 11am–9pm • Follow us @KimchiLoco</div>
    <div style="margin-top:6px; font-size:12px; color:var(--muted)">© 2026 Kimchi Loco. All rights reserved.</div>
  </footer>

  <!-- Start overlay to satisfy "Click or press a key to start" requirement -->
  <div class="start-overlay" id="startOverlay" aria-label="Start prompt" role="dialog">
    <div class="start-card">
      <h3>Korean flavors on wheels</h3>
      <p>Click anywhere or press a key to start exploring the menu and map. The truck will guide you to your next delicious stop.</p>
      <button class="start-btn" id="startBtn" aria-label="Start demo">Start</button>
      <div class="start-hint">Tip: After you start, you can use Tab to navigate and Enter to select.</div>
    </div>
  </div>

  <script>
    // Simple in-page navigation helpers
    const ctaFind = document.getElementById('ctaFind');
    const ctaMenu = document.getElementById('ctaMenu');
    const ctaLocate = document.getElementById('ctaLocate');
    const startOverlay = document.getElementById('startOverlay');
    const startBtn = document.getElementById('startBtn');

    function smoothScrollTo(selector){
      const el = document.querySelector(selector);
      if(!el) return;
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 20, behavior: 'smooth' });
    }

    ctaFind.addEventListener('click', ()=> smoothScrollTo('section[aria-labelledby="truck-locator-title"]'));
    ctaMenu.addEventListener('click', ()=> smoothScrollTo('section[aria-labelledby="menu-title"]'));
    ctaLocate.addEventListener('click', ()=> {
      // playful micro-interaction: flash the pin
      const pin = document.querySelector('.pin');
      if(pin){
        pin.style.transition = 'transform .3s ease';
        pin.style.transform = 'translate(-50%, -50%) scale(1.4)';
        setTimeout(()=> pin.style.transform = 'translate(-50%, -50%) scale(1)', 350);
      }
      smoothScrollTo('section[aria-labelledby="truck-locator-title"]');
    });

    // Start overlay behavior: hide on first interaction
    function endStartOverlay(){
      if(startOverlay){
        startOverlay.style.display = 'none';
        // focus for keyboard navigation
        document.body.focus();
      }
      window.removeEventListener('keydown', onFirstKey);
      window.removeEventListener('mousedown', onFirstClick);
    }
    function onFirstKey(e){ endStartOverlay(); }
    function onFirstClick(){ endStartOverlay(); }

    // Attach listeners to begin on any user action
    startBtn.addEventListener('click', endStartOverlay);
    window.addEventListener('keydown', onFirstKey, { once: true });
    window.addEventListener('mousedown', onFirstClick, { once: true });

    // Accessibility: allow Enter to start when the overlay is focused
    startBtn.addEventListener('keydown', (e)=> {
      if(e.key === 'Enter' || e.key === ' '){
        e.preventDefault();
        endStartOverlay();
      }
    });

    // Initial animation pacing: small entrance fade for hero text (no external libs)
    window.addEventListener('load', ()=> {
      document.querySelectorAll('.brand, h1, .tagline, .cta').forEach((el, idx)=>{
        el.style.opacity = '0';
        el.style.transform = 'translateY(6px)';
        setTimeout(()=> {
          el.style.transition = 'opacity 600ms ease, transform 600ms ease';
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
        }, 150 + idx*120);
      });
    });
  </script>
</body>
</html>

Reasoning trace (320 tokens)

**Planning a one-page site**

I'm thinking about using inline SVG icons or emojis for the visuals while implementing CSS and JS without relying on images. The site will feature a vibrant gradient background and an animated taco icon. I envision sections like a Hero area with a big title “Kimchi Loco,” a tagline, and CTAs like "Find us" and "View menu." There will be a menu grid, a map placeholder with an animated pin, and a footer with business hours. I’ll include responsive design and an interactive overlay that instructs users to click or press a key to start. Let’s get coding!