Food truck websiteOne-line

Nemotron 3 Super

by NVIDIAreasoning defaultClean

Open in new window

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

How it went

Total time: 21.3 s
Cost: $0.0013
Output tokens: 3,263
Spent thinking: 554 tokens
Speed: 159.2 tok/s
Console errors: 0

First token after: 799 ms
First visible text after: 6.8 s
Prompt tokens: 381
Code size: 6.6 KB
Finish reason: stop
Served by: DeepInfra
Model id: nvidia/nemotron-3-super-120b-a12b
Reasoning sent: model default
Max output: 16,384 tokens
Generated: Nov 13, 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 · 200 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kimchi Loco – Korean Taco Truck</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  :root {
    --primary:#d32f2f;
    --secondary:#ffeb3b;
    --dark:#212121;
    --light:#fafafa;
    --accent:#ff9800;
    --radius:12px;
    --shadow:0 4px 12px rgba(0,0,0,.15);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:system-ui, sans-serif;
    background:#fff8e1;
    color:var(--dark);
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;height:auto}
  .container{width:90%;max-width:1200px;margin:auto;padding:1rem}
  header{
    text-align:center;
    padding:2rem 0;
    background:linear-gradient(135deg,var(--primary),#b71c1c);
    color:var(--light);
    border-radius:var(--radius);
    margin-bottom:2rem;
    box-shadow:var(--shadow);
  }
  header h1{font-size:2.5rem;margin-bottom:.5rem}
  header p{font-size:1.2rem;opacity:.9}
  .hero{
    background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect width="200" height="200" fill="%23fff3e0"/><path d="M20,80 Q100,0 180,80 T380,80" fill="none" stroke="%23ffb74d" stroke-width="8"/><circle cx="50" cy="110" r="12" fill="%238d6e63"/><circle cx="150" cy="110" r="12" fill="%238d6e63"/><circle cx="250" cy="110" r="12" fill="%238d6e63"/><circle cx="350" cy="110" r="12" fill="%238d6e63"/></svg>') center/cover no-repeat;
    color:var(--light);
    text-align:center;
    padding:4rem 1rem;
    border-radius:var(--radius);
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(255,255,255,.1), transparent 70%);
    pointer-events:none;
  }
  .hero h2{font-size:2rem;margin-bottom:.5rem}
  .hero p{font-size:1.2rem;margin-bottom:1.5rem}
  .btn{
    display:inline-block;
    background:var(--secondary);
    color:var(--dark);
    padding:.75rem 1.5rem;
    border-radius:var(--radius);
    font-weight:600;
    transition:background .2s, transform .2s;
  }
  .btn:hover{
    background:#ffd54f;
    transform:translateY(-2px);
  }
  section{margin:2rem 0}
  section h2{
    text-align:center;
    font-size:1.8rem;
    margin-bottom:1.5rem;
    color:var(--primary);
  }
  .menu-grid{
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
  .card{
    background:var(--light);
    border-radius:var(--radius);
    padding:1rem;
    box-shadow:var(--shadow);
    text-align:center;
    transition:transform .2s;
  }
  .card:hover{transform:translateY(-4px)}
  .card svg{width:80px;height:80px;margin-bottom:.8rem}
  .card h3{margin:.5rem 0;font-size:1.2rem;color:var(--primary)}
  .card p{font-size:.9rem;color:#555}
  .schedule{
    background:var(--primary);
    color:var(--light);
    padding:1.5rem;
    border-radius:var(--radius);
    text-align:center;
  }
  .schedule p{margin:.5rem 0;font-size:1.1rem}
  footer{
    text-align:center;
    padding:1.5rem;
    font-size:.9rem;
    color:#555;
    border-top:1px solid #ddd;
    margin-top:2rem;
  }
  @media (max-width:480px){
    header h1{font-size:2rem}
    .hero h2{font-size:1.5rem}
  }
</style>
</head>
<body>
<header>
  <h1>Kimchi Loco</h1>
  <p>Korean‑style tacos that ignite your taste buds</p>
</header>

<section class="hero">
  <h2>Taste the Fusion</h2>
  <p>Crispy tortillas filled with bulgogi, kimchi slaw, spicy gochujang drizzle, and fresh cilantro.</p>
  <a href="#menu" class="button btn">See Our Menu</a>
</section>

<section id="menu" class="container">
  <h2>Today’s Specials</h2>
  <div class="menu-grid">
    <!-- Bulgogi Taco -->
    <div class="card">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <!-- tortilla -->
        <ellipse cx="50" cy="80" rx="45" ry="15" fill="#fff3e0"/>
        <!-- meat -->
        <path d="M30,70 Q50,30 70,70" fill="#bf360c"/>
        <!-- kimchi -->
        <circle cx="40" cy="55" r="6" fill="#e53935"/>
        <circle cx="60" cy="55" r="6" fill="#e53935"/>
        <!-- lettuce -->
        <path d="M20,80 Q30,65 40,80 Q50,95 60,80 Q70,65 80,80" fill="#8bc34a"/>
        <!-- cheese -->
        <rect x="30" y="75" width="40" height="8" fill="#ffeb3b" rx="2"/>
        <!-- sesame seeds -->
        <circle cx="35" cy="70" r="1.5" fill="#212121"/>
        <circle cx="55" cy="70" r="1.5" fill="#212121"/>
        <circle cx="45" cy="65" r="1.5" fill="#212121"/>
      </svg>
      <h3>Bulgogi Bliss</h3>
      <p>Marinated beef, kimchi slaw, gochujang aioli, sesame.</p>
    </div>
    <!-- Spicy Pork Taco -->
    <div class="card">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="50" cy="80" rx="45" ry="15" fill="#fff3e0"/>
        <path d="M30,70 Q50,20 70,70" fill="#c62828"/>
        <circle cx="40" cy="55" r="6" fill="#ff9800"/>
        <circle cx="60" cy="55" r="6" fill="#ff9800"/>
        <path d="M20,80 Q30,65 40,80 Q50,95 60,80 Q70,65 80,80" fill="#cddc39"/>
        <rect x="30" y="75" width="40" height="8" fill="#ffeb3b" rx="2"/>
        <circle cx="35" cy="70" r="1.5" fill="#212121"/>
        <circle cx="55" cy="70" r="1.5" fill="#212121"/>
        <circle cx="45" cy="65" r="1.5" fill="#212121"/>
      </svg>
      <h3>Spicy Pork Fire</h3>
      <p>Gochujang pork, pickled radish, cilantro, lime.</p>
    </div>
    <!-- Vegan Taco -->
    <div class="card">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="50" cy="80" rx="45" ry="15" fill="#fff3e0"/>
        <path d="M30,70 Q50,25 70,70" fill="#6d4c41"/>
        <circle cx="40" cy="55" r="6" fill="#4caf50"/>
        <circle cx="60" cy="55" r="6" fill="#4caf50"/>
        <path d="M20,80 Q30,65 40,80 Q50,95 60,80 Q70,65 80,80" fill="#8bc34a"/>
        <rect x="30" y="75" width="40" height="8" fill="#ffeb3b" rx="2"/>
        <circle cx="35" cy="70" r="1.5" fill="#212121"/>
        <circle cx="55" cy="70" r="1.5" fill="#212121"/>
        <circle cx="45" cy="65" r="1.5" fill="#212121"/>
      </svg>
      <h3>Kimchi Veggie</h3>
      <p>Grilled tofu, kimchi, avocado, sesame‑lime dressing.</p>
    </div>
  </div>
</section>

<section class="container">
  <h2>Where to Find Us</h2>
  <div class="schedule">
    <p>📍 <strong>Downtown Plaza</strong> – Mon‑Fri 11am‑8pm</p>
    <p>📍 <strong>Riverfront Park</strong> – Sat‑Sun 12pm‑9pm</p>
    <p>🕒 Follow us on Instagram <a href="#" target="_blank">@kimchiloco</a> for real‑time location updates.</p>
  </div>
</section>

<footer>
  © 2025 Kimchi Loco – All Rights Reserved
</footer>
</body>
</html>

Reasoning trace (554 tokens)

We need to produce a website for a Korean taco food truck "Kimchi Loco". Must be self-contained HTML with CSS and JS inline. Must be appealing, maybe with some animation, and a call to action. Should be responsive, no external resources (except allowed CDN URLs? Not specified any allowed; we must not use external resources. So we must embed everything, no external fonts (but we can use system fonts or Google Fonts? The instruction says no external files, images, fonts, or network requests except CDN URLs explicitly allowed by the task. None given, so we can't use external fonts. We'll use system fonts. We can embed base64 images? Probably not needed; we can avoid images or use CSS shapes. Maybe we can use inline SVG for logo.

Goal: make people want to come. We'll have hero section with animated background, mouth-watering description, menu cards, location schedule, social links (but no external calls; just display). Use CSS animations.

Make it simple but effective.

We need to output a single code block: ```html ... </html> ```.

Let's craft.

We'll have:

- Header with logo (SVG).
- Hero: background gradient, overlay, heading, tagline, button "See Today's Location".
- Menu section: three tacos with images (maybe using placeholder base64? Could use simple CSS circles with colors). Maybe better to use simple SVG icons.
- Hours/Location: show schedule (maybe just static).
- Footer.

Make responsive with media queries.

Add subtle animation on load: fade-in.

Add a "Click or press a key to start"? Not a game; not required. So we can skip that.

But we must ensure something meaningful visible on first paint. Yes.

Let's craft.

We'll embed some base64 images of tacos? Might be heavy. Could use placeholder using CSS: we can draw taco shapes with SVG inline.

Simplify: Use emojis? Not ideal but okay.

Better: Use SVG for taco illustration.

We'll create simple taco SVG: a tortilla shape with filling.

But we can also just use images via data URI from a placeholder like "https://via.placeholder.com/150"? That's external request (via placeholder.com). Not allowed. So we must avoid external requests. Use inline SVG.

Let's create simple SVG for taco: a rounded rectangle (tortilla) with some fillings (lettuce, cheese, meat). We'll use three different fill colors.

We'll place them in menu cards.

Ok.

Let's write HTML.

We'll need CSS for layout: flex, grid.

Let's produce.