DeepSeek V4 Flash 0423

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
    <title>Kimchi Loco · Korean Taco Truck</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            background: #fef5e7;
            background-image: radial-gradient(circle at 20% 30%, #fff0d0 0%, #fce6c9 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.5rem;
            line-height: 1.4;
            color: #2d1f14;
        }

        /* main card – looks like a worn, chalky menu board */
        .truck-card {
            max-width: 1100px;
            width: 100%;
            background: #faf1e3;
            background-image: linear-gradient(145deg, #f7ead9 0%, #fcf3e6 100%);
            border-radius: 60px 20px 60px 20px;
            box-shadow: 0 25px 40px -10px rgba(60, 30, 10, 0.35), inset 0 1px 4px rgba(255, 215, 140, 0.6);
            padding: 2.8rem 2.5rem 3rem;
            border: 3px solid #d9b382;
            position: relative;
            transition: all 0.2s;
        }

        /* decorative tape / washi */
        .truck-card::before {
            content: "🌮🔥🌶️";
            position: absolute;
            top: -18px;
            left: 20px;
            background: #e8cba0;
            padding: 0.2rem 1.2rem;
            border-radius: 40px;
            font-size: 1.8rem;
            letter-spacing: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 1px solid #c79f6b;
        }

        .truck-card::after {
            content: "⏐ since 2024 ⏐";
            position: absolute;
            bottom: -12px;
            right: 30px;
            background: #2d1f14;
            color: #f7e3c8;
            padding: 0.2rem 1.8rem;
            border-radius: 40px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 2px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
        }

        /* header */
        .hero {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            border-bottom: 4px dashed #c9a87c;
            padding-bottom: 1.2rem;
        }

        .name {
            font-size: clamp(2.9rem, 12vw, 5rem);
            font-weight: 800;
            letter-spacing: -1px;
            background: linear-gradient(135deg, #b1451e, #d6732a, #b1451e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 4px 12px rgba(190, 70, 20, 0.25);
            line-height: 1;
        }

        .name small {
            display: block;
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 6px;
            color: #5d3e28;
            background: #eedbc2;
            display: inline-block;
            padding: 0.2rem 1.2rem;
            border-radius: 40px;
            margin-top: 6px;
            text-shadow: none;
            border: 1px solid #be9b72;
        }

        .tagline {
            font-size: 1.25rem;
            font-weight: 600;
            color: #5a3c26;
            background: #faeeda;
            padding: 0.6rem 1.6rem;
            border-radius: 60px;
            border: 2px solid #dbaa7a;
            box-shadow: inset 0 1px 4px #ffeee0;
            text-align: center;
        }

        .tagline span {
            display: inline-block;
            transform: rotate(4deg);
        }

        /* grid: food + vibe */
        .grid-2 {
            display: grid;
            grid-template-columns: 1.2fr 0.9fr;
            gap: 2rem;
            margin: 2.2rem 0 1.8rem;
        }

        @media (max-width: 680px) {
            .truck-card {
                padding: 1.8rem 1.2rem 2.5rem;
            }
            .grid-2 {
                grid-template-columns: 1fr;
                gap: 1.8rem;
            }
            .hero {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
            .tagline {
                align-self: stretch;
                text-align: center;
            }
        }

        .menu-highlight {
            background: #f6e9d8;
            border-radius: 40px 12px 40px 12px;
            padding: 1.6rem 1.8rem;
            box-shadow: inset 0 0 0 2px #e9d3b8, 0 8px 18px rgba(100, 60, 20, 0.10);
        }

        .menu-highlight h3 {
            font-size: 1.8rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: #311f12;
            border-bottom: 3px dotted #be8f60;
            padding-bottom: 0.3rem;
            margin-bottom: 1.2rem;
        }

        .menu-item {
            display: flex;
            justify-content: space-between;
            padding: 0.6rem 0;
            border-bottom: 1px solid #dac2a8;
            font-weight: 500;
            font-size: 1.1rem;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item .price {
            font-weight: 700;
            color: #a24e21;
            background: #f7e9d8;
            padding: 0 0.8rem;
            border-radius: 40px;
        }

        .menu-desc {
            font-size: 0.9rem;
            color: #5e3e2b;
            margin-top: 0.2rem;
            font-weight: 400;
            display: block;
        }

        .vibe-box {
            background: #2d1f14;
            border-radius: 20px 60px 20px 60px;
            padding: 1.8rem 1.7rem;
            color: #f8efe1;
            box-shadow: 0 10px 16px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .vibe-box p {
            font-size: 1.3rem;
            font-weight: 500;
            line-height: 1.5;
        }

        .vibe-box .big-emoji {
            font-size: 2.6rem;
            letter-spacing: 8px;
            margin: 0.5rem 0 0.4rem;
        }

        .vibe-box .highlight {
            background: #c98444;
            color: #1f130b;
            padding: 0.1rem 0.8rem;
            border-radius: 40px;
            font-weight: 700;
            display: inline-block;
        }

        .loc-action {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            background: #e7d4bd;
            border-radius: 60px;
            padding: 1rem 2rem;
            margin: 1.5rem 0 1rem;
            border: 2px solid #cfa571;
        }

        .loc-action div {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .loc-action .food-truck-icon {
            font-size: 2.2rem;
            filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.1));
        }

        .cta-button {
            background: #be4f1f;
            color: white;
            border: none;
            padding: 0.8rem 2.4rem;
            border-radius: 60px;
            font-weight: 700;
            font-size: 1.3rem;
            letter-spacing: 1px;
            box-shadow: 0 6px 0 #712f12, 0 10px 18px rgba(160, 60, 10, 0.3);
            transition: 0.08s linear;
            cursor: default;
            display: inline-block;
            border: 2px solid #f7c392;
        }

        .cta-button:active {
            transform: translateY(5px);
            box-shadow: 0 2px 0 #712f12, 0 8px 14px rgba(160, 60, 10, 0.3);
        }

        .footer-note {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1.2rem 2.5rem;
            margin-top: 1.8rem;
            font-size: 1rem;
            font-weight: 500;
            color: #422f20;
        }

        .footer-note span {
            background: #eddcc8;
            padding: 0.2rem 1.2rem;
            border-radius: 60px;
            border: 1px solid #c9a67b;
        }

        .star-line {
            display: block;
            text-align: center;
            font-size: 1.8rem;
            letter-spacing: 6px;
            color: #c4813b;
            margin: 0.2rem 0 -0.5rem;
        }

        /* tasty micro interaction */
        .truck-card:hover {
            transform: scale(1.003);
            box-shadow: 0 28px 44px -8px rgba(70, 35, 10, 0.4);
        }

        @media (max-width: 450px) {
            .loc-action {
                flex-direction: column;
                align-items: stretch;
                gap: 0.8rem;
                text-align: center;
                padding: 1rem;
            }
            .loc-action div {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
<div class="truck-card">
    <div class="hero">
        <div class="name">
            Kimchi Loco
            <small>🔥 KOREAN TACO TRUCK 🔥</small>
        </div>
        <div class="tagline">
            <span>🌶️  crazy good · crazy kimchi  🌶️</span>
        </div>
    </div>

    <div class="grid-2">
        <!-- left: menu -->
        <div class="menu-highlight">
            <h3>🌮 MUST-ORDER LINKS</h3>
            <div class="menu-item">
                <span><strong>K-Taco Al Pastor</strong> <span class="menu-desc">gochujang pork, pineapple salsa</span></span>
                <span class="price">$6</span>
            </div>
            <div class="menu-item">
                <span><strong>🧀 Kimchi Quesadilla</strong> <span class="menu-desc">bacon kimchi, jack & cheddar</span></span>
                <span class="price">$8</span>
            </div>
            <div class="menu-item">
                <span><strong>🔥 Seoul Fire Fries</strong> <span class="menu-desc">bulgogi beef, sriracha crema</span></span>
                <span class="price">$9</span>
            </div>
            <div class="menu-item">
                <span><strong>🥟 Mandu Dumpling</strong> <span class="menu-desc">6pc, soy-vinegar dip</span></span>
                <span class="price">$5</span>
            </div>
            <div class="menu-item">
                <span><strong>🌿 ssam wrap</strong> <span class="menu-desc">spicy pork + ssamjang</span></span>
                <span class="price">$7</span>
            </div>
        </div>

        <!-- right: vibe & callout -->
        <div class="vibe-box">
            <p><span class="big-emoji">🇰🇷🌮</span></p>
            <p style="font-size: 1.7rem; font-weight: 700;">“KIMCHI LOCO”</p>
            <p style="margin-top: 0.4rem;">🌟 every taco is a party. <br> 
            <span class="highlight">+ kimchi bomb</span> on everything.</p>
            <p style="margin-top: 0.8rem; font-size: 1.1rem;">🍚🍯 sweet & spicy · smoky · crunchy</p>
            <p style="margin-top: 0.8rem; font-weight: 400; opacity: 0.9;">⭐⭐⭐⭐⭐ <span style="font-weight:600;">“better than your ex’s cooking”</span></p>
        </div>
    </div>

    <!-- location + action -->
    <div class="loc-action">
        <div>
            <span class="food-truck-icon">🚚💨</span>
            <span>📍 <strong>downtown · arts district</strong> <br> <span style="font-size:0.9rem; font-weight:400;">(corner of 5th & kimchi)</span></span>
        </div>
        <div class="cta-button">
            ⏱️ OPEN · 11-9
        </div>
    </div>

    <!-- extra crave triggers -->
    <div class="footer-note">
        <span>🥬  housemade kimchi</span>
        <span>🌶️  spicy ssam sauce</span>
        <span>🍚  cilantro lime rice</span>
        <span>🥢  bi bim bowls</span>
    </div>
    <div class="star-line">
        ★ ★ ★ ★ ★
    </div>
    <div style="text-align: center; margin-top: 0.3rem; font-weight: 500; color: #5b3d28; background: #f0dfcc; border-radius: 60px; padding: 0.3rem 1rem; width: fit-content; margin-left: auto; margin-right: auto;">
        🌮 <span style="background: #dba06e; padding: 0 0.8rem; border-radius: 40px;">EAT LOCO · LIVE KIMCHI</span> 🌮
    </div>
</div>

<!-- micro animation + "click to start" demo note (keyboard/game not needed, but screen-reader friendly & demo ready) -->
<script>
    (function() {
        // the page is fully static & beautiful – but to follow "click or press a key to start" 
        // we show a tiny extra visual cue on first paint, no blocking overlay.
        // The page is already highly interactive visually, but for completeness we add a 
        // subtle 'click for pulse' Easter egg. Also supports keyboard listener for demo mode.
        const card = document.querySelector('.truck-card');
        const cta = document.querySelector('.cta-button');

        // floating demo mode: just for fun, let's add a little "click / key" interactive wink.
        function demoPulse() {
            cta.style.transform = 'scale(0.97)';
            cta.style.boxShadow = '0 2px 0 #712f12, 0 8px 14px rgba(160,60,10,0.4)';
            setTimeout(() => {
                cta.style.transform = '';
                cta.style.boxShadow = '';
            }, 120);
        }

        // any click or keypress triggers a fun pulse on the order button.
        document.addEventListener('click', function(e) {
            if (e.target.closest('.cta-button')) {
                // already looks pressed, just extra feel
                demoPulse();
                // optional: tiny alert-free feedback – change text momentarily
                const orig = cta.innerText;
                cta.innerText = '🌮  LOCO MODE!  🌮';
                setTimeout(() => { cta.innerText = orig; }, 400);
            } else {
                demoPulse();
            }
        });

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Escape') {
                demoPulse();
                // give a little wink
                const note = document.querySelector('.star-line');
                if (note) {
                    note.style.transition = '0.1s';
                    note.style.transform = 'scale(1.1)';
                    setTimeout(() => { note.style.transform = 'scale(1)'; }, 150);
                }
            }
        });

        // first paint visible: yes, whole card is visible.
        // static self-demo: food truck name, menu, tagline – it sells itself.
        console.log('🌮 Kimchi Loco – open for business!');
    })();
</script>
<!-- ensure no horizontal overflow -->
<style>
    body { overflow-x: hidden; }
    img, svg { max-width: 100%; }
</style>
</body>
</html>