Models 44

Mistral Small 4

by MistralReasoningClean
Open in new window

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

How it went

Total time
32.3 s
Cost
$0.0041
Output tokens
6,822
Spent thinking
0 tokens
Speed
214.4 tok/s
Console errors
0
First token after
499 ms
First visible text after
499 ms
Prompt tokens
382
Code size
22.9 KB
Finish reason
stop
Served by
Mistral
Model id
mistralai/mistral-small-2603
Reasoning sent
model default
Max output
209,715 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 · 688 lines

<!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 Food Truck</title>
    <style>
        :root {
            --kimchi-red: #e63946;
            --taco-orange: #f77f00;
            --lime-green: #2a9d8f;
            --dark-bg: #121212;
            --light-text: #f8f8f8;
            --shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nanum Gothic', 'Malgun Gothic', sans-serif;
            background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1a1a 100%);
            color: var(--light-text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            padding: 20px 0;
            position: relative;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .logo-icon {
            width: 60px;
            height: 60px;
            background: var(--kimchi-red);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: var(--shadow);
        }

        .logo-icon::before {
            content: "🌮";
            font-size: 30px;
        }

        .logo-icon::after {
            content: "🔥";
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20px;
            color: var(--taco-orange);
        }

        .logo-text {
            font-size: 2.5rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            background: linear-gradient(45deg, var(--kimchi-red), var(--taco-orange));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .tagline {
            text-align: center;
            margin-top: 10px;
            font-size: 1.2rem;
            color: var(--lime-green);
            font-weight: 600;
        }

        /* Navigation */
        nav {
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            margin: 20px auto;
            max-width: 800px;
            padding: 15px;
            box-shadow: var(--shadow);
        }

        .nav-links {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .nav-links a {
            color: var(--light-text);
            text-decoration: none;
            font-weight: 600;
            padding: 10px 20px;
            border-radius: 30px;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            background: var(--kimchi-red);
            transform: translateY(-3px);
        }

        .nav-links a::after {
            content: "🌶️";
            margin-left: 8px;
        }

        /* Hero Section */
        .hero {
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800"><defs><pattern id="kimchi" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><rect width="40" height="40" fill="%23e63946"/><rect x="10" y="10" width="20" height="20" fill="%23f77f00"/></pattern></defs><rect width="1280" height="800" fill="url(%23kimchi)" opacity="0.1"/></svg>') repeat;
            z-index: 0;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .hero p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            background: var(--taco-orange);
            color: white;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(247, 127, 0, 0.4);
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(247, 127, 0, 0.6);
        }

        .truck-image {
            margin-top: 50px;
            position: relative;
        }

        .truck-image img {
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: var(--shadow);
            transition: transform 0.5s ease;
        }

        .truck-image:hover img {
            transform: scale(1.02);
        }

        /* Menu Section */
        .menu {
            padding: 80px 0;
            background: rgba(0,0,0,0.5);
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
            font-size: 2.5rem;
            color: var(--lime-green);
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .menu-item {
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .menu-item:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.15);
        }

        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 15px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .menu-item:hover img {
            transform: scale(1.05);
        }

        .menu-item h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--kimchi-red);
        }

        .menu-item p {
            color: var(--lime-green);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .menu-item .description {
            color: #ccc;
            font-size: 0.9rem;
            margin-bottom: 20px;
        }

        .order-button {
            background: var(--taco-orange);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .order-button:hover {
            background: #ff9f1c;
            transform: scale(1.05);
        }

        /* Location Section */
        .location {
            padding: 80px 0;
            text-align: center;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 600"><rect width="1280" height="600" fill="%231a1a1a"/><circle cx="200" cy="150" r="30" fill="%23e63946" opacity="0.7"/><circle cx="800" cy="300" r="25" fill="%23f77f00" opacity="0.7"/><circle cx="1000" cy="100" r="20" fill="%232a9d8f" opacity="0.7"/></svg>') no-repeat center center;
            background-size: cover;
        }

        .map-container {
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin: 30px auto;
            max-width: 1000px;
        }

        .map-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #333, #555);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 1.2rem;
        }

        .location-info {
            margin-top: 30px;
        }

        .location-info h3 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--lime-green);
        }

        .location-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            text-align: left;
            max-width: 600px;
            margin: 0 auto;
        }

        .location-detail {
            padding: 20px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            border-left: 4px solid var(--kimchi-red);
        }

        .location-detail h4 {
            color: var(--taco-orange);
            margin-bottom: 10px;
        }

        /* Social Section */
        .social {
            padding: 60px 0;
            text-align: center;
        }

        .social h3 {
            font-size: 2rem;
            margin-bottom: 30px;
            color: var(--lime-green);
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .social-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--kimchi-red);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
        }

        .social-icon:hover {
            transform: translateY(-5px);
            background: var(--taco-orange);
        }

        .social-icon.instagram { background: #e1306c; }
        .social-icon.twitter { background: #1da1f2; }
        .social-icon.facebook { background: #4267B2; }
        .social-icon.tiktok { background: #000; }

        /* Footer */
        footer {
            background: rgba(0,0,0,0.8);
            padding: 30px 0;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .footer-text {
            color: #999;
            font-size: 0.9rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .logo-text {
                font-size: 2rem;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero p {
                font-size: 1.2rem;
            }

            .nav-links {
                flex-direction: column;
                gap: 10px;
            }

            .menu-grid {
                grid-template-columns: 1fr;
            }

            .location-details {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 2rem;
            }

            .cta-button {
                padding: 12px 30px;
                font-size: 1rem;
            }

            .logo-icon {
                width: 40px;
                height: 40px;
            }

            .logo-icon::before {
                font-size: 20px;
            }
        }

        /* Animations */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="logo">
                <div class="logo-icon"></div>
                <h1 class="logo-text">Kimchi Loco</h1>
            </div>
            <p class="tagline">Spicy Korean Tacos on Wheels!</p>

            <nav>
                <div class="nav-links">
                    <a href="#home">Home</a>
                    <a href="#menu">Menu</a>
                    <a href="#location">Find Us</a>
                    <a href="#social">Social</a>
                    <a href="#contact">Contact</a>
                </div>
            </nav>
        </div>
    </header>

    <section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1>FLAME-GRILLED KOREAN TACOS</h1>
                <p>Experience the perfect fusion of smoky Korean BBQ and crispy Mexican tacos, topped with our signature house-made kimchi. Spicy, savory, and absolutely addictive!</p>
                <a href="#menu" class="cta-button pulse">ORDER NOW</a>

                <div class="truck-image">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'><rect width='800' height='400' fill='%23333'/><rect x='50' y='200' width='700' height='150' rx='20' fill='%23555'/><rect x='100' y='150' width='100' height='50' rx='10' fill='%23e63946'/><rect x='220' y='150' width='100' height='50' rx='10' fill='%23f77f00'/><rect x='340' y='150' width='100' height='50' rx='10' fill='%232a9d8f'/><rect x='460' y='150' width='100' height='50' rx='10' fill='%23ffcc00'/><rect x='580' y='150' width='100' height='50' rx='10' fill='%23e63946'/><circle cx='150' cy='320' r='30' fill='%23000'/><circle cx='650' cy='320' r='30' fill='%23000'/><text x='400' y='350' text-anchor='middle' fill='white' font-size='20' font-weight='bold'>KIMCHI LOCO FOOD TRUCK</text></svg>" alt="Kimchi Loco Food Truck">
                </div>
            </div>
        </div>
    </section>

    <section class="menu" id="menu">
        <div class="container">
            <h2 class="section-title">Our Signature Tacos</h2>
            <div class="menu-grid">
                <div class="menu-item">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23f77f00'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Bulgogi Beef Taco</text></svg>" alt="Bulgogi Beef Taco">
                    <h3>Bulgogi Beef</h3>
                    <p>$12.99</p>
                    <p class="description">Marinated premium beef grilled to perfection with our signature kimchi slaw</p>
                    <button class="order-button">Add to Order</button>
                </div>

                <div class="menu-item">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%232a9d8f'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Spicy Pork Taco</text></svg>" alt="Spicy Pork Taco">
                    <h3>Spicy Pork (Daeji Bulgogi)</h3>
                    <p>$11.99</p>
                    <p class="description">Tender pork belly with gochujang glaze and quick-pickled radish</p>
                    <button class="order-button">Add to Order</button>
                </div>

                <div class="menu-item">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23ffcc00'/><circle cx='100' cy='80' r='15' fill='%23e63946'/><circle cx='150' cy='80' r='15' fill='%23e63946'/><circle cx='125' cy='120' r='15' fill='%23e63946'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Kimchi Fried Rice Bowl</text></svg>" alt="Kimchi Fried Rice Bowl">
                    <h3>Kimchi Fried Rice Bowl</h3>
                    <p>$9.99</p>
                    <p class="description">Our famous kimchi fried rice topped with a fried egg and crispy shallots</p>
                    <button class="order-button">Add to Order</button>
                </div>

                <div class="menu-item">
                    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23fff'/><path d='M50 100 Q100 50 150 100 Q200 150 250 100 L250 150 L50 150 Z' fill='%23e63946'/><circle cx='100' cy='80' r='15' fill='%23fff'/><circle cx='150' cy='80' r='15' fill='%23fff'/><circle cx='125' cy='120' r='15' fill='%23fff'/><text x='150' y='180' text-anchor='middle' fill='%23333' font-size='12'>Vegan Kimchi Taco</text></svg>" alt="Vegan Kimchi Taco">
                    <h3>Vegan Kimchi Taco</h3>
                    <p>$10.99</p>
                    <p class="description">House-made vegan kimchi with crispy tofu and tangy slaw</p>
                    <button class="order-button">Add to Order</button>
                </div>
            </div>
        </div>
    </section>

    <section class="location" id="location">
        <div class="container">
            <h2 class="section-title">Find Our Truck</h2>
            <div class="map-container">
                <div class="map-placeholder">
                    📍 Kimchi Loco Food Truck Location Map
                    <br><br>
                    <p style="font-size: 0.9rem;">(Interactive map would display here in a real implementation)</p>
                </div>
            </div>

            <div class="location-info">
                <h3>Visit Us Today!</h3>
                <div class="location-details">
                    <div class="location-detail">
                        <h4>📍 Downtown Location</h4>
                        <p>123 Spice Street<br>Food Truck Alley<br>Monday-Saturday: 11AM-9PM</p>
                    </div>
                    <div class="location-detail">
                        <h4>📞 Contact</h4>
                        <p>(555) 123-4567<br>hello@kimchiloco.com</p>
                    </div>
                    <div class="location-detail">
                        <h4>🚚 Special Events</h4>
                        <p>Book our truck for weddings, parties, and corporate events!<br>Email us for availability.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="social" id="social">
        <div class="container">
            <h2 class="section-title">Follow the Spice!</h2>
            <div class="social-icons">
                <div class="social-icon instagram">📷</div>
                <div class="social-icon twitter">🐦</div>
                <div class="social-icon facebook">f</div>
                <div class="social-icon tiktok">🎵</div>
            </div>
            <p style="margin-top: 30px; color: #999;">@KimchiLocoTruck</p>
        </div>
    </section>

    <footer id="contact">
        <div class="container">
            <p class="footer-text">© 2024 Kimchi Loco Food Truck. All rights reserved. | Made with 🔥 and 🌶️</p>
        </div>
    </footer>

    <script>
        // Smooth scrolling for navigation
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // Add floating animation to truck image
        document.querySelector('.truck-image img').classList.add('floating');

        // Menu item hover effects
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('mouseenter', () => {
                item.style.transform = 'translateY(-15px)';
            });

            item.addEventListener('mouseleave', () => {
                item.style.transform = 'translateY(0)';
            });
        });

        // Social icon hover effects
        document.querySelectorAll('.social-icon').forEach(icon => {
            icon.addEventListener('mouseenter', () => {
                icon.style.transform = 'translateY(-10px) scale(1.1)';
            });

            icon.addEventListener('mouseleave', () => {
                icon.style.transform = 'translateY(0) scale(1)';
            });
        });

        // CTA button pulse animation
        const ctaButton = document.querySelector('.cta-button');
        let pulseCount = 0;
        setInterval(() => {
            ctaButton.style.transform = pulseCount % 2 === 0 ? 'translateY(-8px)' : 'translateY(-5px)';
            pulseCount++;
        }, 2000);

        // Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const hero = document.querySelector('.hero');
            const speed = scrolled * 0.5;
            hero.style.transform = `translateY(${speed}px)`;
        });

        // Mobile menu toggle (for responsive design)
        const navLinks = document.querySelector('.nav-links');
        const nav = document.querySelector('nav');

        // Add mobile menu button if needed
        if (window.innerWidth <= 768) {
            const mobileMenuBtn = document.createElement('button');
            mobileMenuBtn.innerHTML = '☰';
            mobileMenuBtn.style.cssText = `
                background: none;
                border: none;
                color: white;
                font-size: 1.5rem;
                cursor: pointer;
                display: none;
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            `;

            nav.prepend(mobileMenuBtn);

            mobileMenuBtn.style.display = 'block';

            mobileMenuBtn.addEventListener('click', () => {
                navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
                navLinks.style.flexDirection = 'column';
                navLinks.style.position = 'absolute';
                navLinks.style.top = '100%';
                navLinks.style.left = '0';
                navLinks.style.width = '100%';
                navLinks.style.background = 'rgba(0,0,0,0.9)';
                navLinks.style.padding = '20px 0';
            });
        }
    </script>
</body>
</html>