Food truck websiteOne-line
Ministral 3 14B 2512
by Mistralreasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 52.6 s
- Cost
- $0.0014
- Output tokens
- 6,695
- Spent thinking
- 0 tokens
- Speed
- 128.1 tok/s
- Console errors
- 0
- First token after
- 328 ms
- First visible text after
- 328 ms
- Prompt tokens
- 370
- Code size
- 21.4 KB
- Finish reason
- stop
- Served by
- Mistral
- Model id
mistralai/ministral-14b-2512- Reasoning sent
model default- Max output
- 209,715 tokens
- Generated
- Nov 13, 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 · 572 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 on Wheels!</title>
<style>
:root {
--primary: #e63946;
--secondary: #f1c40f;
--dark: #2a2a2a;
--light: #f8f9fa;
--accent: #e9c46a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 20px 0;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="5" fill="rgba(255,255,255,0.1)">Kimchi Loco</text><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.2)"/><circle cx="40" cy="80" r="0.5" fill="rgba(255,255,255,0.2)"/></svg>') repeat;
pointer-events: none;
}
.header-content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2.5rem;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
letter-spacing: 2px;
}
.logo span {
color: var(--secondary);
}
.tagline {
font-size: 1.2rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect width="1200" height="600" fill="%233a3a3a"/><circle cx="200" cy="200" r="150" fill="%23e63946"/><circle cx="500" cy="150" r="120" fill="%23f1c40f"/><circle cx="800" cy="250" r="180" fill="%23e9c46a"/><circle cx="1000" cy="100" r="100" fill="%23e63946"/><circle cx="300" cy="400" r="80" fill="%23f1c40f"/><circle cx="700" cy="450" r="130" fill="%23e9c46a"/><circle cx="1100" cy="300" r="160" fill="%23e63946"/></svg>');
background-size: cover;
background-position: center;
min-height: 60vh;
display: flex;
align-items: center;
color: white;
position: relative;
}
.hero-content {
max-width: 600px;
padding: 0 30px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero h1 .highlight {
color: var(--secondary);
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
.hero p {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
}
.btn {
display: inline-block;
background: var(--secondary);
color: var(--dark);
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: var(--primary);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* Features Section */
.features {
padding: 80px 0;
background-color: white;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--primary), var(--secondary));
}
.section-title p {
color: #666;
max-width: 700px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
}
.feature-icon {
width: 100%;
height: 200px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.feature-content {
padding: 30px;
}
.feature-content h3 {
margin-bottom: 15px;
color: var(--dark);
}
.feature-content p {
color: #666;
line-height: 1.6;
}
/* Menu Preview */
.menu-preview {
padding: 80px 0;
background-color: #f8f9fa;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.menu-item {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.menu-item:hover {
transform: translateY(-5px);
}
.menu-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.menu-item-content {
padding: 20px;
}
.menu-item h3 {
margin-bottom: 10px;
color: var(--primary);
}
.menu-item .price {
font-weight: bold;
color: var(--secondary);
font-size: 1.2rem;
}
/* Location Section */
.location {
padding: 80px 0;
background-color: white;
text-align: center;
}
.location-map {
width: 100%;
max-width: 800px;
height: 400px;
margin: 40px auto;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect width="800" height="400" fill="%23e9ecef"/><circle cx="400" cy="200" r="150" fill="%23e63946" opacity="0.3"/><circle cx="400" cy="200" r="100" fill="%23f1c40f" opacity="0.3"/><circle cx="400" cy="200" r="50" fill="%23e9c46a" opacity="0.3"/><text x="400" y="200" font-size="20" text-anchor="middle" fill="%23333">Food Truck Location</text><rect x="350" y="150" width="100" height="100" fill="white" rx="5"/><rect x="360" y="160" width="80" height="80" fill="%23e63946" rx="4"/><rect x="370" y="170" width="60" height="60" fill="%23f1c40f" rx="3"/><rect x="380" y="180" width="40" height="40" fill="%23e9c46a" rx="2"/></svg>') center/cover;
border-radius: 10px;
}
/* CTA Section */
.cta {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 80px 0;
text-align: center;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Footer */
footer {
background-color: var(--dark);
color: white;
padding: 40px 0;
text-align: center;
}
.social-links {
margin: 20px 0;
}
.social-links a {
color: white;
margin: 0 10px;
font-size: 1.5rem;
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--secondary);
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate {
animation: fadeIn 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.section-title h2 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.menu-grid {
grid-template-columns: 1fr;
}
}
/* Food Truck Animation */
.food-truck {
position: relative;
height: 300px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"><rect x="100" y="150" width="400" height="150" fill="%23e63946" rx="10"/><rect x="120" y="170" width="360" height="110" fill="%23f1c40f" rx="5"/><rect x="140" y="190" width="320" height="80" fill="%23e9c46a" rx="3"/><rect x="160" y="210" width="280" height="40" fill="%232a2a2a" rx="2"/><rect x="180" y="230" width="240" height="20" fill="%23f1c40f" rx="1"/><circle cx="200" cy="180" r="20" fill="white"/><circle cx="220" cy="180" r="20" fill="white"/><circle cx="240" cy="180" r="20" fill="white"/><rect x="300" y="160" width="40" height="60" fill="%233a3a3a" rx="5"/><rect x="310" y="170" width="20" height="40" fill="%23e63946"/><rect x="330" y="170" width="20" height="40" fill="%23f1c40f"/><rect x="350" y="170" width="20" height="40" fill="%23e9c46a"/></svg>') center/cover;
animation: moveTruck 8s linear infinite;
}
@keyframes moveTruck {
0% { background-position: 0 0; }
100% { background-position: -600px 0; }
}
/* Hidden message for demo */
.demo-message {
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(0,0,0,0.8);
color: white;
padding: 10px 15px;
border-radius: 5px;
font-size: 0.9rem;
z-index: 1000;
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">Kimchi <span>Loco</span></div>
<div class="tagline">Korean Tacos on Wheels!</div>
</div>
</header>
<section class="hero">
<div class="container">
<div class="hero-content animate">
<h1>Spicy, <span class="highlight">Flavor-Packed</span><br>Korean Tacos You <span class="highlight">Can't Resist</span></h1>
<p>Fusing the bold flavors of Korea with the fun of tacos, Kimchi Loco brings you a food truck experience like no other!</p>
<a href="#menu" class="btn">See Our Menu</a>
</div>
</div>
</section>
<section class="features">
<div class="container">
<div class="section-title animate">
<h2>Why Kimchi Loco?</h2>
<p>We're not just serving tacos - we're serving an explosion of Korean flavors that will take your taste buds on a wild ride!</p>
</div>
<div class="features-grid">
<div class="feature-card animate delay-1">
<div class="feature-icon">🌶️</div>
<div class="feature-content">
<h3>Authentic Korean Ingredients</h3>
<p>We source the freshest kimchi, gochujang, bulgogi beef, and more to bring you the real deal Korean flavors in every bite.</p>
</div>
</div>
<div class="feature-card animate delay-2">
<div class="feature-icon">🔥</div>
<div class="feature-content">
<h3>Spicy & Bold Flavors</h3>
<p>From mild to fiery, our tacos pack a punch that will leave you craving more. But don't worry, we offer heat levels for every spice lover!</p>
</div>
</div>
<div class="feature-card animate delay-3">
<div class="feature-icon">🚚</div>
<div class="feature-content">
<h3>Food Truck Experience</h3>
<p>Find us at local events, festivals, and near you! Our mobile kitchen brings the party directly to your neighborhood.</p>
</div>
</div>
</div>
</div>
</section>
<section class="menu-preview" id="menu">
<div class="container">
<div class="section-title animate">
<h2>Our Must-Try Tacos</h2>
<p>Each taco is a flavor adventure waiting to happen. Which one will you try first?</p>
</div>
<div class="menu-grid">
<div class="menu-item animate delay-1">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Bulgogi Beef Taco</text></svg>" alt="Bulgogi Beef Taco">
<div class="menu-item-content">
<h3>Bulgogi Beef Taco</h3>
<p>Marinated in sweet soy, garlic, and sesame, our bulgogi beef is slow-cooked to perfection and served on a crispy taco shell with kimchi slaw.</p>
<div class="price">$6.99</div>
</div>
</div>
<div class="menu-item animate delay-2">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Spicy Pork Taco</text></svg>" alt="Spicy Pork Taco">
<div class="menu-item-content">
<h3>Spicy Pork Taco</h3>
<p>Tender pork belly marinated in gochujang and sesame oil, grilled to perfection and topped with pickled radish and scallions.</p>
<div class="price">$7.49</div>
</div>
</div>
<div class="menu-item animate delay-3">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Kimchi Fried Chicken Taco</text></svg>" alt="Kimchi Fried Chicken Taco">
<div class="menu-item-content">
<h3>Kimchi Fried Chicken Taco</h3>
<p>Crispy fried chicken tossed in our signature kimchi marinade, served with a cool cucumber-yogurt sauce and spicy mayo.</p>
<div class="price">$7.99</div>
</div>
</div>
</div>
</div>
</section>
<section class="location">
<div class="container">
<div class="section-title animate">
<h2>Find Us Near You</h2>
<p>Our food truck is always on the move! Check our social media for our daily locations or sign up for text alerts.</p>
</div>
<div class="food-truck animate"></div>
<div style="margin-top: 40px;">
<h3>Follow Us for Updates:</h3>
<div class="social-links">
<a href="#" aria-label="Instagram">📷</a>
<a href="#" aria-label="Facebook">📘</a>
<a href="#" aria-label="Twitter">🐦</a>
<a href="#" aria-label="TikTok">🎵</a>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="container">
<h2>Ready to Spice Up Your Life?</h2>
<p>Come taste the fusion of Korean flavors and Mexican street food culture at Kimchi Loco. Your taste buds will thank you!</p>
<a href="#" class="btn">Find Us Today</a>
</div>
</section>
<footer>
<div class="container">
<div class="logo" style="color: white; margin-bottom: 20px;">Kimchi <span>Loco</span></div>
<p>© 2023 Kimchi Loco. All rights reserved.</p>
<p>Korean Tacos on Wheels!</p>
</div>
</footer>
<div class="demo-message">
Click or press a key to start - This demo shows our Korean Taco Food Truck website!
</div>
<script>
// Animation trigger on scroll
window.addEventListener('scroll', () => {
const elements = document.querySelectorAll('.animate');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.style.animationPlayState = 'running';
}
});
});
// Trigger animations on load for elements already in view
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.animate');
elements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const elementVisible = 150;
if (elementTop < window.innerHeight - elementVisible) {
element.style.animationPlayState = 'running';
}
});
});
// Demo message handling
document.addEventListener('click', () => {
const demoMessage = document.querySelector('.demo-message');
if (demoMessage) {
demoMessage.style.display = 'none';
}
});
document.addEventListener('keydown', () => {
const demoMessage = document.querySelector('.demo-message');
if (demoMessage) {
demoMessage.style.display = 'none';
}
});
// Simple food truck movement simulation
const foodTruck = document.querySelector('.food-truck');
if (foodTruck) {
let position = 0;
const moveTruck = () => {
position = (position + 1) % 600;
foodTruck.style.backgroundPosition = `-${position}px 0`;
requestAnimationFrame(moveTruck);
};
moveTruck();
}
</script>
</body>
</html>