Food truck websiteOne-line
Gemini 4 Argon
by Googlereasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 4 min 21 s
- Cost
- $0.201
- Output tokens
- 19,970
- Spent thinking
- 0 tokens
- Speed
- 78.5 tok/s
- Console errors
- 0
- First token after
- 6.7 s
- First visible text after
- 6.7 s
- Prompt tokens
- 406
- Code size
- 53.8 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-4-argon- Reasoning sent
model default- Max output
- 943,718 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 · 1905 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 Soul × Barrio Heat</title>
<style>
:root {
--gochujang: #FF2E4C;
--mango: #FFB800;
--cilantro: #00E575;
--char: #0D0C12;
--char-light: #181622;
--char-card: #211E2F;
--cream: #FFF8EE;
--muted: #A69FB8;
--neon-pink: #FF369B;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--char);
color: var(--cream);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
body {
overflow-x: hidden;
background-image:
radial-gradient(circle at 15% 15%, rgba(255, 46, 76, 0.14) 0%, transparent 35%),
radial-gradient(circle at 85% 30%, rgba(255, 184, 0, 0.1) 0%, transparent 40%),
radial-gradient(circle at 50% 80%, rgba(0, 229, 117, 0.08) 0%, transparent 45%);
}
/* Custom Typography */
.display-font {
font-family: "Impact", "Arial Black", "Trebuchet MS", sans-serif;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 0.94;
}
/* Top Marquee */
.marquee-bar {
background: linear-gradient(90deg, var(--gochujang), #FF6B00, var(--mango), var(--gochujang));
background-size: 200% 100%;
animation: gradientShift 8s linear infinite;
color: var(--char);
font-weight: 900;
font-size: 0.82rem;
padding: 8px 0;
overflow: hidden;
white-space: nowrap;
border-bottom: 2px solid var(--char);
position: relative;
z-index: 100;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.marquee-track {
display: inline-block;
animation: scrollText 24s linear infinite;
}
.marquee-track span {
margin: 0 18px;
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.06em;
}
@keyframes scrollText {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Navigation */
nav {
position: sticky;
top: 0;
z-index: 90;
background: rgba(13, 12, 18, 0.88);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 248, 238, 0.1);
padding: 14px 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--cream);
}
.brand-logo {
width: 42px;
height: 42px;
background: var(--gochujang);
border-radius: 10px;
display: grid;
place-items: center;
font-weight: 900;
font-size: 1.4rem;
box-shadow: 3px 3px 0px var(--mango);
transform: rotate(-4deg);
transition: transform 0.2s;
}
.brand:hover .brand-logo {
transform: rotate(6deg) scale(1.06);
}
.brand-name {
font-size: 1.65rem;
letter-spacing: 0.04em;
}
.brand-name span {
color: var(--mango);
}
.brand-ko {
font-size: 0.75rem;
background: rgba(255, 255, 255, 0.1);
padding: 3px 7px;
border-radius: 4px;
color: var(--cilantro);
font-weight: 700;
}
.nav-links {
display: flex;
gap: 24px;
align-items: center;
}
.nav-links a {
color: var(--cream);
text-decoration: none;
font-weight: 700;
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--mango);
}
.live-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 229, 117, 0.14);
border: 1px solid var(--cilantro);
color: var(--cilantro);
padding: 6px 12px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.pulse-dot {
width: 8px;
height: 8px;
background: var(--cilantro);
border-radius: 50%;
box-shadow: 0 0 8px var(--cilantro);
animation: pulse 1.4s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.4; }
}
.cart-btn {
background: var(--mango);
color: var(--char);
border: none;
padding: 10px 18px;
border-radius: 10px;
font-weight: 900;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 4px 4px 0 var(--gochujang);
transition: transform 0.15s, box-shadow 0.15s;
}
.cart-btn:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--gochujang);
}
.cart-count {
background: var(--char);
color: var(--mango);
padding: 2px 7px;
border-radius: 99px;
font-size: 0.8rem;
}
/* Hero Section */
.hero {
padding: 40px 5% 65px;
display: grid;
grid-template-columns: 1.12fr 0.88fr;
gap: 36px;
align-items: center;
max-width: 1360px;
margin: 0 auto;
position: relative;
}
.hero-badge-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.street-tag {
background: var(--char-card);
border: 1.5px solid var(--mango);
color: var(--mango);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
display: inline-flex;
align-items: center;
gap: 6px;
}
.street-tag.hot {
border-color: var(--gochujang);
color: #FF758B;
background: rgba(255, 46, 76, 0.14);
}
.hero h1 {
font-size: clamp(3.1rem, 6vw, 5.4rem);
margin-bottom: 18px;
text-shadow: 5px 5px 0px rgba(255, 46, 76, 0.35);
}
.hero h1 .stroke-word {
color: var(--mango);
display: inline-block;
transform: rotate(-1.5deg);
background: var(--gochujang);
color: var(--cream);
padding: 2px 14px 6px;
border-radius: 8px;
box-shadow: 5px 5px 0 var(--mango);
margin: 4px 0;
}
.hero h1 .green-word {
color: var(--cilantro);
}
.hero-sub {
font-size: 1.15rem;
line-height: 1.55;
color: #DFD9EC;
max-width: 560px;
margin-bottom: 26px;
}
.hero-cta-group {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-bottom: 28px;
}
.btn-primary {
background: var(--gochujang);
color: var(--cream);
font-weight: 900;
font-size: 1.08rem;
padding: 16px 28px;
border-radius: 12px;
border: 2px solid var(--cream);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 6px 6px 0 var(--mango);
transition: all 0.15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-primary:hover {
transform: translate(-3px, -3px);
box-shadow: 9px 9px 0 var(--mango);
background: #ff193b;
}
.btn-secondary {
background: var(--char-card);
color: var(--cream);
font-weight: 800;
font-size: 1rem;
padding: 16px 22px;
border-radius: 12px;
border: 2px solid rgba(255, 248, 238, 0.25);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.15s;
}
.btn-secondary:hover {
border-color: var(--cilantro);
color: var(--cilantro);
transform: translateY(-2px);
}
/* Live Truck Status Card inside Hero */
.live-tracker-mini {
background: linear-gradient(135deg, rgba(33, 30, 47, 0.95), rgba(24, 22, 34, 0.95));
border: 2px solid rgba(255, 184, 0, 0.4);
border-radius: 16px;
padding: 16px 20px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;
max-width: 560px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.truck-icon-badge {
width: 52px;
height: 52px;
border-radius: 12px;
background: rgba(255, 184, 0, 0.15);
border: 1px solid var(--mango);
display: grid;
place-items: center;
font-size: 1.7rem;
}
.tracker-info h4 {
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cilantro);
margin-bottom: 3px;
}
.tracker-info p {
font-weight: 800;
font-size: 1.02rem;
color: var(--cream);
}
.tracker-info span {
font-size: 0.82rem;
color: var(--muted);
}
.wait-box {
text-align: right;
background: rgba(255, 46, 76, 0.15);
border: 1px solid var(--gochujang);
padding: 8px 12px;
border-radius: 10px;
}
.wait-box strong {
display: block;
font-size: 1.15rem;
color: var(--mango);
}
.wait-box small {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--cream);
}
/* Hero Visual Stage */
.hero-stage {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.neon-halo {
position: absolute;
width: 390px;
height: 390px;
border-radius: 50%;
background: conic-gradient(from 90deg, var(--gochujang), var(--mango), var(--cilantro), var(--neon-pink), var(--gochujang));
filter: blur(55px);
opacity: 0.35;
animation: spinSlow 14s linear infinite;
}
@keyframes spinSlow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.taco-showcase-card {
position: relative;
z-index: 2;
background: radial-gradient(circle at 50% 35%, #2e2640, #161321);
border: 3px solid var(--cream);
border-radius: 28px;
padding: 24px;
width: 100%;
max-width: 470px;
box-shadow: 12px 12px 0px var(--gochujang);
transform: rotate(1.5deg);
transition: transform 0.3s ease;
}
.taco-showcase-card:hover {
transform: rotate(0deg) scale(1.02);
}
.floating-sticker {
position: absolute;
background: var(--mango);
color: var(--char);
font-weight: 900;
font-size: 0.82rem;
padding: 10px 14px;
border-radius: 999px;
border: 2px solid var(--char);
box-shadow: 4px 4px 0 var(--char);
text-transform: uppercase;
z-index: 5;
animation: floatBob 3s ease-in-out infinite;
}
.sticker-top {
top: -16px;
right: -12px;
background: var(--cilantro);
transform: rotate(8deg);
}
.sticker-bottom {
bottom: 72px;
left: -18px;
background: var(--mango);
animation-delay: 1.2s;
transform: rotate(-7deg);
}
@keyframes floatBob {
0%, 100% { transform: translateY(0) rotate(6deg); }
50% { transform: translateY(-7px) rotate(2deg); }
}
.taco-svg-wrap {
width: 100%;
height: 270px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.steam-line {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: steamRise 2.6s ease-in-out infinite;
}
.steam-line:nth-child(2) { animation-delay: 0.8s; }
.steam-line:nth-child(3) { animation-delay: 1.6s; }
@keyframes steamRise {
0% { stroke-dashoffset: 40; opacity: 0; transform: translateY(6px); }
50% { opacity: 0.85; }
100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); }
}
.showcase-caption {
border-top: 2px dashed rgba(255, 248, 238, 0.2);
padding-top: 14px;
margin-top: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.showcase-caption h3 {
font-size: 1.35rem;
color: var(--mango);
}
.showcase-caption p {
font-size: 0.85rem;
color: #cfc8e0;
}
.quick-add-hero {
background: var(--gochujang);
color: var(--cream);
border: none;
border-radius: 10px;
padding: 10px 14px;
font-weight: 900;
cursor: pointer;
white-space: nowrap;
box-shadow: 3px 3px 0 var(--mango);
}
.quick-add-hero:hover {
background: #ff4762;
}
/* Section Headers */
section {
padding: 70px 5%;
max-width: 1360px;
margin: 0 auto;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 36px;
}
.section-head h2 {
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}
.section-head h2 span {
color: var(--mango);
}
.eyebrow {
color: var(--gochujang);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.84rem;
margin-bottom: 8px;
display: block;
}
/* Filter Controls + Scoville Meter */
.controls-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
background: var(--char-light);
padding: 14px 18px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-btn {
background: var(--char-card);
color: var(--cream);
border: 1.5px solid transparent;
padding: 9px 16px;
border-radius: 10px;
font-weight: 800;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.15s;
}
.filter-btn:hover {
border-color: var(--mango);
}
.filter-btn.active {
background: var(--gochujang);
color: var(--cream);
border-color: var(--cream);
box-shadow: 3px 3px 0 var(--mango);
}
.heat-dial {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 46, 76, 0.12);
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 46, 76, 0.4);
}
.heat-dial label {
font-size: 0.8rem;
font-weight: 900;
text-transform: uppercase;
color: var(--mango);
}
.heat-levels {
display: flex;
gap: 6px;
}
.heat-chip {
background: var(--char);
color: var(--muted);
border: 1px solid rgba(255,255,255,0.15);
padding: 4px 10px;
border-radius: 6px;
font-size: 0.76rem;
font-weight: 800;
cursor: pointer;
}
.heat-chip.active {
background: var(--mango);
color: var(--char);
border-color: var(--char);
}
/* Menu Grid */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 26px;
}
.menu-card {
background: var(--char-card);
border: 2px solid rgba(255, 248, 238, 0.12);
border-radius: 20px;
padding: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
overflow: hidden;
}
.menu-card:hover {
transform: translateY(-6px);
border-color: var(--mango);
box-shadow: 8px 8px 0 var(--gochujang);
}
.card-top-badges {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.pop-tag {
background: var(--mango);
color: var(--char);
font-weight: 900;
font-size: 0.72rem;
padding: 4px 9px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pop-tag.green {
background: var(--cilantro);
}
.pop-tag.pink {
background: var(--neon-pink);
color: var(--cream);
}
.chili-meter {
font-size: 0.88rem;
letter-spacing: 1px;
}
.dish-art {
height: 130px;
background: radial-gradient(circle, rgba(255, 184, 0, 0.14) 0%, rgba(13, 12, 18, 0.5) 75%);
border-radius: 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border: 1px dashed rgba(255, 248, 238, 0.12);
}
.menu-card h3 {
font-size: 1.45rem;
margin-bottom: 6px;
color: var(--cream);
}
.menu-card .korean-sub {
font-size: 0.78rem;
color: var(--mango);
font-weight: 700;
margin-bottom: 10px;
display: block;
}
.menu-card p {
color: #C8C2D6;
font-size: 0.92rem;
line-height: 1.45;
margin-bottom: 18px;
}
.Sauce-note {
font-size: 0.76rem;
background: rgba(255, 46, 76, 0.14);
color: #FF94A4;
padding: 6px 10px;
border-radius: 8px;
margin-bottom: 16px;
font-weight: 700;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 14px;
}
.price {
font-size: 1.5rem;
font-weight: 900;
color: var(--cilantro);
}
.add-btn {
background: var(--cream);
color: var(--char);
border: none;
padding: 10px 16px;
border-radius: 10px;
font-weight: 900;
font-size: 0.86rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 6px;
}
.add-btn:hover {
background: var(--mango);
transform: scale(1.05);
}
/* Interactive Taco Lab */
.lab-section {
background: linear-gradient(135deg, #1E192B 0%, #120F1D 100%);
border: 3px solid var(--mango);
border-radius: 28px;
padding: 42px;
box-shadow: 12px 12px 0 var(--gochujang);
margin: 30px auto;
}
.lab-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 36px;
align-items: center;
}
.step-group {
margin-bottom: 22px;
}
.step-group h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mango);
margin-bottom: 10px;
}
.option-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.opt-pill {
background: var(--char);
border: 2px solid rgba(255, 248, 238, 0.18);
color: var(--cream);
padding: 10px 14px;
border-radius: 12px;
font-weight: 800;
font-size: 0.86rem;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 7px;
}
.opt-pill:hover {
border-color: var(--mango);
}
.opt-pill.selected {
background: var(--gochujang);
border-color: var(--cream);
box-shadow: 3px 3px 0 var(--mango);
}
.lab-preview {
background: var(--char);
border: 2px dashed rgba(255, 184, 0, 0.5);
border-radius: 22px;
padding: 28px;
text-align: center;
position: relative;
}
.flavor-score-badge {
position: absolute;
top: 14px;
right: 14px;
background: var(--cilantro);
color: var(--char);
font-weight: 900;
font-size: 0.76rem;
padding: 5px 10px;
border-radius: 99px;
}
.custom-taco-title {
font-size: 1.6rem;
color: var(--mango);
margin: 10px 0 6px;
}
.custom-taco-desc {
font-size: 0.88rem;
color: var(--muted);
min-height: 40px;
margin-bottom: 18px;
}
/* Truck Finder & Schedule */
.finder-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
}
.radar-map {
background: #12151F;
border: 2px solid rgba(0, 229, 117, 0.4);
border-radius: 22px;
padding: 24px;
position: relative;
overflow: hidden;
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.map-grid-lines {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0, 229, 117, 0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 229, 117, 0.07) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
}
.map-pin {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 5;
transition: transform 0.2s;
}
.map-pin:hover {
transform: translate(-50%, -50%) scale(1.15);
}
.pin-bubble {
background: var(--char);
border: 2px solid var(--mango);
color: var(--cream);
padding: 6px 11px;
border-radius: 99px;
font-weight: 900;
font-size: 0.75rem;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.6);
display: flex;
align-items: center;
gap: 6px;
}
.map-pin.active .pin-bubble {
background: var(--gochujang);
border-color: var(--cream);
box-shadow: 0 0 20px rgba(255, 46, 76, 0.8);
}
.schedule-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.stop-card {
background: var(--char-card);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.15s;
}
.stop-card:hover, .stop-card.active {
border-color: var(--cilantro);
background: rgba(0, 229, 117, 0.08);
transform: translateX(4px);
}
.stop-day {
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
color: var(--mango);
letter-spacing: 0.08em;
}
.stop-hood {
font-size: 1.15rem;
font-weight: 900;
margin: 2px 0;
}
.stop-addr {
font-size: 0.84rem;
color: var(--muted);
}
.stop-time {
text-align: right;
font-weight: 800;
font-size: 0.85rem;
color: var(--cilantro);
}
/* Slide-over Order Drawer */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.drawer-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.order-drawer {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100vh;
background: var(--char-light);
border-left: 3px solid var(--mango);
z-index: 210;
padding: 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.order-drawer.open {
transform: translateX(0);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid rgba(255,255,255,0.1);
padding-bottom: 16px;
}
.close-drawer {
background: var(--char-card);
color: var(--cream);
border: none;
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 1.2rem;
cursor: pointer;
}
.cart-items {
flex: 1;
overflow-y: auto;
margin: 18px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cart-row {
background: var(--char-card);
padding: 12px 14px;
border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid rgba(255,255,255,0.07);
}
.cart-row-title {
font-weight: 800;
font-size: 0.95rem;
}
.cart-row-sub {
font-size: 0.78rem;
color: var(--mango);
}
.qty-controls {
display: flex;
align-items: center;
gap: 8px;
}
.qty-btn {
background: var(--char);
color: var(--cream);
border: 1px solid rgba(255,255,255,0.2);
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
font-weight: 900;
}
.drawer-footer {
border-top: 2px solid rgba(255,255,255,0.1);
padding-top: 16px;
}
.total-line {
display: flex;
justify-content: space-between;
font-size: 1.25rem;
font-weight: 900;
margin-bottom: 14px;
}
.checkout-btn {
width: 100%;
background: var(--cilantro);
color: var(--char);
border: none;
padding: 16px;
border-radius: 12px;
font-weight: 900;
font-size: 1.05rem;
text-transform: uppercase;
cursor: pointer;
box-shadow: 4px 4px 0 var(--mango);
}
/* Toast Notification */
.toast {
position: fixed;
bottom: 26px;
right: 26px;
background: var(--cilantro);
color: var(--char);
font-weight: 900;
padding: 14px 22px;
border-radius: 12px;
border: 2px solid var(--char);
box-shadow: 6px 6px 0 var(--gochujang);
z-index: 300;
transform: translateY(120px);
transition: transform 0.25s ease;
}
.toast.show {
transform: translateY(0);
}
/* Footer */
footer {
border-top: 2px solid rgba(255, 248, 238, 0.1);
padding: 45px 5% 60px;
text-align: center;
color: var(--muted);
background: #09080D;
}
/* Responsive */
@media (max-width: 960px) {
.hero, .lab-grid, .finder-grid {
grid-template-columns: 1fr;
}
.nav-links {
display: none;
}
.lab-section {
padding: 26px 20px;
}
}
</style>
</head>
<body>
<!-- Sizzling Top Marquee -->
<div class="marquee-bar">
<div class="marquee-track">
<span>🔥 GRAND OPENING WEEK IN DTLA & K-TOWN</span>
<span>🌮 36-HR SOY-GARLIC SHORT RIB</span>
<span>🥬 HOUSE-FERMENTED MOTHER KIMCHI</span>
<span>⚡ CORN TORTILLAS PRESSED TO ORDER</span>
<span>🌶️ FREE GOCHUJANG CHURRO WITH ANY 3-TACO COMBO</span>
<span>🔥 GRAND OPENING WEEK IN DTLA & K-TOWN</span>
<span>🌮 36-HR SOY-GARLIC SHORT RIB</span>
<span>🥬 HOUSE-FERMENTED MOTHER KIMCHI</span>
<span>⚡ CORN TORTILLAS PRESSED TO ORDER</span>
<span>🌶️ FREE GOCHUJANG CHURRO WITH ANY 3-TACO COMBO</span>
</div>
</div>
<!-- Sticky Navigation -->
<nav>
<a href="#" class="brand">
<div class="brand-logo display-font">KL</div>
<div>
<div class="brand-name display-font">KIMCHI <span>LOCO</span></div>
</div>
<span class="brand-ko">김치 로코</span>
</a>
<div class="nav-links">
<a href="#menu">The Menu</a>
<a href="#lab">Taco Lab</a>
<a href="#finder">Truck Radar</a>
<div class="live-pill">
<span class="pulse-dot"></span>
GRILL HOT NOW • K-TOWN
</div>
</div>
<button class="cart-btn" id="openCartBtn">
<span>🥡 SKIP THE LINE</span>
<span class="cart-count" id="cartCount">2</span>
</button>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="hero-copy">
<div class="hero-badge-row">
<span class="street-tag hot">🔥 L.A.'S WILDEST K-MEX TRUCK</span>
<span class="street-tag">✨ HIERLOOM MASA × SEOUL BBQ</span>
</div>
<h1 class="display-font">
SEOUL SOUL.<br>
<span class="stroke-word">BARRIO HEAT.</span><br>
ZERO <span class="green-word">APOLOGIES.</span>
</h1>
<p class="hero-sub">
Charcoal-kissed Korean Galbi & crispy pork belly smashed onto hand-pressed blue corn tortillas, drowned in smoky gochujang crema and 60-day fermented kimchi slaw.
</p>
<div class="hero-cta-group">
<a href="#menu" class="btn-primary">
<span>🔥 SMASH THE MENU</span>
</a>
<a href="#finder" class="btn-secondary">
<span>📍 TRACK THE TRUCK</span>
</a>
</div>
<!-- Live Truck Tracker Mini Card -->
<div class="live-tracker-mini">
<div class="truck-icon-badge">🚚</div>
<div class="tracker-info">
<h4>● SERVING RIGHT NOW (UNTIL 2:00 AM)</h4>
<p id="heroSpotName">6th & Normandie — Koreatown Lot</p>
<span>Next Stop: Arts District Brewing @ 9PM</span>
</div>
<div class="wait-box">
<strong>~6 MIN</strong>
<small>Order Wait</small>
</div>
</div>
</div>
<!-- Hero Visual Stage -->
<div class="hero-stage">
<div class="neon-halo"></div>
<div class="taco-showcase-card">
<div class="floating-sticker sticker-top">⚡ VOTED #1 LATE NIGHT BITE</div>
<div class="floating-sticker sticker-bottom">🌶️ 100% WOOD-FIRED GALBI</div>
<div class="taco-svg-wrap">
<!-- Custom Illustrated Loaded K-Taco SVG -->
<svg viewBox="0 0 420 280" width="100%" height="100%">
<defs>
<linearGradient id="tortillaGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#F6B245"/>
<stop offset="60%" stop-color="#D9821E"/>
<stop offset="100%" stop-color="#8B480B"/>
</linearGradient>
<linearGradient id="kimchiGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF3B56"/>
<stop offset="100%" stop-color="#B00E26"/>
</linearGradient>
</defs>
<!-- Steam wisps -->
<path class="steam-line" d="M140 55 Q130 35 145 18" stroke="#FFF8EE" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<path class="steam-line" d="M210 45 Q225 25 208 8" stroke="#FFB800" stroke-width="4" fill="none" stroke-linecap="round"/>
<path class="steam-line" d="M280 58 Q292 36 276 18" stroke="#FF2E4C" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<!-- Shadow Plate -->
<ellipse cx="210" cy="245" rx="165" ry="20" fill="rgba(0,0,0,0.55)"/>
<!-- Back Tortilla Rim -->
<path d="M55 195 C65 75, 355 75, 365 195 Z" fill="#9E5611" stroke="#FFF8EE" stroke-width="3"/>
<!-- Cilantro & Slaw explosion -->
<circle cx="115" cy="120" r="26" fill="#00E575"/>
<circle cx="155" cy="100" r="28" fill="#00C462"/>
<circle cx="265" cy="102" r="28" fill="#00E575"/>
<circle cx="310" cy="128" r="24" fill="#00C462"/>
<!-- Caramelized Short Rib Chunks -->
<rect x="115" y="112" width="52" height="42" rx="14" fill="#4A1C17" stroke="#FF7733" stroke-width="2.5" transform="rotate(-12 135 130)"/>
<rect x="172" y="98" width="64" height="48" rx="16" fill="#3B1410" stroke="#FF9900" stroke-width="2.5" transform="rotate(5 200 120)"/>
<rect x="235" y="110" width="56" height="44" rx="14" fill="#4A1C17" stroke="#FF5522" stroke-width="2.5" transform="rotate(14 260 130)"/>
<!-- Fiery Kimchi Ribbons -->
<path d="M130 130 Q160 85 195 128 T265 122" fill="none" stroke="url(#kimchiGrad)" stroke-width="18" stroke-linecap="round"/>
<path d="M100 148 Q150 112 215 142 T315 142" fill="none" stroke="#FF2E4C" stroke-width="14" stroke-linecap="round"/>
<!-- Front Blistered Corn Tortilla Shell -->
<path d="M48 205 C68 102, 352 102, 372 205 C330 238, 90 238, 48 205 Z" fill="url(#tortillaGrad)" stroke="#FFF8EE" stroke-width="4"/>
<!-- Char Blister Spots on Tortilla -->
<ellipse cx="125" cy="185" rx="14" ry="7" fill="#3B1D06" opacity="0.65" transform="rotate(-10 125 185)"/>
<ellipse cx="215" cy="196" rx="18" ry="8" fill="#3B1D06" opacity="0.65"/>
<ellipse cx="295" cy="180" rx="12" ry="6" fill="#3B1D06" opacity="0.65" transform="rotate(15 295 180)"/>
<!-- Gochujang Mayo Drizzle -->
<path d="M88 158 Q115 110 138 168 T188 162 T238 170 T288 160 T330 168" fill="none" stroke="#FFF8EE" stroke-width="6" stroke-linecap="round"/>
<path d="M94 162 Q120 114 143 172 T193 166 T243 174 T293 164 T326 170" fill="none" stroke="#FFB800" stroke-width="4" stroke-linecap="round"/>
<!-- Sesame Seeds & Lime Wedge -->
<circle cx="170" cy="120" r="2.8" fill="#FFF8EE"/>
<circle cx="205" cy="112" r="2.8" fill="#FFF8EE"/>
<circle cx="222" cy="125" r="2.8" fill="#FFF8EE"/>
<circle cx="250" cy="116" r="2.8" fill="#FFF8EE"/>
<!-- Lime Wedge -->
<g transform="translate(325, 190) rotate(-20)">
<path d="M0 0 A34 34 0 0 0 68 0 Z" fill="#00E575" stroke="#FFF8EE" stroke-width="3"/>
<path d="M6 0 A28 28 0 0 0 62 0 Z" fill="#B8FF66"/>
</g>
</svg>
</div>
<div class="showcase-caption">
<div>
<h3 class="display-font">THE OG SEOUL-CAL GALBI</h3>
<p>Double-charred short rib, kimchi slaw, crispy garlic</p>
</div>
<button class="quick-add-hero" onclick="addToCart('The OG Seoul-Cal Galbi', 5.50)">+ ADD $5.50</button>
</div>
</div>
</div>
</header>
<!-- Menu Section -->
<section id="menu">
<div class="section-head">
<div>
<span class="eyebrow">🔥 STRAIGHT OFF THE PLANCHA</span>
<h2 class="display-font">THE STREET <span>LINEUP</span></h2>
</div>
<p style="color: var(--muted); max-width: 390px;">
All tacos served on heirloom blue & yellow masa pressed fresh on the truck. Make any item a Kimchi Fried Rice Burrito for +$4.
</p>
</div>
<!-- Interactive Category & Spice Dial -->
<div class="controls-bar">
<div class="filter-tabs" id="categoryTabs">
<button class="filter-btn active" data-cat="all">ALL CRAVINGS</button>
<button class="filter-btn" data-cat="tacos">LOCO TACOS</button>
<button class="filter-btn" data-cat="loaded">LOADED BOMBS</button>
<button class="filter-btn" data-cat="sides">DRINKS & SWEETS</button>
</div>
<div class="heat-dial">
<label>🌶️ DIAL YOUR HEAT:</label>
<div class="heat-levels" id="heatSelector">
<button class="heat-chip" data-heat="1">1 • SEOUL BREEZE</button>
<button class="heat-chip active" data-heat="2">2 • K-TOWN KICK</button>
<button class="heat-chip" data-heat="3">3 • LOCO INFERNO</button>
</div>
</div>
</div>
<!-- Dynamic Menu Grid -->
<div class="menu-grid" id="menuGrid"></div>
</section>
<!-- Interactive Taco Lab -->
<section id="lab">
<div class="lab-section">
<div class="lab-grid">
<div>
<span class="eyebrow">🧪 CUSTOM K-MEX ARCHITECT</span>
<h2 class="display-font" style="font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 10px;">
BUILD YOUR DREAM <span style="color: var(--mango);">LOCO TACO</span>
</h2>
<p style="color: #D2CBE3; margin-bottom: 24px;">
Mix & match our 36-hour marinades, house ferments, and drizzles. We'll torch it to order.
</p>
<div class="step-group">
<h4>1. PICK YOUR SHELL ($4.75 BASE)</h4>
<div class="option-pills" data-group="shell">
<button class="opt-pill selected" data-name="Heirloom Blue Corn" data-price="0">🌽 Pressed Blue Masa</button>
<button class="opt-pill" data-name="Griddled Queso Costra" data-price="1.25">🧀 Crispy Cheese Costra (+$1.25)</button>
<button class="opt-pill" data-name="Puffy Scallion Pancake" data-price="1.50">🥞 Scallionajeon Shell (+$1.50)</button>
</div>
</div>
<div class="step-group">
<h4>2. KOREAN FIRE PROTEIN</h4>
<div class="option-pills" data-group="protein">
<button class="opt-pill selected" data-name="Charred Galbi Short Rib" data-price="1.50">🥩 Galbi Short Rib (+$1.50)</button>
<button class="opt-pill" data-name="Spicy Gochujang Pork Belly" data-price="1.00">🥓 Daeji Bulgogi Pork (+$1.00)</button>
<button class="opt-pill" data-name="Sweet Soy Fried Chicken" data-price="1.00">🍗 Gangjeong Crispy Chicken (+$1.00)</button>
<button class="opt-pill" data-name="Crispy Gochujang Tofu" data-price="0.50">🌱 Crispy Dubu (+$0.50)</button>
</div>
</div>
<div class="step-group">
<h4>3. FERMENT & CRUNCH</h4>
<div class="option-pills" data-group="crunch">
<button class="opt-pill selected" data-name="60-Day Mother Kimchi" data-price="0">🥬 Caramelized Kimchi</button>
<button class="opt-pill" data-name="Pickled Daikon & Serrano" data-price="0">⚡ Pickled Radish & Serrano</button>
<button class="opt-pill" data-name="Sesame Perilla Slaw" data-price="0.50">🌿 Sesame Perilla Crunch (+$0.50)</button>
</div>
</div>
<div class="step-group">
<h4>4. SIGNATURE DRIZZLE</h4>
<div class="option-pills" data-group="sauce">
<button class="opt-pill selected" data-name="Smoky Gochujang Crema" data-price="0">🌶️ Gochujang Crema</button>
<button class="opt-pill" data-name="Roasted Black Garlic Aioli" data-price="0">🧄 Black Garlic Aioli</button>
<button class="opt-pill" data-name="Yuzu Habanero Venom" data-price="0.50">🔥 Yuzu Habanero (+$0.50)</button>
</div>
</div>
</div>
<!-- Live Customizer Preview -->
<div class="lab-preview">
<span class="flavor-score-badge" id="labScore">🔥 99% FLAVOR FREAK MATCH</span>
<div style="font-size: 4.4rem; margin: 12px 0;" id="labEmoji">🌮🔥🥩</div>
<h3 class="display-font custom-taco-title" id="labTitle">THE CUSTOM LOCO</h3>
<p class="custom-taco-desc" id="labSummary">
Heirloom Blue Corn loaded with Charred Galbi Short Rib, 60-Day Mother Kimchi & Smoky Gochujang Crema.
</p>
<div style="font-size: 2.2rem; font-weight: 900; color: var(--cilantro); margin-bottom: 18px;" id="labPrice">
$6.25
</div>
<button class="btn-primary" style="width: 100%; justify-content: center;" id="addCustomBtn">
🚀 THROW ON THE GRILL
</button>
</div>
</div>
</div>
</section>
<!-- Live Truck Radar & Weekly Schedule -->
<section id="finder">
<div class="section-head">
<div>
<span class="eyebrow">📡 FOLLOW THE SMOKE</span>
<h2 class="display-font">LIVE TRUCK <span>RADAR</span></h2>
</div>
<p style="color: var(--muted);">Click any stop to preview parking tips, secret late-night drops & live wait times.</p>
</div>
<div class="finder-grid">
<!-- Interactive stylized L.A. Street Radar -->
<div class="radar-map" id="radarMap">
<div class="map-grid-lines"></div>
<div style="position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center;">
<span class="live-pill"><span class="pulse-dot"></span> GPS LOCKED: LOS ANGELES</span>
<span style="font-size: 0.78rem; color: var(--muted); font-weight: 700;">TAP PINS TO INSPECT</span>
</div>
<!-- Interactive Map Pins -->
<div class="map-pin active" style="top: 46%; left: 32%;" data-stop="0">
<div class="pin-bubble">🚚 K-TOWN (NOW)</div>
</div>
<div class="map-pin" style="top: 62%; left: 68%;" data-stop="1">
<div class="pin-bubble">🍺 ARTS DISTRICT</div>
</div>
<div class="map-pin" style="top: 28%; left: 54%;" data-stop="2">
<div class="pin-bubble">🌙 SILVER LAKE</div>
</div>
<div class="map-pin" style="top: 74%; left: 24%;" data-stop="3">
<div class="pin-bubble">🌊 VENICE FIRST FRI</div>
</div>
<!-- Selected Pin Inspector Box -->
<div style="position: relative; z-index: 4; background: rgba(13, 12, 18, 0.92); border: 2px solid var(--mango); border-radius: 16px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
<div>
<div style="font-size: 0.75rem; font-weight: 900; color: var(--cilantro);" id="mapBoxStatus">● GRILL HOT RIGHT NOW</div>
<div style="font-size: 1.25rem; font-weight: 900;" id="mapBoxTitle">Koreatown — 6th & Normandie Lot</div>
<div style="font-size: 0.84rem; color: var(--muted);" id="mapBoxPerks">Secret Item Tonight: Birria-Kimchi Ramen Cup ($9)</div>
</div>
<button class="cart-btn" onclick="openDrawer()">ORDER FOR PICKUP →</button>
</div>
</div>
<!-- Weekly Stop Cards -->
<div class="schedule-list" id="scheduleList">
<div class="stop-card active" data-stop="0">
<div>
<div class="stop-day">TONIGHT • THU (LIVE NOW)</div>
<div class="stop-hood">Koreatown — 6th & Normandie</div>
<div class="stop-addr">Behind the neon bowling alley • Free lot parking</div>
</div>
<div class="stop-time">6:00 PM – 2:00 AM<br><span style="color: var(--mango);">~6m wait</span></div>
</div>
<div class="stop-card" data-stop="1">
<div>
<div class="stop-day">FRIDAY NIGHT</div>
<div class="stop-hood">Arts District Brewing Patio</div>
<div class="stop-addr">828 Traction Ave • DJ set + Cold Yuzu Lager pairing</div>
</div>
<div class="stop-time">5:00 PM – 1:30 AM<br><span style="color: var(--muted);">Pre-order open</span></div>
</div>
<div class="stop-card" data-stop="2">
<div>
<div class="stop-day">SATURDAY</div>
<div class="stop-hood">Silver Lake — Sunset Triangle</div>
<div class="stop-addr">3700 Sunset Blvd • Dog treats & extra Birria-Kimchi</div>
</div>
<div class="stop-time">12:00 PM – 12:00 AM<br><span style="color: var(--muted);">Weekend Feast</span></div>
</div>
<div class="stop-card" data-stop="3">
<div>
<div class="stop-day">SUNDAY POP-UP</div>
<div class="stop-hood">Smorgasburg ROW DTLA / Abbot Kinney</div>
<div class="stop-addr">777 S Alameda St • Exclusive Lobster Kimchi Taco</div>
</div>
<div class="stop-time">10:00 AM – 4:00 PM<br><span style="color: var(--muted);">Sells out fast</span></div>
</div>
</div>
</div>
</section>
<!-- Slide-Over Pre-Order Bag -->
<div class="drawer-backdrop" id="drawerBackdrop"></div>
<aside class="order-drawer" id="orderDrawer">
<div>
<div class="drawer-header">
<div>
<span style="font-size: 0.75rem; color: var(--cilantro); font-weight: 900;">⚡ PICKUP AT K-TOWN WINDOW</span>
<h3 class="display-font" style="font-size: 1.7rem;">YOUR LOCO BAG</h3>
</div>
<button class="close-drawer" id="closeDrawerBtn">✕</button>
</div>
<div class="cart-items" id="cartItemsContainer"></div>
</div>
<div class="drawer-footer">
<div style="background: rgba(255, 184, 0, 0.12); border: 1px dashed var(--mango); padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; color: var(--mango); margin-bottom: 14px; font-weight: 700;">
🎁 Free Gochujang Churro unlocked at $18+!
</div>
<div class="total-line">
<span>WINDOW TOTAL</span>
<span id="cartTotal" style="color: var(--cilantro);">$14.00</span>
</div>
<button class="checkout-btn" id="fireOrderBtn">🔥 FIRE MY ORDER TO THE GRILL</button>
</div>
</aside>
<!-- Toast Notification -->
<div class="toast" id="toastMsg">🌮 Added to your Loco Bag!</div>
<footer>
<div class="display-font" style="font-size: 2.2rem; color: var(--cream); margin-bottom: 8px;">
KIMCHI <span style="color: var(--mango);">LOCO</span> TRUCK
</div>
<p style="margin-bottom: 18px;">Born in Koreatown • Pressed in East L.A. • Catering & Late-Night Block Parties Available</p>
<p style="font-size: 0.8rem;">© 2025 Kimchi Loco Street Kitchen. All Sauces House-Fermented.</p>
</footer>
<script>
// Menu Data
const menuItems = [
{
id: 1,
name: "OG Seoul-Cal Galbi Taco",
ko: "갈비 타코 • 36-Hr Marinated Short Rib",
cat: "tacos",
price: 5.50,
badge: "BESTSELLER",
badgeClass: "",
chilis: "🌶️🌶️",
desc: "Flame-charred prime beef short rib bathed in Asian pear & soy-garlic, topped with caramelized mother kimchi, cotija, and gochujang crema.",
art: "🥩🔥🌮"
},
{
id: 2,
name: "K-Pop Crispy Pork Belly",
ko: "삼겹살 타코 • Gochujang Glazed",
cat: "tacos",
price: 5.25,
badge: "CRISPY AF",
badgeClass: "pink",
chilis: "🌶️🌶️🌶️",
desc: "Double-seared pork belly glazed in honey-gochujang, pickled jalapeño daikon crunch, charred pineapple salsa, and cilantro lime.",
art: "🥓🍍🌶️"
},
{
id: 3,
name: "Seoul Hot Honey Chicken",
ko: "양념 치킨 • Twice-Fried Crunch",
cat: "tacos",
price: 5.00,
badge: "CROWD FAV",
badgeClass: "green",
chilis: "🌶️🌶️",
desc: "Shatter-crisp potato-starch fried chicken tossed in sweet garlic gangjeong glaze, sesame slaw, and roasted black garlic ranch.",
art: "🍗🍯✨"
},
{
id: 4,
name: "Kimchi Quesabirria Vampiro",
ko: "김치 비리아 • Crispy Cheese Dipper",
cat: "loaded",
price: 8.50,
badge: "MUST TRY",
badgeClass: "",
chilis: "🌶️🌶️🌶️",
desc: "Oaxaca & mozzarella cheese crusted blue corn tortilla stuffed with gochujang-braised beef birria & aged kimchi. Served with hot bone consommé.",
art: "🧀🥩🍲"
},
{
id: 5,
name: "LA Dirty Kimchi Fries",
ko: "김치 프라이 • Shareable Monster",
cat: "loaded",
price: 12.50,
badge: "LATE NIGHT KING",
badgeClass: "pink",
chilis: "🌶️🌶️",
desc: "Beer-battered crinkle fries buried under charred bulgogi ribeye, kimchi queso blanco, sriracha mayo, scallions, and a runny fried egg.",
art: "🍟🍳🔥"
},
{
id: 6,
name: "Crispy Gochujang Tofu Taco",
ko: "두부 타코 • 100% Plant Power",
cat: "tacos",
price: 4.75,
badge: "VEGAN FIRE",
badgeClass: "green",
chilis: "🌶️🌶️",
desc: "Puffed non-GMO tofu wok-blistered in sweet chili glaze, vegan white kimchi slaw, avocado mousse, and toasted sesame seeds.",
art: "🌱🥑🌮"
},
{
id: 7,
name: "Gochujang Dulce Churros",
ko: "고추장 추로스 • Sweet & Spicy Dust",
cat: "sides",
price: 6.00,
badge: "SWEET HEAT",
badgeClass: "",
chilis: "🌶️",
desc: "Fresh-fried crunchy churros dusted in cinnamon, Korean sun-dried chili sugar, and black sesame. Served with warm condensed milk dip.",
art: "🥖🍫✨"
},
{
id: 8,
name: "Yuzu Calaman-See Horchata",
ko: "유자 오르차타 • House Agua Fresca",
cat: "sides",
price: 4.50,
badge: "ICE COLD",
badgeClass: "green",
chilis: "❄️",
desc: "Creamy toasted rice & cinnamon horchata spiked with bright Korean yuzu citrus and a toasted sesame rim. Tames any inferno.",
art: "🥤🍋🧊"
}
];
let currentCategory = "all";
let currentHeatLevel = 2;
const heatNames = {
1: "Mild Yuzu-Soy Drizzle",
2: "Signature K-Town Gochujang Kick",
3: "Loco Ghost-Gochugaru Inferno"
};
// Initial Cart State
let cart = [
{ name: "OG Seoul-Cal Galbi Taco", note: "Heat: K-Town Kick", price: 5.50, qty: 1 },
{ name: "Kimchi Quesabirria Vampiro", note: "With Hot Consommé", price: 8.50, qty: 1 }
];
const menuGrid = document.getElementById("menuGrid");
function renderMenu() {
const filtered = currentCategory === "all"
? menuItems
: menuItems.filter(item => item.cat === currentCategory);
menuGrid.innerHTML = filtered.map(item => `
<article class="menu-card">
<div>
<div class="card-top-badges">
<span class="pop-tag ${item.badgeClass}">${item.badge}</span>
<span class="chili-meter">${item.chilis}</span>
</div>
<div class="dish-art">
<span style="font-size: 3.4rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));">${item.art}</span>
</div>
<h3 class="display-font">${item.name}</h3>
<span class="korean-sub">${item.ko}</span>
<p>${item.desc}</p>
</div>
<div>
<div class="Sauce-note">🌶️ Prepared w/ ${heatNames[currentHeatLevel]}</div>
<div class="card-footer">
<span class="price">$${item.price.toFixed(2)}</span>
<button class="add-btn" onclick="addToCart('${item.name}', ${item.price})">
<span>+ ADD TO BAG</span>
</button>
</div>
</div>
</article>
`).join("");
}
// Filter Tab Listeners
document.querySelectorAll("#categoryTabs .filter-btn").forEach(btn => {
btn.addEventListener("click", () => {
document.querySelectorAll("#categoryTabs .filter-btn").forEach(b => b.classList.remove("active"));
btn.classList.add("active");
currentCategory = btn.dataset.cat;
renderMenu();
});
});
// Heat Level Listeners
document.querySelectorAll("#heatSelector .heat-chip").forEach(chip => {
chip.addEventListener("click", () => {
document.querySelectorAll("#heatSelector .heat-chip").forEach(c => c.classList.remove("active"));
chip.classList.add("active");
currentHeatLevel = Number(chip.dataset.heat);
renderMenu();
});
});
// Interactive Taco Lab Logic
const labState = {
shell: { name: "Heirloom Blue Corn", price: 0 },
protein: { name: "Charred Galbi Short Rib", price: 1.50 },
crunch: { name: "60-Day Mother Kimchi", price: 0 },
sauce: { name: "Smoky Gochujang Crema", price: 0 }
};
function updateLabPreview() {
const total = 4.75 + labState.shell.price + labState.protein.price + labState.crunch.price + labState.sauce.price;
document.getElementById("labPrice").textContent = `$${total.toFixed(2)}`;
document.getElementById("labSummary").textContent =
`${labState.shell.name} loaded with ${labState.protein.name}, ${labState.crunch.name} & ${labState.sauce.name}.`;
}
document.querySelectorAll(".option-pills .opt-pill").forEach(pill => {
pill.addEventListener("click", () => {
const group = pill.parentElement.dataset.group;
pill.parentElement.querySelectorAll(".opt-pill").forEach(p => p.classList.remove("selected"));
pill.classList.add("selected");
labState[group] = {
name: pill.dataset.name,
price: parseFloat(pill.dataset.price)
};
updateLabPreview();
});
});
document.getElementById("addCustomBtn").addEventListener("click", () => {
const total = 4.75 + labState.shell.price + labState.protein.price + labState.crunch.price + labState.sauce.price;
const customNote = `${labState.shell.name} + ${labState.crunch.name}`;
addToCart(`Custom ${labState.protein.name} Taco`, total, customNote);
});
// Truck Radar Interactive Pins & Cards
const stopsData = [
{
status: "● GRILL HOT RIGHT NOW (UNTIL 2:00 AM)",
title: "Koreatown — 6th & Normandie Lot",
perks: "Secret Item Tonight: Birria-Kimchi Ramen Cup ($9)"
},
{
status: "● TOMORROW NIGHT • 5:00 PM – 1:30 AM",
title: "Arts District Brewing Patio",
perks: "Cold Yuzu Lager Pint + 3 Galbi Tacos Combo Available"
},
{
status: "● SATURDAY • 12:00 PM – MIDNIGHT",
title: "Silver Lake — Sunset Triangle Plaza",
perks: "Free Kimchi Queso Cup for the first 50 orders!"
},
{
status: "● SUNDAY DAYTIME • 10:00 AM – 4:00 PM",
title: "Smorgasburg ROW DTLA Pop-Up",
perks: "Exclusive Butter-Poached Lobster Kimchi Taco Drop"
}
];
function selectStop(index) {
document.querySelectorAll(".map-pin").forEach(p => p.classList.toggle("active", Number(p.dataset.stop) === index));
document.querySelectorAll(".stop-card").forEach(c => c.classList.toggle("active", Number(c.dataset.stop) === index));
const data = stopsData[index];
document.getElementById("mapBoxStatus").textContent = data.status;
document.getElementById("mapBoxTitle").textContent = data.title;
document.getElementById("mapBoxPerks").textContent = data.perks;
}
document.querySelectorAll(".map-pin, .stop-card").forEach(el => {
el.addEventListener("click", () => selectStop(Number(el.dataset.stop)));
});
// Cart & Drawer Functions
function renderCart() {
const container = document.getElementById("cartItemsContainer");
const countEl = document.getElementById("cartCount");
const totalEl = document.getElementById("cartTotal");
const totalCount = cart.reduce((sum, i) => sum + i.qty, 0);
const totalPrice = cart.reduce((sum, i) => sum + i.price * i.qty, 0);
countEl.textContent = totalCount;
totalEl.textContent = `$${totalPrice.toFixed(2)}`;
if (cart.length === 0) {
container.innerHTML = `<p style="color: var(--muted); text-align:center; margin-top: 40px;">Your bag is empty — load up on Galbi tacos!</p>`;
return;
}
container.innerHTML = cart.map((item, idx) => `
<div class="cart-row">
<div>
<div class="cart-row-title">${item.name}</div>
<div class="cart-row-sub">${item.note} • $${(item.price * item.qty).toFixed(2)}</div>
</div>
<div class="qty-controls">
<button class="qty-btn" onclick="changeQty(${idx}, -1)">-</button>
<span style="font-weight:900;">${item.qty}</span>
<button class="qty-btn" onclick="changeQty(${idx}, 1)">+</button>
</div>
</div>
`).join("");
}
function addToCart(name, price, customNote) {
const note = customNote || `Heat Level ${currentHeatLevel}`;
const existing = cart.find(i => i.name === name && i.note === note);
if (existing) {
existing.qty += 1;
} else {
cart.push({ name, price, note, qty: 1 });
}
renderCart();
showToast(`🌮 Added ${name} to bag!`);
}
function changeQty(idx, delta) {
cart[idx].qty += delta;
if (cart[idx].qty <= 0) cart.splice(idx, 1);
renderCart();
}
function showToast(msg) {
const toast = document.getElementById("toastMsg");
toast.textContent = msg;
toast.classList.add("show");
setTimeout(() => toast.classList.remove("show"), 2400);
}
function openDrawer() {
document.getElementById("orderDrawer").classList.add("open");
document.getElementById("drawerBackdrop").classList.add("open");
}
function closeDrawer() {
document.getElementById("orderDrawer").classList.remove("open");
document.getElementById("drawerBackdrop").classList.remove("open");
}
document.getElementById("openCartBtn").addEventListener("click", openDrawer);
document.getElementById("closeDrawerBtn").addEventListener("click", closeDrawer);
document.getElementById("drawerBackdrop").addEventListener("click", closeDrawer);
document.getElementById("fireOrderBtn").addEventListener("click", () => {
if (cart.length === 0) return;
cart = [];
renderCart();
closeDrawer();
showToast("🔥 Order #KL-808 Fired! Ready in ~6 mins at K-Town window!");
});
// Initialize Page
renderMenu();
renderCart();
</script>
</body>
</html>