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
- 51.8 s
- Cost
- $0.035
- Output tokens
- 9,182
- Spent thinking
- 0 tokens
- Speed
- 182 tok/s
- Console errors
- 0
- First token after
- 1.4 s
- First visible text after
- 1.4 s
- Prompt tokens
- 367
- Code size
- 25.1 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
{"effort":"low"}- 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 · 963 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 meets Cali Street Heat</title>
<style>
:root {
--neon-red: #ff1744;
--neon-orange: #ff5722;
--spicy-yellow: #ffeb3b;
--fresh-lime: #76ff03;
--dark-asphalt: #0f1115;
--card-bg: #181b22;
--street-white: #f8fafc;
--charcoal: #232733;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: var(--dark-asphalt);
color: var(--street-white);
overflow-x: hidden;
line-height: 1.5;
}
/* GRAIN OVERLAY */
.grain {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none;
z-index: 99;
opacity: 0.04;
background: radial-gradient(circle, #fff 10%, transparent 11%);
background-size: 4px 4px;
}
/* NAVBAR */
nav {
position: sticky;
top: 0;
background: rgba(15, 17, 21, 0.95);
backdrop-filter: blur(12px);
border-bottom: 2px solid #272c38;
z-index: 50;
padding: 14px 28px;
display: flex;
justify-content: space-between;
align-items: center;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 900;
font-size: 1.6rem;
letter-spacing: -1px;
text-transform: uppercase;
}
.brand span.kimchi {
color: var(--neon-red);
text-shadow: 0 0 16px rgba(255, 23, 68, 0.6);
}
.brand span.loco {
color: var(--spicy-yellow);
transform: rotate(-3deg);
display: inline-block;
}
.nav-pills {
display: flex;
gap: 16px;
align-items: center;
}
.live-pill {
background: rgba(118, 255, 3, 0.12);
border: 1px solid var(--fresh-lime);
color: var(--fresh-lime);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.live-dot {
width: 8px;
height: 8px;
background: var(--fresh-lime);
border-radius: 50%;
box-shadow: 0 0 10px var(--fresh-lime);
animation: pulse 1.4s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(0.8); }
}
/* HERO SECTION */
.hero {
position: relative;
padding: 50px 24px 60px;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
}
.badge-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.hero-tag {
background: #ff174426;
color: #ff5252;
border: 1px dashed var(--neon-red);
padding: 5px 12px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
}
h1 {
font-size: clamp(2.8rem, 6vw, 4.4rem);
font-weight: 900;
line-height: 1.02;
letter-spacing: -2px;
margin-bottom: 20px;
text-transform: uppercase;
}
h1 em {
font-style: italic;
background: linear-gradient(135deg, var(--neon-red), var(--spicy-yellow));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-lead {
font-size: 1.25rem;
color: #cbd5e1;
margin-bottom: 28px;
max-width: 540px;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
appearance: none;
border: none;
cursor: pointer;
font-weight: 800;
font-size: 1.05rem;
padding: 14px 28px;
border-radius: 8px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: linear-gradient(135deg, var(--neon-red), var(--neon-orange));
color: #fff;
box-shadow: 0 10px 24px rgba(255, 23, 68, 0.45);
}
.btn-secondary {
background: var(--charcoal);
color: #fff;
border: 1px solid #3c4458;
}
/* LIVE RADAR CARD */
.radar-card {
background: linear-gradient(145deg, #1d212b, #13151b);
border: 2px solid #2e3547;
border-radius: 20px;
padding: 24px;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
}
.radar-card::before {
content: "TRUCK DISPATCH // LIVE";
position: absolute;
top: 14px; right: 18px;
font-size: 0.65rem;
letter-spacing: 1.5px;
font-weight: 800;
color: #64748b;
}
.truck-status {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid #2a3040;
}
.truck-icon-wrap {
width: 60px;
height: 60px;
background: #ff572224;
border: 1px solid var(--neon-orange);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
.truck-info h3 {
font-size: 1.3rem;
font-weight: 800;
color: var(--street-white);
}
.truck-info p {
font-size: 0.9rem;
color: #94a3b8;
}
.truck-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 20px;
}
.metric-box {
background: #0f1115;
padding: 12px;
border-radius: 10px;
border: 1px solid #222735;
}
.metric-box span {
display: block;
font-size: 0.72rem;
color: #94a3b8;
text-transform: uppercase;
font-weight: 700;
}
.metric-box strong {
font-size: 1.2rem;
font-weight: 900;
color: var(--spicy-yellow);
}
/* Ticker tape */
.ticker-wrap {
background: var(--neon-red);
color: #fff;
font-weight: 900;
font-size: 0.85rem;
padding: 10px 0;
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(255, 23, 68, 0.4);
transform: rotate(-0.8deg) scale(1.02);
}
.ticker-content {
display: inline-block;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
/* SECTION WRAPPERS */
.section {
max-width: 1200px;
margin: 60px auto;
padding: 0 24px;
}
.section-header {
margin-bottom: 36px;
text-align: center;
}
.section-subtitle {
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--neon-orange);
display: block;
margin-bottom: 6px;
}
.section-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
letter-spacing: -1.5px;
text-transform: uppercase;
}
/* MENU CARDS */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.menu-card {
background: var(--card-bg);
border: 1px solid #262c3a;
border-radius: 16px;
padding: 24px;
position: relative;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu-card:hover {
transform: translateY(-6px);
border-color: var(--neon-orange);
box-shadow: 0 16px 30px rgba(0,0,0,0.4);
}
.menu-card.flagship {
border: 2px solid var(--neon-red);
background: linear-gradient(160deg, #1e1b26, #181b22);
}
.popular-badge {
position: absolute;
top: -12px;
right: 20px;
background: linear-gradient(90deg, var(--neon-red), var(--neon-orange));
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(255, 23, 68, 0.5);
}
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.card-top h4 {
font-size: 1.4rem;
font-weight: 900;
letter-spacing: -0.5px;
}
.card-top .price {
font-size: 1.4rem;
font-weight: 900;
color: var(--fresh-lime);
background: #76ff0315;
padding: 2px 10px;
border-radius: 6px;
border: 1px solid #76ff0330;
}
.card-desc {
color: #94a3b8;
font-size: 0.95rem;
margin-bottom: 16px;
}
.flavor-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.ftag {
background: #0b0d11;
border: 1px solid #262c3b;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
color: #cbd5e1;
}
.ftag.fire {
color: #ff5722;
border-color: #ff572250;
}
.order-quick-btn {
width: 100%;
background: #252a37;
color: #fff;
border: 1px solid #3b4256;
padding: 10px;
border-radius: 8px;
font-weight: 800;
cursor: pointer;
transition: background 0.15s, color 0.15s;
text-transform: uppercase;
font-size: 0.85rem;
}
.order-quick-btn:hover {
background: var(--neon-red);
color: #fff;
border-color: var(--neon-red);
}
/* FLAVOR ARCHITECTURE (INTERACTIVE) */
.fusion-lab {
background: #14171f;
border: 2px dashed #303749;
border-radius: 20px;
padding: 36px 28px;
margin: 60px 0;
}
.fusion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
align-items: center;
}
.fusion-column h4 {
font-size: 1.3rem;
margin-bottom: 12px;
text-transform: uppercase;
font-weight: 900;
display: flex;
align-items: center;
gap: 8px;
}
.fusion-column p {
color: #94a3b8;
font-size: 0.92rem;
}
/* SECRET SAUCE BAROMETER (INTERACTIVE BUILDER) */
.sauce-builder {
background: #1a1e28;
border-radius: 16px;
padding: 24px;
border: 1px solid #2d3547;
}
.heat-levels {
display: flex;
gap: 8px;
margin: 14px 0 18px;
}
.heat-btn {
flex: 1;
background: #0f1116;
border: 1px solid #343c50;
color: #fff;
padding: 10px 4px;
font-size: 0.8rem;
font-weight: 800;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
text-align: center;
}
.heat-btn.active {
background: var(--neon-red);
border-color: var(--neon-red);
box-shadow: 0 0 14px rgba(255, 23, 68, 0.6);
}
.sauce-result {
background: #0e1015;
padding: 14px;
border-radius: 10px;
font-size: 0.9rem;
border-left: 4px solid var(--neon-red);
}
/* REVIEWS & HYPE */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.review-card {
background: var(--card-bg);
border: 1px solid #242937;
border-radius: 14px;
padding: 20px;
}
.review-stars {
color: var(--spicy-yellow);
margin-bottom: 8px;
font-size: 1.1rem;
letter-spacing: 2px;
}
.review-text {
font-size: 0.95rem;
color: #cbd5e1;
margin-bottom: 12px;
font-style: italic;
}
.review-author {
font-size: 0.8rem;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
}
/* ORDER BANNER */
.order-banner {
background: linear-gradient(135deg, #ff1744, #d50000);
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: 0 20px 40px rgba(255, 23, 68, 0.3);
margin: 70px 0;
}
.order-banner h2 {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
text-transform: uppercase;
margin-bottom: 12px;
letter-spacing: -1px;
}
.order-banner p {
font-size: 1.2rem;
max-width: 650px;
margin: 0 auto 24px;
font-weight: 600;
color: #ffebee;
}
/* CART DRAWER / TOAST */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #11141a;
border: 2px solid var(--fresh-lime);
color: #fff;
padding: 16px 22px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 14px;
font-weight: 800;
box-shadow: 0 20px 40px rgba(0,0,0,0.8);
transform: translateY(120px);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100;
}
.toast.show {
transform: translateY(0);
}
footer {
border-top: 1px solid #212532;
padding: 30px 24px;
text-align: center;
color: #64748b;
font-size: 0.85rem;
}
@media (max-width: 860px) {
.hero {
grid-template-columns: 1fr;
padding-top: 24px;
}
.radar-card {
margin-top: 10px;
}
}
</style>
</head>
<body>
<div class="grain"></div>
<nav>
<div class="brand">
🌮 <span class="kimchi">Kimchi</span> <span class="loco">Loco</span>
</div>
<div class="nav-pills">
<div class="live-pill">
<div class="live-dot"></div>
Truck Sizzling Now
</div>
</div>
</nav>
<!-- HERO -->
<header class="hero">
<div>
<div class="badge-row">
<span class="hero-tag">🔥 Seoul Meets Cali Heat</span>
<span class="hero-tag">🌮 Authentic 72-Hour Marinade</span>
</div>
<h1>The Crunchiest, <em>Spiciest</em> Fusion On Wheels.</h1>
<p class="hero-lead">Crispy double-pressed corn tortillas, charred prime Bulgogi beef, caramelized aged kimchi, and avocado crema that'll blow your mind.</p>
<div class="hero-actions">
<button class="btn btn-primary" onclick="scrollToMenu()">See Today's Menu</button>
<button class="btn btn-secondary" onclick="simulateLocationPing()">Track Our GPS</button>
</div>
</div>
<div class="radar-card">
<div class="truck-status">
<div class="truck-icon-wrap">🚚</div>
<div class="truck-info">
<h3 id="truck-spot">Arts District / 2nd & Santa Fe</h3>
<p id="truck-hours">Serving until 11:30 PM (or sold out!)</p>
</div>
</div>
<div class="truck-metrics">
<div class="metric-box">
<span>Average Wait</span>
<strong id="wait-time">6-9 Mins</strong>
</div>
<div class="metric-box">
<span>Kimchi Ferment Age</span>
<strong>Day 42 (Peak Sour)</strong>
</div>
<div class="metric-box">
<span>Prime Kalbi Remaining</span>
<strong style="color:var(--neon-red);" id="rib-stock">18 Portions</strong>
</div>
<div class="metric-box">
<span>Craft Agua Frescas</span>
<strong>Hibiscus Yuzu Ice</strong>
</div>
</div>
<button class="order-quick-btn" style="background:var(--fresh-lime); color:#000; border:none;" onclick="triggerSecretPerk()">
⚡ Flash Perk: Click to Claim Free Kimchi Fries Upgrade
</button>
</div>
</header>
<!-- TICKER -->
<div class="ticker-wrap">
<div class="ticker-content">
🌶️ BULGOGI BIRRIA QUESATACOS • 🔥 HOUSE FERMENTED KIMCHI • 🥑 AVOCADO YUZU CREMA • 🌮 FRESH HAND-PRESSED TORTILLAS • 🧀 CRISPY OAXACA CHEESE CRUST • 🌶️ BULGOGI BIRRIA QUESATACOS • 🔥 HOUSE FERMENTED KIMCHI • 🥑 AVOCADO YUZU CREMA • 🌮 FRESH HAND-PRESSED TORTILLAS • 🧀 CRISPY OAXACA CHEESE CRUST
</div>
</div>
<!-- MENU SECTION -->
<main class="section" id="menu">
<div class="section-header">
<span class="section-subtitle">Straight Outta The Flattop</span>
<h2 class="section-title">Street Weapons</h2>
</div>
<div class="menu-grid">
<!-- Item 1 -->
<div class="menu-card flagship">
<div class="popular-badge">#1 Crowd Killer</div>
<div>
<div class="card-top">
<h4>The OG Bulgogi Taco Trio</h4>
<span class="price">$14</span>
</div>
<p class="card-desc">72-hr soy-pear marinated ribeye, griddled Oaxaca cheese crust, sharp kimchi slaw, cilantro and drizzle of sesame gochujang salsa.</p>
<div class="flavor-tags">
<span class="ftag fire">Medium Spice</span>
<span class="ftag">Sweet & Savory</span>
<span class="ftag">Cheesy Crust</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('The OG Bulgogi Taco Trio', 14)">+ Add To Stash</button>
</div>
<!-- Item 2 -->
<div class="menu-card">
<div>
<div class="card-top">
<h4>Seoul Birria Ramen & Quesatacos</h4>
<span class="price">$16</span>
</div>
<p class="card-desc">Braised short-rib quesatacos dunked into a spicy Shin-infused rich bone marrow consommé. Absolute soul warmer.</p>
<div class="flavor-tags">
<span class="ftag fire">Extra Hot</span>
<span class="ftag">Dip & Slurp</span>
<span class="ftag">Rich Umami</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('Seoul Birria Ramen & Quesatacos', 16)">+ Add To Stash</button>
</div>
<!-- Item 3 -->
<div class="menu-card">
<div>
<div class="card-top">
<h4>Crazy K-Pork Carnitas</h4>
<span class="price">$13</span>
</div>
<p class="card-desc">Slow-roasted citrus pork belly glazed in fiery Gochugaru honey, pickled daikon radish, fresh mint, crushed toasted peanuts.</p>
<div class="flavor-tags">
<span class="ftag fire">Sweet Heat</span>
<span class="ftag">Crisp Pork Belly</span>
<span class="ftag">Zesty</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('Crazy K-Pork Carnitas', 13)">+ Add To Stash</button>
</div>
<!-- Item 4 -->
<div class="menu-card">
<div>
<div class="card-top">
<h4>Loco Kimchi Loaded Fries</h4>
<span class="price">$11</span>
</div>
<p class="card-desc">Beer-battered crinkle fries drowned in cotija queso, sauteed caramelized kimchi, scallions, roasted nori and garlic crema.</p>
<div class="flavor-tags">
<span class="ftag">Vegetarian Friendly</span>
<span class="ftag">Shareable</span>
<span class="ftag">Addicting</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('Loco Kimchi Loaded Fries', 11)">+ Add To Stash</button>
</div>
<!-- Item 5 -->
<div class="menu-card">
<div>
<div class="card-top">
<h4>Crispy Tofu & Mushroom Loco</h4>
<span class="price">$12</span>
</div>
<p class="card-desc">Flash-fried ginger tofu + braised shiitake mushrooms tossed in spicy black-bean glaze, crushed avocado, salsa macha.</p>
<div class="flavor-tags">
<span class="ftag">100% Plant Power</span>
<span class="ftag fire">Medium Kick</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('Crispy Tofu & Mushroom', 12)">+ Add To Stash</button>
</div>
<!-- Item 6 -->
<div class="menu-card">
<div>
<div class="card-top">
<h4>Churro Hotteok Bites</h4>
<span class="price">$8</span>
</div>
<p class="card-desc">Korean sweet pancake meets street churro. Molten brown sugar cinnamon core, rolled in Mexican canela sugar and condensed milk.</p>
<div class="flavor-tags">
<span class="ftag">Dessert</span>
<span class="ftag">Molten Core</span>
<span class="ftag">Sweet Finish</span>
</div>
</div>
<button class="order-quick-btn" onclick="addToOrder('Churro Hotteok Bites', 8)">+ Add To Stash</button>
</div>
</div>
<!-- INTERACTIVE FUSION LAB -->
<div class="fusion-lab">
<div class="fusion-grid">
<div class="fusion-column">
<span class="section-subtitle">Custom Heat Index</span>
<h4>Find Your Sauce Profile</h4>
<p>Every taco comes calibrated to your taste. Test our secret signature sauce matrix before you pull up to the window:</p>
</div>
<div class="sauce-builder">
<span style="font-size:0.75rem; text-transform:uppercase; font-weight:800; color:#94a3b8;">Choose Your Heat Level:</span>
<div class="heat-levels">
<button class="heat-btn" onclick="setHeat(0)">Chill (Mild)</button>
<button class="heat-btn active" onclick="setHeat(1)">Loco (Medium)</button>
<button class="heat-btn" onclick="setHeat(2)">Diablo (Hot)</button>
<button class="heat-btn" onclick="setHeat(3)">K-Death (10/10)</button>
</div>
<div class="sauce-result" id="sauce-desc">
<strong>Level 2: Loco Signature Gochu-Verde</strong><br>
Roasted tomatillos, fermented red pepper paste, roasted garlic, and lime juice. Tangy, zippy, and deeply savory.
</div>
</div>
</div>
</div>
<!-- REVIEWS -->
<div class="section-header">
<span class="section-subtitle">Real Street Buzz</span>
<h2 class="section-title">Words From The Block</h2>
</div>
<div class="reviews-grid">
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">"I drove 45 minutes in rush-hour traffic just to get those Bulgogi Birria Quesatacos. Dipping that cheesy corn taco into that Shin-bone consomme is spiritual."</p>
<div class="review-author">— Dave C., LA Food Blogger</div>
</div>
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">"The kimchi isn't just a gimmick. You can tell they actually ferment it with love. That perfect sour bite with greasy charred kalbi is unbeatable."</p>
<div class="review-author">— Sarah Y., Yelp Elite</div>
</div>
<div class="review-card">
<div class="review-stars">★★★★★</div>
<p class="review-text">"The Hotteok churro bites changed my life. Do not leave the truck window without ordering them. 10 out of 10."</p>
<div class="review-author">— Marcus T., Night Shift Regular</div>
</div>
</div>
<!-- CALL TO ACTION BANNER -->
<div class="order-banner">
<h2>Hungry Yet? Come Grab A Bite.</h2>
<p>Follow the neon lights and the smell of toasted sesame oil and sizzling beef. No reservations needed. Just pull up.</p>
<button class="btn btn-secondary" style="background:#000; border:none; padding:18px 36px; font-size:1.1rem;" onclick="simulateLocationPing()">
📍 Show Truck Map & Directions
</button>
</div>
</main>
<footer>
<p>© Kimchi Loco Street Trucks • Fresh Daily • Follow us on IG @KimchiLocoTruck for daily parking drops</p>
</footer>
<!-- INTERACTIVE TOAST -->
<div class="toast" id="toast">
<span style="font-size:1.4rem;">🌮</span>
<span id="toast-text">Item added to order!</span>
</div>
<script>
let orderCount = 0;
let totalCash = 0;
function scrollToMenu() {
document.getElementById('menu').scrollIntoView({ behavior: 'smooth' });
}
function addToOrder(itemName, price) {
orderCount++;
totalCash += price;
const toast = document.getElementById('toast');
const toastText = document.getElementById('toast-text');
toastText.innerHTML = `Added <strong>${itemName}</strong>! (Total: $${totalCash})`;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 2800);
}
const heatProfiles = [
{
title: "Level 1: Sesame Yuzu Crema",
desc: "Zero pain, all cream. Toasted sesame oil, citrus zest, and cooling Mexican crema to soothe your palate."
},
{
title: "Level 2: Loco Signature Gochu-Verde",
desc: "Roasted tomatillos, fermented red pepper paste, roasted garlic, and lime juice. Tangy, zippy, and deeply savory."
},
{
title: "Level 3: Fire Habanero Gochujang",
desc: "Smoked orange habaneros blitzed with 100-day aged red pepper mash. Lingering sweat and massive aroma."
},
{
title: "Level 4: Ghost Pepper Bulgogi Glaze",
desc: "Warning: Made with Carolina Reaper oil and charred ghost peppers. Signs of euphoria and crying guaranteed."
}
];
function setHeat(index) {
const buttons = document.querySelectorAll('.heat-btn');
buttons.forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
const container = document.getElementById('sauce-desc');
container.innerHTML = `<strong>${heatProfiles[index].title}</strong><br>${heatProfiles[index].desc}`;
}
function simulateLocationPing() {
const spots = [
"Arts District / 2nd & Santa Fe (Current Spot)",
"Silver Lake Meadow / Silver Lake Blvd",
"Venice Boardwalk / Abbot Kinney Corner",
"K-Town 6th & Alexandria"
];
const spot = spots[Math.floor(Math.random() * spots.length)];
const truckSpotEl = document.getElementById('truck-spot');
truckSpotEl.style.color = 'var(--neon-orange)';
truckSpotEl.innerText = spot;
const toast = document.getElementById('toast');
const toastText = document.getElementById('toast-text');
toastText.innerText = `GPS Updated: Truck parked at ${spot}!`;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
truckSpotEl.style.color = '#fff';
}, 3000);
}
function triggerSecretPerk() {
const ribStock = document.getElementById('rib-stock');
ribStock.innerText = "COUPON: FREE-FRIES-LOCO";
ribStock.style.color = "var(--fresh-lime)";
const toast = document.getElementById('toast');
const toastText = document.getElementById('toast-text');
toastText.innerHTML = `🔥 Code <strong>FREE-FRIES-LOCO</strong> activated! Flash this to the cashier!`;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 4000);
}
</script>
</body>
</html>