Food truck websiteOne-line

GPT-6 Luna

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 26.7 s
Cost: $0.0018
Output tokens: 3,574
Spent thinking: 0 tokens
Speed: 142.3 tok/s
Console errors: 0

First token after: 1.6 s
First visible text after: 1.6 s
Prompt tokens: 360
Code size: 10.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"none"}
Max output: 64,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 · 384 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 Tacos, Full Send</title>
<style>
  :root {
    --cream: #fff5dd;
    --ink: #182019;
    --red: #ee4937;
    --yellow: #f7c544;
    --green: #366d45;
    --muted: #786c5d;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Arial", "Helvetica Neue", sans-serif;
  }
  .page { overflow: hidden; }
  .ticker {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--red);
    color: #fff8e8;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  header {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7.1%;
    border-bottom: 1px solid rgba(24,32,25,.12);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 21px;
    font-weight: 1000;
    letter-spacing: -1.2px;
  }
  .brand-mark {
    width: 35px; height: 35px;
    display: grid; place-items: center;
    background: var(--yellow);
    border-radius: 50%;
    font-size: 20px;
    transform: rotate(-12deg);
  }
  nav { display: flex; align-items: center; gap: 35px; }
  nav a {
    text-decoration: none;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
  }
  nav a:hover { color: var(--red); }
  .nav-cta {
    padding: 13px 19px;
    border-radius: 3px;
    background: var(--ink);
    color: #fff8e8;
  }
  .hero {
    min-height: 590px;
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: stretch;
    padding: 0 7.1%;
    position: relative;
  }
  .hero-copy {
    align-self: center;
    padding: 47px 18px 65px 0;
    position: relative;
    z-index: 2;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    width: 24px; height: 2px;
    background: var(--red);
  }
  h1 {
    margin: 19px 0 17px;
    max-width: 590px;
    font-size: clamp(56px, 6.2vw, 83px);
    line-height: .91;
    letter-spacing: -6px;
    font-weight: 1000;
    text-transform: uppercase;
  }
  h1 span { color: var(--red); }
  .hero-copy > p {
    max-width: 430px;
    margin: 0;
    color: #655d50;
    font-size: 16px;
    line-height: 1.7;
  }
  .hero-actions {
    display: flex;
    align-items: center;
    gap: 21px;
    margin-top: 27px;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 50px;
    padding: 0 22px;
    background: var(--red);
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform .15s, box-shadow .15s;
  }
  .button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
  .text-link {
    color: var(--ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
  }
  .tiny-note {
    margin-top: 31px;
    color: #7b7163;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
  }
  .tiny-note b { color: var(--green); }
  .hero-art {
    min-height: 525px;
    align-self: center;
    display: grid;
    place-items: center;
    position: relative;
    margin: 5px -18px 0 0;
  }
  .sun {
    position: absolute;
    width: min(37vw, 430px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    right: 3%;
    top: 50%;
    transform: translateY(-51%);
  }
  .sun::after {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px dashed rgba(24,32,25,.22);
    border-radius: 50%;
  }
  .food-photo {
    width: min(100%, 560px);
    height: 420px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    border-radius: 46% 54% 49% 51% / 51% 42% 58% 49%;
    filter: saturate(1.06);
    transform: rotate(3deg);
    box-shadow: 0 19px 45px rgba(43,28,10,.2);
  }
  .stamp {
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 49px;
    width: 124px; height: 124px;
    display: grid; place-items: center;
    border: 2px solid var(--cream);
    outline: 2px solid var(--red);
    border-radius: 50%;
    background: var(--red);
    color: white;
    text-align: center;
    font-size: 12px;
    font-weight: 1000;
    line-height: 1.35;
    letter-spacing: 1px;
    transform: rotate(11deg);
  }
  .stamp span { display: block; font-size: 25px; }
  .floating-tag {
    position: absolute;
    z-index: 2;
    left: -4px;
    top: 90px;
    padding: 11px 14px;
    background: var(--cream);
    border: 1px solid var(--ink);
    font-size: 11px;
    font-weight: 900;
    transform: rotate(-7deg);
  }
  .menu-strip {
    background: var(--green);
    color: #fff8e8;
    padding: 20px 7.1% 25px;
  }
  .strip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .strip-top h2 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .strip-top a {
    color: var(--yellow);
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: .8px;
  }
  .specials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .special {
    min-height: 89px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 17px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
  }
  .food-emoji {
    width: 49px; height: 49px; flex: 0 0 49px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    font-size: 26px;
  }
  .special h3 { margin: 0 0 5px; font-size: 14px; letter-spacing: -.2px; }
  .special p { margin: 0; color: rgba(255,248,232,.75); font-size: 11px; }
  .price { margin-left: auto; color: var(--yellow); font-size: 14px; font-weight: 900; }
  .bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 7.1%;
    background: #f8e9c8;
  }
  .bottom-row strong { font-size: 12px; letter-spacing: .4px; }
  .bottom-row span { color: var(--muted); font-size: 12px; }
  .bottom-row a { color: var(--red); text-decoration: none; font-size: 12px; font-weight: 900; }
  @media (max-width: 760px) {
    header { height: 67px; padding: 0 5%; }
    nav { gap: 13px; }
    nav a:not(.nav-cta) { display: none; }
    .nav-cta { padding: 11px 13px; font-size: 10px; }
    .hero { grid-template-columns: 1fr; padding: 0 6%; }
    .hero-copy { padding: 44px 0 0; }
    h1 { font-size: clamp(59px, 13vw, 82px); letter-spacing: -4px; }
    .hero-copy > p { font-size: 14px; }
    .hero-art { min-height: 355px; margin: -5px -10px 15px; }
    .food-photo { height: 320px; width: min(95%, 440px); }
    .sun { width: min(76vw, 360px); right: 8%; }
    .stamp { width: 94px; height: 94px; right: 2%; bottom: 27px; font-size: 9px; }
    .stamp span { font-size: 20px; }
    .floating-tag { top: 36px; left: 0; font-size: 9px; }
    .menu-strip { padding: 20px 6%; }
    .specials { grid-template-columns: 1fr; gap: 9px; }
    .special { min-height: 75px; }
    .bottom-row { padding: 17px 6%; gap: 10px; flex-wrap: wrap; }
  }
  @media (max-width: 410px) {
    .ticker { font-size: 9px; letter-spacing: 1px; }
    .brand { font-size: 18px; }
    .hero-actions { gap: 15px; }
    .button { padding: 0 15px; font-size: 10px; }
    .text-link { font-size: 10px; }
    .tiny-note { font-size: 10px; }
    .bottom-row span { width: 100%; order: 3; }
  }
</style>
</head>
<body>
<div class="page">
  <div class="ticker">Seoul meets the street · Find us rolling through your neighborhood</div>
  <header>
    <a class="brand" href="#home"><span class="brand-mark">✦</span> KIMCHI LOCO</a>
    <nav aria-label="Main navigation">
      <a href="#menu">THE MENU</a>
      <a href="#story">OUR VIBE</a>
      <a href="#visit" class="nav-cta">FIND THE TRUCK ↗</a>
    </nav>
  </header>
  <main>
    <section class="hero" id="home">
      <div class="hero-copy">
        <div class="eyebrow">Korean soul. Taco heart.</div>
        <h1>Big Seoul.<br><span>Little Taco.</span><br>Huge Flavor.</h1>
        <p>Meet your new favorite street food obsession. Korean BBQ, crunchy kimchi, and all the good stuff—tucked into a warm tortilla and ready to change your lunch plans.</p>
        <div class="hero-actions">
          <a class="button" href="#menu">Meet the menu <span>↗</span></a>
          <a class="text-link" href="#visit">Catch us today</a>
        </div>
        <div class="tiny-note">🔥 <b>Made fresh. Served loud.</b> Always worth the napkins.</div>
      </div>
      <div class="hero-art" id="story">
        <div class="sun"></div>
        <div class="floating-tag">100% GOOD VIBES<br>0% BORING BITES</div>
        <img class="food-photo" src="https://images.unsplash.com/photo-1551503141-5e8c0f5d5a1a?auto=format&fit=crop&w=1100&q=85" alt="Colorful street tacos topped with fresh ingredients">
        <div class="stamp">SEOUL<br>GOOD<br><span>✦</span>TACOS</div>
      </div>
    </section>
    <section class="menu-strip" id="menu">
      <div class="strip-top">
        <h2>Three reasons to track us down</h2>
        <a href="#visit">YOUR NEW REGULAR ORDER →</a>
      </div>
      <div class="specials">
        <article class="special">
          <div class="food-emoji">🌮</div>
          <div><h3>Seoul Survivor</h3><p>Gochujang beef · kimchi · sesame slaw</p></div>
          <div class="price">$5</div>
        </article>
        <article class="special">
          <div class="food-emoji">🔥</div>
          <div><h3>Crunch Time</h3><p>Sweet chili chicken · pickled crunch</p></div>
          <div class="price">$5</div>
        </article>
        <article class="special">
          <div class="food-emoji">🌱</div>
          <div><h3>Plant Gang</h3><p>Crispy tofu · spicy mayo · all the wow</p></div>
          <div class="price">$5</div>
        </article>
      </div>
    </section>
    <section class="bottom-row" id="visit">
      <strong>📍 PARKED NEAR YOU (PROBABLY)</strong>
      <span>Follow the smell. Find the truck. Eat very, very well.</span>
      <a href="https://www.instagram.com/" target="_blank" rel="noreferrer">FOLLOW THE FLAVOR ↗</a>
    </section>
  </main>
</div>
</body>
</html>