生日贺卡

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // API routes for interactive features
    if (url.pathname.startsWith('/api/')) {
      if (url.pathname === '/api/confetti' && request.method === 'POST') {
        const messages = [
          "🎉 生日快乐！愿你的每一天都充满阳光和欢笑！",
          "🌟 愿你在新的一岁里，学业有成，梦想成真！",
          "🎂 祝你生日快乐，天天开心，学习进步！",
          "💫 愿知识的光芒照亮你前进的道路！",
          "🌈 祝你青春永驻，智慧满满！"
        ];
        const randomMessage = messages[Math.floor(Math.random() * messages.length)];
        
        return new Response(JSON.stringify({ 
          message: randomMessage
        }), {
          headers: { 'Content-Type': 'application/json' }
        });
      }

      return new Response(JSON.stringify({ error: 'Not found' }), {
        status: 404,
        headers: { 'Content-Type': 'application/json' }
      });
    }

    // Serve HTML
    return new Response(getHTML(), {
      headers: { 'Content-Type': 'text/html' }
    });
  }
};

function getHTML() {
  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>给韩梅梅的生日贺卡 🎂</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    
    .dancing-script { font-family: 'Dancing Script', cursive; }
    
    .gradient-text {
      background: linear-gradient(45deg, #8b5cf6, #06b6d4, #10b981, #f59e0b);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradient-shift 4s ease-in-out infinite;
    }
    
    @keyframes gradient-shift {
      0%, 100% { background-position: 0% 50%; }
      25% { background-position: 100% 50%; }
      50% { background-position: 100% 100%; }
      75% { background-position: 0% 100%; }
    }
    
    .float-animation {
      animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-15px) rotate(5deg); }
    }
    
    .bounce-in {
      animation: bounceIn 1.2s ease-out;
    }
    
    @keyframes bounceIn {
      0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
      50% { transform: scale(1.1) rotate(2deg); }
      70% { transform: scale(0.95) rotate(-1deg); }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    
    .confetti {
      position: absolute;
      width: 8px;
      height: 8px;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
      animation: confetti-fall 3s linear infinite;
      border-radius: 50%;
    }
    
    @keyframes confetti-fall {
      0% { transform: translateY(-100vh) rotate(0deg) scale(1); opacity: 1; }
      50% { transform: translateY(50vh) rotate(360deg) scale(0.8); opacity: 0.8; }
      100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
    }
    
    .card-glow {
      box-shadow: 
        0 0 60px rgba(139, 92, 246, 0.4),
        0 0 120px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .shimmer {
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      background-size: 200% 100%;
      animation: shimmer 2s infinite;
    }
    
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    
    .pulse-glow {
      animation: pulse-glow 2s infinite;
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); }
      50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); }
    }
    
    .sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
      animation: sparkle 3s infinite;
    }
    
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: scale(0); }
      50% { opacity: 1; transform: scale(1); }
    }
    
    .birthday-cake {
      animation: cake-bounce 2s ease-in-out infinite;
    }
    
    @keyframes cake-bounce {
      0%, 100% { transform: translateY(0px) scale(1); }
      50% { transform: translateY(-8px) scale(1.05); }
    }
    
    .wish-card {
      backdrop-filter: blur(20px);
      transition: all 0.3s ease;
    }
    
    .wish-card:hover {
      transform: translateY(-5px) rotate(2deg);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .floating-hearts {
      animation: floating-hearts 6s infinite linear;
    }
    
    @keyframes floating-hearts {
      0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(-100vh) rotate(360deg); 
...