Food truck websiteOne-line
Mistral Small 4
by MistralReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 32.3 s
- Cost
- $0.0041
- Output tokens
- 6,822
- Spent thinking
- 0 tokens
- Speed
- 214.4 tok/s
- Console errors
- 0
- First token after
- 499 ms
- First visible text after
- 499 ms
- Prompt tokens
- 382
- Code size
- 22.9 KB
- Finish reason
- stop
- Served by
- Mistral
- Model id
mistralai/mistral-small-2603- Reasoning sent
model default- Max output
- 209,715 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 · 688 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 Food Truck</title>
<style>
:root {
--kimchi-red: #e63946;
--taco-orange: #f77f00;
--lime-green: #2a9d8f;
--dark-bg: #121212;
--light-text: #f8f8f8;
--shadow: 0 4px 12px rgba(0,0,0,0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1a1a 100%);
color: var(--light-text);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
padding: 20px 0;
position: relative;
z-index: 100;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.logo-icon {
width: 60px;
height: 60px;
background: var(--kimchi-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: var(--shadow);
}
.logo-icon::before {
content: "🌮";
font-size: 30px;
}
.logo-icon::after {
content: "🔥";
position: absolute;
top: -5px;
right: -5px;
font-size: 20px;
color: var(--taco-orange);
}
.logo-text {
font-size: 2.5rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
background: linear-gradient(45deg, var(--kimchi-red), var(--taco-orange));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tagline {
text-align: center;
margin-top: 10px;
font-size: 1.2rem;
color: var(--lime-green);
font-weight: 600;
}
/* Navigation */
nav {
background: rgba(0,0,0,0.7);
backdrop-filter: blur(10px);
border-radius: 50px;
margin: 20px auto;
max-width: 800px;
padding: 15px;
box-shadow: var(--shadow);
}
.nav-links {
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-links a {
color: var(--light-text);
text-decoration: none;
font-weight: 600;
padding: 10px 20px;
border-radius: 30px;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
background: var(--kimchi-red);
transform: translateY(-3px);
}
.nav-links a::after {
content: "🌶️";
margin-left: 8px;
}
/* Hero Section */
.hero {
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800"><defs><pattern id="kimchi" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><rect width="40" height="40" fill="%23e63946"/><rect x="10" y="10" width="20" height="20" fill="%23f77f00"/></pattern></defs><rect width="1280" height="800" fill="url(%23kimchi)" opacity="0.1"/></svg>') repeat;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
background: var(--taco-orange);
color: white;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
border: none;
cursor: pointer;
margin-top: 20px;
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(247, 127, 0, 0.6);
}
.truck-image {
margin-top: 50px;
position: relative;
}
.truck-image img {
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: var(--shadow);
transition: transform 0.5s ease;
}
.truck-image:hover img {
transform: scale(1.02);
}
/* Menu Section */
.menu {
padding: 80px 0;
background: rgba(0,0,0,0.5);
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: var(--lime-green);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.menu-item {
background: rgba(255,255,255,0.1);
border-radius: 20px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
box-shadow: var(--shadow);
border: 1px solid rgba(255,255,255,0.1);
}
.menu-item:hover {
transform: translateY(-10px);
background: rgba(255,255,255,0.15);
}
.menu-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 15px;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.menu-item:hover img {
transform: scale(1.05);
}
.menu-item h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--kimchi-red);
}
.menu-item p {
color: var(--lime-green);
font-weight: 600;
margin-bottom: 15px;
}
.menu-item .description {
color: #ccc;
font-size: 0.9rem;
margin-bottom: 20px;
}
.order-button {
background: var(--taco-orange);
color: white;
border: none;
padding: 10px 25px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.order-button:hover {
background: #ff9f1c;
transform: scale(1.05);
}
/* Location Section */
.location {
padding: 80px 0;
text-align: center;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 600"><rect width="1280" height="600" fill="%231a1a1a"/><circle cx="200" cy="150" r="30" fill="%23e63946" opacity="0.7"/><circle cx="800" cy="300" r="25" fill="%23f77f00" opacity="0.7"/><circle cx="1000" cy="100" r="20" fill="%232a9d8f" opacity="0.7"/></svg>') no-repeat center center;
background-size: cover;
}
.map-container {
height: 400px;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow);
margin: 30px auto;
max-width: 1000px;
}
.map-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #333, #555);
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 1.2rem;
}
.location-info {
margin-top: 30px;
}
.location-info h3 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--lime-green);
}
.location-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
text-align: left;
max-width: 600px;
margin: 0 auto;
}
.location-detail {
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 15px;
border-left: 4px solid var(--kimchi-red);
}
.location-detail h4 {
color: var(--taco-orange);
margin-bottom: 10px;
}
/* Social Section */
.social {
padding: 60px 0;
text-align: center;
}
.social h3 {
font-size: 2rem;
margin-bottom: 30px;
color: var(--lime-green);
}
.social-icons {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.social-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--kimchi-red);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: all 0.3s ease;
box-shadow: var(--shadow);
}
.social-icon:hover {
transform: translateY(-5px);
background: var(--taco-orange);
}
.social-icon.instagram { background: #e1306c; }
.social-icon.twitter { background: #1da1f2; }
.social-icon.facebook { background: #4267B2; }
.social-icon.tiktok { background: #000; }
/* Footer */
footer {
background: rgba(0,0,0,0.8);
padding: 30px 0;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-text {
color: #999;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.logo-text {
font-size: 2rem;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
.nav-links {
flex-direction: column;
gap: 10px;
}
.menu-grid {
grid-template-columns: 1fr;
}
.location-details {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 2rem;
}
.cta-button {
padding: 12px 30px;
font-size: 1rem;
}
.logo-icon {
width: 40px;
height: 40px;
}
.logo-icon::before {
font-size: 20px;
}
}
/* Animations */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 2s infinite;
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<div class="logo-icon"></div>
<h1 class="logo-text">Kimchi Loco</h1>
</div>
<p class="tagline">Spicy Korean Tacos on Wheels!</p>
<nav>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#menu">Menu</a>
<a href="#location">Find Us</a>
<a href="#social">Social</a>
<a href="#contact">Contact</a>
</div>
</nav>
</div>
</header>
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<h1>FLAME-GRILLED KOREAN TACOS</h1>
<p>Experience the perfect fusion of smoky Korean BBQ and crispy Mexican tacos, topped with our signature house-made kimchi. Spicy, savory, and absolutely addictive!</p>
<a href="#menu" class="cta-button pulse">ORDER NOW</a>
<div class="truck-image">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'><rect width='800' height='400' fill='%23333'/><rect x='50' y='200' width='700' height='150' rx='20' fill='%23555'/><rect x='100' y='150' width='100' height='50' rx='10' fill='%23e63946'/><rect x='220' y='150' width='100' height='50' rx='10' fill='%23f77f00'/><rect x='340' y='150' width='100' height='50' rx='10' fill='%232a9d8f'/><rect x='460' y='150' width='100' height='50' rx='10' fill='%23ffcc00'/><rect x='580' y='150' width='100' height='50' rx='10' fill='%23e63946'/><circle cx='150' cy='320' r='30' fill='%23000'/><circle cx='650' cy='320' r='30' fill='%23000'/><text x='400' y='350' text-anchor='middle' fill='white' font-size='20' font-weight='bold'>KIMCHI LOCO FOOD TRUCK</text></svg>" alt="Kimchi Loco Food Truck">
</div>
</div>
</div>
</section>
<section class="menu" id="menu">
<div class="container">
<h2 class="section-title">Our Signature Tacos</h2>
<div class="menu-grid">
<div class="menu-item">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23f77f00'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Bulgogi Beef Taco</text></svg>" alt="Bulgogi Beef Taco">
<h3>Bulgogi Beef</h3>
<p>$12.99</p>
<p class="description">Marinated premium beef grilled to perfection with our signature kimchi slaw</p>
<button class="order-button">Add to Order</button>
</div>
<div class="menu-item">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%232a9d8f'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Spicy Pork Taco</text></svg>" alt="Spicy Pork Taco">
<h3>Spicy Pork (Daeji Bulgogi)</h3>
<p>$11.99</p>
<p class="description">Tender pork belly with gochujang glaze and quick-pickled radish</p>
<button class="order-button">Add to Order</button>
</div>
<div class="menu-item">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23ffcc00'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Kimchi Fried Rice Bowl</text></svg>" alt="Kimchi Fried Rice Bowl">
<h3>Kimchi Fried Rice Bowl</h3>
<p>$9.99</p>
<p class="description">Our famous kimchi fried rice topped with a fried egg and crispy shallots</p>
<button class="order-button">Add to Order</button>
</div>
<div class="menu-item">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23e63946'/><circle cx='100' cy='80' r='15' fill='%23fff'/><circle cx='150' cy='80' r='15' fill='%23fff'/><circle cx='125' cy='120' r='15' fill='%23fff'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Vegan Kimchi Taco</text></svg>" alt="Vegan Kimchi Taco">
<h3>Vegan Kimchi Taco</h3>
<p>$10.99</p>
<p class="description">House-made vegan kimchi with crispy tofu and tangy slaw</p>
<button class="order-button">Add to Order</button>
</div>
</div>
</div>
</section>
<section class="location" id="location">
<div class="container">
<h2 class="section-title">Find Our Truck</h2>
<div class="map-container">
<div class="map-placeholder">
📍 Kimchi Loco Food Truck Location Map
<br><br>
<p style="font-size: 0.9rem;">(Interactive map would display here in a real implementation)</p>
</div>
</div>
<div class="location-info">
<h3>Visit Us Today!</h3>
<div class="location-details">
<div class="location-detail">
<h4>📍 Downtown Location</h4>
<p>123 Spice Street<br>Food Truck Alley<br>Monday-Saturday: 11AM-9PM</p>
</div>
<div class="location-detail">
<h4>📞 Contact</h4>
<p>(555) 123-4567<br>hello@kimchiloco.com</p>
</div>
<div class="location-detail">
<h4>🚚 Special Events</h4>
<p>Book our truck for weddings, parties, and corporate events!<br>Email us for availability.</p>
</div>
</div>
</div>
</div>
</section>
<section class="social" id="social">
<div class="container">
<h2 class="section-title">Follow the Spice!</h2>
<div class="social-icons">
<div class="social-icon instagram">📷</div>
<div class="social-icon twitter">🐦</div>
<div class="social-icon facebook">f</div>
<div class="social-icon tiktok">🎵</div>
</div>
<p style="margin-top: 30px; color: #999;">@KimchiLocoTruck</p>
</div>
</section>
<footer id="contact">
<div class="container">
<p class="footer-text">© 2024 Kimchi Loco Food Truck. All rights reserved. | Made with 🔥 and 🌶️</p>
</div>
</footer>
<script>
// Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add floating animation to truck image
document.querySelector('.truck-image img').classList.add('floating');
// Menu item hover effects
document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('mouseenter', () => {
item.style.transform = 'translateY(-15px)';
});
item.addEventListener('mouseleave', () => {
item.style.transform = 'translateY(0)';
});
});
// Social icon hover effects
document.querySelectorAll('.social-icon').forEach(icon => {
icon.addEventListener('mouseenter', () => {
icon.style.transform = 'translateY(-10px) scale(1.1)';
});
icon.addEventListener('mouseleave', () => {
icon.style.transform = 'translateY(0) scale(1)';
});
});
// CTA button pulse animation
const ctaButton = document.querySelector('.cta-button');
let pulseCount = 0;
setInterval(() => {
ctaButton.style.transform = pulseCount % 2 === 0 ? 'translateY(-8px)' : 'translateY(-5px)';
pulseCount++;
}, 2000);
// Parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const hero = document.querySelector('.hero');
const speed = scrolled * 0.5;
hero.style.transform = `translateY(${speed}px)`;
});
// Mobile menu toggle (for responsive design)
const navLinks = document.querySelector('.nav-links');
const nav = document.querySelector('nav');
// Add mobile menu button if needed
if (window.innerWidth <= 768) {
const mobileMenuBtn = document.createElement('button');
mobileMenuBtn.innerHTML = '☰';
mobileMenuBtn.style.cssText = `
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
display: none;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
`;
nav.prepend(mobileMenuBtn);
mobileMenuBtn.style.display = 'block';
mobileMenuBtn.addEventListener('click', () => {
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
navLinks.style.flexDirection = 'column';
navLinks.style.position = 'absolute';
navLinks.style.top = '100%';
navLinks.style.left = '0';
navLinks.style.width = '100%';
navLinks.style.background = 'rgba(0,0,0,0.9)';
navLinks.style.padding = '20px 0';
});
}
</script>
</body>
</html>