Food truck websiteOne-line
Claude Haiku 4.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 15.8 s
- Cost
- $0.025
- Output tokens
- 4,883
- Spent thinking
- 0 tokens
- Speed
- 327 tok/s
- Console errors
- 0
- First token after
- 845 ms
- First visible text after
- 845 ms
- Prompt tokens
- 382
- Code size
- 16.3 KB
- Finish reason
- stop
- Served by
- Amazon Bedrock
- Model id
anthropic/claude-haiku-4.5- Reasoning sent
{"effort":"none"}- Max output
- 32,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 · 548 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 Tacos</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #ff3d3d 0%, #ff6b00 50%, #ff3d3d 100%);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
color: white;
padding: 100px 20px;
text-align: center;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: floatBg 20s linear infinite;
z-index: 1;
}
@keyframes floatBg {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
}
.logo {
font-size: 72px;
font-weight: 900;
margin-bottom: 10px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.tagline {
font-size: 28px;
margin-bottom: 20px;
font-weight: 300;
letter-spacing: 2px;
}
.subtitle {
font-size: 18px;
opacity: 0.95;
margin-bottom: 30px;
line-height: 1.6;
}
.cta-button {
display: inline-block;
background: white;
color: #ff3d3d;
padding: 16px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: bold;
text-decoration: none;
margin: 0 10px;
transition: all 0.3s ease;
border: 2px solid white;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
background: #ff3d3d;
color: white;
}
/* Menu Section */
.menu {
padding: 80px 20px;
background: #f8f8f8;
}
.section-title {
text-align: center;
font-size: 48px;
color: #ff3d3d;
margin-bottom: 60px;
font-weight: 900;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 100px;
height: 4px;
background: #ff6b00;
margin: 15px auto 0;
border-radius: 2px;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.menu-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
}
.menu-item:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(255,61,61,0.2);
}
.menu-item-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #ff3d3d, #ff6b00);
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
position: relative;
overflow: hidden;
}
.menu-item-image::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.menu-item-content {
padding: 25px;
}
.menu-item-name {
font-size: 22px;
color: #333;
margin-bottom: 10px;
font-weight: bold;
}
.menu-item-description {
font-size: 14px;
color: #666;
margin-bottom: 15px;
line-height: 1.6;
}
.menu-item-price {
font-size: 24px;
color: #ff3d3d;
font-weight: 900;
}
/* Features Section */
.features {
padding: 80px 20px;
background: white;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.feature {
text-align: center;
}
.feature-icon {
font-size: 60px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.feature h3 {
font-size: 22px;
color: #333;
margin-bottom: 10px;
}
.feature p {
color: #666;
line-height: 1.6;
}
/* Location Section */
.location {
padding: 80px 20px;
background: linear-gradient(135deg, #ff3d3d 0%, #ff6b00 100%);
color: white;
text-align: center;
}
.location-content {
max-width: 800px;
margin: 0 auto;
}
.location h2 {
font-size: 48px;
margin-bottom: 30px;
font-weight: 900;
}
.location-info {
font-size: 20px;
margin-bottom: 20px;
line-height: 1.8;
}
.hours {
background: rgba(255,255,255,0.15);
padding: 30px;
border-radius: 15px;
margin-top: 30px;
}
.hours h3 {
font-size: 24px;
margin-bottom: 15px;
}
.hours p {
font-size: 16px;
margin: 8px 0;
}
/* Footer */
footer {
background: #1a1a1a;
color: white;
text-align: center;
padding: 30px 20px;
font-size: 14px;
}
footer p {
margin: 5px 0;
}
.social-icons {
margin: 15px 0;
font-size: 24px;
letter-spacing: 20px;
}
/* Responsive */
@media (max-width: 600px) {
.logo {
font-size: 48px;
}
.tagline {
font-size: 20px;
}
.subtitle {
font-size: 15px;
}
.section-title {
font-size: 32px;
}
.cta-button {
display: block;
margin: 10px 0;
}
.menu-grid {
grid-template-columns: 1fr;
}
}
.spin {
display: inline-block;
animation: spin 20s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="logo">🌶️ KIMCHI LOCO 🌶️</div>
<div class="tagline">KOREAN TACOS THAT WILL BLOW YOUR MIND</div>
<div class="subtitle">
Perfectly seasoned Korean beef, spicy gochujang sauce, crispy kimchi,
and fresh cilantro wrapped in perfectly charred tortillas.
</div>
<button class="cta-button">📍 Find Us Now</button>
<button class="cta-button">🛒 Order Online</button>
</div>
</section>
<!-- Menu Section -->
<section class="menu">
<h2 class="section-title">Our Menu</h2>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item-image">🌮</div>
<div class="menu-item-content">
<div class="menu-item-name">Bulgogi Blaze</div>
<div class="menu-item-description">
Marinated Korean beef with gochujang mayo, kimchi, and sesame seeds
</div>
<div class="menu-item-price">$9.99</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-image">🌶️</div>
<div class="menu-item-content">
<div class="menu-item-name">Spicy Chicken</div>
<div class="menu-item-description">
Crispy fried chicken with sriracha, pickled daikon, and cilantro
</div>
<div class="menu-item-price">$8.99</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-image">🦐</div>
<div class="menu-item-content">
<div class="menu-item-name">Kimchi Shrimp</div>
<div class="menu-item-description">
Garlic butter shrimp with spicy kimchi, scallions, and lime crema
</div>
<div class="menu-item-price">$10.99</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-image">🥒</div>
<div class="menu-item-content">
<div class="menu-item-name">Kimchi Veggie</div>
<div class="menu-item-description">
Roasted mushrooms, pickled vegetables, and crispy kimchi chips
</div>
<div class="menu-item-price">$7.99</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-image">🍲</div>
<div class="menu-item-content">
<div class="menu-item-name">Fusion Bowl</div>
<div class="menu-item-description">
Korean rice, bulgogi, kimchi, egg, gochujang, and crispy onions
</div>
<div class="menu-item-price">$11.99</div>
</div>
</div>
<div class="menu-item">
<div class="menu-item-image">🍷</div>
<div class="menu-item-content">
<div class="menu-item-name">Drinks & Sides</div>
<div class="menu-item-description">
Korean beverages, kimchi fries, and mozzarella corn cheese
</div>
<div class="menu-item-price">$3.99+</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features">
<h2 class="section-title">Why Kimchi Loco?</h2>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">👨🍳</div>
<h3>Authentic Recipes</h3>
<p>Traditional Korean flavors crafted with passion and premium ingredients</p>
</div>
<div class="feature">
<div class="feature-icon">⚡</div>
<h3>Lightning Fast</h3>
<p>Fresh, hot tacos ready in minutes. Perfect for busy food lovers</p>
</div>
<div class="feature">
<div class="feature-icon">🌶️</div>
<h3>Spice Levels</h3>
<p>Customize your heat - from mild to absolutely insane (we dare you!)</p>
</div>
<div class="feature">
<div class="feature-icon">💰</div>
<h3>Amazing Value</h3>
<p>Big portions, bold flavors, prices that won't empty your wallet</p>
</div>
<div class="feature">
<div class="feature-icon">🚚</div>
<h3>Always Moving</h3>
<p>Follow us on social media to find our truck at festivals and events</p>
</div>
<div class="feature">
<div class="feature-icon">❤️</div>
<h3>Made with Love</h3>
<p>Every taco is crafted with care and a whole lot of Korean passion</p>
</div>
</div>
</section>
<!-- Location Section -->
<section class="location">
<div class="location-content">
<h2>Find Us Today</h2>
<div class="location-info">
<strong>📍 Kimchi Loco Food Truck</strong><br>
Currently at Downtown Food Truck Park<br>
123 Main Street, Your City<br><br>
<strong>📱 (555) KIMCHI-1</strong><br>
<strong>✉️ hello@kimchiloco.com</strong>
</div>
<div class="hours">
<h3>Hours of Operation</h3>
<p><strong>Monday - Friday:</strong> 11 AM - 10 PM</p>
<p><strong>Saturday - Sunday:</strong> 12 PM - 11 PM</p>
<p style="margin-top: 15px; opacity: 0.9;">Follow us @KimchiLocoTruck for daily location updates!</p>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="social-icons">🌮 🌶️ 🌮</div>
<p><strong>Kimchi Loco - Korean Tacos That Changed Everything</strong></p>
<p>© 2024 Kimchi Loco. All rights reserved. Eat Local. Stay Spicy. 🔥</p>
</footer>
<script>
// Smooth scroll for buttons
document.querySelectorAll('.cta-button').forEach(button => {
button.addEventListener('click', function() {
const action = this.textContent.trim();
if (action.includes('Find Us')) {
document.querySelector('.location').scrollIntoView({ behavior: 'smooth' });
} else if (action.includes('Order')) {
document.querySelector('.menu').scrollIntoView({ behavior: 'smooth' });
}
});
});
// Add subtle parallax effect
window.addEventListener('scroll', function() {
const hero = document.querySelector('.hero');
const scrollPosition = window.pageYOffset;
hero.style.backgroundPosition = `0% ${scrollPosition * 0.5}px`;
});
// Animate elements on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.menu-item, .feature').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>