Food truck websiteOne-line
GPT-6.1 Terra
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 24 s
- Cost
- $0.032
- Output tokens
- 6,375
- Spent thinking
- 776 tokens
- Speed
- 81.2 tok/s
- Console errors
- 0
- First token after
- 6.0 s
- First visible text after
- 20.0 s
- Prompt tokens
- 360
- Code size
- 15.3 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-terra- Reasoning sent
{"effort":"medium"}- 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 · 176 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kimchi Loco — Korean soul. Taco energy.</title>
<style>
:root{--cream:#f8f3e6;--ink:#2d1714;--red:#c83220;--lime:#d9ed67;--orange:#f27b3b}
*{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:78px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid rgba(45,23,20,.18);gap:25px}
.brand{display:flex;align-items:center;gap:10px;line-height:.81;font-size:23px;letter-spacing:-1.6px;font-weight:1000}
.brand-mark{width:37px;height:37px;background:var(--red);color:var(--cream);border-radius:50%;display:grid;place-items:center;font-size:21px;letter-spacing:-2px;transform:rotate(-12deg)}
.nav{display:flex;align-items:center;gap:37px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.nav a:hover{color:var(--red)}
.nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;background:var(--ink);color:white;padding:17px 22px;border:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:transform .2s,background .2s}
.nav-cta:hover,.button:hover{background:var(--red);transform:translateY(-2px)}
.nav-cta{padding:14px 19px;color:white!important}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:570px}
.hero-copy{padding:64px 6vw 52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--red);font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--red)}
h1{font-size:clamp(55px,6.2vw,91px);line-height:.88;letter-spacing:-.065em;margin:24px 0 23px;font-weight:1000}
h1 .red{color:var(--red)}
.hero-copy p{font-size:17px;line-height:1.55;max-width:390px;margin:0;color:#654e44}
.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px}
.text-link{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--red);padding:8px 0}
.hero-art{background:#c93420;position:relative;overflow:hidden;min-height:570px}
.hero-art svg{display:block;width:100%;height:100%;position:absolute;inset:0}
.art-top{position:absolute;top:30px;left:34px;color:#ffe8c7;font-size:10px;font-weight:900;letter-spacing:.17em;text-transform:uppercase;z-index:1}
.art-top span{display:block;font-size:20px;letter-spacing:-.04em;margin-top:6px}
.art-bottom{position:absolute;bottom:26px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:end;color:#ffe8c7;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.art-bottom strong{font-size:14px;letter-spacing:0}
.stamp{position:absolute;right:28px;top:24px;width:91px;height:91px;border:1px solid rgba(255,239,213,.8);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff1d8;text-align:center;transform:rotate(13deg);font-size:9px;letter-spacing:.13em;font-weight:900;line-height:1.5}
.stamp b{font-size:23px;line-height:1}
.ticker{background:var(--lime);overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.ticker-inner{display:flex;justify-content:space-around;align-items:center;gap:20px;white-space:nowrap;min-width:760px;height:57px;font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.ticker i{font-style:normal;color:var(--red);font-size:20px}
.section{padding:86px 6%}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}
.section-head h2,.location h2{font-size:clamp(40px,5vw,65px);line-height:.95;letter-spacing:-.055em;margin:13px 0 0}
.section-head p{max-width:270px;line-height:1.5;color:#765e50;font-size:14px;margin:0}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.menu-card{background:#eee5d5;padding:25px;min-height:250px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.menu-card:nth-child(2){background:#e6ecba}
.menu-card:nth-child(3){background:#f2c8a9}
.card-num{font-size:11px;font-weight:900;letter-spacing:.13em;color:var(--red)}
.menu-icon{font-size:50px;line-height:1;margin:22px 0 15px}
.menu-card h3{font-size:25px;letter-spacing:-.04em;margin:0 0 8px}
.menu-card p{font-size:14px;line-height:1.5;color:#6a5044;max-width:300px;margin:0}
.card-tag{margin-top:auto;padding-top:20px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.location{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.location .eyebrow{color:var(--lime)}
.location .eyebrow:before{background:var(--lime)}
.location p{line-height:1.6;color:#ddcabe;max-width:390px}
.location .button{background:var(--lime);color:var(--ink);margin-top:15px}
.location .button:hover{background:white}
.location-card{background:#e9dfca;color:var(--ink);min-height:250px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.location-card:after{content:"✳";position:absolute;right:-10px;bottom:-60px;font-size:230px;color:#c93521;line-height:1;opacity:.9}
.location-card small{font-size:10px;font-weight:900;letter-spacing:.15em;position:relative;z-index:1}
.location-card strong{font-size:32px;line-height:1;letter-spacing:-.04em;position:relative;z-index:1}
.location-card span{font-size:13px;line-height:1.5;position:relative;z-index:1}
footer{padding:25px 6%;display:flex;justify-content:space-between;gap:20px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:750px){
.topbar{height:68px;padding:0 5%}.nav{gap:14px}.nav>a:not(.nav-cta){display:none}.nav-cta{font-size:10px;padding:12px}
.hero{grid-template-columns:1fr}.hero-copy{padding:56px 6% 48px}.hero-art{min-height:440px}
h1{font-size:clamp(56px,11vw,80px)}.hero-copy p{font-size:16px}
.section{padding:60px 6%}.menu-grid{grid-template-columns:1fr}.menu-card{min-height:220px}.location{grid-template-columns:1fr;gap:30px}
}
@media(max-width:420px){.hero-art{min-height:380px}.hero-actions{gap:15px}.button{padding:16px}.section-head{display:block}.section-head p{margin-top:18px}.art-top{left:20px}.art-bottom{left:20px;right:20px}.stamp{right:18px}}
</style>
</head>
<body>
<header class="topbar">
<a class="brand" href="#" aria-label="Kimchi Loco home"><span class="brand-mark">✳</span><span>KIMCHI<br>LOCO</span></a>
<nav class="nav" aria-label="Main navigation">
<a href="#menu">The menu</a>
<a href="#story">Our vibe</a>
<a href="#location">Find us</a>
<a class="nav-cta" href="#location">Find the truck ↗</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-copy">
<div class="eyebrow">Korean flavor. Street food soul.</div>
<h1>SEOUL FOOD.<br><span class="red">TACO</span><br>ENERGY.</h1>
<p>Big Korean flavors, wrapped up in a warm tortilla. A little spicy, a lot of Seoul, and always worth the stop.</p>
<div class="hero-actions">
<a class="button" href="#location">Find the truck <span>↗</span></a>
<a class="text-link" href="#menu">Peep the menu ↘</a>
</div>
</div>
<div class="hero-art" role="img" aria-label="Illustration of a Korean taco overflowing with colorful toppings">
<svg viewBox="0 0 640 570" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<radialGradient id="sun" cx="50%" cy="40%"><stop stop-color="#f7c85a"/><stop offset="1" stop-color="#e8923e"/></radialGradient>
<linearGradient id="shell" x1="0" y1="0" x2="0.8" y2="1"><stop stop-color="#ffdc78"/><stop offset=".5" stop-color="#e9a745"/><stop offset="1" stop-color="#c77b2f"/></linearGradient>
<linearGradient id="meat" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#aa3c21"/><stop offset="1" stop-color="#572219"/></linearGradient>
<filter id="shadow" x="-30%" y="-30%" width="160%" height="180%"><feGaussianBlur stdDeviation="12"/></filter>
<filter id="texture"><feTurbulence type="fractalNoise" baseFrequency=".7" numOctaves="3" seed="8" result="n"/><feColorMatrix in="n" type="saturate" values="0"/><feComponentTransfer><feFuncA type="table" tableValues="0 .13"/></feComponentTransfer></filter>
</defs>
<circle cx="328" cy="278" r="222" fill="url(#sun)"/>
<circle cx="328" cy="278" r="243" fill="none" stroke="#f3a46c" stroke-width="1" opacity=".7"/>
<path d="M50 185l20 5-14 8 5 18-15-12-15 10 7-17-14-11 19 2 8-17zM554 372l14 5-10 6 4 13-10-9-11 7 5-12-10-8 13 1 5-12z" fill="#f9d88c"/>
<ellipse cx="323" cy="424" rx="211" ry="31" fill="#762817" opacity=".35" filter="url(#shadow)"/>
<g transform="rotate(-8 320 300)">
<!-- back of the tortilla -->
<path d="M94 268 Q93 218 130 208 Q166 201 198 211 Q249 194 294 208 Q339 192 387 207 Q444 195 489 215 Q530 221 545 260 Q520 345 440 377 Q332 420 211 382 Q122 354 94 268Z" fill="#df9a3c" stroke="#a75d28" stroke-width="5"/>
<path d="M109 263 Q133 219 180 224 Q229 205 269 223 Q329 204 379 222 Q442 206 491 231 Q521 234 531 264 Q485 307 319 321 Q180 308 109 263Z" fill="#78341f"/>
<!-- lettuce and herbs -->
<path d="M105 259q-8-20 8-27 5-20 22-14 11-22 29-11 13-19 31-5 16-21 32-4 18-21 35-4 19-17 35 0 21-18 38 1 19-19 38 0 18-18 33 4 20-13 31 8 21-7 26 15 24-3 24 18 20 2 19 20l-25 27-358 3z" fill="#6c992f"/>
<path d="M113 252q15-20 29-10 6-20 22-10 12-22 27-10 13-19 31-8 14-19 30-7 14-13 27 1 14-16 29 1 20-18 34-2 19-13 32 3 16-16 31 2 18-11 27 7 20-8 25 12 21-4 25 14 17 2 18 19" fill="none" stroke="#b3cb43" stroke-width="9" stroke-linecap="round"/>
<!-- bulgogi -->
<g fill="url(#meat)" stroke="#702917" stroke-width="3">
<path d="M122 259q2-22 24-20l12 9 17-5 10 16-8 22-43 2z"/>
<path d="M166 247q9-21 28-15l11 10 14-4 11 17-9 23-44-1z"/>
<path d="M215 254q6-24 27-22l11 11 17-4 12 18-9 24-48 2z"/>
<path d="M265 249q9-23 28-19l13 10 15-5 14 18-10 24-49 4z"/>
<path d="M318 251q7-23 26-19l16 9 15-4 12 20-11 24-45 1z"/>
<path d="M370 254q8-22 27-17l13 9 16-4 12 18-12 24-43-2z"/>
<path d="M422 260q6-22 25-18l11 10 15-3 12 16-14 22-37-1z"/>
<path d="M469 263q6-18 21-13l10 10 12-1 6 14-18 17-27-5z"/>
</g>
<!-- kimchi and crunchy ribbons -->
<g fill="none" stroke-linecap="round">
<path d="M133 251q18-28 36-12t34-9M188 270q13-24 31-14t33-20M271 259q17-26 32-11t35-13M340 267q12-22 29-12t30-16M405 267q15-23 31-9t34-6" stroke="#ed5c2e" stroke-width="12"/>
<path d="M137 246q13-17 23-9M205 258q12-13 21-9M283 250q11-13 21-6M352 257q10-13 20-7M421 259q11-12 20-5" stroke="#ff9b4e" stroke-width="4"/>
<path d="M159 223q19 5 27 20M251 219q14 4 25 18M324 223q18 2 25 17M408 226q13 4 19 18" stroke="#f2b5a8" stroke-width="6"/>
<path d="M155 223q15-9 23 6M249 219q13-9 23 5M325 223q12-10 23 5M405 227q13-10 23 6" stroke="#e9d5cd" stroke-width="3"/>
</g>
<!-- front shell -->
<path d="M93 274 Q122 295 164 295 Q237 307 321 304 Q420 304 491 288 Q525 282 545 269 Q529 350 445 385 Q325 432 203 388 Q117 357 93 274Z" fill="url(#shell)" stroke="#b46b2d" stroke-width="5"/>
<path d="M106 289 Q211 330 323 320 Q448 321 531 286" fill="none" stroke="#ffdf87" stroke-width="7" opacity=".75"/>
<path d="M132 315q8 6 18 5m27 28q11 5 20 3m42-12q9 5 17 1m35 32q12 4 20 0m36-27q11 5 21 0m40 12q9 4 17-2m31-39q8 2 14-2" fill="none" stroke="#b96f2d" stroke-width="5" stroke-linecap="round" opacity=".55"/>
<g fill="#c77b30" opacity=".55"><circle cx="183" cy="319" r="3"/><circle cx="224" cy="372" r="3"/><circle cx="271" cy="348" r="2.5"/><circle cx="351" cy="384" r="3"/><circle cx="392" cy="335" r="3"/><circle cx="452" cy="335" r="2.5"/><circle cx="156" cy="339" r="2"/></g>
<!-- sesame and scallions -->
<g fill="#f9e8b2"><ellipse cx="156" cy="256" rx="4" ry="2" transform="rotate(-30 156 256)"/><ellipse cx="207" cy="245" rx="4" ry="2"/><ellipse cx="238" cy="260" rx="4" ry="2" transform="rotate(40 238 260)"/><ellipse cx="296" cy="239" rx="4" ry="2"/><ellipse cx="327" cy="260" rx="4" ry="2"/><ellipse cx="381" cy="248" rx="4" ry="2"/><ellipse cx="446" cy="268" rx="4" ry="2"/><ellipse cx="478" cy="255" rx="4" ry="2"/></g>
<g fill="#d7ea79" stroke="#67913d" stroke-width="2"><ellipse cx="186" cy="253" rx="7" ry="4" transform="rotate(-30 186 253)"/><ellipse cx="257" cy="237" rx="7" ry="4" transform="rotate(30 257 237)"/><ellipse cx="346" cy="246" rx="7" ry="4" transform="rotate(-20 346 246)"/><ellipse cx="411" cy="258" rx="7" ry="4" transform="rotate(30 411 258)"/></g>
</g>
<rect width="640" height="570" filter="url(#texture)" opacity=".4"/>
</svg>
<div class="art-top">Made with Seoul <span>맛있게 드세요!</span></div>
<div class="stamp">GOOD FOOD<br><b>✳</b>GOOD MOOD</div>
<div class="art-bottom"><span>Not your average taco<br><strong>BIG FLAVOR ONLY.</strong></span><span>✳ EST. FOR THE HUNGRY</span></div>
</div>
</section>
<div class="ticker" aria-label="Fresh, bold, a little loco">
<div class="ticker-inner"><span>Seoul meets the streets</span><i>✳</i><span>Always made fresh</span><i>✳</i><span>Good food, good mood</span><i>✳</i><span>Come hungry</span><i>✳</i></div>
</div>
<section class="section" id="menu">
<div class="section-head">
<div><div class="eyebrow">The good stuff</div><h2>MEET THE MENU.</h2></div>
<p>Bold, bright, and built to be eaten with your hands. Napkins highly recommended.</p>
</div>
<div class="menu-grid">
<article class="menu-card"><span class="card-num">01 / THE CLASSIC</span><div class="menu-icon">🌮</div><h3>Seoul Bulgogi Taco</h3><p>Savory-sweet beef, crunchy slaw, kimchi, and a hit of sesame.</p><div class="card-tag">The crowd favorite ✳</div></article>
<article class="menu-card"><span class="card-num">02 / BRING THE HEAT</span><div class="menu-icon">🔥</div><h3>Gochujang Chicken</h3><p>Spicy glazed chicken, pickled onion, cilantro, and creamy sauce.</p><div class="card-tag">A little kick ✳</div></article>
<article class="menu-card"><span class="card-num">03 / PLANT POWER</span><div class="menu-icon">🥬</div><h3>Crispy Tofu Loco</h3><p>Golden tofu, tangy kimchi, fresh greens, and all the good stuff.</p><div class="card-tag">Big veggie energy ✳</div></article>
</div>
</section>
<section class="section location" id="location">
<div id="story"><div class="eyebrow">Catch us if you're hungry</div><h2>GOOD FOOD.<br>ON THE MOVE.</h2><p>We're bringing Korean-inspired tacos to the streets, one delicious stop at a time. Come say hey, grab a taco, and stay a while.</p><a class="button" href="#menu">Explore the menu ↗</a></div>
<div class="location-card"><small>✳ FIND YOUR FLAVOR</small><strong>LOOK FOR THE<br>LOCO TRUCK.</strong><span>Follow the smell of something delicious.<br>Good times and great tacos await.</span></div>
</section>
</main>
<footer><span>© Kimchi Loco</span><span>Made with Seoul & a little spice ✳</span></footer>
</body>
</html>Reasoning trace (776 tokens)
**Designing food truck website** I need to create a polished landing page for a food truck that’s visually appealing and unique. The main focus will be on food imagery, particularly a large inline SVG illustration of a taco. I want a clean structure with a top navigation and a hero section featuring a cream background. The design should include bold typography and a striking dark red/orange taco illustration, along with essential information like location and hours. I'll implement functional navigation elements for better usability, like a menu anchor and an order button.**Creating a viewport screenshot** I need to build a viewport screenshot that showcases key elements. The navigation height should be 76 pixels, and the hero area should be 560 pixels tall. I want to use a polished design featuring the brand logo at the top. The hero section will include the text "KOREAN SOUL. / TACO ENERGY." alongside a beautiful, illustrated taco in SVG format on a red backdrop. I can use realistic SVG techniques with textures and layers to create three tacos in a side view, ensuring they look appetizing. The main image frame will be a red rectangle with a large lime circle positioned behind the taco.**Designing taco illustration** For the side elevation of the taco, I want to create a shell in a U shape that looks like a bowl. I’ll structure it with points and curves to achieve that side view. Ingredients should be shown above the rim, like red meat, lettuce, onions, sauce, and sesame seeds. I could generate this with SVG elements, using repeating shapes for consistency. I’ll illustrate three tacos, centering one prominently. Adding toppings with paths and circles will enhance the design, along with a subtle noise filter for style. Using actual food images isn’t an option here.**Implementing mobile menu features** I’m working on a JavaScript toggle for the mobile menu. The plan is to wrap the navigation, hiding links except for the call-to-action button. When toggled, the menu should allow users to add to their order, with interactive buttons that update a counter and show a toast notification. I’ll include a visual element, like a bright red block and rings, with a centered taco image. I need to focus on the tortilla and detailed garnish as well. Let’s get started!