Gemini 3.1 Flash Lite

<!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 {
            --red: #E63946;
            --dark: #1D1D1D;
            --yellow: #FFD60A;
            --white: #F1FAEE;
            --green: #A7C957;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

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

        /* Hero Section */
        .hero {
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: linear-gradient(135deg, #1D1D1D 0%, #333 100%);
            padding: 20px;
            position: relative;
        }

        .hero h1 {
            font-size: clamp(3rem, 15vw, 8rem);
            color: var(--red);
            text-transform: uppercase;
            letter-spacing: -2px;
            line-height: 0.9;
            margin-bottom: 20px;
            text-shadow: 5px 5px 0px var(--yellow);
            animation: shake 2s infinite;
        }

        @keyframes shake {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }

        .tagline {
            font-size: clamp(1.2rem, 4vw, 2rem);
            font-weight: 300;
            margin-bottom: 30px;
        }

        /* Live Location Widget */
        .live-card {
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border: 2px solid var(--green);
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            backdrop-filter: blur(10px);
        }

        .status-dot {
            height: 10px;
            width: 10px;
            background-color: var(--green);
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Menu Section */
        .menu-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 50px 20px;
        }

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

        .card {
            background: #2A2A2A;
            padding: 30px;
            border-radius: 20px;
            transition: transform 0.3s;
            border-bottom: 5px solid var(--red);
        }

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

        .card h3 {
            font-size: 1.8rem;
            color: var(--yellow);
            margin-bottom: 10px;
        }

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

        /* Animated Truck */
        .truck-animation {
            position: absolute;
            bottom: 50px;
            font-size: 3rem;
            animation: drive 10s linear infinite;
        }

        @keyframes drive {
            from { left: -100px; }
            to { left: 110%; }
        }
    </style>
</head>
<body>

    <section class="hero">
        <div class="truck-animation">🌮🚚</div>
        <h1>Kimchi Loco</h1>
        <p class="tagline">Seoul Heat. Mexican Soul. Street Style.</p>
        
        <div class="live-card">
            <span class="status-dot"></span> 
            <strong>NOW SERVING:</strong> <span id="location-text">Downtown Plaza</span>
        </div>
    </section>

    <div class="menu-container">
        <h2 style="font-size: 2.5rem; text-align: center;">THE MENU</h2>
        <div class="menu-grid">
            <div class="card">
                <h3>Bulgogi Taco</h3>
                <p>Marinated ribeye, sesame slaw, cilantro, lime & spicy gochujang crema.</p>
                <p class="price">$4.50</p>
            </div>
            <div class="card">
                <h3>Spicy Pork Belly</h3>
                <p>Crispy pork, kimchi relish, radish sprouts, and garlic aioli.</p>
                <p class="price">$4.50</p>
            </div>
            <div class="card">
                <h3>Kimchi Quesadilla</h3>
                <p>Melted jack cheese, aged kimchi, scallions. Served with spicy dipping sauce.</p>
                <p class="price">$8.00</p>
            </div>
        </div>
    </div>

    <script>
        // Simulation of truck moving locations
        const locations = [
            "Downtown Plaza",
            "The Arts District",
            "University Campus",
            "Central Park West",
            "Main St. Station"
        ];
        
        const locElement = document.getElementById('location-text');
        
        function updateLocation() {
            let index = 0;
            setInterval(() => {
                index = (index + 1) % locations.length;
                locElement.innerText = locations[index];
                locElement.style.opacity = 0;
                setTimeout(() => {
                    locElement.style.opacity = 1;
                }, 200);
            }, 4000);
        }

        // Initialize "Demo" mode
        window.onload = () => {
            updateLocation();
        };

        // Click to start interaction (per requirements)
        document.body.addEventListener('click', () => {
            console.log("Ready to order!");
        });
    </script>
</body>
</html>