Food truck websiteOne-line
Gemini 3.8 Flash
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 31 s
- Cost
- $0.057
- Output tokens
- 14,995
- Spent thinking
- 615 tokens
- Speed
- 174 tok/s
- Console errors
- 0
- First token after
- 4.3 s
- First visible text after
- 10.5 s
- Prompt tokens
- 367
- Code size
- 36.4 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
model default- Max output
- 65,536 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 · 1410 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 | Seoul Meets The Streets • Korean Taco 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=Bungee&family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Syne:wght@700;800;900&display=swap" rel="stylesheet">
<style>
:root {
--fire: #FF2E00;
--gochujang: #E01A00;
--gold: #FFB800;
--lime: #24FF73;
--dark: #0D0E11;
--dark-2: #16181F;
--dark-3: #222530;
--cream: #FFF7ED;
--smoke: rgba(255, 255, 255, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--dark);
color: var(--cream);
font-family: 'Plus Jakarta Sans', sans-serif;
overflow-x: hidden;
line-height: 1.5;
selection-background-color: var(--fire);
}
/* NOISE OVERLAY */
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 999;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* NAVBAR */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 40px;
background: rgba(13, 14, 17, 0.85);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--smoke);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--cream);
}
.brand-flame {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--fire), var(--gold));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 0 24px rgba(255, 46, 0, 0.5);
transform: rotate(-4deg);
}
.brand-text {
font-family: 'Bungee', cursive;
font-size: 24px;
letter-spacing: -0.5px;
line-height: 1;
}
.brand-text span {
color: var(--fire);
}
.nav-status {
display: flex;
align-items: center;
gap: 8px;
background: rgba(36, 255, 115, 0.12);
border: 1px solid rgba(36, 255, 115, 0.3);
padding: 6px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--lime);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pulse-dot {
width: 8px;
height: 8px;
background: var(--lime);
border-radius: 50%;
box-shadow: 0 0 10px var(--lime);
animation: radarPulse 1.8s infinite;
}
@keyframes radarPulse {
0% { transform: scale(0.9); opacity: 0.8; }
50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px var(--lime); }
100% { transform: scale(0.9); opacity: 0.8; }
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.nav-links a {
color: var(--cream);
text-decoration: none;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--gold);
}
.btn-primary {
background: linear-gradient(135deg, var(--fire), #FF5E36);
color: white;
padding: 10px 22px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.5px;
text-transform: uppercase;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 24px rgba(255, 46, 0, 0.4);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(255, 46, 0, 0.6);
}
/* HERO SECTION */
.hero {
position: relative;
min-height: 100vh;
padding: 140px 40px 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: radial-gradient(circle at 50% 35%, rgba(255, 46, 0, 0.22) 0%, rgba(13, 14, 17, 0.95) 60%), var(--dark);
overflow: hidden;
}
.hero-bg-lines {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
pointer-events: none;
}
.korean-stamp {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 184, 0, 0.15);
border: 1px dashed var(--gold);
color: var(--gold);
padding: 8px 18px;
border-radius: 100px;
font-weight: 800;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 24px;
animation: floatSlow 4s ease-in-out infinite;
}
@keyframes floatSlow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.hero h1 {
font-family: 'Syne', sans-serif;
font-weight: 900;
font-size: clamp(48px, 8vw, 102px);
line-height: 0.92;
text-transform: uppercase;
letter-spacing: -2px;
margin-bottom: 24px;
}
.hero h1 .stroke-text {
color: transparent;
-webkit-text-stroke: 2px var(--cream);
}
.hero h1 .highlight {
background: linear-gradient(90deg, var(--fire), var(--gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
max-width: 620px;
font-size: 19px;
color: #c0c4d4;
margin-bottom: 38px;
font-weight: 500;
}
.hero p strong {
color: var(--cream);
}
/* LIVE TRUCK TICKER PINNED IN HERO */
.truck-radar-card {
width: 100%;
max-width: 860px;
background: rgba(22, 24, 31, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 24px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 46, 0, 0.2);
backdrop-filter: blur(20px);
text-align: left;
}
.radar-left {
display: flex;
align-items: center;
gap: 18px;
}
.radar-icon {
width: 56px;
height: 56px;
border-radius: 18px;
background: radial-gradient(circle, #2d1110 0%, #15161c 100%);
border: 1px solid rgba(255, 46, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
flex-shrink: 0;
box-shadow: 0 0 20px rgba(255, 46, 0, 0.3);
}
.radar-title {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--lime);
display: flex;
align-items: center;
gap: 6px;
}
.radar-location {
font-family: 'Syne', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--cream);
margin: 2px 0;
}
.radar-hours {
font-size: 13px;
color: #9299ab;
}
.radar-actions {
display: flex;
align-items: center;
gap: 12px;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--cream);
padding: 12px 20px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
white-space: nowrap;
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--cream);
}
/* MARQUEE */
.ticker {
background: var(--fire);
color: var(--cream);
padding: 14px 0;
overflow: hidden;
white-space: nowrap;
font-family: 'Bungee', cursive;
font-size: 16px;
letter-spacing: 1px;
transform: rotate(-1.5deg) scale(1.02);
box-shadow: 0 10px 30px rgba(255, 46, 0, 0.3);
margin-top: -20px;
z-index: 10;
position: relative;
}
.ticker-track {
display: inline-flex;
animation: marquee 22s linear infinite;
gap: 32px;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ticker-item {
display: inline-flex;
align-items: center;
gap: 16px;
}
.ticker-bullet {
font-size: 10px;
opacity: 0.7;
}
/* FOOD CRAVE SECTION */
.section {
padding: 100px 40px;
max-width: 1240px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-tag {
color: var(--fire);
font-weight: 800;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
display: block;
}
.section-title {
font-family: 'Syne', sans-serif;
font-size: clamp(34px, 5vw, 56px);
font-weight: 900;
letter-spacing: -1px;
line-height: 1.05;
}
.section-subtitle {
color: #9299ab;
max-width: 580px;
margin: 16px auto 0;
font-size: 17px;
}
/* INTERACTIVE MENU CARDS */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.menu-card {
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
padding: 28px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-card:hover {
transform: translateY(-8px);
border-color: rgba(255, 46, 0, 0.5);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 46, 0, 0.2);
}
.card-badge {
position: absolute;
top: 22px;
right: 22px;
background: rgba(255, 46, 0, 0.15);
color: var(--fire);
border: 1px solid rgba(255, 46, 0, 0.3);
padding: 4px 12px;
border-radius: 100px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.card-badge.gold {
background: rgba(255, 184, 0, 0.15);
color: var(--gold);
border-color: rgba(255, 184, 0, 0.3);
}
.dish-visual {
width: 100%;
height: 200px;
border-radius: 18px;
margin-bottom: 22px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* SVG Dish Art */
.visual-bg-1 { background: radial-gradient(circle at 50% 50%, #40100d 0%, #1e1319 100%); }
.visual-bg-2 { background: radial-gradient(circle at 50% 50%, #3a1e05 0%, #1a1614 100%); }
.visual-bg-3 { background: radial-gradient(circle at 50% 50%, #1a2f1c 0%, #111a14 100%); }
.visual-bg-4 { background: radial-gradient(circle at 50% 50%, #2f1025 0%, #19111c 100%); }
.dish-icon {
font-size: 80px;
filter: drop-shadow(0 12px 24px rgba(0,0,0,0.6));
animation: floatEmoji 3s ease-in-out infinite;
}
@keyframes floatEmoji {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(2deg); }
}
.spice-meter {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: #ff5238;
margin-bottom: 10px;
}
.dish-title {
font-family: 'Syne', sans-serif;
font-size: 24px;
font-weight: 800;
margin-bottom: 8px;
}
.dish-desc {
font-size: 14px;
color: #9ea4b5;
margin-bottom: 20px;
line-height: 1.6;
}
.dish-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.dish-price {
font-family: 'Bungee', cursive;
font-size: 22px;
color: var(--gold);
}
.btn-add {
background: var(--dark-3);
color: var(--cream);
border: 1px solid rgba(255, 255, 255, 0.12);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
}
.btn-add:hover {
background: var(--fire);
border-color: var(--fire);
transform: scale(1.1);
box-shadow: 0 0 16px rgba(255, 46, 0, 0.5);
}
/* THE SECRET SAUCE / FLAVOR LAB SECTION */
.alchemy-box {
background: linear-gradient(135deg, rgba(224, 26, 0, 0.15) 0%, rgba(22, 24, 31, 0.95) 100%);
border: 1px solid rgba(255, 46, 0, 0.25);
border-radius: 36px;
padding: 60px 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
position: relative;
overflow: hidden;
}
.alchemy-box::before {
content: "LOCUS";
position: absolute;
right: -30px;
bottom: -40px;
font-family: 'Syne', sans-serif;
font-weight: 900;
font-size: 140px;
color: rgba(255, 255, 255, 0.015);
pointer-events: none;
}
.alchemy-content h3 {
font-family: 'Syne', sans-serif;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 900;
line-height: 1.1;
margin-bottom: 18px;
}
.alchemy-pills {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 30px;
}
.pill-card {
background: rgba(13, 14, 17, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 18px;
}
.pill-card h4 {
color: var(--gold);
font-size: 14px;
font-weight: 800;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.pill-card p {
font-size: 12px;
color: #a4abbd;
line-height: 1.4;
}
/* TACO BUILDER INTERACTIVE PREVIEW */
.interactive-taco-zone {
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 28px;
padding: 28px;
text-align: center;
}
.interactive-title {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 800;
margin-bottom: 4px;
}
.interactive-sub {
font-size: 12px;
color: #8c93a8;
margin-bottom: 18px;
}
.taco-stage {
height: 160px;
background: radial-gradient(circle, rgba(255, 184, 0, 0.1) 0%, transparent 70%);
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
position: relative;
}
.taco-render {
font-size: 72px;
filter: drop-shadow(0 14px 20px rgba(0,0,0,0.6));
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.taco-flavor-profile {
font-family: 'Bungee', cursive;
font-size: 13px;
color: var(--lime);
margin-top: 8px;
letter-spacing: 0.5px;
}
.flavor-buttons {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.flavor-btn {
background: var(--dark-3);
color: var(--cream);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.flavor-btn.active, .flavor-btn:hover {
background: var(--fire);
border-color: var(--fire);
color: white;
}
/* SCHEDULE / LOCATIONS TRACKER */
.schedule-section {
background: var(--dark-2);
border-top: 1px solid var(--smoke);
border-bottom: 1px solid var(--smoke);
padding: 100px 40px;
}
.schedule-container {
max-width: 1240px;
margin: 0 auto;
}
.stops-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 50px;
}
.stop-card {
background: rgba(13, 14, 17, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 24px;
position: relative;
transition: all 0.2s;
}
.stop-card.live-now {
border-color: var(--lime);
background: linear-gradient(180deg, rgba(36, 255, 115, 0.06) 0%, rgba(13, 14, 17, 0.9) 100%);
box-shadow: 0 10px 30px rgba(36, 255, 115, 0.1);
}
.stop-badge {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
display: inline-block;
margin-bottom: 12px;
}
.stop-card.live-now .stop-badge {
background: rgba(36, 255, 115, 0.2);
color: var(--lime);
}
.stop-badge.upcoming {
background: rgba(255, 255, 255, 0.08);
color: #a4abbd;
}
.stop-day {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 800;
margin-bottom: 4px;
}
.stop-venue {
font-size: 16px;
color: var(--gold);
font-weight: 700;
margin-bottom: 6px;
}
.stop-address {
font-size: 13px;
color: #8c93a8;
margin-bottom: 14px;
}
.stop-time {
font-size: 12px;
font-weight: 700;
color: var(--cream);
display: flex;
align-items: center;
gap: 6px;
}
/* HYPE REVIEWS */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 50px;
}
.review-card {
background: var(--dark-2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stars {
color: var(--gold);
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 14px;
}
.review-quote {
font-size: 15px;
color: #cbd1e0;
line-height: 1.6;
margin-bottom: 20px;
font-style: italic;
}
.reviewer {
display: flex;
align-items: center;
gap: 12px;
}
.reviewer-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--fire);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
}
.reviewer-info h5 {
font-size: 14px;
font-weight: 700;
}
.reviewer-info span {
font-size: 11px;
color: #8c93a8;
}
/* VIP CLUB DROP (CTA) */
.drop-box {
background: radial-gradient(circle at 50% 0%, #ff2e00 0%, #990e00 100%);
border-radius: 36px;
padding: 60px 40px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(255, 46, 0, 0.4);
}
.drop-title {
font-family: 'Syne', sans-serif;
font-size: clamp(32px, 4.5vw, 54px);
font-weight: 900;
margin-bottom: 14px;
line-height: 1.05;
}
.drop-sub {
font-size: 17px;
max-width: 580px;
margin: 0 auto 32px;
color: rgba(255, 255, 255, 0.9);
}
.form-row {
display: flex;
max-width: 480px;
margin: 0 auto;
gap: 10px;
background: rgba(0, 0, 0, 0.35);
padding: 6px;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.form-input {
flex: 1;
background: transparent;
border: none;
padding: 12px 22px;
color: white;
font-size: 14px;
outline: none;
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.btn-submit {
background: var(--gold);
color: var(--dark);
font-weight: 800;
padding: 12px 26px;
border-radius: 100px;
border: none;
cursor: pointer;
font-size: 13px;
text-transform: uppercase;
transition: transform 0.2s, background 0.2s;
}
.btn-submit:hover {
background: #ffcc33;
transform: scale(1.03);
}
.drop-guarantee {
font-size: 12px;
margin-top: 14px;
color: rgba(255, 255, 255, 0.7);
}
/* FLOATING TOAST CART */
.cart-toast {
position: fixed;
bottom: 28px;
right: 28px;
background: var(--dark-2);
border: 1px solid var(--fire);
padding: 14px 22px;
border-radius: 100px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 10px 40px rgba(0,0,0,0.8), 0 0 20px rgba(255, 46, 0, 0.3);
z-index: 200;
transform: translateY(120px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cart-toast.active {
transform: translateY(0);
opacity: 1;
}
.cart-icon {
width: 32px;
height: 32px;
background: var(--fire);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
/* FOOTER */
footer {
padding: 60px 40px;
text-align: center;
border-top: 1px solid var(--smoke);
color: #72788a;
font-size: 13px;
}
.footer-brand {
font-family: 'Bungee', cursive;
font-size: 26px;
color: var(--cream);
margin-bottom: 12px;
}
.footer-brand span {
color: var(--fire);
}
.footer-tags {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
}
/* RESPONSIVE */
@media (max-width: 900px) {
nav { padding: 14px 20px; }
.nav-links { display: none; }
.hero { padding: 120px 20px 60px; }
.truck-radar-card { flex-direction: column; align-items: flex-start; }
.alchemy-box { grid-template-columns: 1fr; padding: 36px 24px; }
.reviews-grid { grid-template-columns: 1fr; }
.section { padding: 70px 20px; }
.drop-box { padding: 40px 20px; }
}
</style>
</head>
<body>
<div class="grain"></div>
<!-- NAVIGATION -->
<nav>
<a href="#" class="brand">
<div class="brand-flame">🌮</div>
<div class="brand-text">KIMCHI <span>LOCO</span></div>
</a>
<div class="nav-status">
<div class="pulse-dot"></div>
<span>Live Location: Arts District</span>
</div>
<div class="nav-links">
<a href="#menu">Menu</a>
<a href="#flavor">The Secret</a>
<a href="#schedule">Track Truck</a>
<a href="#hype">Hype</a>
</div>
<a href="#schedule" class="btn-primary">
<span>Find The Truck</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</nav>
<!-- HERO SECTION -->
<header class="hero">
<div class="hero-bg-lines"></div>
<div class="korean-stamp">
<span>🇰🇷</span> 서울과 거리의 만남 • Seoul Sizzle Meets LA Heat <span>🇲🇽</span>
</div>
<h1>
UNHOLY CRUNCH.<br>
<span class="stroke-text">12HR BRAISED.</span><br>
<span class="highlight">PURE CRAVING.</span>
</h1>
<p>
Tender caramelized bulgogi short rib, griddled cotija cheese crusts, and house-fermented aged kimchi splashed with smoky gochujang crema. <strong>One bite and your standard taco is ruined forever.</strong>
</p>
<!-- LIVE LOCATION RADAR CARD -->
<div class="truck-radar-card">
<div class="radar-left">
<div class="radar-icon">🚚</div>
<div>
<div class="radar-title">
<span class="pulse-dot"></span>
Griddles Sizzling Right Now
</div>
<div class="radar-location">820 E 3rd St (Arts District Brewery)</div>
<div class="radar-hours">Today until 10:30 PM • Line time ~8 mins • Smells like heaven</div>
</div>
</div>
<div class="radar-actions">
<button class="btn-primary" onclick="scrollToSchedule()">Directions</button>
<button class="btn-ghost" onclick="copyAddress()">Copy Spot</button>
</div>
</div>
</header>
<!-- MARQUEE TICKER -->
<div class="ticker">
<div class="ticker-track">
<div class="ticker-item"><span>🔥 12-HOUR BRAISED BULGOGI SHORT RIB</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🥟 CRISPY CHEESE-CRUST QUESADILLAS</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🌶️ GOCHUJANG AL PASTOR ROASTED DAILY</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🥑 HOUSE-CRAFTED AVOCADO SALSA VERDE</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>⚡ RATED #1 FOOD TRUCK IN DTLA</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🔥 12-HOUR BRAISED BULGOGI SHORT RIB</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🥟 CRISPY CHEESE-CRUST QUESADILLAS</span><span class="ticker-bullet">●</span></div>
<div class="ticker-item"><span>🌶️ GOCHUJANG AL PASTOR ROASTED DAILY</span><span class="ticker-bullet">●</span></div>
</div>
</div>
<!-- MENU SECTION -->
<section class="section" id="menu">
<div class="section-header">
<span class="section-tag">The Heavy Hitters</span>
<h2 class="section-title">BUILT FOR OBSESSION</h2>
<p class="section-subtitle">Every single item is pressed on 450° cast iron griddles with fresh corn tortillas dipped in chile bone broth.</p>
</div>
<div class="menu-grid">
<!-- ITEM 1 -->
<div class="menu-card">
<span class="card-badge">THE LEGEND</span>
<div class="dish-visual visual-bg-1">
<div class="dish-icon">🌮</div>
</div>
<div>
<div class="spice-meter">🔥 SPICE LEVEL: MEDIUM-LIT</div>
<h3 class="dish-title">Bulgogi OG Loco Taco</h3>
<p class="dish-desc">12-hr braised prime short rib, sweet garlic soy reduction, griddled spicy kimchi, gochujang crema, crushed toasted sesame, melted jack cheese halo on double corn tortilla.</p>
</div>
<div class="dish-footer">
<div class="dish-price">$5.25 <span style="font-size:13px;color:#8c93a8;font-family:sans-serif;">/ taco</span></div>
<button class="btn-add" title="Save to Crave List" onclick="addToOrder('Bulgogi OG Loco Taco', '$5.25')">+</button>
</div>
</div>
<!-- ITEM 2 -->
<div class="menu-card">
<span class="card-badge gold">CROWD CRUSH</span>
<div class="dish-visual visual-bg-2">
<div class="dish-icon">🌯</div>
</div>
<div>
<div class="spice-meter">🔥🔥 SPICE LEVEL: FIERY ROAST</div>
<h3 class="dish-title">Spicy Pork Al Pastor Kimchidilla</h3>
<p class="dish-desc">Gochugaru-marinated shaved pork shoulder, charred sweet pineapple salsa, melted Oaxaca cheese crust, cilantro scallion relish, and our tangy crema dip.</p>
</div>
<div class="dish-footer">
<div class="dish-price">$13.50</div>
<button class="btn-add" title="Save to Crave List" onclick="addToOrder('Spicy Pork Kimchidilla', '$13.50')">+</button>
</div>
</div>
<!-- ITEM 3 -->
<div class="menu-card">
<span class="card-badge">HYPER CRISPY</span>
<div class="dish-visual visual-bg-3">
<div class="dish-icon">🍗</div>
</div>
<div>
<div class="spice-meter">🔥🔥🔥 SPICE LEVEL: CAN'T STOP</div>
<h3 class="dish-title">K-Town Nashville Fire Tacos (2x)</h3>
<p class="dish-desc">Double-fried crispy chicken thigh tossed in sticky honey-gochujang glaze, pickled yellow daikon slaw, jalapeño lime crema, tucked in blistered flour tortillas.</p>
</div>
<div class="dish-footer">
<div class="dish-price">$11.50</div>
<button class="btn-add" title="Save to Crave List" onclick="addToOrder('K-Town Nashville Tacos', '$11.50')">+</button>
</div>
</div>
<!-- ITEM 4 -->
<div class="menu-card">
<span class="card-badge">DIRTY SIDE</span>
<div class="dish-visual visual-bg-4">
<div class="dish-icon">🍟</div>
</div>
<div>
<div class="spice-meter">🔥 SPICE LEVEL: RICH & COMFORT</div>
<h3 class="dish-title">Loco Carnitas Disco Fries</h3>
<p class="dish-desc">Extra-crispy waffle fries smothered in hot queso blanco, caramelized pork carnitas, aged chopped kimchi, sunny side egg, sriracha mayo drizzle, and scallions.</p>
</div>
<div class="dish-footer">
<div class="dish-price">$12.00</div>
<button class="btn-add" title="Save to Crave List" onclick="addToOrder('Loco Disco Fries', '$12.00')">+</button>
</div>
</div>
</div>
</section>
<!-- THE FLAVOR LAB -->
<section class="section" id="flavor">
<div class="alchemy-box">
<div class="alchemy-content">
<span class="section-tag" style="color:var(--gold);">Culinary Collusion</span>
<h3>Why It Hits Your Brain Like Lightning.</h3>
<p style="color:#b2b8c9; font-size:15px; line-height:1.7;">
Mexican taquerias perfected the sear, the corn tortilla, and the citrus acid. Korean street vendors perfected deep fermentation, umami glaze, and chili smoke. We smashed them together on iron plates at maximum heat.
</p>
<div class="alchemy-pills">
<div class="pill-card">
<h4>🧄 45-Day Aged Kimchi</h4>
<p>Fermented with Korean pear, garlic, and sea salt. Sautéed in beef drippings till sweet & sour.</p>
</div>
<div class="pill-card">
<h4>🌶️ Red Dragon Crema</h4>
<p>Sundried Gochujang blended with Mexican crema agria and fresh squeezed key limes.</p>
</div>
<div class="pill-card">
<h4>🧀 Griddled Cheese Halos</h4>
<p>Every tortilla gets pressed onto melting Monterey Jack until a golden nutty crust snaps.</p>
</div>
<div class="pill-card">
<h4>🥩 12-Hour Bone Glaze</h4>
<p>Short ribs simmered with charred scallions, ginger, sesame oil, and dark brown sugar.</p>
</div>
</div>
</div>
<!-- INTERACTIVE TACO CRUNCH PREVIEW -->
<div class="interactive-taco-zone">
<div class="interactive-title">CRAVE TESTER</div>
<div class="interactive-sub">Click a flavor profile to customize your dream bite:</div>
<div class="taco-stage">
<div class="taco-render" id="tacoEmoji">🌮</div>
<div class="taco-flavor-profile" id="tacoProfile">BULGOGI + CRISP KIMCHI</div>
</div>
<div class="flavor-buttons">
<button class="flavor-btn active" onclick="setFlavor('bulgogi', '🌮', '12HR SHORT RIB + SWEET GARLIC GLAZE')">🥩 Bulgogi</button>
<button class="flavor-btn" onclick="setFlavor('pork', '🌶️', 'GOCHUGARU AL PASTOR + PINEAPPLE')">🍍 Al Pastor</button>
<button class="flavor-btn" onclick="setFlavor('chicken', '🍗', 'CRUNCHY HOT CHICKEN + DAIKON')">🔥 Fire Chicken</button>
<button class="flavor-btn" onclick="setFlavor('tofu', '🥑', 'CRISP SWEET CHILI TOFU + AVOCADO')">🌱 Loco Veggie</button>
</div>
</div>
</div>
</section>
<!-- LIVE SCHEDULE SECTION -->
<section class="schedule-section" id="schedule">
<div class="schedule-container">
<div class="section-header">
<span class="section-tag" style="color:var(--lime);">Where To Pull Up</span>
<h2 class="section-title">THIS WEEK'S LOCATIONS</h2>
<p class="section-subtitle">We drop at breweries, corner popups, and late-night spots. Arrive early before the short rib sells out.</p>
</div>
<div class="stops-grid">
<!-- STOP 1 (TODAY) -->
<div class="stop-card live-now">
<span class="stop-badge">🔥 LIVE TONIGHT</span>
<div class="stop-day">Tonight (Friday)</div>
<div class="stop-venue">Arts District Brewing Co.</div>
<div class="stop-address">820 E 3rd St, Downtown LA</div>
<div class="stop-time">
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
5:00 PM – 10:30 PM (or until sold out)
</div>
</div>
<!-- STOP 2 -->
<div class="stop-card">
<span class="stop-badge upcoming">TOMORROW</span>
<div class="stop-day">Saturday Night</div>
<div class="stop-venue">Smorgasburg Night Market</div>
<div class="stop-address">ROW DTLA, 777 S Alameda St</div>
<div class="stop-time">
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
12:00 PM – 8:00 PM
</div>
</div>
<!-- STOP 3 -->
<div class="stop-card">
<span class="stop-badge upcoming">SUNDAY CHILL</span>
<div class="stop-day">Sunday Funday</div>
<div class="stop-venue">Highland Park Taproom</div>
<div class="stop-address">5800 York Blvd, Los Angeles</div>
<div class="stop-time">
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
2:00 PM – 9:00 PM
</div>
</div>
<!-- STOP 4 -->
<div class="stop-card">
<span class="stop-badge upcoming">MID-WEEK CRAVE</span>
<div class="stop-day">Tuesday Pop-Up</div>
<div class="stop-venue">Silverlake Meadow Drop</div>
<div class="stop-address">Silver Lake Blvd & Van Pelt</div>
<div class="stop-time">
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
5:30 PM – 10:00 PM
</div>
</div>
</div>
</div>
</section>
<!-- HYPE REVIEWS -->
<section class="section" id="hype">
<div class="section-header">
<span class="section-tag">Street Hype</span>
<h2 class="section-title">DON'T TAKE OUR WORD FOR IT</h2>
<p class="section-subtitle">Over 14,000 tacos devoured in our opening month. Here's what the streets are saying.</p>
</div>
<div class="reviews-grid">
<div class="review-card">
<div class="stars">★★★★★</div>
<p class="review-quote">"I stood in a 25-minute line in the rain and would do it again tomorrow. The crunchy griddled cheese crust on that bulgogi taco is pure sorcery."</p>
<div class="reviewer">
<div class="reviewer-avatar">DC</div>
<div class="reviewer-info">
<h5>Dave Cho</h5>
<span>Yelp Elite 2024 • Arts District</span>
</div>
</div>
</div>
<div class="review-card">
<div class="stars">★★★★★</div>
<p class="review-quote">"The kimchi isn't an afterthought garnish—it's caramelized directly onto the meat on the flat top. Sweet, sour, spicy, and the tortilla soaked in bone broth? Insane."</p>
<div class="reviewer">
<div class="reviewer-avatar" style="background:#FFB800; color:#111;">MR</div>
<div class="reviewer-info">
<h5>Maria Rodriguez</h5>
<span>LA Street Food Hunter</span>
</div>
</div>
</div>
<div class="review-card">
<div class="stars">★★★★★</div>
<p class="review-quote">"Their spicy pork quesadilla cured my hangover on the spot. Make sure you get double crema sauce because you'll want to drink it with a spoon."</p>
<div class="reviewer">
<div class="reviewer-avatar" style="background:#24FF73; color:#111;">ZK</div>
<div class="reviewer-info">
<h5>Zack K.</h5>
<span>Verified Local Craver</span>
</div>
</div>
</div>
</div>
</section>
<!-- VIP SMS CLUB CTA -->
<section class="section" style="padding-top:0;">
<div class="drop-box">
<div class="korean-stamp" style="background:rgba(0,0,0,0.2); border-color:white; color:white;">🔥 VIP TACO ALERTS</div>
<h2 class="drop-title">GET A FREE TACO ON YOUR FIRST VISIT</h2>
<p class="drop-sub">Drop your phone or email. We send exclusive secret menu drops, surprise truck coordinates 1 hour early, and a free taco voucher instantly.</p>
<form class="form-row" id="vipForm" onsubmit="handleVipSubmit(event)">
<input type="text" class="form-input" id="vipInput" placeholder="Enter cell # or email" required>
<button type="submit" class="btn-submit">Claim Taco</button>
</form>
<div class="drop-guarantee" id="vipStatus">🔒 Zero spam. Only delicious drop alerts & taco codes.</div>
</div>
</section>
<!-- CART / CRAVE TOAST -->
<div class="cart-toast" id="cartToast">
<div class="cart-icon">🔥</div>
<div>
<strong id="toastItem" style="font-size:14px; display:block;">Item Added</strong>
<span style="font-size:12px; color:#8c93a8;">Saved to your craving wishlist!</span>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer-brand">KIMCHI <span>LOCO</span></div>
<div class="footer-tags">
<span>KOREAN BBQ</span> •
<span>BAJA STREET TACOS</span> •
<span>CATERING AVAILABLE</span>
</div>
<p>© 2025 Kimchi Loco Food Truck Co. Made with pure gochujang fire & love. All rights reserved.</p>
</footer>
<script>
// Interactive Taco Flavor Switcher
function setFlavor(type, emoji, description) {
const tacoEmoji = document.getElementById('tacoEmoji');
const tacoProfile = document.getElementById('tacoProfile');
// Quick bounce animation
tacoEmoji.style.transform = 'scale(1.3) rotate(8deg)';
setTimeout(() => {
tacoEmoji.innerText = emoji;
tacoProfile.innerText = description;
tacoEmoji.style.transform = 'scale(1) rotate(0deg)';
}, 150);
// Update active pill
document.querySelectorAll('.flavor-btn').forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
}
// Add to Crave List Toast
let toastTimeout;
function addToOrder(name, price) {
const toast = document.getElementById('cartToast');
const toastItem = document.getElementById('toastItem');
toastItem.innerText = `${name} (${price})`;
toast.classList.add('active');
clearTimeout(toastTimeout);
toastTimeout = setTimeout(() => {
toast.classList.remove('active');
}, 2800);
}
// Copy Address helper
function copyAddress() {
const address = "820 E 3rd St, Los Angeles, CA 90013";
navigator.clipboard.writeText(address).then(() => {
alert("📍 Address copied! See you at Arts District Brewing Co!");
}).catch(() => {
// Fallback
const toast = document.getElementById('cartToast');
const toastItem = document.getElementById('toastItem');
toastItem.innerText = "820 E 3rd St, Arts District!";
toast.classList.add('active');
setTimeout(() => toast.classList.remove('active'), 2500);
});
}
// Scroll Helper
function scrollToSchedule() {
document.getElementById('schedule').scrollIntoView({ behavior: 'smooth' });
}
// VIP Form Handling
function handleVipSubmit(e) {
e.preventDefault();
const input = document.getElementById('vipInput');
const status = document.getElementById('vipStatus');
if (input.value.trim() !== '') {
status.innerHTML = `<span style="color:#24FF73; font-weight:800; font-size:14px;">🎉 YOU'RE IN! Show code "LOCOFREE" at the truck window for your free taco!</span>`;
input.value = '';
// Trigger celebratory toast
const toast = document.getElementById('cartToast');
const toastItem = document.getElementById('toastItem');
toastItem.innerText = "Free Taco Code: LOCOFREE";
toast.classList.add('active');
setTimeout(() => toast.classList.remove('active'), 3500);
}
}
</script>
</body>
</html>Reasoning trace (615 tokens)
**Building Food Truck Appeal** I'm focusing on crafting a vibrant, punchy street-food aesthetic that truly ignites appetite. The goal is a design blending Seoul neon with LA/Baja taco truck energy, using fiery reds and deep golds to make people crave a visit. **Designing a Craveable Experience** I'm refining the visual language, leaning into a high-contrast palette of chujang orange, lime green, tortilla gold, and charcoal black. My focus is on creating dynamic elements like a "SEOUL MEETS THE STREETS" hero, live truck status, and mouthwatering taco visuals to instantly hook users. The menu is being fleshed out with enticing descriptions.