Food truck websiteOne-line

Gemini 3.1 Flash Lite

by GoogleReasoningClean

Open in new window

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

How it went

Total time: 5.2 s
Cost: $0.0029
Output tokens: 1,864
Spent thinking: 117 tokens
Speed: 422.4 tok/s
Console errors: 0

First token after: 739 ms
First visible text after: 739 ms
Prompt tokens: 367
Code size: 5.8 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
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 · 171 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 Taco Fusion</title>
    <style>
        :root {
            --primary: #FF4500; /* Spicy Red */
            --secondary: #32CD32; /* Kimchi Green */
            --dark: #1A1A1A;
            --light: #F4F4F4;
        }

        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--dark);
            color: var(--light);
            scroll-behavior: smooth;
        }

        /* Navbar */
        nav {
            position: fixed;
            width: 100%;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0,0,0,0.8);
            z-index: 100;
        }

        .logo { font-weight: 800; font-size: 1.5rem; color: var(--primary); letter-spacing: 2px; }

        /* Hero */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                        linear-gradient(45deg, #FF4500, #32CD32);
            padding: 20px;
        }

        h1 { font-size: clamp(3rem, 10vw, 6rem); margin: 0; text-transform: uppercase; }
        .hero p { font-size: 1.5rem; margin-bottom: 2rem; }

        .btn {
            padding: 1rem 2rem;
            background: var(--primary);
            color: white;
            border: none;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            border-radius: 5px;
            text-decoration: none;
            transition: transform 0.2s;
        }
        .btn:hover { transform: scale(1.05); }

        /* Menu */
        .menu-section { padding: 4rem 2rem; max-width: 1000px; margin: auto; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .card {
            background: #252525;
            padding: 2rem;
            border-radius: 10px;
            border-left: 5px solid var(--primary);
            transition: 0.3s;
        }
        .card:hover { border-left-color: var(--secondary); background: #333; }

        .price { color: var(--secondary); font-weight: bold; font-size: 1.2rem; display: block; margin-top: 10px; }

        /* Footer */
        footer { text-align: center; padding: 2rem; background: #000; color: #888; }

        /* Auto-Scroll logic for the "Demo" experience */
        .demo-marker { position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; background: rgba(255,255,255,0.1); border-radius: 20px; font-size: 0.8rem; opacity: 0.7; }

    </style>
</head>
<body>

    <nav>
        <div class="logo">KIMCHI LOCO</div>
        <div>STREET FOOD</div>
    </nav>

    <header class="hero" id="home">
        <h1>Korean Spice,<br>Street Nice.</h1>
        <p>The best Bulgogi Tacos in the city. Guaranteed.</p>
        <a href="#menu" class="btn">View Menu</a>
    </header>

    <section class="menu-section" id="menu">
        <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 3rem;">OUR SIGNATURES</h2>
        <div class="grid">
            <div class="card">
                <h3>Bulgogi Beef Taco</h3>
                <p>Marinated ribeye, kimchi slaw, gochujang crema, cilantro on a toasted flour tortilla.</p>
                <span class="price">$4.50</span>
            </div>
            <div class="card">
                <h3>Spicy Pork Belly</h3>
                <p>Crispy pork, pickled radish, sesame seeds, and our secret "Loco" sauce.</p>
                <span class="price">$4.25</span>
            </div>
            <div class="card">
                <h3>Kimchi Fries</h3>
                <p>Crispy fries loaded with sautéed kimchi, melted cheese, green onion, and spicy mayo.</p>
                <span class="price">$8.00</span>
            </div>
            <div class="card">
                <h3>Tofu Kimchi Crunch</h3>
                <p>Fried tofu, sesame oil glaze, spicy kimchi slaw. Vegetarian friendly & addictive.</p>
                <span class="price">$4.00</span>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2023 Kimchi Loco Food Truck. Find us downtown!</p>
        <p>Open Daily: 11AM - 9PM</p>
    </footer>

    <div class="demo-marker" id="demo-msg">Auto-scrolling showcase...</div>

    <script>
        // Simple auto-demo script to showcase the page content automatically
        let scrollPos = 0;
        let scrolling = true;
        let direction = 1;

        function autoScroll() {
            if (!scrolling) return;
            
            // Scroll down then back up
            if (window.scrollY + window.innerHeight >= document.body.scrollHeight - 50) {
                direction = -1;
            } else if (window.scrollY <= 0) {
                direction = 1;
            }

            window.scrollBy(0, 1 * direction);
            requestAnimationFrame(autoScroll);
        }

        // Stop auto-scrolling on user interaction
        window.addEventListener('wheel', () => { scrolling = false; document.getElementById('demo-msg').style.display = 'none'; });
        window.addEventListener('touchstart', () => { scrolling = false; document.getElementById('demo-msg').style.display = 'none'; });
        window.addEventListener('keydown', () => { scrolling = false; document.getElementById('demo-msg').style.display = 'none'; });

        // Delay start
        setTimeout(autoScroll, 1500);
    </script>

</body>
</html>