Food truck websiteOne-line

Dots3-Note Preview (free)

by Dots StudioReasoningClean

Open in new window

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

How it went

Total time: 31.5 s
Cost: $0
Output tokens: 3,146
Spent thinking: 0 tokens
Speed: 101.6 tok/s
Console errors: 0

First token after: 561 ms
First visible text after: 561 ms
Prompt tokens: 364
Code size: 9.4 KB
Finish reason: stop
Served by: AtlasCloud
Model id: dots-studio/dots-3-note-preview:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 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 · 245 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-Mex Fusion Taco Truck</title>
<style>
  /* ===== Reset & Base ===== */
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:#222;
    line-height:1.6;
    overflow-x:hidden;
  }
  a { text-decoration:none; color:inherit; }
  .container { width:90%; max-width:1200px; margin:0 auto; }

  /* ===== Header / Nav ===== */
  header {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(255,255,255,.95); box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:background .3s ease;
  }
  header.scrolled { background:rgba(255,255,255,.98); }
  nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; }
  .logo { font-size:1.8rem; font-weight:800; color:#e63946; }
  .logo span { color:#f4a261; }
  .nav-links { display:flex; gap:2rem; }
  .nav-links a { font-weight:600; transition:color .2s; }
  .nav-links a:hover { color:#e63946; }
  .hamburger { display:none; font-size:1.5rem; cursor:pointer; }

  /* ===== Hero ===== */
  .hero {
    height:100vh; min-height:600px;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:#fff; padding:0 1rem;
  }
  .hero h1 { font-size:3.5rem; margin-bottom:1rem; text-shadow:2px 2px 8px rgba(0,0,0,.7); }
  .hero p { font-size:1.2rem; max-width:600px; margin:0 auto 2rem; text-shadow:1px 1px 4px rgba(0,0,0,.7); }
  .btn {
    display:inline-block; padding:.9rem 2rem; background:#e63946; color:#fff;
    border-radius:50px; font-weight:700; font-size:1rem; transition:transform .2s, background .2s;
  }
  .btn:hover { transform:translateY(-3px); background:#c1121f; }

  /* ===== Sections ===== */
  section { padding:5rem 0; }
  .section-title { text-align:center; margin-bottom:3rem; }
  .section-title h2 { font-size:2.5rem; color:#e63946; margin-bottom:.5rem; }
  .section-title p { color:#555; max-width:600px; margin:0 auto; }

  /* ===== Menu Grid ===== */
  .menu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
  .menu-card {
    background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .menu-card:hover { transform:translateY(-8px); box-shadow:0 15px 30px rgba(0,0,0,.15); }
  .menu-card img { width:100%; height:200px; object-fit:cover; }
  .menu-card .info { padding:1.2rem; }
  .menu-card h3 { font-size:1.3rem; color:#e63946; margin-bottom:.5rem; }
  .menu-card p { color:#555; font-size:.95rem; }
  .price { color:#f4a261; font-weight:700; font-size:1.1rem; }

  /* ===== Story ===== */
  .story { background:#fff8f0; }
  .story-content { display:flex; flex-wrap:wrap; align-items:center; gap:3rem; }
  .story-text { flex:1; min-width:280px; }
  .story-text h2 { font-size:2.2rem; color:#e63946; margin-bottom:1rem; }
  .story-text p { margin-bottom:1rem; color:#444; }
  .story-img { flex:1; min-width:280px; }
  .story-img img { width:100%; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.12); }

  /* ===== Location / Hours ===== */
  .info-grid { display:flex; flex-wrap:wrap; gap:3rem; justify-content:center; }
  .info-box { flex:1; min-width:280px; background:#fff; padding:2rem; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,.06); text-align:center; }
  .info-box h3 { color:#e63946; margin-bottom:1rem; font-size:1.5rem; }
  .info-box p { color:#444; }

  /* ===== Footer ===== */
  footer { background:#222; color:#fff; padding:3rem 1rem 1.5rem; text-align:center; }
  footer .socials { margin-bottom:1.5rem; }
  footer .socials a { display:inline-block; margin:0 .8rem; font-size:1.5rem; transition:color .2s; }
  footer .socials a:hover { color:#f4a261; }
  footer p { color:#aaa; font-size:.9rem; }

  /* ===== Responsive ===== */
  @media (max-width:768px) {
    .nav-links { display:none; }
    .hamburger { display:block; }
    .hero h1 { font-size:2.5rem; }
    .section-title h2 { font-size:2rem; }
  }
  @media (max-width:480px) {
    .hero h1 { font-size:2rem; }
    .btn { padding:.8rem 1.5rem; }
  }
</style>
</head>
<body>

  <!-- Header -->
  <header id="header">
    <div class="container">
      <nav>
        <div class="logo">Kimchi<span>Loco</span></div>
        <div class="nav-links">
          <a href="#home">Home</a>
          <a href="#menu">Menu</a>
          <a href="#story">Story</a>
          <a href="#visit">Visit</a>
        </div>
        <div class="hamburger">☰</div>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section class="hero" id="home">
    <div class="container">
      <h1>Kimchi Loco</h1>
      <p>Where Korean fire meets Mexican soul. Handcrafted tacos, crafted with love and a whole lot of kimchi.</p>
      <a href="#menu" class="btn">See Our Menu</a>
    </div>
  </section>

  <!-- Menu -->
  <section id="menu">
    <div class="container">
      <div class="section-title">
        <h2>Our Signature Tacos</h2>
        <p>Each taco is a flavor explosion — bold, fresh, and unforgettable.</p>
      </div>
      <div class="menu-grid">
        <div class="menu-card">
          <img src="https://images.unsplash.com/photo-1565299624946-b28340a0caea?auto=format&fit=crop&w=600&q=80" alt="Kimchi Beef Taco">
          <div class="info">
            <h3>Kimchi Beef</h3>
            <p>Marinated bulgogi, house-fermented kimchi, sesame seeds, and a drizzle of gochujang aioli.</p>
            <div class="price">$4.50</div>
          </div>
        </div>
        <div class="menu-card">
          <img src="https://images.unsplash.com/photo-1551183053-bf91a8327e5f?auto=format&fit=crop&w=600&q=80" alt="Spicy Pork Taco">
          <div class="info">
            <h3>Spicy Pork</h3>
            <p>Slow-braised pork shoulder, spicy gochujang glaze, pickled radish, and scallions.</p>
            <div class="price">$4.25</div>
          </div>
        </div>
        <div class="menu-card">
          <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=600&q=80" alt="Tofu Kimchi Taco">
          <div class="info">
            <h3>Tofu Kimchi</h3>
            <p>Crispy tofu, aged kimchi, avocado crema, and a sprinkle of toasted seaweed.</p>
            <div class="price">$4.00</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Story -->
  <section class="story" id="story">
    <div class="container">
      <div class="story-content">
        <div class="story-text">
          <h2>From Seoul to the Streets</h2>
          <p>Kimchi Loco was born from a love of two cultures: the bold, fermented flavors of Korean cuisine and the vibrant, handheld joy of Mexican tacos. Our founder, a Korean-American foodie, spent years perfecting the ultimate fusion recipe — and now, we’re bringing it to you, one taco at a time.</p>
          <p>Every kimchi is made in-house, every sauce is scratch-made, and every tortilla is warmed to perfection. We’re not just serving food — we’re serving a story.</p>
        </div>
        <div class="story-img">
          <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?auto=format&fit=crop&w=600&q=80" alt="Kimchi Loco Truck">
        </div>
      </div>
    </div>
  </section>

  <!-- Visit -->
  <section id="visit">
    <div class="container">
      <div class="section-title">
        <h2>Find Us on the Streets</h2>
        <p>Follow us for daily locations, hours, and special events.</p>
      </div>
      <div class="info-grid">
        <div class="info-box">
          <h3>📍 Location</h3>
          <p>Downtown Food Court<br>123 Flavor St, Seoulville, CA 90210</p>
        </div>
        <div class="info-box">
          <h3>🕒 Hours</h3>
          <p>Mon–Fri: 11 AM – 8 PM<br>Sat–Sun: 12 PM – 9 PM</p>
        </div>
        <div class="info-box">
          <h3>📱 Follow Us</h3>
          <p>@KimchiLoco on Instagram & TikTok<br>Live updates & daily specials!</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="socials">
        <a href="#">📷</a>
        <a href="#">🐦</a>
        <a href="#">📘</a>
      </div>
      <p>&copy; 2025 Kimchi Loco. Made with ❤️ and a little bit of spice.</p>
    </div>
  </footer>

  <script>
    // Header scroll effect
    window.addEventListener('scroll', () => {
      const header = document.getElementById('header');
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });

    // Mobile hamburger toggle
    document.querySelector('.hamburger').addEventListener('click', () => {
      const links = document.querySelector('.nav-links');
      links.style.display = links.style.display === 'flex' ? 'none' : 'flex';
      links.style.flexDirection = 'column';
      links.style.position = 'absolute';
      links.style.top = '70px';
      links.style.right = '20px';
      links.style.background = '#fff';
      links.style.padding = '1rem';
      links.style.borderRadius = '8px';
      links.style.boxShadow = '0 4px 12px rgba(0,0,0,.15)';
    });
  </script>
</body>
</html>