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: 45.0 s
Cost: $0.0025
Output tokens: 4,846
Spent thinking: 116 tokens
Speed: 122.7 tok/s
Console errors: 0

First token after: 5.5 s
First visible text after: 6.2 s
Prompt tokens: 360
Code size: 13.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"low"}
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 · 263 lines

Download

<!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, Big Flavor</title>
<style>
  :root {
    --ink: #182b28;
    --cream: #fff8e9;
    --orange: #ff6139;
    --yellow: #ffc94a;
    --green: #b6d85d;
    --pink: #f5a1a0;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Trebuchet MS", Arial, sans-serif;
  }
  a { color: inherit; text-decoration: none; }
  .topline {
    background: var(--ink);
    color: #fff8e9;
    text-align: center;
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .topline span { color: var(--yellow); }
  header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1160px;
    margin: auto;
    padding: 0 28px;
  }
  .brand { display:flex; gap:11px; align-items:center; font-weight:1000; letter-spacing:-1.5px; font-size:23px; }
  .brand-mark {
    width: 39px; height: 39px; border-radius: 50%;
    background: var(--orange); color: white; display:grid; place-items:center;
    font-size: 24px; transform: rotate(-12deg);
  }
  .brand em { font-style:normal; color:var(--orange); }
  nav { display:flex; gap:34px; align-items:center; font-size:13px; font-weight:800; }
  nav a:not(.nav-cta) { transition:color .2s; }
  nav a:not(.nav-cta):hover { color:var(--orange); }
  .nav-cta, .button {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    border-radius: 999px; background:var(--orange); color:white;
    padding:13px 20px; font-size:12px; font-weight:900; letter-spacing:.4px;
    box-shadow: 0 5px 0 #d74728; transition:transform .15s,box-shadow .15s;
  }
  .nav-cta:hover,.button:hover { transform:translateY(-2px); box-shadow:0 7px 0 #d74728; }
  .hero {
    position:relative; overflow:hidden; min-height:555px;
    background:var(--yellow);
  }
  .hero-inner {
    max-width:1160px; margin:auto; min-height:555px; padding:45px 28px 42px;
    display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:20px;
  }
  .hero-copy { position:relative; z-index:2; padding-bottom:12px; }
  .eyebrow {
    display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--ink);
    border-radius:20px; padding:7px 12px; font-size:10px; font-weight:900;
    letter-spacing:1.4px; text-transform:uppercase; background:rgba(255,255,255,.23);
  }
  .eyebrow i { width:7px;height:7px;border-radius:50%;background:var(--orange); }
  h1 {
    font-size:clamp(56px,6.2vw,82px); line-height:.91; letter-spacing:-6px;
    margin:22px 0 16px; font-weight:1000; text-transform:uppercase;
  }
  h1 .hot { color:var(--orange); }
  .hero-copy p { max-width:420px; font-size:16px; line-height:1.6; margin:0 0 25px; font-weight:600; }
  .actions { display:flex; align-items:center; gap:19px; }
  .button { padding:16px 23px; }
  .text-link { font-size:12px; font-weight:900; border-bottom:2px solid var(--ink); padding:4px 0; }
  .food-scene { height:455px; position:relative; display:grid; place-items:center; }
  .sunburst {
    position:absolute; width:400px;height:400px;border-radius:50%;
    background:var(--pink); right:30px; top:25px;
    box-shadow:0 0 0 16px rgba(255,248,233,.32), 0 0 0 30px rgba(24,43,40,.08);
  }
  .sunburst:before,.sunburst:after {
    content:"";position:absolute; inset:-34px; border:2px dashed rgba(24,43,40,.24);border-radius:50%;
  }
  .taco {
    position:relative; width:min(440px,100%); height:370px; z-index:1;
    filter:drop-shadow(0 18px 10px rgba(40,35,19,.16));
    transform:rotate(-5deg);
  }
  .sticker {
    position:absolute; z-index:3; right:2px; top:30px; width:106px;height:106px;
    background:var(--ink); color:white; border-radius:50%; display:grid;place-items:center;
    text-align:center; font-size:12px; line-height:1.2; font-weight:1000;
    transform:rotate(12deg); border:4px solid var(--cream);
  }
  .sticker b { color:var(--yellow); font-size:19px; display:block; }
  .spark { position:absolute; color:var(--orange); font-size:38px; font-weight:bold; }
  .spark.one { left:22px; top:67px; transform:rotate(10deg); }
  .spark.two { right:29px; bottom:48px; font-size:27px; }
  .hero-note {
    position:absolute; left:10px; bottom:18px; background:var(--cream); padding:11px 14px;
    border-radius:8px; font-weight:900; font-size:11px; transform:rotate(-5deg);
    box-shadow:3px 4px 0 rgba(24,43,40,.14);
  }
  .ticker { overflow:hidden; background:var(--orange); color:white; white-space:nowrap; }
  .ticker-line { padding:13px 0; font-size:12px; font-weight:1000; letter-spacing:2px; text-transform:uppercase; text-align:center; }
  .ticker span { color:var(--yellow); margin:0 17px; }
  .below { max-width:1160px; margin:auto; padding:33px 28px 50px; }
  .section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
  .section-head small { color:var(--orange); font-size:10px; font-weight:1000; letter-spacing:2px; text-transform:uppercase; }
  .section-head h2 { margin:5px 0 0; font-size:31px; letter-spacing:-1.5px; }
  .menu-link { font-size:12px; font-weight:900; border-bottom:2px solid var(--ink); padding-bottom:5px; }
  .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .card {
    border:1.5px solid rgba(24,43,40,.16); border-radius:14px; padding:15px 17px;
    display:flex; align-items:center; gap:14px; background:#fffdf7; min-height:95px;
    transition:transform .2s,box-shadow .2s;
  }
  .card:hover { transform:translateY(-4px); box-shadow:0 7px 0 rgba(24,43,40,.08); }
  .dish-icon { width:57px;height:57px;border-radius:12px;background:#ffe3bb;display:grid;place-items:center;font-size:30px;flex:none; }
  .card:nth-child(2) .dish-icon { background:#f7d6d1; }
  .card:nth-child(3) .dish-icon { background:#e4edc5; }
  .card h3 { margin:0 0 4px;font-size:14px;letter-spacing:-.3px; }
  .card p { margin:0;color:#65706a;font-size:11px;line-height:1.4; }
  .price { margin-left:auto;align-self:flex-start;font-weight:1000;color:var(--orange);font-size:14px; }
  .location {
    background:var(--ink); color:var(--cream); padding:18px 24px;
    display:flex; justify-content:space-between; align-items:center; border-radius:13px; margin-top:20px;
  }
  .location strong { font-size:13px; }
  .location span { font-size:11px; color:#d0d6c8; }
  .location .button { padding:11px 16px;font-size:10px;box-shadow:none; }
  @media (max-width:700px) {
    .topline { font-size:9px; letter-spacing:1px; }
    header { height:67px; padding:0 18px; }
    .brand { font-size:20px; }
    nav { gap:0; }
    nav a:not(.nav-cta) { display:none; }
    .nav-cta { padding:11px 14px; font-size:10px; }
    .hero-inner { grid-template-columns:1fr; padding:34px 23px 24px; gap:0; }
    .hero { min-height:0; }
    .hero-copy { padding-bottom:0; }
    h1 { font-size:62px; letter-spacing:-4px; margin:17px 0 12px; }
    .hero-copy p { font-size:14px; max-width:360px; }
    .food-scene { height:320px; margin-top:8px; }
    .sunburst { width:270px;height:270px;right:calc(50% - 135px);top:20px; }
    .taco { height:300px; width:350px; max-width:100%; }
    .sticker { right:2%; top:9px;width:82px;height:82px;font-size:10px; }
    .sticker b { font-size:15px; }
    .hero-note { left:0;bottom:3px; }
    .spark.one { left:2px;top:28px; }
    .spark.two { right:1px;bottom:24px; }
    .ticker-line { font-size:10px; padding:11px 0; }
    .below { padding:28px 18px 32px; }
    .section-head h2 { font-size:26px; }
    .cards { grid-template-columns:1fr; gap:9px; }
    .card { min-height:78px; }
    .location { align-items:flex-start; gap:12px; flex-wrap:wrap; }
    .location .button { margin-left:auto; }
  }
  @media (max-width:390px) {
    h1 { font-size:55px; }
    .actions { gap:14px; }
    .button { padding:14px 16px; }
    .text-link { font-size:11px; }
  }
</style>
</head>
<body>
  <div class="topline">Seoul soul, street food swagger <span>✦</span> Find us rolling through the city today</div>
  <header>
    <a class="brand" href="#home" aria-label="Kimchi Loco home"><span class="brand-mark">K!</span><span>KIMCHI <em>LOCO</em></span></a>
    <nav>
      <a href="#menu">The menu</a>
      <a href="#story">Our kinda loco</a>
      <a href="#find-us">Find the truck</a>
      <a class="nav-cta" href="#find-us">COME GET IT <span>↗</span></a>
    </nav>
  </header>
  <main>
    <section class="hero" id="home">
      <div class="hero-inner">
        <div class="hero-copy">
          <div class="eyebrow"><i></i> Korean street food, turned up</div>
          <h1>K-TOWN.<br><span class="hot">TACO</span><br>TAKEOVER.</h1>
          <p>Seoul meets the sidewalk. Big, bold Korean flavors wrapped up in your new favorite taco. One bite and you’re loco for more.</p>
          <div class="actions">
            <a class="button" href="#menu">MEET YOUR NEW OBSESSION <span>→</span></a>
            <a class="text-link" href="#find-us">Track our truck</a>
          </div>
        </div>
        <div class="food-scene" aria-label="Illustration of a delicious Korean taco">
          <div class="sunburst"></div>
          <span class="spark one">✳</span><span class="spark two">✦</span>
          <svg class="taco" viewBox="0 0 500 390" role="img" aria-label="A loaded Korean beef taco">
            <defs>
              <linearGradient id="shell" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#ffd578"/><stop offset="1" stop-color="#e98c32"/>
              </linearGradient>
              <linearGradient id="meat" x1="0" y1="0" x2="1" y2="1">
                <stop stop-color="#963c24"/><stop offset="1" stop-color="#54281e"/>
              </linearGradient>
            </defs>
            <!-- tortilla shell -->
            <path d="M64 237 Q244 37 436 224 Q461 252 442 278 Q254 370 73 281 Q49 267 64 237Z" fill="url(#shell)" stroke="#a75824" stroke-width="8"/>
            <path d="M77 246 Q246 94 426 234" fill="none" stroke="#ffe7a4" stroke-width="10" stroke-linecap="round"/>
            <!-- filling -->
            <path d="M89 237 Q116 191 142 218 Q160 168 190 204 Q213 157 239 199 Q269 152 294 195 Q321 164 340 208 Q371 178 393 224 Q408 230 415 249 Q247 300 88 256Z" fill="#5b9a3c"/>
            <path d="M91 235 Q113 201 135 221 Q152 190 176 218 Q193 182 219 213 Q244 175 268 211 Q295 185 316 218 Q348 188 365 229 Q387 212 407 241 Q248 280 91 257Z" fill="#e5d86c"/>
            <!-- bulgogi chunks -->
            <g fill="url(#meat)" stroke="#3b241c" stroke-width="2">
              <path d="M119 221l12-26 24 4 9 19-16 17z"/><path d="M170 208l11-25 24 4 10 21-17 15z"/>
              <path d="M222 207l13-28 23 5 9 20-16 16z"/><path d="M274 208l10-24 24 5 11 19-16 16z"/>
              <path d="M329 220l13-26 25 5 9 20-17 17z"/>
            </g>
            <!-- kimchi ribbons -->
            <path d="M112 231q16-15 29 2t31-2q17-18 31 2t33-3q17-19 31 2t35-2q18-16 32 4t34 0" fill="none" stroke="#f05b35" stroke-width="10" stroke-linecap="round"/>
            <path d="M130 246q15-10 28 3t31-2q18-12 31 3t31-2q17-13 31 3t34-1q17-11 32 1" fill="none" stroke="#d74329" stroke-width="6" stroke-linecap="round"/>
            <!-- sesame and scallion -->
            <g fill="#fff1c5">
              <ellipse cx="148" cy="210" rx="3" ry="6" transform="rotate(-30 148 210)"/><ellipse cx="203" cy="197" rx="3" ry="6" transform="rotate(25 203 197)"/>
              <ellipse cx="258" cy="197" rx="3" ry="6" transform="rotate(-30 258 197)"/><ellipse cx="312" cy="202" rx="3" ry="6" transform="rotate(25 312 202)"/>
              <ellipse cx="359" cy="214" rx="3" ry="6" transform="rotate(-25 359 214)"/>
            </g>
            <g fill="#b6d85d"><circle cx="166" cy="236" r="5"/><circle cx="245" cy="225" r="5"/><circle cx="323" cy="237" r="5"/><circle cx="286" cy="244" r="4"/></g>
            <!-- toasted spots -->
            <g fill="#c77531" opacity=".8"><ellipse cx="103" cy="276" rx="6" ry="3" transform="rotate(20 103 276)"/><ellipse cx="165" cy="292" rx="8" ry="3"/><ellipse cx="236" cy="303" rx="7" ry="3"/><ellipse cx="338" cy="291" rx="8" ry="3"/><ellipse cx="403" cy="267" rx="6" ry="3"/></g>
          </svg>
          <div class="sticker"><div><b>100%</b>LOCO<br>FLAVOR</div></div>
          <div class="hero-note">🔥 THE CRUNCH IS REAL</div>
        </div>
      </div>
    </section>
    <div class="ticker"><div class="ticker-line">BOLD BITES <span>✦</span> KOREAN HEAT <span>✦</span> ZERO BORING TACOS <span>✦</span> MADE FRESH, ALWAYS <span>✦</span> BOLD BITES <span>✦</span> KOREAN HEAT</div></div>
    <section class="below" id="menu">
      <div class="section-head">
        <div><small>Meet the main characters</small><h2>Your first round starts here.</h2></div>
        <a class="menu-link" href="#find-us">See you at the truck ↗</a>
      </div>
      <div class="cards">
        <article class="card"><div class="dish-icon">🌮</div><div><h3>Bulgogi Beef</h3><p>Sweet-soy beef · kimchi slaw · sesame</p></div><span class="price">$6</span></article>
        <article class="card"><div class="dish-icon">🌶️</div><div><h3>Spicy Pork</h3><p>Gochujang pork · crunchy pickles · lime</p></div><span class="price">$6</span></article>
        <article class="card"><div class="dish-icon">🥬</div><div><h3>Seoulful Shroom</h3><p>Sticky mushrooms · ssamjang · herbs</p></div><span class="price">$5</span></article>
      </div>
      <div class="location" id="find-us">
        <div><strong>Catch us if you can (we’re pretty easy to find).</strong><br><span>Today: Downtown Market · 11am–3pm · Follow the smell.</span></div>
        <a class="button" href="mailto:hello@kimchiloco.com">GET THE DAILY SPOT <span>↗</span></a>
      </div>
    </section>
    <span id="story" hidden></span>
  </main>
</body>
</html>

Reasoning trace (116 tokens)

**Planning landing page design**

I’m thinking about creating a polished landing page. I should use visuals inline, maybe CSS gradients and food illustrations via emojis. However, a custom SVG taco illustration sounds more appealing. I want rich, vibrant colors and need to include navigation, a hero section, menu, location details, and a call to action. The design should be high-quality with a dark navy, cream, and orange-pink color scheme. I also need to ensure it's responsive and includes interactive elements like menu tabs.