Food truck websiteOne-line
Nemotron 3 Ultra (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 21 s
- Cost
- $0
- Output tokens
- 12,498
- Spent thinking
- 139 tokens
- Speed
- 89 tok/s
- Console errors
- 0
- First token after
- 565 ms
- First visible text after
- 2.9 s
- Prompt tokens
- 381
- Code size
- 35.6 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3-ultra-550b-a55b:free- Reasoning sent
{"effort":"high"}- 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 · 934 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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;700&family=Permanent+Marker&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0d0d0d;
--fg: #fafafa;
--muted: #a0a0a0;
--accent: #e84d2e;
--accent-2: #ffb700;
--accent-3: #00c896;
--card: #1a1a1a;
--border: #333;
--glow: rgba(232, 77, 46, 0.4);
--glow-2: rgba(255, 183, 0, 0.4);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--bg);
color: var(--fg);
overflow-x: hidden;
line-height: 1.6;
}
.font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
.font-hand { font-family: 'Permanent Marker', cursive; }
/* Background atmosphere */
.atmosphere {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232, 77, 46, 0.15) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255, 183, 0, 0.12) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 200, 150, 0.06) 0%, transparent 70%),
var(--bg);
}
.atmosphere::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03;
pointer-events: none;
}
/* Floating particles */
.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.particle {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
opacity: 0;
animation: floatUp 8s infinite ease-in;
}
.particle:nth-child(odd) { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.particle:nth-child(even) { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
@keyframes floatUp {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.3; }
100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}
/* Header / Hero */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem 1rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(232, 77, 46, 0.08) 0%, transparent 70%);
pointer-events: none;
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: linear-gradient(135deg, rgba(232, 77, 46, 0.2), rgba(255, 183, 0, 0.15));
border: 1px solid rgba(232, 77, 46, 0.4);
border-radius: 100px;
font-size: 0.85rem;
font-weight: 500;
color: var(--accent-2);
margin-bottom: 1.5rem;
animation: slideUp 0.8s ease-out;
backdrop-filter: blur(10px);
}
.badge .dot {
width: 8px;
height: 8px;
background: var(--accent-3);
border-radius: 50%;
animation: blink 1.5s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero h1 {
font-size: clamp(3rem, 12vw, 8rem);
line-height: 1;
font-weight: 400;
margin-bottom: 0.5rem;
animation: slideUp 0.8s ease-out 0.1s both;
background: linear-gradient(135deg, #fff 0%, var(--accent) 40%, var(--accent-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 60px rgba(232, 77, 46, 0.3);
}
.hero h1 span { display: block; }
.hero .sub {
font-family: 'Permanent Marker', cursive;
font-size: clamp(1.25rem, 3vw, 2rem);
color: var(--accent-2);
margin-bottom: 1rem;
animation: slideUp 0.8s ease-out 0.2s both;
text-shadow: 0 0 30px rgba(255, 183, 0, 0.3);
}
.hero .tagline {
font-size: clamp(1rem, 2.5vw, 1.4rem);
color: var(--muted);
max-width: 600px;
margin-bottom: 2.5rem;
animation: slideUp 0.8s ease-out 0.3s both;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.cta-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; animation: slideUp 0.8s ease-out 0.4s both; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 100px;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.1em;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1));
transform: translateX(-100%);
transition: transform 0.4s ease;
}
.btn:hover::before { transform: translateX(100%); }
.btn-primary {
background: linear-gradient(135deg, var(--accent), #c73d1f);
color: #fff;
box-shadow: 0 4px 24px var(--glow);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px var(--glow); }
.btn-secondary {
background: transparent;
color: var(--fg);
border: 2px solid var(--border);
}
.btn-secondary:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-3px); }
.scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: var(--muted);
font-size: 0.85rem;
animation: slideUp 0.8s ease-out 0.8s both, bounce 2s ease-in-out 1.5s infinite;
}
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
/* Sections */
section { padding: 6rem 1.5rem; position: relative; }
.container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-label {
font-family: 'Permanent Marker', cursive;
color: var(--accent-2);
font-size: 1.25rem;
margin-bottom: 0.5rem;
display: block;
}
.section-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 400;
line-height: 1.1;
}
.section-title em { font-style: normal; color: var(--accent); }
/* Menu */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.menu-card {
background: linear-gradient(145deg, var(--card), #141414);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2rem;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
}
.menu-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.menu-card:hover {
transform: translateY(-8px);
border-color: var(--accent);
box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--accent);
}
.menu-card:hover::before { transform: scaleX(1); }
.menu-card.featured {
border-color: var(--accent-2);
background: linear-gradient(145deg, rgba(255, 183, 0, 0.05), var(--card));
}
.menu-card.featured::before { background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform: scaleX(1); }
.menu-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
border-radius: 100px;
margin-bottom: 1rem;
text-transform: uppercase;
}
.badge-spicy { background: rgba(232, 77, 46, 0.2); color: var(--accent); border: 1px solid var(--accent); }
.badge-new { background: rgba(0, 200, 150, 0.2); color: var(--accent-3); border: 1px solid var(--accent-3); }
.badge-fave { background: rgba(255, 183, 0, 0.2); color: var(--accent-2); border: 1px solid var(--accent-2); }
.menu-card h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.75rem;
letter-spacing: 0.03em;
margin-bottom: 0.5rem;
}
.menu-card .desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.7; }
.menu-card .ingredients { font-size: 0.85rem; color: #666; font-style: italic; margin-bottom: 1.25rem; }
.menu-footer { display: flex; justify-content: space-between; align-items: center; }
.price { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--accent-2); }
.heat-meter { display: flex; gap: 3px; }
.heat-meter span {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--border);
transition: all 0.2s ease;
}
.heat-meter span.lit { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* Truck Info */
.truck-section { background: linear-gradient(180deg, transparent, rgba(232, 77, 46, 0.03), transparent); }
.truck-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.truck-visual {
position: relative;
aspect-ratio: 4/3;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
border: 1px solid var(--border);
}
.truck-svg { width: 100%; height: 100%; }
.truck-info h2 { margin-bottom: 1.5rem; }
.info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 1.5rem;
transition: all 0.3s ease;
}
.info-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.info-icon {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.icon-red { background: rgba(232, 77, 46, 0.15); color: var(--accent); }
.icon-gold { background: rgba(255, 183, 0, 0.15); color: var(--accent-2); }
.icon-green { background: rgba(0, 200, 150, 0.15); color: var(--accent-3); }
.icon-purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.info-card h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.info-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.schedule { margin-top: 2rem; }
.schedule h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin-bottom: 1rem; }
.schedule-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
.schedule-item:last-child { border-bottom: none; }
.schedule-day { color: var(--muted); }
.schedule-loc { color: var(--fg); font-weight: 500; }
/* Reviews / Social Proof */
.reviews-section { background: linear-gradient(180deg, transparent, rgba(255, 183, 0, 0.03), transparent); }
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.review-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 2rem;
position: relative;
transition: all 0.3s ease;
}
.review-card:hover { border-color: var(--accent-2); transform: translateY(-4px); }
.stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.stars svg { width: 20px; height: 20px; fill: var(--accent-2); }
.review-text { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; }
.review-author { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.05em;
}
.author-name { font-weight: 600; }
.author-handle { color: var(--muted); font-size: 0.85rem; }
/* CTA Section */
.cta-section {
text-align: center;
background: linear-gradient(180deg, transparent, rgba(232, 77, 46, 0.05), transparent);
}
.cta-card {
max-width: 700px;
margin: 0 auto;
padding: 4rem 2rem;
background: linear-gradient(145deg, rgba(232, 77, 46, 0.1), rgba(255, 183, 0, 0.05));
border: 1px solid rgba(232, 77, 46, 0.3);
border-radius: 32px;
position: relative;
overflow: hidden;
}
.cta-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(232, 77, 46, 0.1), transparent 30%);
animation: rotate 8s linear infinite;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { margin-bottom: 1rem; }
.cta-card p { color: var(--muted); margin-bottom: 2rem; font-size: 1.1rem; }
/* Footer */
footer {
padding: 3rem 1.5rem;
border-top: 1px solid var(--border);
text-align: center;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto 2rem;
text-align: left;
}
.footer-col h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; margin-bottom: 1rem; color: var(--accent-2); }
.footer-col p, .footer-col a { color: var(--muted); font-size: 0.9rem; line-height: 1.8; text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }
.social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--card);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition: all 0.3s;
}
.social-links a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.copyright { color: #444; font-size: 0.85rem; }
/* Animations on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* Mobile adjustments */
@media (max-width: 768px) {
.truck-grid { grid-template-columns: 1fr; gap: 2rem; }
.info-cards { grid-template-columns: 1fr; }
.hero { min-height: auto; padding: 4rem 1rem; }
section { padding: 4rem 1rem; }
.cta-card { padding: 2.5rem 1.5rem; }
}
@media (max-width: 480px) {
.btn { padding: 0.875rem 1.5rem; font-size: 1rem; }
.menu-card { padding: 1.5rem; }
}
</style>
</head>
<body>
<div class="atmosphere"></div>
<div class="particles" id="particles"></div>
<!-- Hero -->
<header class="hero">
<div class="badge">
<span class="dot"></span>
NOW SERVING IN LOS ANGELES
</div>
<h1 class="font-display">
<span>KIMCHI</span>
<span>LOCO</span>
</h1>
<p class="sub font-hand">KOREAN TACOS • MEXICAN SOUL</p>
<p class="tagline">Where gochujang meets carnitas. Where kimchi meets queso. The fusion you didn't know you needed — until right now.</p>
<div class="cta-group">
<a href="#menu" class="btn btn-primary">FIND THE TRUCK</a>
<a href="#menu" class="btn btn-secondary">PEEK THE MENU</a>
</div>
<div class="scroll-hint">
SCROLL DOWN
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity: 0.5;">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
</header>
<!-- Menu -->
<section id="menu" class="reveal">
<div class="container">
<div class="section-header">
<span class="section-label">WHAT'S COOKIN'</span>
<h2 class="section-title font-display">The <em>Menu</em></h2>
</div>
<div class="menu-grid" id="menuGrid"></div>
</div>
</section>
<!-- Truck Info -->
<section class="truck-section reveal">
<div class="container">
<div class="truck-grid">
<div class="truck-visual">
<svg class="truck-svg" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="truckBody" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#e84d2e"/>
<stop offset="100%" stop-color="#c73d1f"/>
</linearGradient>
<linearGradient id="truckAccent" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffb700"/>
<stop offset="100%" stop-color="#e84d2e"/>
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Truck body -->
<rect x="40" y="120" width="320" height="100" rx="8" fill="url(#truckBody)" filter="url(#glow)"/>
<rect x="40" y="120" width="320" height="100" rx="8" fill="none" stroke="url(#truckAccent)" stroke-width="2"/>
<!-- Cab -->
<path d="M40 120 L80 80 L180 80 L180 120 Z" fill="url(#truckBody)" stroke="url(#truckAccent)" stroke-width="2"/>
<!-- Windows -->
<rect x="55" y="88" width="50" height="45" rx="3" fill="#0d0d0d" opacity="0.8"/>
<rect x="115" y="88" width="55" height="45" rx="3" fill="#0d0d0d" opacity="0.8"/>
<!-- Wheels -->
<circle cx="100" cy="230" r="28" fill="#0a0a0a" stroke="#333" stroke-width="3"/>
<circle cx="100" cy="230" r="18" fill="#1a1a1a" stroke="#e84d2e" stroke-width="1" opacity="0.5"/>
<circle cx="300" cy="230" r="28" fill="#0a0a0a" stroke="#333" stroke-width="3"/>
<circle cx="300" cy="230" r="18" fill="#1a1a1a" stroke="#e84d2e" stroke-width="1" opacity="0.5"/>
<!-- Serving window -->
<rect x="200" y="130" width="140" height="70" rx="4" fill="#0d0d0d" opacity="0.9"/>
<rect x="200" y="130" width="140" height="70" rx="4" fill="none" stroke="#ffb700" stroke-width="2" stroke-dasharray="8 4"/>
<!-- Kimchi Loco text on truck -->
<text x="200" y="100" font-family="Bebas Neue, sans-serif" font-size="24" fill="#ffb700" text-anchor="middle" letter-spacing="2">KIMCHI LOCO</text>
<!-- Exhaust puffs -->
<circle cx="35" cy="100" r="8" fill="#e84d2e" opacity="0.3">
<animate attributeName="r" values="5;12;5" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;0;0.4" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="25" cy="90" r="6" fill="#ffb700" opacity="0.2">
<animate attributeName="r" values="3;10;3" dur="2s" repeatCount="indefinite" begin="0.5s"/>
<animate attributeName="opacity" values="0.3;0;0.3" dur="2s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<!-- Taco decorations -->
<g transform="translate(60, 200)">
<path d="M0 0 Q10 -15 20 0 Q15 10 10 15 Q5 10 0 0" fill="#ffb700" opacity="0.3">
<animateTransform attributeName="transform" type="translate" values="60,200; 55,195; 60,200" dur="3s" repeatCount="indefinite"/>
</path>
</g>
<g transform="translate(340, 195)">
<path d="M0 0 Q10 -15 20 0 Q15 10 10 15 Q5 10 0 0" fill="#e84d2e" opacity="0.3">
<animateTransform attributeName="transform" type="translate" values="340,195; 345,190; 340,195" dur="3s" repeatCount="indefinite" begin="1s"/>
</path>
</g>
</svg>
</div>
<div class="truck-info">
<h2 class="section-title font-display" style="text-align: left; font-size: clamp(2rem, 5vw, 3rem);">Find <em>Us</em></h2>
<div class="info-cards">
<div class="info-card">
<div class="info-icon icon-red">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<h4>TRACK THE TRUCK</h4>
<p>Real-time location on IG Stories & Twitter. We move daily — catch us if you can.</p>
</div>
<div class="info-card">
<div class="info-icon icon-gold">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<h4>LUNCH & LATE NIGHT</h4>
<p>11AM–3PM & 8PM–2AM. Different vibes, same heat. Late night = extra spicy.</p>
</div>
<div class="info-card">
<div class="info-icon icon-green">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h4>CATERING AVAILABLE</h4>
<p>Private events, weddings, corporate. We bring the fiesta to you. DM for quotes.</p>
</div>
<div class="info-card">
<div class="info-icon icon-purple">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<h4>VEGAN FRIENDLY</h4>
<p>Plant-based proteins, vegan crema, corn tortillas. Nobody misses out on the flavor.</p>
</div>
</div>
<div class="schedule">
<h4>THIS WEEK'S SPOTS</h4>
<div class="schedule-item"><span class="schedule-day">MON</span><span class="schedule-loc">Arts District • 6th & Mateo</span></div>
<div class="schedule-item"><span class="schedule-day">TUE</span><span class="schedule-loc">K-Town • Wilshire & Western</span></div>
<div class="schedule-item"><span class="schedule-day">WED</span><span class="schedule-loc">Santa Monica • 3rd St Promenade</span></div>
<div class="schedule-item"><span class="schedule-day">THU</span><span class="schedule-loc">Highland Park • York & Ave 50</span></div>
<div class="schedule-item"><span class="schedule-day">FRI</span><span class="schedule-loc">Downtown • Grand Central Market</span></div>
<div class="schedule-item"><span class="schedule-day">SAT</span><span class="schedule-loc">Venice • Abbot Kinney</span></div>
<div class="schedule-item"><span class="schedule-day">SUN</span><span class="schedule-loc">Pop-up location (check IG!)</span></div>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews -->
<section class="reviews-section reveal">
<div class="container">
<div class="section-header">
<span class="section-label">WHAT PEOPLE SAY</span>
<h2 class="section-title font-display">Real <em>Ones</em> Know</h2>
</div>
<div class="reviews-grid" id="reviewsGrid"></div>
</div>
</section>
<!-- CTA -->
<section class="cta-section reveal">
<div class="container">
<div class="cta-card">
<h2 class="section-title font-display" style="font-size: clamp(2rem, 5vw, 3rem);">Ready to Get <em>Loco</em>?</h2>
<p>Follow the truck. Smell the grill. Taste the fusion. Your new obsession is one bite away.</p>
<div class="cta-group">
<a href="https://instagram.com" target="_blank" rel="noopener" class="btn btn-primary">FOLLOW @KIMCHILOCO</a>
<a href="#menu" class="btn btn-secondary">SEE TODAY'S SPECIALS</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-grid">
<div class="footer-col">
<h4 class="font-display">KIMCHI LOCO</h4>
<p>Korean-Mexican fusion food truck serving LA since 2023. Made with love, gochujan, and a little bit of chaos.</p>
<div class="social-links">
<a href="#" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
<a href="#" aria-label="Twitter"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
<a href="#" aria-label="TikTok"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10Z"/><path d="M10 15v-3"/><path d="M14 15v-5"/><path d="M18 15v-1"/></svg></a>
</div>
</div>
<div class="footer-col">
<h4 class="font-display">HOURS</h4>
<p>Lunch: 11AM – 3PM<br>Late Night: 8PM – 2AM<br>7 Days a Week</p>
</div>
<div class="footer-col">
<h4 class="font-display">CONTACT</h4>
<p>DM us @kimchiloco<br>catering@kimchiloco.la<br>Text: (213) 555-LOCO</p>
</div>
<div class="footer-col">
<h4 class="font-display">ALLERGEN INFO</h4>
<p>Corn tortillas (GF)<br>Vegan options available<br>Contains: soy, sesame<br>Ask about peanuts</p>
</div>
</div>
<p class="copyright">© 2024 Kimchi Loco. All rights reserved. Stay spicy. 🌶️</p>
</footer>
<script>
// Menu Data
const menuItems = [
{
name: "THE O.G. LOCO",
desc: "Double carnitas, kimchi slaw, gochujan crema, cilantro, lime, corn tortilla. The one that started it all.",
ingredients: "Corn tortilla • Carnitas • Napa kimchi • Gochujan aioli • Cilantro • Lime",
price: "$4.50",
heat: 3,
badge: "fave",
badgeText: "CROWD FAVE"
},
{
name: "BULGOGI BOMB",
desc: "Marinated bulgogi beef, charred scallions, pickled daikon, sesame crema, fried shallots, flour tortilla.",
ingredients: "Flour tortilla • Bulgogi beef • Pickled daikon • Scallions • Sesame crema • Fried shallots",
price: "$5.00",
heat: 2,
badge: "new",
badgeText: "NEW"
},
{
name: "SPICY PORK BELLY",
desc: "Crispy pork belly, gochujan glaze, cucumber kimchi, pickled jalapeños, queso fresco, corn tortilla.",
ingredients: "Corn tortilla • Pork belly • Gochujan glaze • Cucumber kimchi • Jalapeños • Queso fresco",
price: "$5.50",
heat: 4,
badge: "spicy",
badgeText: "FIRE 🔥"
},
{
name: "KOREAN FRIED CHICKEN",
desc: "Double-fried chicken, yangnyeom sauce, pickled radish slaw, ranch drizzle, brioche bun vibes on a tortilla.",
ingredients: "Flour tortilla • KFC chicken • Yangnyeom sauce • Radish slaw • Buttermilk ranch",
price: "$5.00",
heat: 3,
badge: "fave",
badgeText: "BEST SELLER"
},
{
name: "TOFU LOCO (VG)",
desc: "Crispy gochujan tofu, charred corn, kimchi slaw, vegan chipotle crema, cilantro, corn tortilla.",
ingredients: "Corn tortilla • Gochujan tofu • Charred corn • Kimchi slaw • Vegan chipotle crema",
price: "$4.50",
heat: 2,
badge: "new",
badgeText: "VEGAN"
},
{
name: "SHORT RIB QUESADILLA",
desc: "Braised short rib, melted Oaxaca + mozzarella, caramelized kimchi, scallions, served with consomé dip.",
ingredients: "Flour tortilla • Short rib • Oaxaca cheese • Mozzarella • Caramelized kimchi • Consomé",
price: "$7.00",
heat: 2,
badge: "spicy",
badgeText: "PREMIUM"
},
{
name: "KIMCHI FRIES",
desc: "Crinkle fries, queso, carnitas, kimchi, gochujan crema, scallions, fried egg on top. Shareable... theoretically.",
ingredients: "Fries • Queso • Carnitas • Kimchi • Gochujan crema • Scallions • Fried egg",
price: "$9.00",
heat: 3,
badge: "fave",
badgeText: "FOR THE TABLE"
},
{
name: "ELOTE LOCO",
desc: "Grilled corn, mayo-cotija spread, gochujan butter, chili lime dust, cilantro. Handheld street food perfection.",
ingredients: "Corn • Cotija • Mayo • Gochujan butter • Chili lime • Cilantro",
price: "$4.00",
heat: 2,
badge: "",
badgeText: ""
}
];
// Reviews Data
const reviews = [
{ text: "The O.G. Loco changed my life. I dream about that gochujan crema. Three times this week already and zero regrets.", author: "Marcus Chen", handle: "@marcuseatsla", stars: 5, avatar: "MC" },
{ text: "Bulgogi Bomb + Kimchi Fries = the perfect date night. My girlfriend stole my last fry and I didn't even mad.", author: "Sarah Kim", handle: "@sarahskitchen", stars: 5, avatar: "SK" },
{ text: "Finally a food truck that does spicy RIGHT. The Spicy Pork Belly has actual heat, not just 'spicy mayo' heat. Respect.", author: "Derek Rodriguez", handle: "@derekeats", stars: 5, avatar: "DR" },
{ text: "Vegan tofu taco that actually slaps? Didn't think it existed. The charred corn adds this sweet crunch. 10/10.", author: "Priya Patel", handle: "@priya.plantbased", stars: 5, avatar: "PP" },
{ text: "Catered our office holiday party. 50 people, zero complaints. The short rib quesadillas disappeared in 4 minutes flat.", author: "Jennifer Park", handle: "@jpark_events", stars: 5, avatar: "JP" },
{ text: "Followed this truck across LA for a week. Venice, K-Town, Arts District — consistent every time. That's rare.", author: "Tony Alvarez", handle: "@tonytacotours", stars: 5, avatar: "TA" }
];
// Render Menu
const menuGrid = document.getElementById('menuGrid');
menuItems.forEach((item, i) => {
const card = document.createElement('article');
card.className = 'menu-card reveal' + (item.badge === 'fave' ? ' featured' : '');
card.style.transitionDelay = `${i * 0.08}s`;
card.innerHTML = `
${item.badge ? `<span class="menu-badge badge-${item.badge}">${item.badgeText}</span>` : ''}
<h3>${item.name}</h3>
<p class="desc">${item.desc}</p>
<p class="ingredients">${item.ingredients}</p>
<div class="menu-footer">
<span class="price">${item.price}</span>
<div class="heat-meter" aria-label="Spice level ${item.heat} out of 5">
${[1,2,3,4,5].map(l => `<span class="${l <= item.heat ? 'lit' : ''}"></span>`).join('')}
</div>
</div>
`;
menuGrid.appendChild(card);
});
// Render Reviews
const reviewsGrid = document.getElementById('reviewsGrid');
reviews.forEach((review, i) => {
const card = document.createElement('article');
card.className = 'review-card reveal';
card.style.transitionDelay = `${i * 0.1}s`;
card.innerHTML = `
<div class="stars">${'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'.repeat(review.stars)}</div>
<p class="review-text">"${review.text}"</p>
<div class="review-author">
<div class="avatar">${review.avatar}</div>
<div>
<div class="author-name">${review.author}</div>
<div class="author-handle">${review.handle}</div>
</div>
</div>
`;
reviewsGrid.appendChild(card);
});
// Particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 20; i++) {
const p = document.createElement('div');
p.className = 'particle';
p.style.left = Math.random() * 100 + '%';
p.style.animationDelay = Math.random() * 8 + 's';
p.style.animationDuration = (6 + Math.random() * 4) + 's';
particlesContainer.appendChild(p);
}
// Scroll Reveal
const revealElements = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
revealElements.forEach(el => observer.observe(el));
// 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' });
}
});
});
// Parallax subtle movement on hero
const hero = document.querySelector('.hero');
let ticking = false;
window.addEventListener('mousemove', (e) => {
if (!ticking) {
requestAnimationFrame(() => {
const x = (e.clientX / window.innerWidth - 0.5) * 20;
const y = (e.clientY / window.innerHeight - 0.5) * 20;
hero.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
ticking = false;
});
ticking = true;
}
});
// Reset hero transform on leave
hero.addEventListener('mouseleave', () => {
hero.style.transform = 'translate(0, 0)';
});
</script>
</body>
</html>Reasoning trace (139 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". This needs to be a mouth-watering, visually appealing site that makes people want to visit. Let me create something vibrant, fun, and appetizing. Key elements: - Bold, energetic branding - Mouth-watering food photography (using CSS/styled elements since no images) - Menu with Korean-Mexican fusion items - Food truck location/schedule - Fun personality/voice - Animations and interactions - Mobile responsive I'll use a vibrant color scheme - Korean red, Mexican orange/gold, with dark backgrounds for contrast. Lots of personality in the copy.