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 33 s
- Cost
- $0.035
- Output tokens
- 7,023
- Spent thinking
- 0 tokens
- Speed
- 76.3 tok/s
- Console errors
- 0
- First token after
- 1.3 s
- First visible text after
- 1.3 s
- Prompt tokens
- 360
- Code size
- 18.0 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-terra- Reasoning sent
{"effort":"none"}- 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 · 195 lines
<!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 spirit.</title>
<meta name="description" content="Korean soul meets taco spirit. Find the Kimchi Loco food truck and come hungry.">
<style>
:root{--cream:#f7f1df;--ink:#20251a;--red:#df3d27;--yellow:#f1c94e;--green:#63773e;--line:rgba(32,37,26,.2)}
*{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}
.topline{height:30px;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.topline span{color:var(--yellow);margin:0 10px}
header{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid var(--line);background:var(--cream)}
.logo{font-weight:1000;font-size:25px;line-height:.75;letter-spacing:-1.9px;text-transform:uppercase;transform:rotate(-3deg)}
.logo small{display:block;font-size:7px;letter-spacing:2.6px;text-align:center;margin-top:7px}
nav{display:flex;align-items:center;gap:36px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
nav a:not(.nav-cta):hover{color:var(--red)}
.nav-cta{background:var(--red);color:white;padding:14px 19px;border-radius:3px;transition:transform .2s}
.nav-cta:hover,.button:hover{transform:translateY(-3px)}
.hero{min-height:596px;display:grid;grid-template-columns:48% 52%;overflow:hidden}
.hero-copy{position:relative;padding:70px 5% 60px 12.5%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.19em;font-weight:900;text-transform:uppercase}
.eyebrow:before{content:"";width:27px;height:2px;background:var(--red)}
h1{font-family:Impact,"Arial Narrow",Arial,sans-serif;font-size:clamp(65px,7.5vw,105px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase;margin:24px 0 20px;font-weight:900}
h1 .red{color:var(--red)}
.hero-copy p{font-family:Georgia,serif;max-width:390px;font-size:17px;line-height:1.55;margin:0;color:#4c4b3e}
.actions{display:flex;align-items:center;gap:24px;margin-top:30px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--red);color:#fff;padding:17px 21px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;transition:transform .2s}
.button span{font-size:17px;line-height:8px}
.text-link{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:5px}
.hero-art{position:relative;background:#dba83b;overflow:hidden;min-height:540px}
.hero-art:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 55% 49%,#f1d573 0%,#dfb349 48%,#c88b32 100%)}
.art-grain{position:absolute;inset:0;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.art-scene{position:absolute;width:100%;height:100%;inset:0}
.stamp{position:absolute;top:42px;right:38px;width:112px;height:112px;border:2px solid var(--ink);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(13deg);font-size:10px;font-weight:900;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}
.stamp b{font-family:Georgia,serif;font-size:27px;line-height:1}
.photo-note{position:absolute;bottom:30px;right:35px;color:#2b2e1d;font-size:10px;letter-spacing:.13em;font-weight:900;text-transform:uppercase}
.ticker{background:var(--red);color:var(--cream);min-height:50px;display:flex;align-items:center;justify-content:center;gap:25px;overflow:hidden;white-space:nowrap;font-size:12px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.ticker .star{color:var(--yellow);font-size:17px}
.intro{padding:76px 6% 80px;text-align:center}
.intro .eyebrow{justify-content:center}
.intro .eyebrow:after{content:"";width:27px;height:2px;background:var(--red)}
h2{font-family:Impact,"Arial Narrow",Arial,sans-serif;text-transform:uppercase;font-size:clamp(43px,5vw,66px);letter-spacing:-.02em;line-height:1;margin:18px 0 12px}
.intro-sub{font-family:Georgia,serif;color:#666251;font-size:16px;margin:0 auto 35px;line-height:1.5}
.cards{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.card{background:#ede5ce;border:1px solid rgba(32,37,26,.1)}
.card-art{height:185px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.card:nth-child(1) .card-art{background:#d9a858}
.card:nth-child(2) .card-art{background:#a8a77c}
.card:nth-child(3) .card-art{background:#d77b4e}
.card-art svg{width:100%;height:100%}
.card-body{padding:21px 23px 24px}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card h3{font-family:Impact,"Arial Narrow",Arial,sans-serif;letter-spacing:.02em;font-size:24px;text-transform:uppercase;margin:0}
.tag{font-size:9px;font-weight:900;letter-spacing:.13em;color:var(--red);white-space:nowrap}
.card p{font-family:Georgia,serif;color:#676252;font-size:14px;line-height:1.5;margin:10px 0 0}
.find{background:var(--ink);color:var(--cream);padding:64px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.find h2{margin:13px 0}
.find p{font-family:Georgia,serif;color:#d6d0bc;line-height:1.5;margin:0;max-width:510px}
.find .eyebrow{color:var(--yellow)}
.find .eyebrow:before{background:var(--yellow)}
.find .button{background:var(--yellow);color:var(--ink);white-space:nowrap}
footer{padding:25px 6%;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;gap:20px}
@media(max-width:800px){
header{height:68px;padding:0 5%} nav{gap:20px} nav a:not(.nav-cta){display:none}
.hero{grid-template-columns:1fr}.hero-copy{padding:58px 7% 55px}.hero-art{min-height:420px}.hero-art .art-scene{height:100%}
h1{font-size:clamp(67px,13vw,100px)}.stamp{width:90px;height:90px;top:22px;right:22px;font-size:8px}.stamp b{font-size:23px}
.intro{padding:60px 5%}.cards{gap:12px}.card-body{padding:17px}.card h3{font-size:20px}.tag{font-size:8px}.card-art{height:150px}
}
@media(max-width:550px){
.topline{font-size:8px;letter-spacing:.12em}.hero-copy{padding:48px 6%}.hero-copy p{font-size:16px}.actions{gap:18px}.hero-art{min-height:350px}
.ticker{justify-content:flex-start;gap:16px;padding-left:15px;font-size:10px}.cards{grid-template-columns:1fr;max-width:400px;gap:16px}.card-art{height:190px}.find{align-items:flex-start;flex-direction:column;padding:55px 6%}.find h2{font-size:48px}footer{align-items:flex-start;flex-direction:column}
}
</style>
</head>
<body>
<div class="topline">BIG SEOUL ENERGY <span>✦</span> SERVED CURBSIDE</div>
<header>
<a href="#" class="logo" aria-label="Kimchi Loco home">KIMCHI<br>LOCO<small>KOREAN TACOS</small></a>
<nav aria-label="Main navigation">
<a href="#menu">The menu</a>
<a href="#story">Our story</a>
<a class="nav-cta" href="#find">Find the truck ↗</a>
</nav>
</header>
<main>
<section class="hero" id="story">
<div class="hero-copy">
<div class="eyebrow">Korean soul. Taco spirit.</div>
<h1>LET'S<br>GET <span class="red">A<br>LITTLE</span><br>LOCO.</h1>
<p>Bold Korean flavors, tucked into warm tortillas. Messy hands, happy hearts, and one more bite.</p>
<div class="actions">
<a class="button" href="#find">Find the truck <span>↗</span></a>
<a class="text-link" href="#menu">See the menu</a>
</div>
</div>
<div class="hero-art" aria-label="Illustration of a loaded Korean taco with kimchi and fresh herbs">
<div class="art-grain"></div>
<svg class="art-scene" viewBox="0 0 700 600" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A delicious Korean taco on a plate">
<defs>
<radialGradient id="plate" cx="45%" cy="35%"><stop offset="0" stop-color="#fff9de"/><stop offset=".78" stop-color="#e9dfc2"/><stop offset="1" stop-color="#c5b68f"/></radialGradient>
<linearGradient id="shell" x1="0" y1="0" x2="0.8" y2="1"><stop stop-color="#f8d26a"/><stop offset=".5" stop-color="#eab444"/><stop offset="1" stop-color="#cb8b32"/></linearGradient>
<filter id="shadow"><feGaussianBlur stdDeviation="13"/></filter>
<filter id="foodshadow"><feGaussianBlur stdDeviation="5"/></filter>
<pattern id="dots" width="45" height="40" patternUnits="userSpaceOnUse"><circle cx="9" cy="8" r="2" fill="#b37d32" opacity=".3"/><circle cx="33" cy="26" r="1.5" fill="#fff0b4" opacity=".5"/></pattern>
</defs>
<ellipse cx="356" cy="342" rx="286" ry="205" fill="#754b25" opacity=".28" filter="url(#shadow)"/>
<ellipse cx="350" cy="315" rx="283" ry="204" fill="url(#plate)"/>
<ellipse cx="350" cy="315" rx="248" ry="175" fill="none" stroke="#d6c8a8" stroke-width="2"/>
<g transform="rotate(-13 355 315)">
<ellipse cx="355" cy="339" rx="224" ry="101" fill="#72572f" opacity=".25" filter="url(#foodshadow)"/>
<path d="M127 286 Q150 224 228 215 L470 211 Q548 222 578 286 Q567 385 486 421 Q353 461 220 419 Q145 390 127 286Z" fill="#b7782d"/>
<path d="M128 279 Q164 203 252 214 L476 215 Q549 224 579 280 Q559 372 488 401 Q358 442 222 401 Q149 371 128 279Z" fill="url(#shell)" stroke="#cc913d" stroke-width="3"/>
<path d="M135 276 Q160 220 236 215 L485 215 Q549 227 570 277 Q541 313 493 320 L221 320 Q168 310 135 276Z" fill="#69371f"/>
<path d="M150 278 Q175 233 240 226 L480 225 Q532 232 557 277 Q520 299 486 302 L219 303 Q178 299 150 278Z" fill="#a04a24"/>
<!-- bulgogi -->
<g fill="#713920" stroke="#4e2d1c" stroke-width="3">
<path d="M165 267l26-21 30 4 8 22-21 17-33-4z"/><path d="M217 257l21-25 32 5 8 23-16 20-37 2z"/>
<path d="M264 271l20-26 32 1 13 20-15 22-33 3z"/><path d="M320 254l24-23 30 7 9 25-25 17-31-4z"/>
<path d="M367 274l20-28 31 4 13 21-19 19-35 1z"/><path d="M417 257l25-24 32 9 4 26-22 15-34-4z"/>
<path d="M473 269l22-21 29 7 13 20-18 18-31-3z"/>
</g>
<!-- kimchi folds -->
<g fill="#d8572d" stroke="#a63e25" stroke-width="2">
<path d="M174 260q22-24 46-11l-8 9 25 4-12 13-38-2z"/><path d="M237 251q18-27 43-16l-4 12 23 4-18 16-34-5z"/>
<path d="M302 252q19-24 42-11l-7 10 23 4-13 15-35-4z"/><path d="M379 252q17-22 42-12l-8 13 23 2-17 15-31-5z"/>
<path d="M453 257q21-21 41-8l-8 9 22 5-14 13-31-5z"/>
</g>
<!-- slaw -->
<g fill="none" stroke-linecap="round">
<path d="M180 253l38 25m-24-31l39 20m24-29l39 28m-14-30l41 25m28-20l37 25m-14-29l40 23m32-17l36 25" stroke="#f8e4b3" stroke-width="5"/>
<path d="M188 273l28-25m47 27l29-30m30 31l31-27m27 26l31-26m33 28l30-24" stroke="#b74651" stroke-width="4"/>
<path d="M210 259l28 16m70-27l28 17m72-18l25 18m44-11l27 17" stroke="#f3b876" stroke-width="4"/>
</g>
<!-- cilantro -->
<g fill="#477d39">
<path d="M219 244q-10-19 3-17 3-12 11-3 12-6 10 6 12 5 0 11l-4 13z"/>
<path d="M298 238q-10-17 1-17 4-13 12-4 11-6 10 6 11 4 1 11l-5 14z"/>
<path d="M367 244q-11-18 1-18 5-13 12-4 12-5 10 7 12 4 0 10l-5 13z"/>
<path d="M458 240q-10-18 1-18 4-13 12-4 11-5 10 7 10 4 1 10l-5 13z"/>
<path d="M255 279q-9-15 1-15 3-11 10-3 10-5 9 5 10 4 0 9l-5 11z"/>
<path d="M410 280q-9-15 1-15 3-11 10-3 10-5 9 5 10 4 0 9l-5 11z"/>
</g>
<g fill="#f7e3a7"><ellipse cx="191" cy="265" rx="3" ry="1.5"/><ellipse cx="230" cy="255" rx="3" ry="1.5"/><ellipse cx="276" cy="267" rx="3" ry="1.5"/><ellipse cx="336" cy="258" rx="3" ry="1.5"/><ellipse cx="386" cy="267" rx="3" ry="1.5"/><ellipse cx="443" cy="261" rx="3" ry="1.5"/><ellipse cx="491" cy="273" rx="3" ry="1.5"/></g>
<path d="M134 282 Q169 318 223 323 L489 322 Q543 316 574 282 Q565 371 488 401 Q358 442 222 401 Q148 372 134 282Z" fill="url(#shell)" stroke="#ce943f" stroke-width="2"/>
<path d="M134 282 Q169 318 223 323 L489 322 Q543 316 574 282 Q565 371 488 401 Q358 442 222 401 Q148 372 134 282Z" fill="url(#dots)"/>
<path d="M155 307Q176 367 229 383M218 334q5 23 21 37m31-33q4 20 13 33m132-30q-4 18-14 32m99-46q-9 28-27 42" fill="none" stroke="#b97a2f" stroke-width="4" stroke-linecap="round" opacity=".32"/>
<g fill="#aa712f" opacity=".25"><ellipse cx="186" cy="333" rx="5" ry="2"/><ellipse cx="258" cy="355" rx="7" ry="3"/><ellipse cx="332" cy="377" rx="6" ry="2"/><ellipse cx="387" cy="346" rx="5" ry="2"/><ellipse cx="454" cy="376" rx="6" ry="3"/><ellipse cx="510" cy="327" rx="5" ry="2"/></g>
</g>
<!-- lime -->
<g transform="translate(118 401) rotate(20)"><path d="M0 0A54 54 0 0 1 101 0Z" fill="#427434"/><path d="M7-2A47 47 0 0 1 94-2Z" fill="#c7d976"/><path d="M51-2L50-45M51-2L23-36M51-2L78-37" stroke="#edf1b5" stroke-width="3"/></g>
<g fill="#5f8443"><path d="M553 426q-10-18 2-18 3-13 11-4 12-6 10 6 12 5 0 11l-4 13z"/><path d="M565 446q-10-18 2-18 3-13 11-4 12-6 10 6 12 5 0 11l-4 13z"/></g>
</svg>
<div class="stamp">MADE WITH<b>♥</b>AND SEOUL</div>
<div class="photo-note">THE GOOD KIND OF MESS ↗</div>
</div>
</section>
<div class="ticker" aria-hidden="true"><span>SEOUL FOOD</span><span class="star">✦</span><span>STREET FOOD</span><span class="star">✦</span><span>GOOD MOOD</span><span class="star">✦</span><span>SEOUL FOOD</span><span class="star">✦</span><span>STREET FOOD</span><span class="star">✦</span><span>GOOD MOOD</span></div>
<section class="intro" id="menu">
<div class="eyebrow">A little taste of loco</div>
<h2>THE STREETS ARE HUNGRY.</h2>
<p class="intro-sub">A few of the flavors we're bringing to the party.</p>
<div class="cards">
<article class="card">
<div class="card-art">
<svg viewBox="0 0 360 185" aria-hidden="true"><ellipse cx="180" cy="110" rx="145" ry="64" fill="#efe4c5"/><ellipse cx="180" cy="116" rx="112" ry="39" fill="#b9803a" opacity=".3"/><path d="M65 84q19-28 53-24h125q36 2 52 24-8 45-44 57-68 19-140 0Q75 130 65 84z" fill="#d89a3e"/><path d="M70 84q17-27 50-26h120q34 0 50 26-14 19-48 22H118Q85 103 70 84" fill="#743820"/><path d="M80 82l28-14 20 13 23-16 22 14 25-14 23 14 24-12 29 17" fill="none" stroke="#d95c33" stroke-width="11" stroke-linecap="round"/><path d="M90 82l28 13m20-18l25 15m27-17l22 17m26-17l24 15" stroke="#f5e5b2" stroke-width="4"/><g fill="#59833b"><circle cx="121" cy="76" r="8"/><circle cx="177" cy="77" r="8"/><circle cx="231" cy="76" r="8"/></g><path d="M67 88q25 25 55 25h119q35-1 51-25-11 41-43 51-67 19-136 0Q81 129 67 88" fill="#e9b654"/></svg>
</div>
<div class="card-body"><div class="card-top"><h3>Bulgogi Taco</h3><span class="tag">CROWD FAVORITE</span></div><p>Sweet-savory beef, punchy kimchi slaw, and a little drizzle of magic.</p></div>
</article>
<article class="card">
<div class="card-art">
<svg viewBox="0 0 360 185" aria-hidden="true"><ellipse cx="180" cy="106" rx="132" ry="65" fill="#eee6d0"/><ellipse cx="180" cy="104" rx="110" ry="50" fill="#553a2b"/><ellipse cx="180" cy="96" rx="110" ry="48" fill="#faf1d6"/><path d="M85 94q5-32 46-38l27 41-21 31q-40-1-52-34" fill="#cf6140"/><path d="M151 51q39-13 65 4l-7 45-52-3z" fill="#7eaa5d"/><path d="M220 58q45 6 55 38l-49 9-17-10z" fill="#a95832"/><path d="M119 105l43-8 16 36q-33 6-59-10z" fill="#ddab55"/><path d="M216 100l50-2q-11 28-48 32l-40 3-15-36z" fill="#efe3bc"/><circle cx="186" cy="94" r="26" fill="#fff9e9"/><circle cx="186" cy="94" r="13" fill="#e9a52d"/><g stroke="#f4d9ac" stroke-width="3"><path d="M102 82l24 13m-19-20l24 12m103-9l21 15m-16-20l20 14"/></g><g fill="#5d8c43"><circle cx="142" cy="66" r="5"/><circle cx="223" cy="111" r="5"/><circle cx="139" cy="113" r="5"/></g></svg>
</div>
<div class="card-body"><div class="card-top"><h3>Seoul Bowl</h3><span class="tag">BIG COMFORT</span></div><p>All the good stuff piled high over rice. Colorful, cozy, completely craveable.</p></div>
</article>
<article class="card">
<div class="card-art">
<svg viewBox="0 0 360 185" aria-hidden="true"><ellipse cx="180" cy="113" rx="135" ry="55" fill="#f4e6c6"/><path d="M92 82l16 61q72 24 145 0l15-61z" fill="#c7442d"/><path d="M100 85l7-45 11 3-3 48m10-6 2-53 12 1 3 53m9 2 3-51 11 1 1 53m13-6 4-55 12 1 1 55m11 0 6-51 11 2-2 52m10 0 10-49 11 2-5 49m12 0 10-38 11 3-8 39" fill="#edbb53" stroke="#d6933e" stroke-width="2"/><path d="M92 83q87 20 176 0l-15 60q-72 23-145 0z" fill="#d84c31"/><text x="180" y="121" text-anchor="middle" fill="#f7e8cb" font-family="Arial" font-weight="900" font-size="18" transform="rotate(-3 180 121)">LOCO FRIES</text><path d="M113 53q43 14 64 1t63 1" fill="none" stroke="#f9e5c3" stroke-width="4" stroke-linecap="round"/><g fill="#56813d"><circle cx="135" cy="55" r="3"/><circle cx="188" cy="49" r="3"/><circle cx="223" cy="57" r="3"/></g></svg>
</div>
<div class="card-body"><div class="card-top"><h3>Kimchi Fries</h3><span class="tag">MUST SHARE*</span></div><p>Crispy fries, tangy kimchi, and sauce for days. *Sharing is optional.</p></div>
</article>
</div>
</section>
<section class="find" id="find">
<div><div class="eyebrow">Good food is on the move</div><h2>COME FIND YOUR<br>NEW FAVORITE BITE.</h2><p>Follow along for truck stops, pop-ups, and all the delicious details. We can't wait to feed you.</p></div>
<a href="mailto:hello@kimchiloco.com?subject=Where%20can%20I%20find%20Kimchi%20Loco%3F" class="button">Ask where we'll be <span>↗</span></a>
</section>
</main>
<footer><a href="#" class="logo">KIMCHI<br>LOCO<small>KOREAN TACOS</small></a><span>BIG FLAVOR. GOOD PEOPLE. ALWAYS.</span><span>© KIMCHI LOCO</span></footer>
</body>
</html>