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: 3.7 s
Cost: $0.0019
Output tokens: 1,228
Spent thinking: 0 tokens
Speed: 404.4 tok/s
Console errors: 0

First token after: 645 ms
First visible text after: 645 ms
Prompt tokens: 367
Code size: 4.1 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"none"}
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 · 140 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-Mexican Fusion</title>
    <style>
        :root {
            --neon-red: #ff3e3e;
            --kimchi-orange: #ff8c00;
            --dark-bg: #1a1a1a;
            --light-cream: #fffaf0;
        }

        body, html {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: var(--dark-bg);
            color: var(--light-cream);
            overflow-x: hidden;
        }

        .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, var(--neon-red), var(--kimchi-orange));
            background-size: cover;
        }

        h1 {
            font-size: 5rem;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 3px 3px 0 #000;
        }

        .tagline { font-size: 1.5rem; margin-bottom: 20px; font-style: italic; }

        .menu-container {
            padding: 40px 20px;
            max-width: 900px;
            margin: auto;
        }

        .item {
            background: #2a2a2a;
            padding: 20px;
            margin-bottom: 20px;
            border-left: 5px solid var(--neon-red);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s;
        }

        .item:hover { transform: scale(1.02); }

        .price { color: var(--kimchi-orange); font-weight: bold; font-size: 1.2rem; }

        .cta {
            background: var(--neon-red);
            padding: 15px 30px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            text-decoration: none;
            color: white;
            display: inline-block;
            margin-top: 20px;
        }

        #demo-msg {
            position: fixed;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 0.8rem;
            opacity: 0.7;
        }

        @media (max-width: 600px) {
            h1 { font-size: 3rem; }
        }
    </style>
</head>
<body>

    <section class="hero" id="home">
        <h1>Kimchi Loco</h1>
        <p class="tagline">Korean soul. Mexican heartbeat. Street food redefined.</p>
        <div id="cta-btn" class="cta">CHECK THE MENU</div>
    </section>

    <div class="menu-container">
        <h2>THE GOODS</h2>
        <div class="item">
            <div><strong>Bulgogi Beef Taco</strong><br><small>Marinated ribeye, cilantro, lime, kimchi slaw</small></div>
            <div class="price">$4.50</div>
        </div>
        <div class="item">
            <div><strong>Spicy Pork Belly Taco</strong><br><small>Gochujang glazed, pickled radishes, sesame</small></div>
            <div class="price">$4.00</div>
        </div>
        <div class="item">
            <div><strong>Kimchi Quesadilla</strong><br><small>Double cheese, caramelized kimchi, sour cream</small></div>
            <div class="price">$8.00</div>
        </div>
    </div>

    <div id="demo-msg">Auto-scrolling demo mode: Ready to serve!</div>

    <script>
        // Simple auto-scrolling visual
        let scrollDirection = 1;
        let pos = 0;
        
        function autoScroll() {
            if (window.scrollY >= 300) scrollDirection = -1;
            if (window.scrollY <= 0) scrollDirection = 1;
            
            window.scrollBy(0, 1 * scrollDirection);
            requestAnimationFrame(autoScroll);
        }

        // Start scrolling after delay
        setTimeout(autoScroll, 2000);

        document.getElementById('cta-btn').addEventListener('click', () => {
            window.scrollTo({top: 600, behavior: 'smooth'});
        });
    </script>
</body>
</html>