Food truck websiteOne-line
GPT-5 Nano
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 47 s
- Cost
- $0.0059
- Output tokens
- 14,810
- Spent thinking
- 9,536 tokens
- Speed
- 141.9 tok/s
- Console errors
- 0
- First token after
- 2.9 s
- First visible text after
- 1 min 10 s
- Prompt tokens
- 360
- Code size
- 16.8 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-5-nano- Reasoning sent
model default- 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 · 520 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 Tacos on the Move</title>
<style>
:root {
--bg: #0b1020;
--bg2: #1a0e2b;
--accent: #ff5a3c;
--lime: #8be44b;
--pink: #ff66c4;
--gold: #ffd166;
--card: #1e1f2a;
--text: #f6f6f6;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--text);
background: radial-gradient(circle at 20% -10%, rgba(255, 173, 120, 0.25), transparent 25%),
radial-gradient(circle at 90% 0%, rgba(0, 200, 150, 0.25), transparent 25%),
linear-gradient(135deg, #0b1220 0%, #0f1220 40%, #1a1a2a 100%);
overflow-x: hidden;
}
/* Floating color-orbs for energy */
.orb {
position: absolute;
width: 40px; height: 40px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, white 0%, rgba(255,255,255,0.6) 25%, rgba(255,255,255,0.0) 60%), linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.0));
filter: blur(0.2px);
animation: float 12s ease-in-out infinite;
pointer-events: none;
opacity: 0.9;
}
@keyframes float {
0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
50% { transform: translateY(-20px) translateX(20px) scale(1.05); opacity: 1; }
100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; }
}
/* Layout */
header {
position: relative;
padding: 20px 28px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
z-index: 1;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand svg { width: 48px; height: 48px; }
.brand-title {
font-weight: 800;
letter-spacing: .5px;
font-size: 28px;
color: #fff;
text-shadow: 0 2px 10px rgba(255, 105, 135, 0.5);
}
nav {
display: flex;
gap: 18px;
align-items: center;
}
nav a {
color: #e9e9ff;
text-decoration: none;
font-weight: 600;
font-size: 14px;
opacity: 0.9;
}
/* Hero */
.hero {
position: relative;
overflow: hidden;
padding: 40px 0 20px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 28px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
align-items: center;
}
.copy .tag {
display: inline-block;
font-weight: 700;
font-size: 12px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,.08);
color: #ffd166;
letter-spacing: .4px;
}
.headline {
font-size: 54px;
line-height: 1.04;
margin: 8px 0 14px;
font-weight: 900;
}
.tagline {
font-size: 20px;
color: #f8f8ff;
opacity: 0.95;
}
.cta-row {
margin-top: 18px;
display: flex;
gap: 12px;
align-items: center;
}
.btn {
padding: 12px 18px;
border-radius: 999px;
border: none;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn.primary {
background: linear-gradient(135deg, #ff6a00, #ff3d00);
color: white;
box-shadow: 0 6px 20px rgba(255, 105, 0, 0.5);
}
.btn.secondary {
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.25);
}
.btn:hover { transform: translateY(-1px); }
.hero-visual {
position: relative;
height: 320px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255, 102, 198, 0.25), rgba(0, 200, 255, 0.25)),
radial-gradient(circle at 60% 20%, rgba(255,255,255,.15), transparent 40%);
display: grid;
place-items: center;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.hero-silhouette {
position: absolute;
bottom: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0) 60%), radial-gradient(circle at 60% 0%, rgba(255,255,255,.15), transparent 40%);
pointer-events: none;
}
/* Floating orbs positions */
.orb.a { top: 8%; left: 8%; animation-duration: 11s; }
.orb.b { top: 18%; left: 60%; animation-duration: 15s; background: #ffa6a6; }
.orb.c { top: 40%; left: 20%; animation-duration: 18s; background: #ffe08a; }
/* Truck scene (demo) */
.scene {
position: relative;
height: 160px;
overflow: hidden;
border-radius: 14px;
margin-top: 6px;
border: 1px solid rgba(255,255,255,.15);
background: rgba(0,0,0,.04);
}
.road {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 70px;
background: linear-gradient(#2a2a2a 0, #1a1a1a 100%);
}
.truck {
position: absolute;
bottom: 12px;
left: -320px;
width: 260px;
height: 90px;
transform: translateX(0);
display: grid;
grid-template-columns: 120px 140px;
align-items: center;
gap: 6px;
animation: drive 18s linear infinite;
animation-play-state: paused;
}
@keyframes drive {
0% { transform: translateX(-320px); }
100% { transform: translateX(110vw); }
}
.truck .body { height: 60px; width: 140px; background: #ff4d2e; border-radius: 6px; position: relative; }
.truck .cab { width: 70px; height: 50px; background: #ffd166; border-radius: 5px; position: relative; left: -2px; top: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.wheel { width: 28px; height: 28px; background: #333; border-radius: 50%; border: 4px solid #000; position: relative; }
.wheel:after { content: ""; position: absolute; left: 6px; top:6px; width: 16px; height:16px; background:#555; border-radius:50%; }
/* Bubble with flavor text */
.bubble {
position: absolute;
top: -14px;
left: 150px;
background: #1b1b1b;
padding: 8px 12px;
border-radius: 14px;
font-weight: 700;
font-size: 12px;
white-space: nowrap;
box-shadow: 0 6px 14px rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.25);
}
.bubble:after {
content: "";
position: absolute;
bottom: -6px; left: 20px;
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #1b1b1b;
}
/* Start overlay */
#startOverlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.68);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
z-index: 1000;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#startPanel {
background: rgba(20, 20, 32, 0.96);
border: 1px solid rgba(255,255,255,.25);
padding: 28px;
border-radius: 16px;
max-width: 720px;
width: 92%;
text-align: center;
}
#startPanel h1 {
margin: 0 0 8px;
font-size: 38px;
letter-spacing: .5px;
}
#startPanel p {
color: #ddd;
margin: 6px 0 18px;
}
#startPanel .hint {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.05);
font-weight: 700;
}
/* Menu section */
section#menu {
padding: 40px 28px;
}
.section-title {
text-align: center;
font-size: 28px;
margin-bottom: 16px;
font-weight: 900;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.card {
background: linear-gradient(#1a1a28, #141522);
border: 1px solid rgba(255,255,255,.15);
border-radius: 12px;
padding: 14px;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card h3 { margin: 0; font-size: 16px; }
.card p { margin: 6px 0 0; font-size: 12px; opacity: .92; }
.tagline { font-size: 14px; color: #ffd6a1; font-weight: 700; }
/* Location & hours card style responsive blocks */
.info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
max-width: 1100px;
margin: 0 auto;
padding: 0 28px 40px;
}
.info .card { height: auto; }
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
.hero-inner { grid-template-columns: 1fr; }
.headline { font-size: 44px; }
.scene { height: 140px; }
}
@media (max-width: 520px) {
.headline { font-size: 40px; }
.grid { grid-template-columns: 1fr; }
#startPanel h1 { font-size: 28px; }
}
</style>
</head>
<body>
<header aria-label="Site header">
<div class="brand" role="img" aria-label="Kimchi Loco logo">
<!-- Simple inline taco+kimchi SVG logo -->
<svg viewBox="0 0 64 64" aria-label="Kimchi Loco icon" width="40" height="40">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop stop-color="#ffd166" offset="0"/>
<stop stop-color="#ff6b6b" offset="1"/>
</linearGradient>
</defs>
<path d="M6 32c0-11 9-18 22-18s22 7 22 18-9 22-22 22-22-11-22-22z" fill="url(#grad)" opacity="0.9"/>
<path d="M22 28c3-2 6-2 9 0s5 6 3 9-6 5-9 3-5-6-3-9 0-2 0-3z" fill="#fff" opacity="0.6"/>
<circle cx="22" cy="28" r="2" fill="#fff"/>
</svg>
<div class="brand-title" aria-label="Kimchi Loco">Kimchi Loco</div>
</div>
<nav aria-label="Main navigation">
<a href="#menu">Menu</a>
<a href="#locations">Locations</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<section class="hero" aria-label="Hero">
<div class="hero-inner">
<div class="copy">
<div class="tag" style="color:#ffd166; display:inline-block; background: rgba(0,0,0,.2); padding:6px 12px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:0.4px;">
New in town
</div>
<h2 class="headline" style="font-family:inherit;">Korean Tacos that make your taste buds dance</h2>
<p class="tag" style="font-size:16px; color:#e8eaff; margin-top:6px;">
Kimchi Loco brings bold, spicy, savory flavors from Seoul to the street—right here, right now.
</p>
<div class="cta-row" aria-label="Primary actions">
<a href="#menu" class="btn primary" style="text-decoration:none;">See our menu</a>
<a href="#locations" class="btn secondary" style="text-decoration:none;">Where to find us</a>
</div>
</div>
<div class="hero-visual" aria-label="Dynamic food truck animation">
<div class="orb a" style="background:#7cf9ff; width:40px; height:40px; opacity:.9;"></div>
<div class="orb b" style="width:40px; height:40px; top:18%; left:58%;"></div>
<div class="orb c" style="width:40px; height:40px; top:40%; left:20%;"></div>
<div class="scene" id="scene" style="width: 100%; max-width: 520px;">
<div class="road" aria-label="Road"></div>
<div class="truck" id="truck" aria-label="Demo truck" style="justify-self:center;">
<div class="bubble" id="flavorBubble" style="display:none;">Kimchi Crunch</div>
<div class="body"></div>
<div class="cab"></div>
<div class="wheel" style="margin-left: -8px;"></div>
<div class="wheel" style="margin-left: 8px;"></div>
</div>
</div>
</div>
</div>
</section>
<section id="menu" aria-label="Menu" style="padding-top:0;">
<div class="section-title" style="font-weight:900; font-size:28px; margin-top:8px;">Popular on the go</div>
<div class="grid" aria-label="Menu grid">
<div class="card">
<div style="font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px;">
🌮 Kimchi Taco
</div>
<p class="tagline" style="margin:0 0 6px;">Crispy shell, tangy kimchi, gochujang magic</p>
</div>
<div class="card">
<div style="font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px;">🥩 Bulgogi Taco</div>
<p style="margin:0" >Savory beef, sesame, green onions, lime kiss</p>
</div>
<div class="card">
<div style="font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px;">🐔 Spicy Chicken Taco</div>
<p style="margin:0">Korean spicy pepper glaze, cool slaw</p>
</div>
<div class="card">
<div style="font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px;">🍟 Kimchi Fries</div>
<p style="margin:0">Crispy shoestring, melted cheese, kimchi crumble</p>
</div>
</div>
</section>
<section id="locations" aria-label="Locations" class="info" style="padding-bottom:30px;">
<div class="card" style="padding:18px;">
<h3 style="margin:0 0 6px;">Where to find us</h3>
<p style="margin:0; color:#ddd;">Downtown pop-up • Food truck row • Weekly rotating spots</p>
</div>
<div class="card" style="padding:18px;">
<h3 style="margin:0 0 6px;">Hours</h3>
<p style="margin:0; color:#ddd;">Mon–Sun 11:00–20:00</p>
</div>
</section>
<section id="about" aria-label="About" class="info" style="padding-bottom:60px;">
<div class="card" style="padding:18px;">
<h3>Why Kimchi Loco?</h3>
<p>We fuse Korea’s fermented tang with bold Mexican street vibes. Fresh ingredients, bold sauces, and sizzling textures—served hot from a friendly truck you can chase down around town.</p>
</div>
<div class="card" style="padding:18px;">
<h3>Our Promise</h3>
<p>Quality, speed, and a smile. We cook with local producers, no MSG, and plenty of love in every wrap.</p>
</div>
</section>
</main>
<!-- Start overlay -->
<div id="startOverlay" role="dialog" aria-label="Click to start demo">
<div id="startPanel">
<h1>Kimchi Loco goes live</h1>
<p>Watch our demo show you what the flavor storm is all about. Click anywhere or press a key to start.</p>
<div class="hint" aria-label="Start hint">
Click or press any key to start
</div>
<div style="margin-top:14px; opacity:.8;">Tip: After starting, try pressing <strong>Enter</strong> to re-fire the demo</div>
</div>
</div>
<script>
(function(){
const overlay = document.getElementById('startOverlay');
const truck = document.getElementById('truck');
const flavorBubble = document.getElementById('flavorBubble');
let started = false;
const flavors = [
"Kimchi Crunch",
"Bulgogi Blaze",
"Gochujang Glow",
"Sesame Sizzle",
"Kimchi Lime Kick",
"Spicy Seoul Fire"
];
let flavorIndex = 0;
let flavorTimer = null;
function startDemo() {
if (started) return;
started = true;
// fade out overlay
overlay.style.transition = 'opacity 0.5s ease';
overlay.style.opacity = '0';
setTimeout(() => overlay.style.display = 'none', 520);
// start truck
truck.style.animationPlayState = 'running';
// show bubble and cycle flavors
flavorBubble.style.display = 'block';
flavorBubble.textContent = flavors[flavorIndex];
flavorTimer = setInterval(() => {
flavorIndex = (flavorIndex + 1) % flavors.length;
flavorBubble.textContent = flavors[flavorIndex];
// quick pulse on change
flavorBubble.style.transform = 'scale(1.04)';
setTimeout(()=> flavorBubble.style.transform = 'scale(1)', 180);
}, 1800);
}
// click to start, also keydown
overlay.addEventListener('click', startDemo);
window.addEventListener('keydown', (e) => {
if (!started) startDemo();
// if already started, allow quick restart
else if (e.key === 'Enter') {
// restart: reset flavor and position
flavorIndex = 0;
flavorBubble.textContent = flavors[flavors.length>0?0:0];
}
});
// prepare initial state
truck.style.animationPlayState = 'paused';
flavorBubble.style.display = 'none';
})();
</script>
</body>
</html>Reasoning trace (9,536 tokens)
**Designing a food truck website** I’m tasked with creating a single code block for a website promoting a Korean taco food truck called "Kimchi Loco." The goal is to make it visually appealing and to entice visitors. I’ll include a self-contained demo that plays automatically, and incorporate a "Click or press a key to start" prompt. While it's primarily for a game, I think I can adapt it into a marketing site with an interactive auto-playing background or slideshow for added flair.**Creating a taco truck demo** The instructions mention that the demo should start in a self-playing mode. I think a "taco truck" theme could work nicely, with animated elements like a pepper or kimchi jar. I'll include a start screen that prompts users to click to begin, and then the "AI" can run a showcase of features, like rotating menu items and a little chef bot driving the taco truck. The page must be self-contained, responsive, and will not use any external assets; I'll rely on inline SVGs, CSS shapes, and gradients.**Designing the taco truck overlay** I need to make sure the page displays a "Click or press a key to start" overlay for the demo. Once users start it, an auto-playing demo will kick off featuring a taco truck animation at the bottom and banners that say "Kimchi Loco" and "Korean Tacos" with dynamic text. I’ll also create a menu section with items like "Kimchi Taco," "Bulgogi Taco," "spicy pork," and "kimchi fries," along with a call-to-action inviting visitors to see location and hours. The initial paint will show visible content, and I’ll keep everything within one code block without using heavy frameworks.**Structuring the website** Let’s outline the HTML structure for the "Kimchi Loco" taco truck website. I’ll start with a container that has a header featuring the logo in a stylized red/green gradient and an SVG icon of a taco with kimchi. The hero section will include a full-width banner with a catchy tagline, like "Korean Taco Fusion That Dances on Your Tongue," set against a gradient background with moving purple, pink, and yellow shapes using CSS animation. I’ll create a menu grid with four items, along with a panel for location and hours. The call-to-action will read "Find us on the street," with a badge indicating hours, and include another CTA for a Google Maps link. I need to ensure there are no external requests as instructed.**Implementing the demo features** I need to ensure the page remains self-contained and adheres to the instruction of not using external files. I can include anchor tags for navigation, like a "See us on map" link that opens in a new tab. I’ll design a start overlay prompting users to click to begin the demo, which will involve an animated taco truck. The demo will feature dynamic menu item highlights with a bubble displaying special flavors. I’ll implement responsive CSS for proper layout across devices while ensuring there are no horizontal scroll bars. I’ll handle keyboard events after the initial click to start a more interactive experience.**Designing the web page** I need to focus on creating a visually appealing web page for the "Kimchi Loco" taco truck. The logo will be an SVG of a taco shell with a kimchi swirl, and the header will include menu options like "Menus," "Locations," and "About." For the hero section, I'll display a catchy tagline alongside a gradient background. The content includes a menu grid displaying items with descriptions and prices, along with social icons. I'll ensure meaningful content is visible right from the start along with the overlay prompt to begin the demo.**Finalizing code structure** I'm considering using CSS for the truck animation with the `transform: translateX()` values, adjusting from -350px to 110vw for movement. To handle smaller screens, I'll implement media queries to fine-tune that initial value. For the "start overlay," I’ll create a large text prompt along with a catchy headline, "Kimchi Loco," and a tagline stating "We are on the move." The menu will feature four card items laid out in a grid, each with an emoji, name, and description. The design will exclusively use system fonts to keep everything self-contained. Now, I’ll wrap it all up in the final HTML code block!**Crafting HTML layout** I'm putting together the HTML code for the project. The structure starts with a basic HTML layout that includes defining document headers, setting up a title, and adding styles with CSS variables for colors and gradients. I’m adding elements for the hero section with a catchy title, tagline, and buttons. The layout also features floating color orbs for a dynamic feel, a truck animation, and a start overlay for user interaction. I'll make sure it's self-contained and uses system fonts only. Let's finalize that code!**Designing the Kimchi Loco site** I'm working on the CSS and HTML for the Kimchi Loco website, focusing on making it look appealing and functional. I've defined styles for hints, menu sections, cards, and responsive design for various screen sizes. A hero section captures attention with a catchy tagline about Korean tacos, and I've set up navigation links. The layout features a vibrant color scheme, rounded cards, and a dynamic food truck animation to enhance user engagement and support a lively culinary brand. Let's make sure it all flows smoothly!