Food truck websiteOne-line

GPT-6.1 Terra

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 58.9 s
Cost: $0.025
Output tokens: 5,023
Spent thinking: 55 tokens
Speed: 89.4 tok/s
Console errors: 0

First token after: 2.7 s
First visible text after: 4.4 s
Prompt tokens: 360
Code size: 13.7 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
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 · 127 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 soul. Taco heart.</title>
<style>
  :root{--cream:#f7f0dc;--ink:#24251d;--red:#e44325;--yellow:#ffd346;--green:#637248;--line:#bdb5a0}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
  a{color:inherit;text-decoration:none}
  button{font:inherit}
  .topbar{height:33px;background:var(--ink);color:var(--cream);display:flex;justify-content:center;align-items:center;gap:15px;font-size:10px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
  .topbar span{color:var(--yellow)}
  .nav{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5.4%;border-bottom:1px solid var(--ink);position:relative;z-index:5}
  .logo{font-weight:1000;font-size:27px;letter-spacing:-2px;line-height:.75;transform:rotate(-3deg);display:inline-block}
  .logo small{display:block;color:var(--red);font-size:9px;letter-spacing:2.2px;margin-top:8px;text-align:center}
  .navlinks{display:flex;align-items:center;gap:39px;font-size:11px;font-weight:900;letter-spacing:1.3px}
  .navlinks a:hover{color:var(--red)}
  .navcta,.button{background:var(--ink);color:white;padding:15px 21px;border:1px solid var(--ink);font-size:11px;font-weight:900;letter-spacing:1px;display:inline-flex;align-items:center;justify-content:center;gap:22px;transition:.2s}
  .navcta:hover,.button:hover{background:var(--red);border-color:var(--red);color:white}
  .hero{min-height:570px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
  .hero-copy{padding:64px 4% 52px 10.7%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:900;text-transform:uppercase;display:flex;align-items:center;gap:9px}
  .eyebrow:before{content:"";width:24px;height:2px;background:var(--red)}
  h1{font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:-1px;font-size:clamp(65px,7.2vw,105px);line-height:.91;margin:22px 0 22px}
  h1 .red{color:var(--red)}
  .hero-copy p{font-size:16px;line-height:1.6;max-width:385px;margin:0 0 28px;color:#4c4b40}
  .hero-actions{display:flex;align-items:center;gap:25px}
  .textlink{font-size:11px;font-weight:900;letter-spacing:1px;border-bottom:1px solid var(--ink);padding:8px 0}
  .hero-art{background:var(--red);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:570px}
  .hero-art:before{content:"";position:absolute;width:75%;aspect-ratio:1;border:1px solid rgba(255,239,203,.35);border-radius:50%}
  .hero-art:after{content:"";position:absolute;width:88%;aspect-ratio:1;border:1px solid rgba(255,239,203,.18);border-radius:50%}
  .art-label{position:absolute;top:31px;left:35px;color:#ffeaca;font-size:10px;font-weight:900;letter-spacing:2px;z-index:2}
  .art-side{position:absolute;right:26px;bottom:35px;color:#ffeaca;font-size:10px;font-weight:900;letter-spacing:2px;writing-mode:vertical-rl;z-index:2}
  .taco{width:92%;max-width:590px;position:relative;z-index:1;filter:drop-shadow(0 24px 15px rgba(65,22,9,.22));transform:rotate(-9deg)}
  .stamp{position:absolute;z-index:3;right:9%;top:11%;width:101px;height:101px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:1000;font-size:12px;line-height:1.2;transform:rotate(13deg);border:2px dashed var(--ink);box-shadow:0 0 0 5px var(--yellow)}
  .ticker{background:var(--yellow);border-bottom:1px solid var(--ink);height:49px;display:flex;align-items:center;justify-content:center;gap:33px;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:900;letter-spacing:1.5px}
  .ticker i{font-style:normal;color:var(--red);font-size:19px}
  .intro{padding:72px 5.4% 80px;display:grid;grid-template-columns:1fr 1fr;gap:45px}
  .intro h2,.section-title{font-family:Impact,"Arial Narrow",sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(45px,5vw,70px);line-height:.95;margin:15px 0 0}
  .intro-right{display:flex;align-items:center;justify-content:space-between;gap:30px}
  .intro-right p{max-width:430px;font-size:15px;line-height:1.7;color:#555346}
  .round-arrow{flex:0 0 60px;width:60px;height:60px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:25px}
  .menu{background:#e8e1cc;padding:70px 5.4% 80px;border-top:1px solid var(--ink)}
  .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:35px}
  .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .card{background:var(--cream);border:1px solid var(--ink)}
  .card-art{height:180px;display:grid;place-items:center;overflow:hidden}
  .card-art svg{width:75%;height:160px;filter:drop-shadow(0 12px 8px #0002)}
  .card:nth-child(1) .card-art{background:#e86e45}.card:nth-child(2) .card-art{background:#d8aa46}.card:nth-child(3) .card-art{background:#8e9b70}
  .card-body{padding:20px 22px 24px}
  .card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
  .card h3{font-size:20px;letter-spacing:-.5px;margin:0;text-transform:uppercase}
  .card p{font-size:13px;line-height:1.6;color:#605d50;margin:12px 0 0}
  .tag{font-size:9px;letter-spacing:1px;font-weight:900;color:var(--red)}
  .visit{background:var(--ink);color:var(--cream);padding:70px 5.4%;display:flex;align-items:center;justify-content:space-between;gap:30px}
  .visit p{line-height:1.6;color:#ccc7b7}
  .visit .button{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
  footer{padding:24px 5.4%;display:flex;justify-content:space-between;gap:20px;font-size:10px;font-weight:bold;letter-spacing:1px}
  @media(max-width:700px){
    .topbar{font-size:8px;letter-spacing:1px}.nav{height:70px;padding:0 6%}.logo{font-size:23px}.navlinks{gap:15px}.navlinks a:not(.navcta){display:none}.navcta{padding:12px;font-size:9px}
    .hero{grid-template-columns:1fr}.hero-copy{padding:55px 6% 45px}.hero-copy p{font-size:15px}h1{font-size:70px}.hero-art{min-height:390px}.taco{width:95%}.stamp{width:78px;height:78px;font-size:10px}.ticker{justify-content:flex-start;padding-left:20px;gap:20px}
    .intro{grid-template-columns:1fr;padding:55px 6%;gap:15px}.intro-right p{margin:0}.menu{padding:55px 6%}.section-head{align-items:start}.menu-grid{grid-template-columns:1fr}.card-art{height:160px}.visit{padding:55px 6%;align-items:flex-start;flex-direction:column}footer{padding:24px 6%;flex-direction:column}
  }
</style>
</head>
<body>
<div class="topbar">BIG FLAVOR. LITTLE TRUCK. <span>✳</span> KOREAN-INSPIRED STREET FOOD</div>
<nav class="nav">
  <a class="logo" href="#top" aria-label="Kimchi Loco home">KIMCHI<br>LOCO<small>KOREAN TACOS</small></a>
  <div class="navlinks"><a href="#menu">THE MENU</a><a href="#story">OUR STORY</a><a href="#visit">FIND THE TRUCK</a><a class="navcta" href="#visit">COME HUNGRY ↗</a></div>
</nav>
<main id="top">
  <section class="hero">
    <div class="hero-copy">
      <div class="eyebrow">Seoul food meets street food</div>
      <h1>Korean soul.<br><span class="red">Taco heart.</span></h1>
      <p>Bold Korean flavors, wrapped up in a warm tortilla. A little spicy, a little messy, and a whole lot of loco.</p>
      <div class="hero-actions"><a class="button" href="#menu">EXPLORE THE MENU <span>↗</span></a><a class="textlink" href="#visit">FIND US ↓</a></div>
    </div>
    <div class="hero-art">
      <div class="art-label">THE GOOD STUFF / 01</div>
      <div class="stamp">MADE<br>WITH SEOUL<br>✳</div>
      <svg class="taco" viewBox="0 0 600 410" role="img" aria-label="Illustration of a taco packed with colorful Korean-inspired fillings">
        <ellipse cx="300" cy="345" rx="245" ry="28" fill="#912e19" opacity=".35"/>
        <path d="M55 205 Q70 105 172 89 Q294 45 440 92 Q537 117 555 204 L518 238 L88 241Z" fill="#f0b846" stroke="#25261e" stroke-width="5"/>
        <path d="M75 198 Q70 166 105 170 Q103 133 143 146 Q155 113 185 134 Q210 101 238 125 Q260 94 290 120 Q322 93 345 119 Q380 101 397 130 Q437 111 449 143 Q489 133 494 163 Q535 162 528 198Z" fill="#769246" stroke="#25261e" stroke-width="5" stroke-linejoin="round"/>
        <path d="M88 190 Q109 155 137 177 Q155 147 182 170 Q206 145 233 169 Q258 146 280 168 Q312 141 334 168 Q356 143 384 167 Q411 148 434 172 Q463 149 480 181 Q513 164 525 199" fill="none" stroke="#d53724" stroke-width="24" stroke-linecap="round"/>
        <g fill="#6b3523" stroke="#25261e" stroke-width="4">
          <path d="M92 190l23-18 28 9 1 24-28 10-26-9z"/><path d="M152 182l25-15 26 14-4 24-30 8-20-12z"/><path d="M218 183l20-21 29 8 8 23-22 19-30-7z"/><path d="M292 176l29-13 23 16-4 25-29 8-22-14z"/><path d="M359 182l25-18 28 10 2 25-26 15-27-10z"/><path d="M428 184l22-19 29 10 5 25-23 14-30-9z"/>
        </g>
        <g fill="none" stroke="#f7e7b8" stroke-width="8" stroke-linecap="round"><path d="M120 165l30 25m-2-35l34 25m58-20l31 23m36-29l31 22m31-15l34 26m43-29l24 25"/><path d="M112 199l29-23m48 20l31-26m89 32l27-24m54 24l32-25m43 26l26-22"/></g>
        <g fill="#e64a2c"><ellipse cx="201" cy="156" rx="15" ry="8" transform="rotate(-25 201 156)"/><ellipse cx="300" cy="151" rx="16" ry="8" transform="rotate(20 300 151)"/><ellipse cx="420" cy="153" rx="15" ry="8" transform="rotate(-25 420 153)"/></g>
        <path d="M55 205 Q300 255 555 205 Q531 340 405 365 Q300 393 193 365 Q69 339 55 205Z" fill="#f6c858" stroke="#25261e" stroke-width="5"/>
        <path d="M65 218 Q300 269 545 218" fill="none" stroke="#d39736" stroke-width="5"/>
        <g fill="#d69f3d" opacity=".75"><ellipse cx="170" cy="276" rx="15" ry="5" transform="rotate(20 170 276)"/><ellipse cx="239" cy="320" rx="12" ry="5"/><ellipse cx="351" cy="286" rx="17" ry="5" transform="rotate(-10 351 286)"/><ellipse cx="437" cy="273" rx="12" ry="5"/><ellipse cx="310" cy="346" rx="15" ry="4"/><ellipse cx="120" cy="244" rx="10" ry="4"/></g>
        <g fill="#f8eed4"><circle cx="205" cy="182" r="3"/><circle cx="280" cy="187" r="3"/><circle cx="397" cy="191" r="3"/><circle cx="463" cy="193" r="3"/></g>
      </svg>
      <div class="art-side">BOLD BITES. GOOD VIBES.</div>
    </div>
  </section>
  <div class="ticker"><span>K-TOWN FLAVOR</span><i>✳</i><span>TACO TRUCK ENERGY</span><i>✳</i><span>GOOD FOOD, GOOD MOOD</span><i>✳</i><span>GET A LITTLE LOCO</span><i>✳</i></div>
  <section class="intro" id="story">
    <div><div class="eyebrow">A little about us</div><h2>Two worlds.<br>One delicious idea.</h2></div>
    <div class="intro-right"><p>We're bringing the flavors we love to the streets: sizzling Korean-inspired fillings, punchy kimchi, and all the good stuff piled into tacos. Grab a friend, grab a taco, and stay a while.</p><a class="round-arrow" href="#menu" aria-label="See our menu">↗</a></div>
  </section>
  <section class="menu" id="menu">
    <div class="section-head"><div><div class="eyebrow">The lineup</div><h2 class="section-title">Meet your cravings.</h2></div><div class="tag">BIG FLAVOR IN EVERY BITE ✳</div></div>
    <div class="menu-grid">
      <article class="card"><div class="card-art">
        <svg viewBox="0 0 300 160" aria-hidden="true"><path d="M25 75 Q45 25 150 35 Q255 25 275 75" fill="#6c8a45" stroke="#24251d" stroke-width="4"/><path d="M35 70 Q60 40 80 67 Q105 36 130 66 Q150 37 175 65 Q200 35 225 65 Q245 45 265 72" fill="none" stroke="#a33d25" stroke-width="22"/><path d="M25 75 Q150 112 275 75 Q255 145 150 150 Q45 145 25 75Z" fill="#f4c55b" stroke="#24251d" stroke-width="4"/><path d="M65 57l35 20m35-23l35 20m35-20l35 20" stroke="#f8eac8" stroke-width="7"/></svg>
      </div><div class="card-body"><div class="card-top"><h3>Seoul Bulgogi</h3><span class="tag">THE CLASSIC</span></div><p>Savory-sweet beef, crunchy slaw, kimchi and a drizzle of our signature sauce.</p></div></article>
      <article class="card"><div class="card-art">
        <svg viewBox="0 0 300 160" aria-hidden="true"><path d="M25 75 Q45 25 150 35 Q255 25 275 75" fill="#6c8a45" stroke="#24251d" stroke-width="4"/><path d="M35 70 Q60 40 80 67 Q105 36 130 66 Q150 37 175 65 Q200 35 225 65 Q245 45 265 72" fill="none" stroke="#dc4d27" stroke-width="22"/><path d="M25 75 Q150 112 275 75 Q255 145 150 150 Q45 145 25 75Z" fill="#f4c55b" stroke="#24251d" stroke-width="4"/><path d="M65 57l35 20m35-23l35 20m35-20l35 20" stroke="#f8eac8" stroke-width="7"/></svg>
      </div><div class="card-body"><div class="card-top"><h3>Gochujang Chicken</h3><span class="tag">A LITTLE HEAT</span></div><p>Spicy-sweet chicken, fresh slaw, sesame and a little kick that'll keep you coming back.</p></div></article>
      <article class="card"><div class="card-art">
        <svg viewBox="0 0 300 160" aria-hidden="true"><path d="M25 75 Q45 25 150 35 Q255 25 275 75" fill="#6c8a45" stroke="#24251d" stroke-width="4"/><path d="M35 70 Q60 40 80 67 Q105 36 130 66 Q150 37 175 65 Q200 35 225 65 Q245 45 265 72" fill="none" stroke="#d9954b" stroke-width="22"/><path d="M25 75 Q150 112 275 75 Q255 145 150 150 Q45 145 25 75Z" fill="#f4c55b" stroke="#24251d" stroke-width="4"/><path d="M65 57l35 20m35-23l35 20m35-20l35 20" stroke="#f8eac8" stroke-width="7"/></svg>
      </div><div class="card-body"><div class="card-top"><h3>Tofu Loco</h3><span class="tag">PLANT POWER</span></div><p>Golden tofu, bright veggies and all the bold, tangy flavor you came for.</p></div></article>
    </div>
  </section>
  <section class="visit" id="visit"><div><div class="eyebrow">Come find us</div><h2 class="section-title">The truck is calling.</h2><p>Follow the good smells and bring your appetite.<br>New stops and updates coming soon.</p></div><a class="button" href="#top">BACK TO THE TOP ↑</a></section>
</main>
<footer><span>© KIMCHI LOCO — KOREAN SOUL. TACO HEART.</span><span>MADE WITH SEOUL ✳</span></footer>
</body>
</html>

Reasoning trace (55 tokens)

**Designing a food truck site**

I need to create a polished food truck website. I want a visually strong hero section featuring an illustrated taco, which I can achieve using CSS or inline SVG. I’m thinking of a warm color palette with cream, red, and black, along with a solid typography system and graphic layout. It has to be responsive, with interactive menu tabs, maybe a location button that scrolls, an order button, and a mobile navigation. No external elements are allowed.