Food truck websiteOne-line
Nemotron 3.5 Lightning (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 21 s
- Cost
- $0
- Output tokens
- 5,551
- Spent thinking
- 0 tokens
- Speed
- 68.5 tok/s
- Console errors
- 0
- First token after
- 276 ms
- First visible text after
- 276 ms
- Prompt tokens
- 381
- Code size
- 17.9 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3.5-lightning:free- Reasoning sent
{"effort":"none"}- Max output
- 32,000 tokens
- Generated
- Nov 9, 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 · 698 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 Taco Food Truck</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #4a2c6a);
min-height: 100vh;
color: #fff;
overflow-x: hidden;
}
/* Background animated gradient */
.bg-gradient {
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at 20% 20%, rgba(255, 105, 180, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(0, 200, 255, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(255, 69, 0, 0.2) 0%, transparent 40%),
linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #4a2c6a 100%);
z-index: -1;
}
.noise-overlay {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
z-index: -1;
}
/* Neon glow effect */
.neon-text {
text-shadow: 0 0 10px rgba(255, 105, 180, 0.8), 0 0 20px rgba(0, 200, 255, 0.8);
}
.neon-text-secondary {
text-shadow: 0 0 8px rgba(255, 69, 0, 0.7), 0 0 15px rgba(255, 140, 0, 0.5);
}
/* Floating orbs */
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.6;
animation: float 20s ease-in-out infinite;
}
.orb-1 {
width: 300px;
height: 300px;
background: #ff69b4;
top: -100px;
left: -100px;
animation-delay: 0s;
}
.orb-2 {
width: 200px;
height: 200px;
background: #00c8ff;
bottom: -50px;
right: -50px;
animation-delay: -7s;
}
.orb-3 {
width: 150px;
height: 150px;
background: #ff4500;
top: 50%;
left: 50%;
animation-delay: -14s;
transform: translate(-50%, -50%);
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -30px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
}
/* Header */
header {
padding: 2rem;
text-align: center;
position: relative;
}
.logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ff69b4, #ff4500);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
position: relative;
overflow: hidden;
}
.logo::before {
content: 'K';
font-size: 2rem;
font-weight: bold;
color: white;
}
.logo::after {
content: 'TC';
font-size: 1.5rem;
color: white;
position: absolute;
bottom: 5px;
}
h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.5rem;
letter-spacing: 4px;
}
.slogan {
font-size: 1.2rem;
color: #ffd700;
margin-bottom: 1rem;
}
.cuisine {
color: #ff69b4;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Nav */
nav {
position: relative;
margin-top: 1rem;
}
nav a {
color: #ffd700;
text-decoration: none;
margin: 0 15px;
font-weight: 500;
font-size: 0.9rem;
transition: 0.3s;
position: relative;
}
nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: #ff69b4;
transition: width 0.3s;
}
nav a:hover {
color: #fff;
}
nav a:hover::after {
width: 100%;
}
/* Main content */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
/* Intro section */
.intro {
text-align: center;
padding: 3rem 0;
}
.intro p {
font-size: 1.2rem;
color: #ffd700;
margin-top: 1rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Menu section */
.menu-section {
padding: 4rem 0;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #ff69b4, #ff4500);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-title p {
color: #ffd700;
font-size: 1.1rem;
}
/* Menu cards */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.menu-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
border: 1px solid rgba(255, 105, 180, 0.2);
transition: 0.3s;
position: relative;
overflow: hidden;
}
.menu-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #ff69b4, #ff4500, #00c8ff);
opacity: 0;
transition: 0.3s;
}
.menu-card:hover {
border-color: #ff69b4;
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.menu-card:hover::before {
opacity: 1;
}
.menu-card h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #ffd700;
}
.menu-card .price {
color: #ff69b4;
font-weight: bold;
margin-bottom: 1rem;
display: inline-block;
}
.menu-card .desc {
color: #ccc;
font-size: 0.85rem;
line-height: 1.4;
}
/* Specials badge */
.special-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: #ff69b4;
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
}
/* CTA section */
.cta {
text-align: center;
padding: 5rem 0;
position: relative;
}
.cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 105, 180, 0.15) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(0, 200, 255, 0.15) 0%, transparent 50%);
z-index: -1;
}
.cta-btn {
display: inline-block;
background: linear-gradient(135deg, #ff69b4, #ff4500);
color: white;
padding: 1.2rem 3rem;
font-size: 1.3rem;
font-weight: bold;
text-decoration: none;
border-radius: 50px;
margin-top: 1rem;
border: none;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 10px 30px rgba(255, 105, 180, 0.4);
}
.cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 105, 180, 0.5);
}
/* Location section */
.location {
padding: 4rem 0;
}
.location-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.location-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 1.5rem;
border: 1px solid rgba(255, 105, 180, 0.2);
transition: 0.3s;
}
.location-card:hover {
border-color: #00c8ff;
transform: translateY(-5px);
}
.location-icon {
width: 50px;
height: 50px;
background: #ff69b4;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.location-icon i {
color: white;
font-size: 1.5rem;
}
/* Footer */
footer {
text-align: center;
padding: 3rem;
color: #666;
font-size: 0.85rem;
}
/* Mobile menu toggle */
.menu-toggle {
display: none;
font-size: 1.5rem;
color: #ffd700;
cursor: pointer;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.orb {
animation: none;
}
.menu-card:hover {
transform: none;
}
}
</style>
</head>
<body>
<div class="bg-gradient">
<div class="noise-overlay"></div>
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<header>
<div class="logo"></div>
<h1 class="neon-text">Kimchi Loco</h1>
<div class="slogan">Korean Tacos That <span class="neon-text-secondary">Loco</span> Your World!</div>
<div class="cuisine">Authentic Korean-Mexican Fusion</div>
<nav>
<a href="#menu">Menu</a>
<a href="#location">Location</a>
<a href="#about">About</a>
</nav>
<div class="menu-toggle" aria-label="Menu">☰</div>
</header>
<main class="container">
<!-- Intro Section -->
<section class="intro">
<p>Taste the fusion of spicy kimchi, tender bulgogi, and fresh tortillas. Every bite is a flavor explosion!</p>
</section>
<!-- Menu Section -->
<section class="menu-section" id="menu">
<div class="section-title">
<h2>Our Fusion Flavors</h2>
<p>Signature Korean Tacos & Bowls</p>
</div>
<div class="menu-grid">
<article class="menu-card">
<span class="special-badge">NEW</span>
<h3>Kimchi Bulgogi Taco</h3>
<div class="price">$8.50</div>
<p class="desc">Marinated bulgogi, spicy kimchi, fresh cilantro, and sesame aioli on a corn tortilla.</p>
</article>
<article class="menu-card">
<h3>Spicy Pork Taco</h3>
<div class="price">$7.75</div>
<p class="desc">Gochujang-marinated pork with pickled radish, cilantro, and lime crema.</p>
</article>
<article class="menu-card">
<h3>Bulgogi Bowl</h3>
<div class="price">$12.00</div>
<p class="desc">Rice bowl with bulgogi, kimchi, fried egg, avocado, and gochujang drizzle.</p>
</article>
<article class="menu-card">
<span class="special-badge">Chef's Choice</span>
<h3>Kimchi Quesadilla</h3>
<div class="price">$9.25</div>
<p class="desc">Melted cheese with kimchi and bulgogi, served with spicy mayo dip.</p>
</article>
<article class="menu-card">
<h3>Tteokbokki Taco</h3>
<div class="price">$8.00</div>
<p class="desc">Spicy rice cakes, ground pork, scallions, and sweet chili sauce in a tortilla.</p>
</article>
<article class="menu-card">
<h3>Korean Fried Chicken Sandwich</h3>
<div class="price">$11.50</div>
<p class="desc">Double-fried chicken with gochujang glaze, slaw, and brioche bun.</p>
</article>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<h2>Come Hungry, Leave Happy!</h2>
<a href="#location" class="cta-btn">Find Us</a>
</section>
<!-- Location Section -->
<section class="location" id="location">
<div class="section-title">
<h2>Find Us</h2>
<p>Your nearest Kimchi Loco food truck</p>
</div>
<div class="location-grid">
<div class="location-card">
<div class="location-icon"><i class="fas fa-truck"></i></div>
<h4>Downtown Food Truck Park</h4>
<p>Monday - Friday, 11 AM - 8 PM</p>
</div>
<div class="location-card">
<div class="location-icon"><i class="fas fa-map-marker-alt"></i></div>
<h4>Westside Saturday Market</h4>
<p>Saturday & Sunday, 10 AM - 4 PM</p>
</div>
<div class="location-card">
<div class="location-icon"><i class="fas fa-star"></i></div>
<h4>Special Events</h4>
<p>Check social media for pop-up locations</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2024 Kimchi Loco. All rights reserved.</p>
<p>Made with love in Los Angeles</p>
</footer>
<script>
// Initialize all tooltips and interactions
document.addEventListener('DOMContentLoaded', function() {
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Mobile menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav');
if (menuToggle) {
menuToggle.addEventListener('click', function() {
nav.classList.toggle('active');
});
}
// Header scroll effect
let lastScroll = 0;
const header = document.querySelector('header');
window.addEventListener('scroll', function() {
const currentScroll = window.pageYOffset;
if (currentScroll > lastScroll && currentScroll > 100) {
header.style.transform = 'translateY(-100%)';
} else {
header.style.transform = 'translateY(0)';
}
lastScroll = currentScroll;
}, { passive: true });
// Counter animation for prices
function animateCounter(element, endValue) {
const startValue = 0;
const duration = 1000;
const startTime = performance.now();
function updateCounter(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
// Easing function
const easeOut = 1 - Math.pow(1 - progress, 3);
const currentValue = startValue + (endValue - startValue) * easeOut;
element.textContent = '$' + currentValue.toFixed(2);
if (progress < 1) {
requestAnimationFrame(updateCounter);
}
}
requestAnimationFrame(updateCounter);
}
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.target.classList.contains('menu-card')) {
const price = entry.target.querySelector('.price');
if (price) {
const value = parseFloat(price.textContent.replace('$', ''));
animateCounter(price, value);
}
}
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe all menu cards
document.querySelectorAll('.menu-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(card);
});
// Parallax effect for background orbs
function parallaxEffect() {
const orbs = document.querySelectorAll('.orb');
const mouseX = (event.clientX / window.innerWidth) * 100;
const mouseY = (event.clientY / window.innerHeight) * 100;
orbs.forEach((orb, index) => {
const speed = (index + 1) * 20;
orb.style.transform = `translate(${mouseX / speed}px, ${mouseY / speed}px)`;
});
}
window.addEventListener('mousemove', parallaxEffect);
// CTA button ripple effect
const ctaBtn = document.querySelector('.cta-btn');
if (ctaBtn) {
ctaBtn.addEventListener('click', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement('span');
ripple.style.cssText = `
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: scale(0);
animation: ripple 0.6s ease-out forwards;
left: ${x}px;
top: ${y}px;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
`;
this.style.position = 'relative';
this.style.overflow = 'hidden';
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
}
// Define keyframes for ripple animation
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
opacity: 0;
transform: scale(4);
}
}
`;
document.head.appendChild(style);
// Focus visible states for accessibility
document.querySelectorAll('a, button').forEach(element => {
element.style.outline = 'none';
element.style.transition = 'outline 0.2s';
element.addEventListener('focus', function() {
this.style.outline = '2px solid #ff69b4';
this.style.outlineOffset = '2px';
});
element.addEventListener('blur', function() {
this.style.outline = 'none';
});
});
});
</script>
</body>
</html>