Food truck websiteOne-line

GLM 5.3

by Z.aiReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 58.2 s
Cost: $0.011
Output tokens: 5,737
Spent thinking: 19 tokens
Speed: 99.4 tok/s
Console errors: 0

First token after: 529 ms
First visible text after: 918 ms
Prompt tokens: 362
Code size: 16.8 KB
Finish reason: stop
Served by: Decart
Model id: z-ai/glm-5.3
Reasoning sent: {"effort":"low"}
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 · 509 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean Tacos that Go Loco</title>
<style>
  :root{
    --ink:#1a0b0e;
    --cream:#fff6ea;
    --red:#e63329;
    --gochujang:#d92b2b;
    --lime:#c8e64a;
    --yellow:#ffc93c;
    --hot-pink:#ff4f8b;
    --teal:#0e7c6b;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Arial Rounded MT Bold','Hiragino Maru Gothic ProN','Quicksand',Arial,sans-serif;
    background:var(--cream);
    color:var(--ink);
    overflow-x:hidden;
  }
  @keyframes marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }
  @keyframes floaty{
    0%,100%{transform:translateY(0) rotate(-4deg)}
    50%{transform:translateY(-14px) rotate(4deg)}
  }
  @keyframes steam{
    0%{opacity:0;transform:translateY(0) scaleX(1)}
    15%{opacity:.8}
    100%{opacity:0;transform:translateY(-60px) scaleX(1.6)}
  }
  @keyframes pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.06)}
  }
  @keyframes drive{
    0%{transform:translateX(-120%)}
    100%{transform:translateX(100vw)}
  }
  .ticker{
    background:var(--ink);
    color:var(--yellow);
    overflow:hidden;
    white-space:nowrap;
    padding:10px 0;
    font-weight:900;
    letter-spacing:.12em;
    font-size:.85rem;
    text-transform:uppercase;
  }
  .ticker span{
    display:inline-block;
    animation:marquee 22s linear infinite;
    padding-right:0;
  }
  .ticker b{color:var(--hot-pink);margin:0 14px}
  header{
    background:var(--red);
    position:relative;
    overflow:hidden;
    padding:0 5vw 40px;
  }
  .nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    position:relative;
    z-index:5;
  }
  .logo{
    background:var(--yellow);
    color:var(--ink);
    font-weight:900;
    font-size:1.35rem;
    padding:10px 18px;
    border-radius:14px;
    transform:rotate(-3deg);
    box-shadow:6px 6px 0 var(--ink);
    letter-spacing:.02em;
  }
  .logo em{color:var(--red);font-style:normal}
  .nav-links{display:flex;gap:26px;list-style:none;font-weight:700;font-size:.95rem}
  .nav-links a{color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}
  .nav-links a:hover{color:var(--yellow)}
  .hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    align-items:center;
    padding:30px 0 10px;
    position:relative;
    z-index:4;
  }
  .hero h1{
    font-size:clamp(2.6rem,6.2vw,5.2rem);
    line-height:.98;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:-.01em;
    text-shadow:5px 5px 0 rgba(0,0,0,.25);
  }
  .hero h1 .stroke{
    color:transparent;
    -webkit-text-stroke:3px var(--yellow);
  }
  .hero h1 .lime{color:var(--lime)}
  .hero p.sub{
    margin:22px 0 28px;
    font-size:1.15rem;
    color:#ffe9d6;
    max-width:34ch;
    line-height:1.55;
    font-weight:600;
  }
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
  .btn{
    display:inline-block;
    padding:16px 30px;
    border-radius:60px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
    text-decoration:none;
    font-size:1rem;
    transition:transform .15s, box-shadow .15s;
  }
  .btn-main{background:var(--yellow);color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
  .btn-main:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
  .btn-ghost{background:transparent;color:#fff;border:3px solid #fff}
  .btn-ghost:hover{background:rgba(255,255,255,.14)}
  .truck-scene{
    position:relative;
    background:var(--cream);
    border:5px solid var(--ink);
    border-radius:30px;
    padding:34px 10px 0;
    box-shadow:14px 14px 0 var(--ink);
    transform:rotate(2deg);
    overflow:hidden;
    min-height:300px;
  }
  .roadline{
    position:absolute;bottom:46px;left:0;right:0;height:6px;
    background:repeating-linear-gradient(90deg,var(--ink) 0 26px,transparent 26px 48px);
  }
  .truck{
    width:230px;
    margin:0 auto;
    display:block;
    animation:floaty 4s ease-in-out infinite;
    position:relative;
    z-index:2;
  }
  .steam{
    position:absolute;width:10px;height:34px;border-radius:50%;
    background:rgba(26,11,14,.25);
    bottom:190px;left:50%;
    animation:steam 2.4s ease-out infinite;
    filter:blur(5px);
    z-index:1;
  }
  .steam.s2{left:58%;animation-delay:.8s}
  .steam.s3{left:42%;animation-delay:1.5s}
  .stamp{
    position:absolute;
    top:16px;right:14px;
    background:var(--hot-pink);
    color:#fff;
    font-weight:900;
    padding:10px 14px;
    border-radius:50%;
    font-size:.72rem;
    text-align:center;
    line-height:1.2;
    transform:rotate(12deg);
    animation:pulse 2s ease-in-out infinite;
    box-shadow:4px 4px 0 var(--ink);
  }
  .badge-strip{
    background:var(--ink);
    padding:26px 5vw;
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .badge{
    color:var(--cream);
    border:2px dashed rgba(255,255,255,.35);
    border-radius:60px;
    padding:10px 26px;
    font-weight:700;
    font-size:.95rem;
  }
  .badge b{color:var(--yellow)}
  section{padding:80px 5vw;position:relative}
  .sec-title{
    text-align:center;
    font-size:clamp(2rem,4.5vw,3.4rem);
    text-transform:uppercase;
    letter-spacing:-.01em;
    margin-bottom:12px;
  }
  .sec-title .accent{color:var(--red)}
  .sec-sub{
    text-align:center;
    font-weight:700;
    color:#7a5c50;
    margin-bottom:54px;
    font-size:1.05rem;
  }
  .menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:26px;
    max-width:1100px;
    margin:0 auto;
  }
  .card{
    background:#fff;
    border:4px solid var(--ink);
    border-radius:24px;
    padding:28px 26px 26px;
    position:relative;
    transition:transform .2s, box-shadow .2s;
  }
  .card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:10px 10px 0 var(--ink)}
  .card .price{
    position:absolute;top:-16px;right:20px;
    background:var(--lime);border:3px solid var(--ink);
    border-radius:50%;width:62px;height:62px;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:1.05rem;
    transform:rotate(8deg);
  }
  .card h3{font-size:1.5rem;margin-bottom:6px;text-transform:uppercase}
  .kor{font-size:.85rem;color:var(--red);font-weight:900;letter-spacing:.14em;margin-bottom:12px;display:block}
  .card p{font-size:.98rem;line-height:1.55;color:#5c443c;font-weight:600}
  .tag{
    display:inline-block;margin-top:16px;
    background:var(--yellow);
    border:2px solid var(--ink);
    padding:4px 12px;border-radius:40px;
    font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  }
  .heat{color:var(--red);letter-spacing:2px;margin-top:14px;font-size:1rem;display:block}
  .story{
    background:var(--teal);
    color:var(--cream);
    padding:90px 5vw;
    position:relative;
    overflow:hidden;
  }
  .story-inner{
    max-width:900px;margin:0 auto;text-align:center;
  }
  .story h2{
    font-size:clamp(2rem,4.5vw,3.4rem);
    text-transform:uppercase;
    margin-bottom:24px;
    color:var(--lime);
    text-shadow:4px 4px 0 rgba(0,0,0,.25);
  }
  .story p{
    font-size:1.2rem;line-height:1.7;font-weight:600;max-width:62ch;margin:0 auto 18px;
  }
  .bubbles span{
    position:absolute;border-radius:50%;opacity:.18;background:var(--lime);
  }
  .visit{
    background:var(--cream);
    text-align:center;
  }
  .find-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:26px;
    max-width:960px;margin:0 auto;
  }
  .visit-card{
    background:#fff;border:4px solid var(--ink);border-radius:24px;
    padding:32px 26px;box-shadow:8px 8px 0 var(--ink);
  }
  .visit-card h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:12px}
  .visit-card p{font-weight:600;line-height:1.6;font-size:1rem}
  .today{
    margin-top:44px;
    display:inline-block;
    background:var(--ink);color:var(--yellow);
    padding:18px 34px;border-radius:60px;
    font-weight:900;font-size:1.05rem;
    animation:pulse 2.6s ease-in-out infinite;
  }
  footer{
    background:var(--ink);color:var(--cream);
    text-align:center;
    padding:40px 5vw 90px;
    font-weight:600;font-size:.95rem;
    position:relative;
  }
  footer .mini{color:#a08d85;font-size:.8rem;margin-top:10px}
  .driveby{
    position:fixed;bottom:-6px;left:0;width:90px;
    animation:drive 9s linear infinite;
    opacity:.9;pointer-events:none;z-index:50;
  }
  @media(max-width:820px){
    .hero{grid-template-columns:1fr;text-align:center}
    .hero p.sub{margin-inline:auto}
    .nav-links{display:none}
    .stamp{font-size:.62rem;top:8px;right:8px}
  }
</style>
</head>
<body>

<div class="ticker">
  <span>
    🔥 BULGOGI TACOS • GOCHUJANG FRIES • KIMCHI QUESADILLAS 🔥 TODAY ONLY: FREE KIMCHI WITH ANY 2 TACOS <b>★</b> 🔥 SEOUL MEETS TACO TUESDAY EVERY DAY 🔥 FIND US ON INSTA @KIMCHILOCO <b>★</b> &nbsp;
  </span>
</div>

<header id="home">
  <nav class="nav">
    <div class="logo">KIMCHI <em>LOCO</em></div>
    <ul class="nav-links">
      <li><a href="#menu">Menu</a></li>
      <li><a href="#story">Story</a></li>
      <li><a href="#visit">Find Us</a></li>
    </ul>
  </nav>
  <div class="hero">
    <div>
      <h1>Seoul.<br><span class="stroke">Meets.</span><br><span class="lime">Street.</span></h1>
      <p class="sub">Korean-marinated meats. Hand-pressed tortillas. Gochujang that slaps. We took the best taco on earth and made it go loco.</p>
      <div class="cta-row">
        <a class="btn btn-main" href="#menu">See the Menu</a>
        <a class="btn btn-ghost" href="#visit">Find the Truck</a>
      </div>
    </div>
    <div class="truck-scene">
      <div class="stamp">OPEN<br>TODAY<br>12–9</div>
      <div class="steam"></div>
      <div class="steam s2"></div>
      <div class="steam s3"></div>
      <svg class="truck" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg">
        <!-- body -->
        <rect x="30" y="50" width="200" height="90" rx="14" fill="#e63329" stroke="#1a0b0e" stroke-width="5"/>
        <!-- cab -->
        <path d="M230 78 L272 78 L284 118 L284 132 Q284 140 276 140 L230 140 Z" fill="#ffc93c" stroke="#1a0b0e" stroke-width="5"/>
        <path d="M238 84 L268 84 L276 116 L238 116 Z" fill="#bfe6f2" stroke="#1a0b0e" stroke-width="4"/>
        <!-- window -->
        <rect x="52" y="66" width="70" height="40" rx="8" fill="#bfe6f2" stroke="#1a0b0e" stroke-width="5"/>
        <!-- text -->
        <text x="140" y="105" font-family="Arial" font-size="26" font-weight="900" fill="#fff6ea" text-anchor="middle">KIMCHI</text>
        <rect x="88" y="118" width="104" height="18" rx="9" fill="#c8e64a" stroke="#1a0b0e" stroke-width="4"/>
        <text x="140" y="132" font-family="Arial" font-size="13" font-weight="900" fill="#1a0b0e" text-anchor="middle">LOCO!</text>
        <!-- awning stripes -->
        <rect x="42" y="42" width="176" height="12" rx="6" fill="#ff4f8b" stroke="#1a0b0e" stroke-width="4"/>
        <!-- wheels -->
        <circle cx="75" cy="142" r="22" fill="#1a0b0e"/>
        <circle cx="75" cy="142" r="9" fill="#fff6ea"/>
        <circle cx="240" cy="142" r="22" fill="#1a0b0e"/>
        <circle cx="240" cy="142" r="9" fill="#fff6ea"/>
        <!-- service window -->
        <rect x="160" y="62" width="52" height="46" rx="8" fill="#fff6ea" stroke="#1a0b0e" stroke-width="5"/>
        <path d="M186 62 q-8 -16 0 -26 q8 10 0 26" fill="none" stroke="#1a0b0e" stroke-width="4"/>
      </svg>
      <div class="roadline"></div>
    </div>
  </div>
</header>

<div class="badge-strip">
  <div class="badge">🥩 Marinated <b>24 hrs</b></div>
  <div class="badge">🌶️ 5 Heat Levels</div>
  <div class="badge">🌮 Tortillas pressed <b>to order</b></div>
  <div class="badge">🏆 Best Fusion ’24 — <b>Street Eats Awards</b></div>
</div>

<section id="menu">
  <h2 class="sec-title">The <span class="accent">Loco</span> Menu</h2>
  <p class="sec-sub">Small menu. Big flavor. Everything made in the truck, every day.</p>
  <div class="menu-grid">
    <div class="card">
      <div class="price">$7</div>
      <h3>Bulgogi Taco</h3>
      <span class="kor">불고기 타코</span>
      <p>Soy-and-pear marinated beef grilled over flame, piled on fresh tortillas with kimchi slaw, cilantro, and lime gochujang crema.</p>
      <span class="tag">Best Seller</span>
      <span class="heat">🌶️🌶️</span>
    </div>
    <div class="card">
      <div class="price">$8</div>
      <h3>Fried Chicken Taco</h3>
      <span class="kor">치킨 타코</span>
      <p>Double-fried Korean chicken, crunchy pickled radish, cucumber ribbons, and a drizzle of sweet-spicy yangnyeom sauce.</p>
      <span class="tag">Fan Favorite</span>
      <span class="heat">🌶️🌶️🌶️</span>
    </div>
    <div class="card">
      <div class="price">$6</div>
      <h3>Tofu Bossam Taco</h3>
      <span class="kor">두부 타코</span>
      <p>Caramelized gochujang-glazed tofu, crispy shallots, sesame kale, and scallion crema. Even carnivores order seconds.</p>
      <span class="tag">Vegan</span>
      <span class="heat">🌶️</span>
    </div>
    <div class="card">
      <div class="price">$6</div>
      <h3>Gochujang Fries</h3>
      <span class="kor">고추장 감자</span>
      <p>Hand-cut fries drowned in gochujang aioli, melted cheese, bulgogi bits, scallions, and toasted sesame. Bring a friend. Or don't share.</p>
      <span class="tag">Loaded</span>
      <span class="heat">🌶️🌶️</span>
    </div>
    <div class="card">
      <div class="price">$8</div>
      <h3>Kimchi Quesadilla</h3>
      <span class="kor">김치 케사디야</span>
      <p>Aged kimchi + stretchy mozzarella + bulgogi, crisped on the flat-top with a side of sour gochujang for dunking.</p>
      <span class="tag">Cheesy Pull</span>
      <span class="heat">🌶️</span>
    </div>
    <div class="card">
      <div class="price">$5</div>
      <h3>Mexican Coke & Sides</h3>
      <span class="kor">음료</span>
      <p>Ice-cold Mexican Coke, sikhye rice punch, and house pickles. Taco day beer specials on Fridays!</p>
      <span class="tag">Ice Cold</span>
      <span class="heat">🧊</span>
    </div>
  </div>
</section>

<section class="story" id="story">
  <div class="bubbles">
    <span style="width:180px;height:180px;top:-40px;left:-40px"></span>
    <span style="width:90px;height:90px;bottom:30px;left:12%"></span>
    <span style="width:140px;height:140px;top:20%;right:-50px"></span>
    <span style="width:60px;height:60px;bottom:-10px;right:20%"></span>
  </div>
  <div class="story-inner">
    <h2>Abuela Meets Halmoni</h2>
    <p>Kimchi Loco started with two friends, one abuela's tortilla press, one halmoni's secret marinade, and a stubborn belief that these two kitchens belong together.</p>
    <p>Every morning we brine our own kimchi, marinate our meats overnight, and press tortillas until they puff. No shortcuts. No heat lamps. Just a line down the block and a lot of napkins.</p>
    <a class="btn btn-main" href="#visit">Get in Line →</a>
  </div>
</section>

<section class="visit" id="visit">
  <h2 class="sec-title">Find the <span class="accent">Truck</span></h2>
  <p class="sec-sub">We roll to a new spot every day. Here's where we're slinging this week.</p>
  <div class="find-grid">
    <div class="visit-card">
      <h3>📍 Mon – Wed</h3>
      <p>Downtown Food Truck Lot<br>4th &amp; Main<br>11am – 8pm</p>
    </div>
    <div class="visit-card">
      <h3>📍 Thu – Fri</h3>
      <p>Riverside Brewing Co.<br>Taproom Patio<br>12pm – 10pm</p>
    </div>
    <div class="visit-card">
      <h3>📍 Weekends</h3>
      <p>Farmers Market on 5th<br>+ late-night spots<br>Follow @kimchiloco</p>
    </div>
  </div>
  <br><br>
  <div class="today">🔥 TODAY'S SPECIAL: 3 tacos + fries + drink — $20 🔥</div>
</section>

<footer>
  <div>Kimchi Loco Food Truck • Catering &amp; events: hello@kimchiloco.com</div>
  <div class="mini">📍 Follow the smell of grilled bulgogi. You'll find us.</div>
</footer>

<svg class="driveby" viewBox="0 0 300 180" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <rect x="30" y="50" width="200" height="90" rx="14" fill="#ff4f8b" stroke="#1a0b0e" stroke-width="5"/>
  <path d="M230 78 L272 78 L284 118 L284 132 Q284 140 276 140 L230 140 Z" fill="#ffc93c" stroke="#1a0b0e" stroke-width="5"/>
  <circle cx="75" cy="142" r="22" fill="#1a0b0e"/>
  <circle cx="75" cy="142" r="9" fill="#fff6ea"/>
  <circle cx="240" cy="142" r="22" fill="#1a0b0e"/>
  <circle cx="240" cy="142" r="9" fill="#fff6ea"/>
</svg>

<script>
  // Drive-by truck crosses every 9s — also re-trigger on click for fun
  document.querySelectorAll('.driveby').forEach(el=>{
    el.addEventListener('animationiteration',()=>{});
  });
  // Gentle parallax float on hero truck with mouse
  const truck = document.querySelector('.truck-scene');
  window.addEventListener('mousemove',e=>{
    if(window.innerWidth<820) return;
    const x=(e.clientX/window.innerWidth-.5)*4;
    const y=(e.clientY/window.innerHeight-.5)*4;
    truck.style.transform=`rotate(2deg) translate(${x}px,${y}px)`;
  },{passive:true});
</script>
</body>
</html>

Reasoning trace (19 tokens)

Create a vibrant food truck landing page with bold design, K-Mex fusion theme, animations.