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
44.0 s
Cost
$0.0039
Output tokens
5,848
Spent thinking
0 tokens
Speed
134.7 tok/s
Console errors
0
First token after
557 ms
First visible text after
557 ms
Prompt tokens
382
Code size
20.0 KB
Finish reason
stop
Served by
Mistral
Model id
mistralai/mistral-small-2603
Reasoning sent
{"effort":"none"}
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 · 586 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: #F4A261;
            --dark-bg: #1A1A1A;
            --light-text: #F8F8F8;
            --accent-green: #2A9D8F;
        }

        * {
            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%, #2D2D2D 100%);
            color: var(--light-text);
            overflow-x: hidden;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .hero {
            position: relative;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800"><defs><radialGradient id="g1" cx="50%" cy="50%"><stop offset="0%" stop-color="%23E63946" stop-opacity="0.3"/><stop offset="100%" stop-color="%231A1A1A" stop-opacity="0.8"/></radialGradient></defs><rect width="100%" height="100%" fill="url(%23g1)"/></svg>') center/cover;
            animation: pulse 8s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.9; }
            50% { opacity: 1; }
        }

        .logo {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            text-shadow: 0 0 20px rgba(230, 57, 70, 0.7);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        .tagline {
            font-size: 1.8rem;
            margin-bottom: 2rem;
            font-weight: 300;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .cta-button {
            background: linear-gradient(45deg, var(--kimchi-red), var(--taco-orange));
            color: white;
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            margin-top: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
            background: linear-gradient(45deg, var(--taco-orange), var(--kimchi-red));
        }

        .truck-image {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 800px;
            height: auto;
            z-index: 1;
            animation: drive 15s linear infinite;
        }

        @keyframes drive {
            0% { transform: translateX(-50%) translateY(0); }
            25% { transform: translateX(-50%) translateY(-10px); }
            50% { transform: translateX(-50%) translateY(0); }
            75% { transform: translateX(-50%) translateY(-10px); }
            100% { transform: translateX(-50%) translateY(0); }
        }

        .menu-section {
            padding: 4rem 2rem;
            background: linear-gradient(to bottom, var(--dark-bg) 0%, var(--accent-green) 100%);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            position: relative;
            color: var(--light-text);
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--kimchi-red), var(--taco-orange));
            border-radius: 2px;
        }

        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .menu-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 1.5rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .menu-item:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
        }

        .menu-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--kimchi-red), var(--taco-orange));
        }

        .item-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

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

        .item-title {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--kimchi-red);
        }

        .item-description {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

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

        .location-section {
            padding: 4rem 2rem;
            background: var(--dark-bg);
            text-align: center;
        }

        .map-container {
            width: 100%;
            max-width: 800px;
            height: 400px;
            margin: 2rem auto;
            background: linear-gradient(135deg, #333, #555);
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .map-container::before {
            content: '📍 Kimchi Loco Food Truck Location';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: var(--light-text);
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
        }

        .schedule {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            max-width: 600px;
            margin: 2rem auto 0;
        }

        .day {
            background: rgba(255, 255, 255, 0.1);
            padding: 1rem;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        .day strong {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--kimchi-red);
        }

        .reviews-section {
            padding: 4rem 2rem;
            background: linear-gradient(to bottom, #2A9D8F, #1A1A1A);
        }

        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .review {
            background: rgba(255, 255, 255, 0.1);
            padding: 1.5rem;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .stars {
            color: var(--taco-orange);
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .review-text {
            font-style: italic;
            margin-bottom: 1rem;
            line-height: 1.6;
        }

        .review-author {
            font-weight: bold;
            color: var(--kimchi-red);
        }

        .social-section {
            padding: 2rem;
            background: var(--dark-bg);
            text-align: center;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(45deg, var(--kimchi-red), var(--taco-orange));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-icon:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(230, 57, 70, 0.5);
        }

        .footer {
            background: rgba(0, 0, 0, 0.8);
            padding: 2rem;
            text-align: center;
            font-size: 0.9rem;
            color: #aaa;
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 3rem;
            }

            .tagline {
                font-size: 1.4rem;
            }

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

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

        @media (max-width: 480px) {
            .logo {
                font-size: 2.5rem;
            }

            .tagline {
                font-size: 1.2rem;
            }

            .cta-button {
                padding: 0.8rem 2rem;
                font-size: 1rem;
            }
        }

        .hidden {
            display: none;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            max-width: 500px;
            width: 90%;
            text-align: center;
            position: relative;
        }

        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--dark-bg);
        }

        .order-now {
            background: linear-gradient(45deg, var(--kimchi-red), var(--taco-orange));
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="hero">
        <h1 class="logo">Kimchi Loco</h1>
        <p class="tagline">Fusion Flavors That Will Blow Your Mind 🌮🔥</p>
        <button class="cta-button" onclick="openModal()">Find Us Today!</button>
        <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300'><rect width='800' height='300' fill='%231A1A1A'/><rect x='50' y='150' width='200' height='100' rx='10' fill='%23E63946'/><rect x='270' y='120' width='250' height='150' rx='10' fill='%23F4A261'/><rect x='550' y='140' width='200' height='110' rx='10' fill='%232A9D8F'/><text x='400' y='280' text-anchor='middle' fill='white' font-family='Arial' font-size='20'>Kimchi Loco Food Truck</text></svg>" alt="Kimchi Loco Food Truck" class="truck-image">
    </div>

    <section class="menu-section">
        <h2 class="section-title">Our Signature Korean Tacos</h2>
        <div class="menu-grid">
            <div class="menu-item">
                <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='%23F4A261'/><circle cx='150' cy='100' r='80' fill='%23E63946'/><text x='150' y='105' text-anchor='middle' fill='white' font-family='Arial' font-size='16'>Bulgogi Beef</text></svg>" alt="Bulgogi Beef Taco" class="item-image">
                <h3 class="item-title">Bulgogi Beef Taco</h3>
                <p class="item-description">Marinated grilled beef with our signature sweet and spicy bulgogi sauce, topped with fresh kimchi and sesame seeds.</p>
                <p class="item-price">$8.99</p>
            </div>
            <div class="menu-item">
                <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='%232A9D8F'/><circle cx='150' cy='100' r='80' fill='%23E63946'/><text x='150' y='105' text-anchor='middle' fill='white' font-family='Arial' font-size='16'>Spicy Pork</text></svg>" alt="Spicy Pork Taco" class="item-image">
                <h3 class="item-title">Spicy Pork (Daeji Bulgogi) Taco</h3>
                <p class="item-description">Tender pork belly marinated in gochujang and soy sauce, topped with pickled radish and cilantro.</p>
                <p class="item-price">$9.49</p>
            </div>
            <div class="menu-item">
                <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='%23E63946'/><circle cx='150' cy='100' r='80' fill='%23F4A261'/><text x='150' y='105' text-anchor='middle' fill='white' font-family='Arial' font-size='16'>Kimchi Chicken</text></svg>" alt="Kimchi Chicken Taco" class="item-image">
                <h3 class="item-title">Kimchi Chicken Taco</h3>
                <p class="item-description">Crispy fried chicken tossed in our house-made kimchi glaze, topped with slaw and sriracha mayo.</p>
                <p class="item-price">$8.79</p>
            </div>
            <div class="menu-item">
                <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='%23F4A261'/><circle cx='150' cy='100' r='80' fill='%232A9D8F'/><text x='150' y='105' text-anchor='middle' fill='white' font-family='Arial' font-size='16'>Bibimbap Bowl</text></svg>" alt="Bibimbap Bowl" class="item-image">
                <h3 class="item-title">Bibimbap Bowl</h3>
                <p class="item-description">A deconstructed Korean classic with rice, seasonal veggies, bulgogi beef, and a fried egg - served in a crispy taco shell!</p>
                <p class="item-price">$10.99</p>
            </div>
        </div>
    </section>

    <section class="location-section">
        <h2 class="section-title">Find Our Truck</h2>
        <div class="map-container"></div>
        <div class="schedule">
            <div class="day">
                <strong>Monday</strong>
                <p>11AM - 8PM</p>
                <p>Downtown Farmers Market</p>
            </div>
            <div class="day">
                <strong>Tuesday</strong>
                <p>10AM - 7PM</p>
                <p>University Area</p>
            </div>
            <div class="day">
                <strong>Wednesday</strong>
                <p>11AM - 8PM</p>
                <p>Waterfront Park</p>
            </div>
            <div class="day">
                <strong>Thursday</strong>
                <p>10AM - 7PM</p>
                <p>Tech District</p>
            </div>
            <div class="day">
                <strong>Friday</strong>
                <p>11AM - 9PM</p>
                <p>Brewery Block</p>
            </div>
            <div class="day">
                <strong>Saturday</strong>
                <p>10AM - 10PM</p>
                <p>Food Truck Rally</p>
            </div>
            <div class="day">
                <strong>Sunday</strong>
                <p>11AM - 7PM</p>
                <p>Beach Boardwalk</p>
            </div>
        </div>
    </section>

    <section class="reviews-section">
        <h2 class="section-title">What Our Customers Say</h2>
        <div class="reviews-grid">
            <div class="review">
                <div class="stars">★★★★★</div>
                <p class="review-text">"The bulgogi tacos are INSANE! The perfect blend of sweet and spicy. I've had 3 already and I'm going back tomorrow!"</p>
                <p class="review-author">- Sarah K.</p>
            </div>
            <div class="review">
                <div class="stars">★★★★★</div>
                <p class="review-text">"As a Korean food lover, this truck brings me right back to Seoul! The kimchi chicken is next level. Worth every penny!"</p>
                <p class="review-author">- Marcus T.</p>
            </div>
            <div class="review">
                <div class="stars">★★★★☆</div>
                <p class="review-text">"The bibimbap bowl in a taco shell is genius! My kids loved it and I didn't have to cook. Highly recommend for families!"</p>
                <p class="review-author">- Lisa M.</p>
            </div>
        </div>
    </section>

    <section class="social-section">
        <h2 class="section-title">Follow Us</h2>
        <p>Stay updated on our locations and specials!</p>
        <div class="social-icons">
            <a href="#" class="social-icon">📷</a>
            <a href="#" class="social-icon">📘</a>
            <a href="#" class="social-icon">🐦</a>
            <a href="#" class="social-icon">📌</a>
        </div>
    </section>

    <div class="modal hidden" id="locationModal">
        <div class="modal-content">
            <span class="close-modal" onclick="closeModal()">&times;</span>
            <h2 style="color: var(--dark-bg); margin-bottom: 1rem;">📍 Visit Us Today!</h2>
            <p style="color: var(--dark-bg); margin-bottom: 1.5rem;">Our truck is currently at:</p>
            <p style="color: var(--kimchi-red); font-weight: bold; font-size: 1.2rem; margin-bottom: 1rem;">📍 Waterfront Park</p>
            <p style="color: var(--dark-bg); margin-bottom: 1.5rem;">Open until 8PM today!</p>
            <button class="order-now" onclick="closeModal()">Get Directions</button>
        </div>
    </div>

    <div class="footer">
        <p>© 2023 Kimchi Loco Food Truck. All rights reserved. | Made with ❤️ in the heart of Korean-Mexican fusion cuisine.</p>
    </div>

    <script>
        function openModal() {
            document.getElementById('locationModal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('locationModal').classList.add('hidden');
        }

        // Close modal when clicking outside
        document.getElementById('locationModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeModal();
            }
        });

        // Auto-open modal after 3 seconds for demo purposes
        setTimeout(() => {
            openModal();
        }, 3000);

        // Add some interactive elements
        document.querySelectorAll('.menu-item').forEach(item => {
            item.addEventListener('click', function() {
                const title = this.querySelector('.item-title').textContent;
                alert(`You selected: ${title}\n\nThis would take you to our ordering system!`);
            });
        });

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