Models 44

Ministral 3 14B 2512

by Mistralreasoning defaultClean
Open in new window

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

How it went

Total time
52.6 s
Cost
$0.0014
Output tokens
6,695
Spent thinking
0 tokens
Speed
128.1 tok/s
Console errors
0
First token after
328 ms
First visible text after
328 ms
Prompt tokens
370
Code size
21.4 KB
Finish reason
stop
Served by
Mistral
Model id
mistralai/ministral-14b-2512
Reasoning sent
model default
Max output
209,715 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 · 572 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 on Wheels!</title>
    <style>
        :root {
            --primary: #e63946;
            --secondary: #f1c40f;
            --dark: #2a2a2a;
            --light: #f8f9fa;
            --accent: #e9c46a;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

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

        /* Header */
        header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50" font-size="5" fill="rgba(255,255,255,0.1)">Kimchi Loco</text><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.2)"/><circle cx="40" cy="80" r="0.5" fill="rgba(255,255,255,0.2)"/></svg>') repeat;
            pointer-events: none;
        }

        .header-content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            letter-spacing: 2px;
        }

        .logo span {
            color: var(--secondary);
        }

        .tagline {
            font-size: 1.2rem;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect width="1200" height="600" fill="%233a3a3a"/><circle cx="200" cy="200" r="150" fill="%23e63946"/><circle cx="500" cy="150" r="120" fill="%23f1c40f"/><circle cx="800" cy="250" r="180" fill="%23e9c46a"/><circle cx="1000" cy="100" r="100" fill="%23e63946"/><circle cx="300" cy="400" r="80" fill="%23f1c40f"/><circle cx="700" cy="450" r="130" fill="%23e9c46a"/><circle cx="1100" cy="300" r="160" fill="%23e63946"/></svg>');
            background-size: cover;
            background-position: center;
            min-height: 60vh;
            display: flex;
            align-items: center;
            color: white;
            position: relative;
        }

        .hero-content {
            max-width: 600px;
            padding: 0 30px;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero h1 .highlight {
            color: var(--secondary);
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .btn {
            display: inline-block;
            background: var(--secondary);
            color: var(--dark);
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            background: var(--primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        /* Features Section */
        .features {
            padding: 80px 0;
            background-color: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--primary), var(--secondary));
        }

        .section-title p {
            color: #666;
            max-width: 700px;
            margin: 0 auto;
        }

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

        .feature-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3rem;
        }

        .feature-content {
            padding: 30px;
        }

        .feature-content h3 {
            margin-bottom: 15px;
            color: var(--dark);
        }

        .feature-content p {
            color: #666;
            line-height: 1.6;
        }

        /* Menu Preview */
        .menu-preview {
            padding: 80px 0;
            background-color: #f8f9fa;
        }

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

        .menu-item {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .menu-item:hover {
            transform: translateY(-5px);
        }

        .menu-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .menu-item-content {
            padding: 20px;
        }

        .menu-item h3 {
            margin-bottom: 10px;
            color: var(--primary);
        }

        .menu-item .price {
            font-weight: bold;
            color: var(--secondary);
            font-size: 1.2rem;
        }

        /* Location Section */
        .location {
            padding: 80px 0;
            background-color: white;
            text-align: center;
        }

        .location-map {
            width: 100%;
            max-width: 800px;
            height: 400px;
            margin: 40px auto;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400"><rect width="800" height="400" fill="%23e9ecef"/><circle cx="400" cy="200" r="150" fill="%23e63946" opacity="0.3"/><circle cx="400" cy="200" r="100" fill="%23f1c40f" opacity="0.3"/><circle cx="400" cy="200" r="50" fill="%23e9c46a" opacity="0.3"/><text x="400" y="200" font-size="20" text-anchor="middle" fill="%23333">Food Truck Location</text><rect x="350" y="150" width="100" height="100" fill="white" rx="5"/><rect x="360" y="160" width="80" height="80" fill="%23e63946" rx="4"/><rect x="370" y="170" width="60" height="60" fill="%23f1c40f" rx="3"/><rect x="380" y="180" width="40" height="40" fill="%23e9c46a" rx="2"/></svg>') center/cover;
            border-radius: 10px;
        }

        /* CTA Section */
        .cta {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .cta p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 40px 0;
            text-align: center;
        }

        .social-links {
            margin: 20px 0;
        }

        .social-links a {
            color: white;
            margin: 0 10px;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: var(--secondary);
        }

        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate {
            animation: fadeIn 0.6s ease forwards;
        }

        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }

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

            .section-title h2 {
                font-size: 2rem;
            }

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

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

        /* Food Truck Animation */
        .food-truck {
            position: relative;
            height: 300px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"><rect x="100" y="150" width="400" height="150" fill="%23e63946" rx="10"/><rect x="120" y="170" width="360" height="110" fill="%23f1c40f" rx="5"/><rect x="140" y="190" width="320" height="80" fill="%23e9c46a" rx="3"/><rect x="160" y="210" width="280" height="40" fill="%232a2a2a" rx="2"/><rect x="180" y="230" width="240" height="20" fill="%23f1c40f" rx="1"/><circle cx="200" cy="180" r="20" fill="white"/><circle cx="220" cy="180" r="20" fill="white"/><circle cx="240" cy="180" r="20" fill="white"/><rect x="300" y="160" width="40" height="60" fill="%233a3a3a" rx="5"/><rect x="310" y="170" width="20" height="40" fill="%23e63946"/><rect x="330" y="170" width="20" height="40" fill="%23f1c40f"/><rect x="350" y="170" width="20" height="40" fill="%23e9c46a"/></svg>') center/cover;
            animation: moveTruck 8s linear infinite;
        }

        @keyframes moveTruck {
            0% { background-position: 0 0; }
            100% { background-position: -600px 0; }
        }

        /* Hidden message for demo */
        .demo-message {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 0.9rem;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">Kimchi <span>Loco</span></div>
            <div class="tagline">Korean Tacos on Wheels!</div>
        </div>
    </header>

    <section class="hero">
        <div class="container">
            <div class="hero-content animate">
                <h1>Spicy, <span class="highlight">Flavor-Packed</span><br>Korean Tacos You <span class="highlight">Can't Resist</span></h1>
                <p>Fusing the bold flavors of Korea with the fun of tacos, Kimchi Loco brings you a food truck experience like no other!</p>
                <a href="#menu" class="btn">See Our Menu</a>
            </div>
        </div>
    </section>

    <section class="features">
        <div class="container">
            <div class="section-title animate">
                <h2>Why Kimchi Loco?</h2>
                <p>We're not just serving tacos - we're serving an explosion of Korean flavors that will take your taste buds on a wild ride!</p>
            </div>

            <div class="features-grid">
                <div class="feature-card animate delay-1">
                    <div class="feature-icon">🌶️</div>
                    <div class="feature-content">
                        <h3>Authentic Korean Ingredients</h3>
                        <p>We source the freshest kimchi, gochujang, bulgogi beef, and more to bring you the real deal Korean flavors in every bite.</p>
                    </div>
                </div>

                <div class="feature-card animate delay-2">
                    <div class="feature-icon">🔥</div>
                    <div class="feature-content">
                        <h3>Spicy & Bold Flavors</h3>
                        <p>From mild to fiery, our tacos pack a punch that will leave you craving more. But don't worry, we offer heat levels for every spice lover!</p>
                    </div>
                </div>

                <div class="feature-card animate delay-3">
                    <div class="feature-icon">🚚</div>
                    <div class="feature-content">
                        <h3>Food Truck Experience</h3>
                        <p>Find us at local events, festivals, and near you! Our mobile kitchen brings the party directly to your neighborhood.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="menu-preview" id="menu">
        <div class="container">
            <div class="section-title animate">
                <h2>Our Must-Try Tacos</h2>
                <p>Each taco is a flavor adventure waiting to happen. Which one will you try first?</p>
            </div>

            <div class="menu-grid">
                <div class="menu-item animate delay-1">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Bulgogi Beef Taco</text></svg>" alt="Bulgogi Beef Taco">
                    <div class="menu-item-content">
                        <h3>Bulgogi Beef Taco</h3>
                        <p>Marinated in sweet soy, garlic, and sesame, our bulgogi beef is slow-cooked to perfection and served on a crispy taco shell with kimchi slaw.</p>
                        <div class="price">$6.99</div>
                    </div>
                </div>

                <div class="menu-item animate delay-2">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Spicy Pork Taco</text></svg>" alt="Spicy Pork Taco">
                    <div class="menu-item-content">
                        <h3>Spicy Pork Taco</h3>
                        <p>Tender pork belly marinated in gochujang and sesame oil, grilled to perfection and topped with pickled radish and scallions.</p>
                        <div class="price">$7.49</div>
                    </div>
                </div>

                <div class="menu-item animate delay-3">
                    <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'><rect width='300' height='200' fill='%23f8f9fa'/><rect x='50' y='50' width='200' height='120' fill='%23e63946' rx='5'/><rect x='60' y='60' width='180' height='100' fill='%23f1c40f' rx='3'/><rect x='70' y='70' width='160' height='80' fill='%23e9c46a' rx='2'/><circle cx='100' cy='100' r='15' fill='white'/><circle cx='120' cy='100' r='15' fill='white'/><circle cx='140' cy='100' r='15' fill='white'/><rect x='180' y='80' width='30' height='40' fill='%233a3a3a' rx='2'/><rect x='190' y='90' width='15' height='20' fill='%23e63946'/><rect x='210' y='90' width='15' height='20' fill='%23f1c40f'/><text x='150' y='180' font-size='12' text-anchor='middle' fill='%23333'>Kimchi Fried Chicken Taco</text></svg>" alt="Kimchi Fried Chicken Taco">
                    <div class="menu-item-content">
                        <h3>Kimchi Fried Chicken Taco</h3>
                        <p>Crispy fried chicken tossed in our signature kimchi marinade, served with a cool cucumber-yogurt sauce and spicy mayo.</p>
                        <div class="price">$7.99</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="location">
        <div class="container">
            <div class="section-title animate">
                <h2>Find Us Near You</h2>
                <p>Our food truck is always on the move! Check our social media for our daily locations or sign up for text alerts.</p>
            </div>

            <div class="food-truck animate"></div>

            <div style="margin-top: 40px;">
                <h3>Follow Us for Updates:</h3>
                <div class="social-links">
                    <a href="#" aria-label="Instagram">📷</a>
                    <a href="#" aria-label="Facebook">📘</a>
                    <a href="#" aria-label="Twitter">🐦</a>
                    <a href="#" aria-label="TikTok">🎵</a>
                </div>
            </div>
        </div>
    </section>

    <section class="cta">
        <div class="container">
            <h2>Ready to Spice Up Your Life?</h2>
            <p>Come taste the fusion of Korean flavors and Mexican street food culture at Kimchi Loco. Your taste buds will thank you!</p>
            <a href="#" class="btn">Find Us Today</a>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="logo" style="color: white; margin-bottom: 20px;">Kimchi <span>Loco</span></div>
            <p>&copy; 2023 Kimchi Loco. All rights reserved.</p>
            <p>Korean Tacos on Wheels!</p>
        </div>
    </footer>

    <div class="demo-message">
        Click or press a key to start - This demo shows our Korean Taco Food Truck website!
    </div>

    <script>
        // Animation trigger on scroll
        window.addEventListener('scroll', () => {
            const elements = document.querySelectorAll('.animate');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < window.innerHeight - elementVisible) {
                    element.style.animationPlayState = 'running';
                }
            });
        });

        // Trigger animations on load for elements already in view
        document.addEventListener('DOMContentLoaded', () => {
            const elements = document.querySelectorAll('.animate');
            elements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;

                if (elementTop < window.innerHeight - elementVisible) {
                    element.style.animationPlayState = 'running';
                }
            });
        });

        // Demo message handling
        document.addEventListener('click', () => {
            const demoMessage = document.querySelector('.demo-message');
            if (demoMessage) {
                demoMessage.style.display = 'none';
            }
        });

        document.addEventListener('keydown', () => {
            const demoMessage = document.querySelector('.demo-message');
            if (demoMessage) {
                demoMessage.style.display = 'none';
            }
        });

        // Simple food truck movement simulation
        const foodTruck = document.querySelector('.food-truck');
        if (foodTruck) {
            let position = 0;
            const moveTruck = () => {
                position = (position + 1) % 600;
                foodTruck.style.backgroundPosition = `-${position}px 0`;
                requestAnimationFrame(moveTruck);
            };
            moveTruck();
        }
    </script>
</body>
</html>