Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🍽 วันนี้กินอะไรดี?</title>
    <style>
        :root {
            --primary-color: #e67e22;
            --secondary-color: #d35400;
            --text-color: #2c3e50;
            --bg-color: #ffffff;
            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            --light-bg: #f8f9fa;
            --border-color: #e0d6cc;
            --rating-color: #f1c40f;
            --nutrition-bg: #f5ebe0;
        }
        
        body {
            font-family: 'Kanit', Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 20px;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            line-height: 1.6;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        
        h1 {
            color: var(--secondary-color);
            margin-bottom: 25px;
            font-size: 32px;
            position: relative;
            display: inline-block;
        }
        
        h1:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--primary-color);
            border-radius: 3px;
        }
        
        .food-display {
            font-size: 6rem;
            margin: 2rem 0;
            min-height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.5);
        }
        
        .food-name {
            font-size: 2rem;
            font-weight: 500;
            margin-top: 1rem;
            color: var(--text-color);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
            background: rgba(255,255,255,0.7);
            padding: 0.8rem 2rem;
            border-radius: 50px;
            display: inline-block;
            backdrop-filter: blur(5px);
            box-shadow: var(--shadow);
        }
        
        .food-name.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hint {
            position: fixed;
            bottom: 2rem;
            font-size: 1rem;
            opacity: 0.7;
            background: rgba(255,255,255,0.9);
            padding: 0.8rem 1.8rem;
            border-radius: 50px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }
        
        .particle {
            position: absolute;
            background: var(--primary-color);
            border-radius: 50%;
            pointer-events: none;
            z-index: 5;
        }
        
        @media (max-width: 768px) {
            h1 { font-size: 26px; }
            .food-display { font-size: 5rem; min-height: 120px; }
            .food-name { font-size: 1.6rem; padding: 0.6rem 1.5rem; }
            .hint { font-size: 0.9rem; padding: 0.6rem 1.2rem; }
        }
        
        @media screen and (orientation: landscape) and (max-width: 768px) {
            .food-display { font-size: 4rem !important; }
            .food-name { font-size: 1.5rem !important; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-utensils icon"></i> วันนี้กินอะไรดี?</h1>
        
        <div class="food-display" id="foodDisplay">
            🍽️
        </div>
        <div class="food-name" id="foodName"></div>
    </div>
    
    <div class="hint" id="hint">
        <span id="desktopHint"><i class="fas fa-mouse-pointer icon"></i> ขยับเมาส์เร็วๆ หรือคลิกเพื่อสุ่มเมนู</span>
        <span id="mobileHint" style="display:none;"><i class="fas fa-mobile-alt icon"></i> เขย่ามือถือเพื่อสุ่มเมนูใหม่!</span>
    </div>
    
    <script>
        // ข้อมูลเมนูอาหาร
        const foods = [
            { emoji: "🍜", name: "ก๋วยเตี๋ยวต้มยำ", color: "#e67e22" },
            { emoji: "🍛", name: "ข้าวแกงกะหรี่", color: "#d35400" },
            { emoji: "🥗", name: "สลัดซีซาร์", color: "#27ae60" },
            { emoji: "🍚", name: "ข้าวผัดปู", color: "#c0392b" },
            { emoji: "🍣", name: "ซูชิรวม", color: "#2980b9" },
            { emoji: "🍕", name: "พิซซ่าฮาวายเอี้ยน", color: "#16a085" },
            { emoji: "🥘", name: "พาสต้าคาราโบนาร่า", color: "#8e44ad" },
            { emoji: "🍲", name: "สุกี้ยากี้", color: "#e84393" },
            { emoji: "🌮", name: "ทาโก้ปลา", color: "#3498db" },
            { emoji: "🍔", name: "เบอร์เกอร์แองกัส", color: "#1abc9c" },
            { emoji: "🍤", name: "ผัดไทย", color: "#f39c12" },
            { emoji: "🥪", name: "แซนด์วิช", color: "#9b59b6" }
        ];
        
        // ตัวแปรระบบ
        let canShake = true;
        let lastShakeTime = 0;
        const isIOS = /iPad|iPhone|iPod/.test(navigator.platform) || 
                     (navigator.userAgent.includes("Mac") && "ontouchend" in document);
        const shakeThreshold = isIOS ? 10 : 15;
        
        // แสดงเมนูอาหารแบบสุ่ม
        function showRandomFood() {
            const foodDisplay = document.getElementById('foodDisplay');
            const foodName = document.getElementById('foodName');
            const randomFood = foods[Math.floor(Math.random() * foods.length)];
            
            // เอฟเฟกต์ transition
            foodDisplay.style.transform = 'scale(0.8)';
            foodDisplay.style.opacity = '0.5';
            
            // สั่นมือถือ (ถ้าใช้งานได้)
            if ('vibrate' in navigator) {
                navigator.vibrate(50);
            }
            
            setTimeout(() => {
                foodDisplay.textContent = randomFood.emoji;
                foodDisplay.style.color = randomFood.color;
                foodDisplay.style.transform = 'scale(1.1)';
                foodDisplay.style.opacity = '1';
                
                foodName.textContent = randomFood.name;
                foodName.style.color = randomFood.color;
                foodName.classList.remove('show');
                
                setTimeout(() => {
                    foodDisplay.style.transform = 'scale(1)';
                    foodName.classList.add('show');
                }, 100);
            }, 200);
            
            // สร้าง particles
            createParticles(window.innerWidth/2, window.innerHeight/2);
        }
        
        // สร้าง particles
        function createParticles(x, y) {
            const colors = ['#e67e22', '#d35400', '#f1c40f', '#e74c3c', '#3498db'];
            
            for (let i = 0; i < 15; i++) {
                const particle = document.createElement("div");
                particle.className = "particle";
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                particle.style.width = `${3 + Math.random() * 8}px`;
                particle.style.height = particle.style.width;
                particle.style.background = colors[Math.floor(Math.random() * colors.length)];
                document.body.appendChild(particle);
                
                const angle = Math.random() * Math.PI * 2;
                const velocity = 1 + Math.random() * 3;
                const lifetime = 600 + Math.random() * 400;
                
                let startTime = Date.now();
                
                function animateParticle() {
                    const elapsed = Date.now() - startTime;
                    const progress = elapsed / lifetime;
                    
                    if (progress >= 1) {
                        particle.remove();
                        return;
                    }
                    
                    const currentX = x + Math.cos(angle) * velocity * elapsed * 0.1;
                    const currentY = y + Math.sin(angle) * velocity * elapsed * 0.1;
                    
                    particle.style.left = `${currentX}px`;
                    particle.style.top = `${currentY}px`;
                    particle.style.opacity = `${1 - progress}`;
                    particle.style.transform = `scale(${1 - progress})`;
                    
                    requestAnimationFrame(animateParticle);
                }
                
                setTimeout(() => {
                    animateParticle();
                }, 10);
            }
        }
        
        // ตรวจจับการเขย่ามือถือ
        function handleShake(event) {
            const now = Date.now();
            if (now - lastShakeTime < 1000) return;
            
            const acceleration = event.accelerationIncludingGravity;
            if (!acceleration) return;
            
            const totalAcceleration = Math.abs(acceleration.x) + Math.abs(acceleration.y) + Math.abs(acceleration.z);
            
            if (totalAcceleration > 30) {
                lastShakeTime = now;
                showRandomFood();
            }
        }
        
        // ตั้งค่าอุปกรณ์
        function setupDevice() {
            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            if (isMobile) {
                document.getElementById('desktopHint').style.display = 'none';
                document.getElementById('mobileHint').style.display = 'inline';
                
                // สำหรับ iOS ต้องขออนุญาตก่อน
                if (isIOS && typeof DeviceMotionEvent !== 'undefined' && 
                    typeof DeviceMotionEvent.requestPermission === 'function') {
                    DeviceMotionEvent.requestPermission()
                        .then(response => {
                            if (response === 'granted') {
                                window.addEventListener('devicemotion', handleShake);
                            }
                        })
                        .catch(console.error);
                } else if (window.DeviceMotionEvent) {
                    window.addEventListener('devicemotion', handleShake);
                }
            } else {
                // สำหรับ Desktop
                let lastX = 0;
                let lastY = 0;
                let lastTime = 0;
                
                function handleInteraction(x, y) {
                    const now = Date.now();
                    if (now - lastTime > 200) {
                        const speed = Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2));
                        if (speed > 30) showRandomFood();
                        lastX = x;
                        lastY = y;
                        lastTime = now;
                    }
                }
                
                document.addEventListener('mousemove', (e) => handleInteraction(e.clientX, e.clientY));
                document.addEventListener('click', showRandomFood);
            }
        }
        
        // เริ่มต้นแอป
        window.addEventListener('load', () => {
            setupDevice();
            showRandomFood();
            
            // เอฟเฟกต์โหลดหน้า
            document.querySelector('.container').style.opacity = '0';
            document.querySelector('.container').style.transition = 'opacity 0.5s ease-in';
            
            setTimeout(() => {
                document.querySelector('.container').style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>

Text

Sum-Daek