Models 44

Gemini 3.8 Flash

by GoogleReasoningClean
Open in new window

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
Google
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>