Dark dashboard

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 29-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'primary': '#00e5ff',
            'secondary': '#00b0ff',
            'accent': '#39ff14',
            'danger': '#ff3131',
            'warning': '#ffaa00',
            'info': '#00c6ff',
            'dark': '#0c1220',
            'darker': '#060a14',
            'card': '#162032',
            'card-dark': '#0f172a',
            'border': '#2a3a50',
            'text-primary': '#e2e8f0',
            'text-secondary': '#94a3b8',
            'text-muted': '#64748b'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'float': 'float 6s ease-in-out infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            }
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 229, 255, 0.1);
      }
      .card-border {
        border: 1px solid rgba(42, 58, 80, 0.5);
      }
      .progress-ring-circle {
        transition: stroke-dashoffset 0.35s;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      .tab-indicator {
        transition: transform 0.3s ease;
      }
      .food-card-hover {
        transition: all 0.3s ease;
      }
      .food-card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.15);
      }
      .gradient-text {
        background: linear-gradient(90deg, #00e5ff, #00b0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .gradient-text-success {
        background: linear-gradient(90deg, #39ff14, #00ff88);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .grid-bg {
        background-image: 
          linear-gradient(rgba(42, 58, 80, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(42, 58, 80, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .border-glow {
        box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
      }
      .border-glow-success {
        box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
      }
      .border-glow-danger {
        box-shadow: 0 0 5px rgba(255, 49, 49, 0.5);
      }
    }
  </style>
</head>
<body class="bg-dark font-sans text-text-primary grid-bg min-h-screen">
  <div class="max-w-md mx-auto min-h-screen relative overflow-hidden">
    
    <div id="particleBackground" class="absolute inset-0 z-0 opacity-20"></div>
    
    
    <div id="app" class="relative z-10">
      
      <div id="dashboard-page" class="page active">
        
        <header class="bg-gradient-to-r from-primary/20 to-secondary/20 backdrop-blur-sm p-4 border-b border-border">
          <div class="flex justify-between items-center">
            <div>
              <h1 class="text-xl font-bold gradient-text" id="greeting">晓荷饮食管理</h1>
              <p class="text-sm text-text-secondary" id="current-date">2025年7月21日 星期一</p>
            </div>
            <div class="w-10 h-10 rounded-lg bg-card flex items-center justify-center text-2xl border border-border">🧘‍♀️</div>
          </div>
        </header>

<div class="p-6 flex flex-col items-center">
          <div class="relative w-48 h-48 mb-4 animate-float">
            <svg class="w-full h-full" viewBox="0 0 100 100">
              
              <circle class="text-border" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"></circle>
              
              <circle id="progress-ring" class="text-primary progress-ring-circle" stroke-width="8" stroke="url(#gradient)" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="188.4"></circle>
              
              <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#00e5ff" />
                  <stop offset="100%" stop-color="#00b0ff" />
                </linearGradient>
              </defs>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
              <span id="calorie-progress" class="text-3xl font-bold text-text-primary">300</span>
              <span class="text-sm text-text-secondary">&nbsp;1200 Cals</span>
            </div>
          </div>
          <div class="w-full max-w-xs">
            <div class="flex justify-between text-sm text-text-secondary mb-1">
              <span>今日摄入</span>
              <span id="calorie-percentage" class="text-primary">25%</span>
            </div>
            <div class="w-full bg-border rounded-lg h-2 overflow-hidden">
              <div id="calorie-bar" class="bg-gradient-to-r from-primary to-secondary h-2 rounded-lg" style="width: 25%"></div>
            </div>
          </div>
        </div>

<div class="px-4 mb-6">
          <h2 class="text-lg font-semibold mb-3 text-text-primary">
            宏量营养素
          </h2>
          <div class="grid grid-cols-3 gap-3">
            
            <div class="bg-card card-shadow card-border rounded-lg p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-lg bg-card-dark flex items-center justify-center mb-2 text-2xl border border-border">
                🍞
              </div>
              <span class="text-xs text-text-secondary">碳水化合物</span>
              <span id="carbs-value" class="font-semibold text-primary">25g</span>
            </div>
            
            <div class="bg-card card-shadow card-border rounded-lg p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-lg bg-card-dark flex items-center justify-center mb-2 text-2xl border border-border">
                🥩
              </div>
              <span class="text-xs text-text-secondary">蛋白质</span>
              <span id="protein-value" class="font-semibold text-info">18g</span>
            </div>
            
            <div class="bg-card card-shadow card-border rounded-lg p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-lg bg-card-dark flex items-center justify-center mb-2 text-2xl border border-border" style="color: rgb(123, 145, 181);">🥑</div>
              <span class="text-xs text-text-secondary">脂肪</span>
              <span id="fat-value" class="font-semibold text-warning">12g</span>
            </div>
          </div>
        </div>

<div class="px-4 mb-10 py-10">
          <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-semibold text-text-primary">今日餐食</h2>
            <button id="add-meal-btn" class="text-primary text-sm flex items-center hover:text-secondary transition-colors">
              <i class="fa fa-plus-circle mr-1"></i> 添加餐食
            </button>
          </div>
          
          
          <div class="relative mb-4 border-b border-border">
            <div class="flex justify-between">
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-primary border-b-2 border-primary" data-meal="breakfast">早餐</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-text-secondary border-b-2 border-transparent" data-meal="lunch">午餐</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-text-secondary border-b-2 border-transparent" data-meal="dinner">晚餐</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-text-secondary border-b-2 border-transparent" data-meal="snack">零食</button>
            </div>
            <div class="tab-indicator absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-primary to-secondary w-1/4"></div>
          </div>
          
          
          <div class="meal-content active" id="breakfast-content">
            <div class="space-y-3" id="breakfast-list">
              
              <div class="bg-card card-shadow card-border rounded-lg p-3 flex justify-between items-center hover:border-primary/50 transition-colors">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-lg overflow-hidden mr-3 border border-border">
                    <div class="w-full h-full flex items-center justify-center bg-card-dark text-xl">🥝</div>
                  </div>
                  <div>
                    <h3 class="font-medium text-text-primary">猕猴桃</h3>
                    <p class="text-xs text-text-secondary">1个 · 61卡路里</p>
                  </div>
                </div>
                <button class="text-text-secondary hover:text-danger transition-colors">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
              <div class="bg-card card-shadow card-border rounded-lg p-3 flex justify-between items-center hover:border-primary/50 transition-colors">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-lg overflow-hidden mr-3 border border-border">
                    <div class="w-full h-full flex items-center justify-center bg-card-dark text-xl">🥭</div>
                  </div>
                  <div>
                    <h3 class="font-medium text-text-primary">百香果</h3>
                    <p class="text-xs text-text-secondary">1个 · 97卡路里</p>
                  </div>
                </div>
                <button class="text-text-secondary hover:text-danger transition-colors">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
            
            <div class="hidden flex flex-col items-center justify-center py-8 text-text-secondary">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">早餐还没有记录</p>
              <button class="mt-2 text-primary text-sm hover:text-secondary transition-colors">添加食物</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="lunch-content">
            <div class="space-y-3" id="lunch-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-text-secondary">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">午餐还没有记录</p>
              <button class="mt-2 text-primary text-sm add-food-btn hover:text-secondary transition-colors" data-meal="lunch">添加食物</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="dinner-content">
            <div class="space-y-3" id="dinner-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-text-secondary">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">晚餐还没有记录</p>
              <button class="mt-2 text-primary text-sm add-food-btn hover:text-secondary transition-colors" data-meal="dinner">添加食物</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="snack-content">
            <div class="space-y-3" id="snack-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-text-secondary">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">零食还没有记录</p>
              <button class="mt-2 text-primary text-sm add-food-btn hover:text-secondary transition-colors" data-meal="snack">添加食物</button>
            </div>
          </div>
        </div>
      </div>

<div id="search-page" class="page hidden">
        <header class="bg-card/80 backdrop-blur-sm shadow-sm p-4 sticky top-0 z-10 border-b border-border">
          <div class="relative">
            <input type="text" id="food-search-input" placeholder="搜索食物..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-card-dark text-text-primary border border-border focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-secondary"></i>
          </div>
        </header>
        
        
        <div class="px-4 py-3 overflow-x-auto border-b border-border">
          <div class="flex space-x-2 min-w-max">
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-gradient-to-r from-primary to-secondary text-white text-sm">全部</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-card-dark text-text-secondary text-sm hover:bg-card transition-colors">水果</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-card-dark text-text-secondary text-sm hover:bg-card transition-colors">蔬菜</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-card-dark text-text-secondary text-sm hover:bg-card transition-colors">主食</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-card-dark text-text-secondary text-sm hover:bg-card transition-colors">蛋白质</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-lg bg-card-dark text-text-secondary text-sm hover:bg-card transition-colors">零食</button>
          </div>
        </div>
        
        
        <div class="p-4" id="search-results">
          <div class="pb-16 grid grid-cols-2 gap-3">
            
          </div>
          
          
          <div id="search-empty-state" class="hidden flex flex-col items-center justify-center py-12 text-text-secondary">
            <i class="fa fa-search text-4xl mb-2"></i>
            <p class="text-sm">没有找到匹配的食物</p>
            <p class="text-xs mt-1 text-text-muted">请尝试其他关键词</p>
          </div>
        </div>
      </div>

<div id="food-detail-page" class="page hidden">
        <header class="bg-card/80 backdrop-blur-sm shadow-sm p-4 sticky top-0 z-10 flex justify-between items-center border-b border-border">
          <button id="back-to-search" class="text-text-secondary hover:text-primary transition-colors">
            <i class="fa fa-arrow-left"></i>
          </button>
          <h2 class="font-medium text-text-primary">食物详情</h2>
          <div class="w-6"></div> 
        </header>
        
        <div class="p-4">
          
          <div class="w-full h-48 rounded-lg overflow-hidden mb-4 flex items-center justify-center bg-card-dark border border-border">
            <div id="food-detail-emoji" class="text-8xl">🐟</div>
          </div>
          
          
          <div class="flex justify-between items-center mb-4">
            <h1 id="food-detail-name" class="text-xl font-bold text-text-primary">猕猴桃</h1>
            <span id="food-detail-calorie" class="text-primary font-semibold">61 卡路里</span>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4 mb-4">
            <h3 class="text-sm font-medium text-text-secondary mb-3">营养成分 (每份)</h3>
            <div class="space-y-2">
              <div class="flex justify-between">
                <span class="text-sm text-text-secondary">碳水化合物</span>
                <span id="food-detail-carbs" class="text-sm font-medium text-primary">15g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-text-secondary">蛋白质</span>
                <span id="food-detail-protein" class="text-sm font-medium text-info">1.1g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-text-secondary">脂肪</span>
                <span id="food-detail-fat" class="text-sm font-medium text-warning">0.5g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm text-text-secondary">膳食纤维</span>
                <span id="food-detail-fiber" class="text-sm font-medium text-accent">2.6g</span>
              </div>
            </div>
          </div>
          
          
          <div class="mb-6">
            <h3 class="text-sm font-medium text-text-secondary mb-3">选择份量</h3>
            <div class="grid grid-cols-3 gap-2">
              <button class="portion-btn px-3 py-2 border border-border bg-card-dark rounded-lg text-center hover:border-primary/50 transition-colors">
                <span class="block text-sm text-text-primary">1/2个</span>
                <span class="block text-xs text-text-secondary">30卡路里</span>
              </button>
              <button class="portion-btn px-3 py-2 border border-primary bg-primary/10 rounded-lg text-center border-glow">
                <span class="block text-sm text-text-primary">1个</span>
                <span class="block text-xs text-text-secondary">61卡路里</span>
              </button>
              <button class="portion-btn px-3 py-2 border border-border bg-card-dark rounded-lg text-center hover:border-primary/50 transition-colors">
                <span class="block text-sm text-text-primary">2个</span>
                <span class="block text-xs text-text-secondary">122卡路里</span>
              </button>
            </div>
          </div>
          
          
          <button id="add-to-meal-btn" class="w-full py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-medium flex items-center justify-center hover:opacity-90 transition-opacity">
            <i class="fa fa-plus-circle mr-2"></i> 添加到早餐
          </button>
        </div>
      </div>

<div id="progress-page" class="page hidden">
        <header class="bg-gradient-to-r from-primary/20 to-secondary/20 backdrop-blur-sm p-4 border-b border-border">
          <h1 class="text-xl font-bold gradient-text">进度追踪</h1>
        </header>
        
        
        <div class="p-6 pb-24">
          <div class="bg-card card-shadow card-border rounded-lg p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold text-text-primary">总体进度</h2>
              <span class="text-sm text-text-secondary">本周</span>
            </div>
            <div class="flex items-center justify-center mb-4">
              <div class="relative w-32 h-32">
                <svg class="w-full h-full" viewBox="0 0 100 100">
                  
                  <circle class="text-border" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"></circle>
                  
                  <circle class="text-primary progress-ring-circle" stroke-width="8" stroke="url(#progressGradient)" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="100.5"></circle>
                  
                  <defs>
                    <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                      <stop offset="0%" stop-color="#00e5ff" />
                      <stop offset="100%" stop-color="#00b0ff" />
                    </linearGradient>
                  </defs>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                  <span class="text-2xl font-bold gradient-text">60%</span>
                  <span class="text-xs text-text-secondary">完成率</span>
                </div>
              </div>
            </div>
            <div class="flex justify-between text-sm">
              <div class="text-center">
                <p class="text-text-secondary">目标</p>
                <p class="font-medium text-text-primary">1200卡路里/天</p>
              </div>
              <div class="text-center">
                <p class="text-text-secondary">平均摄入</p>
                <p class="font-medium text-text-primary">950卡路里/天</p>
              </div>
              <div class="text-center">
                <p class="text-text-secondary">连续打卡</p>
                <p class="font-medium text-accent">5天</p>
              </div>
            </div>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold text-text-primary">每日摄入趋势</h2>
              <div class="flex space-x-1">
                <button class="text-xs px-2 py-1 bg-gradient-to-r from-primary to-secondary text-white rounded">周</button>
                <button class="text-xs px-2 py-1 bg-card-dark text-text-secondary rounded hover:bg-card transition-colors">月</button>
              </div>
            </div>
            <div class="h-40">
              <canvas id="calorie-chart"></canvas>
            </div>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold text-text-primary">营养分布</h2>
              <span class="text-sm text-text-secondary">本周平均</span>
            </div>
            <div class="flex justify-center mb-4">
              <div class="w-32 h-32">
                <canvas id="nutrition-chart"></canvas>
              </div>
            </div>
            <div class="grid grid-cols-3 gap-2 text-center">
              <div>
                <div class="w-3 h-3 rounded-full bg-primary mx-auto mb-1"></div>
                <p class="text-xs text-text-secondary">碳水化合物</p>
                <p class="text-sm font-medium text-text-primary">50%</p>
              </div>
              <div>
                <div class="w-3 h-3 rounded-full bg-info mx-auto mb-1"></div>
                <p class="text-xs text-text-secondary">蛋白质</p>
                <p class="text-sm font-medium text-text-primary">30%</p>
              </div>
              <div>
                <div class="w-3 h-3 rounded-full bg-warning mx-auto mb-1"></div>
                <p class="text-xs text-text-secondary">脂肪</p>
                <p class="text-sm font-medium text-text-primary">20%</p>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="profile-page" class="page hidden">
        <header class="bg-gradient-to-r from-primary/20 to-secondary/20 backdrop-blur-sm p-4 border-b border-border">
          <h1 class="text-xl font-bold gradient-text">我的</h1>
        </header>
        
        <div class="p-6 pb-24">
          
          <div class="flex flex-col items-center mb-6">
            <div class="w-24 h-24 rounded-lg bg-card-dark flex items-center justify-center text-5xl border-4 border-card shadow-lg border-glow">
              👦
            </div>
            <h2 class="text-xl font-bold text-text-primary">用户</h2>
            <p class="text-sm text-text-secondary">已使用 14 天</p>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4 mb-6">
            <h2 class="text-lg font-semibold text-text-primary mb-4">每日热量目标</h2>
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-text-primary">1200 卡路里</span>
              <button class="text-primary text-sm hover:text-secondary transition-colors">编辑</button>
            </div>
            <input type="range" min="1000" max="3000" step="100" value="1200" class="w-full accent-primary bg-card-dark h-2 rounded-lg appearance-none cursor-pointer">
            <div class="flex justify-between text-xs text-text-secondary mt-1">
              <span>1000</span>
              <span>2000</span>
              <span>3000</span>
            </div>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4 mb-6">
            <h2 class="text-lg font-semibold text-text-primary mb-4">我的成就</h2>
            <div class="grid grid-cols-3 gap-3">
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-lg bg-card-dark flex items-center justify-center mb-2 border border-border border-glow-success">
                  <i class="fa fa-star text-accent text-xl"></i>
                </div>
                <p class="text-xs text-center text-text-secondary">连续7天打卡</p>
              </div>
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-lg bg-card-dark flex items-center justify-center mb-2 border border-border">
                  <i class="fa fa-trophy text-text-muted text-xl"></i>
                </div>
                <p class="text-xs text-center text-text-muted">首次达成目标</p>
              </div>
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-lg bg-card-dark flex items-center justify-center mb-2 border border-border">
                  <i class="fa fa-leaf text-text-muted text-xl"></i>
                </div>
                <p class="text-xs text-center text-text-muted">健康饮食</p>
              </div>
            </div>
          </div>
          
          
          <div class="bg-card card-shadow card-border rounded-lg p-4">
            <h2 class="text-lg font-semibold text-text-primary mb-4">设置</h2>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-bell text-text-secondary mr-3"></i>
                  <span class="text-text-primary">通知</span>
                </div>
                <label class="switch">
                  <input type="checkbox" checked="">
                  <span class="slider round"></span>
                </label>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-moon-o text-text-secondary mr-3"></i>
                  <span class="text-text-primary">深色模式</span>
                </div>
                <label class="switch">
                  <input type="checkbox" checked="">
                  <span class="slider round"></span>
                </label>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-history text-text-secondary mr-3"></i>
                  <span class="text-text-primary">历史记录</span>
                </div>
                <i class="fa fa-chevron-right text-text-secondary"></i>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-question-circle text-text-secondary mr-3"></i>
                  <span class="text-text-primary">帮助与支持</span>
                </div>
                <i class="fa fa-chevron-right text-text-secondary"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

<nav class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-card/80 backdrop-blur-sm border-t border-border flex justify-around items-center py-2 z-20">
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4 active" data-page="dashboard-page">
          <i class="fa fa-home text-lg text-primary"></i>
          <span class="text-xs mt-1 text-primary">首页</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="search-page">
          <i class="fa fa-search text-lg text-text-secondary"></i>
          <span class="text-xs mt-1 text-text-secondary">搜索</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="progress-page">
          <i class="fa fa-line-chart text-lg text-text-secondary"></i>
          <span class="text-xs mt-1 text-text-secondary">进度</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="profile-page">
          <i class="fa fa-user text-lg text-text-secondary"></i>
          <span class="text-xs mt-1 text-text-secondary">我的</span>
        </button>
      </nav>
    </div>
  </div>

const ctx = canvas.getContext('2d');
      const particles = [];
      const particleCount = 100;

// 创建粒子
      for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 2 + 1,
          color: `rgba(${Math.floor(Math.random()*80+180)}, ${Math.floor(Math.random()*80+180)}, ${Math.floor(Math.random()*80+180)}, 0.5)`,
          speedX: Math.random() * 0.5 - 0.25,
          speedY: Math.random() * 0.5 - 0.25
        });
      }

// 鼠标位置追踪
      let mouseX = 0, mouseY = 0;
      document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
      });

// 动画循环
      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      
        particles.forEach(p => {
          // 更新位置
          p.x += p.speedX;
          p.y += p.speedY;
        
          // 边界检查
          if (p.x > canvas.width) p.x = 0;
          if (p.x < 0) p.x = canvas.width;
          if (p.y > canvas.height) p.y = 0;
          if (p.y < 0) p.y = canvas.height;
        
          // 鼠标交互 - 靠近鼠标的粒子微微偏移
          const dx = p.x - mouseX;
          const dy = p.y - mouseY;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < 100) {
            p.x += dx * 0.01;
            p.y += dy * 0.01;
          }
        
          // 绘制粒子
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
          ctx.fillStyle = p.color;
          ctx.fill();
        });
      
        // 连接临近粒子
        connectParticles();
      }

// 连接临近的粒子
      function connectParticles() {
        for (let i = 0; i < particles.length; i++) {
          for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const dist = Math.sqrt(dx * dx + dy * dy);
          
            if (dist < 120) {
              ctx.beginPath();
              ctx.strokeStyle = `rgba(0, 229, 255, ${0.2 * (1 - dist/120)})`;
              ctx.lineWidth = 0.5;
              ctx.moveTo(particles[i].x, particles[i].y);
              ctx.lineTo(particles[j].x, particles[j].y);
              ctx.stroke();
            }
          }
        }
      }

// 启动动画
      animate();

// 响应窗口大小变化
      window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });
    });

// 食物数据库
    const foodDatabase = [
      {
        id: 1,
        name: '猕猴桃',
        category: '水果',
        calories: 61,
        carbs: 15,
        protein: 1.1,
        fat: 0.5,
        fiber: 2.6,
        image: 'emoji:kiwi'
      },
      {
        id: 2,
        name: '百香果',
        category: '水果',
        calories: 97,
        carbs: 23,
        protein: 2.2,
        fat: 0.7,
        fiber: 10.4,
        image: 'emoji:passionfruit'
      },
      {
        id: 3,
        name: '西瓜',
        category: '水果',
        calories: 30,
        carbs: 7.6,
        protein: 0.6,
        fat: 0.2,
        fiber: 0.4,
        image: 'emoji:watermelon'
      },
      {
        id: 4,
        name: '西兰花',
        category: '蔬菜',
        calories: 34,
        carbs: 7.1,
        protein: 2.8,
        fat: 0.4,
        fiber: 2.6,
        image: 'emoji:broccoli'
      },
      {
        id: 5,
        name: '小白菜',
        category: '蔬菜',
        calories: 13,
        carbs: 2.4,
        protein: 1.5,
        fat: 0.2,
        fiber: 1.1,
        image: 'emoji:bokchoy'
      },
      {
        id: 6,
        name: '全麦面包',
        category: '主食',
        calories: 69,
        carbs: 12.8,
        protein: 3.6,
        fat: 1,
        fiber: 2.6,
        image: 'emoji:bread'
      },
      {
        id: 7,
        name: '米饭',
        category: '主食',
        calories: 130,
        carbs: 28.2,
        protein: 2.7,
        fat: 0.3,
        fiber: 0.4,
        image: 'emoji:rice'
      },
      {
        id: 8,
        name: '鸡胸肉',
        category: '蛋白质',
        calories: 165,
        carbs: 0,
        protein: 31,
        fat: 3.6,
        fiber: 0,
        image: 'emoji:chicken'
      },
      {
        id: 9,
        name: '三文鱼',
        category: '蛋白质',
        calories: 208,
        carbs: 0,
        protein: 20.4,
        fat: 13.4,
        fiber: 0,
        image: 'emoji:salmon'
      },
      {
        id: 10,
        name: '鸡蛋',
        category: '蛋白质',
        calories: 155,
        carbs: 1.1,
        protein: 13,
        fat: 10,
        fiber: 0,
        image: 'emoji:egg'
      }
    ];

// 用户数据
    let userData = {
      currentCalories: 300,
      targetCalories: 1200,
      macros: {
        carbs: 25,
        protein: 18,
        fat: 12
      },
      meals: {
        breakfast: [
          {
            id: 1,
            name: '猕猴桃',
            calories: 61,
            quantity: 1,
            image: 'emoji:kiwi',
            macros: {
              carbs: 15,
              protein: 1.1,
              fat: 0.5
            }
          },
          {
            id: 2,
            name: '百香果',
            calories: 97,
            quantity: 1,
            image: 'emoji:passionfruit',
            macros: {
              carbs: 23,
              protein: 2.2,
              fat: 0.7
            }
          }
        ],
        lunch: [],
        dinner: [],
        snack: []
      },
      selectedMealType: 'breakfast',
      selectedFood: null
    };

// DOM 元素
    const elements = {
      pages: document.querySelectorAll('.page'),
      navBtns: document.querySelectorAll('.nav-btn'),
      mealTabs: document.querySelectorAll('.meal-tab'),
      mealContents: document.querySelectorAll('.meal-content'),
      tabIndicator: document.querySelector('.tab-indicator'),
      addMealBtn: document.getElementById('add-meal-btn'),
      addFoodBtns: document.querySelectorAll('.add-food-btn'),
      foodSearchInput: document.getElementById('food-search-input'),
      searchResults: document.getElementById('search-results'),
      searchEmptyState: document.getElementById('search-empty-state'),
      backToSearch: document.getElementById('back-to-search'),
      foodDetailPage: document.getElementById('food-detail-page'),
      foodDetailName: document.getElementById('food-detail-name'),
      foodDetailCalorie: document.getElementById('food-detail-calorie'),
      foodDetailCarbs: document.getElementById('food-detail-carbs'),
      foodDetailProtein: document.getElementById('food-detail-protein'),
      foodDetailFat: document.getElementById('food-detail-fat'),
      foodDetailFiber: document.getElementById('food-detail-fiber'),
      portionBtns: document.querySelectorAll('.portion-btn'),
      addToMealBtn: document.getElementById('add-to-meal-btn'),
      calorieProgress: document.getElementById('calorie-progress'),
      caloriePercentage: document.getElementById('calorie-percentage'),
      calorieBar: document.getElementById('calorie-bar'),
      carbsValue: document.getElementById('carbs-value'),
      proteinValue: document.getElementById('protein-value'),
      fatValue: document.getElementById('fat-value'),
      greeting: document.getElementById('greeting'),
      currentDate: document.getElementById('current-date')
    };

// 初始化
    function init() {
      // 设置当前日期和问候语
      setDateAndGreeting();
      
      // 初始化进度环
      updateProgressRing();
      
      // 初始化底部导航
      initNavigation();
      
      // 初始化餐食标签页
      initMealTabs();
      
      // 初始化搜索功能
      initSearch();
      
      // 初始化食物详情页
      initFoodDetail();
      
      // 初始化图表
      initCharts();
      
      // 绑定事件
      bindEvents();
    }

// 设置当前日期和问候语
    function setDateAndGreeting() {
      const now = new Date();
      const hours = now.getHours();
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      const dateString = now.toLocaleDateString('zh-CN', options);
      
      let greeting = '';
      if (hours < 12) {
        greeting = '早上好';
      } else if (hours < 18) {
        greeting = '下午好';
      } else {
        greeting = '晚上好';
      }
      
      elements.greeting.textContent = `${greeting}，用户`;
      elements.currentDate.textContent = dateString;
    }

// 更新进度环
    function updateProgressRing() {
      const percentage = (userData.currentCalories / userData.targetCalories) * 100;
      const clampedPercentage = Math.min(100, percentage);
      
      // 更新文本
      elements.calorieProgress.textContent = userData.currentCalories;
      elements.caloriePercentage.textContent = `${Math.round(clampedPercentage)}%`;
      
      // 更新进度条
      elements.calorieBar.style.width = `${clampedPercentage}%`;
      
      // 更新宏量营养素
      elements.carbsValue.textContent = `${userData.macros.carbs}g`;
      elements.proteinValue.textContent = `${userData.macros.protein}g`;
      elements.fatValue.textContent = `${userData.macros.fat}g`;
    }

// 初始化底部导航
    function initNavigation() {
      elements.navBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const targetPage = btn.getAttribute('data-page');
          
          // 更新导航按钮状态
          elements.navBtns.forEach(b => {
            b.classList.remove('active');
            b.querySelector('i').classList.remove('text-primary');
            b.querySelector('i').classList.add('text-text-secondary');
            b.querySelector('span').classList.remove('text-primary');
            b.querySelector('span').classList.add('text-text-secondary');
          });
          btn.classList.add('active');
          btn.querySelector('i').classList.add('text-primary');
          btn.querySelector('i').classList.remove('text-text-secondary');
          btn.querySelector('span').classList.add('text-primary');
          btn.querySelector('span').classList.remove('text-text-secondary');
          
          // 切换页面
          elements.pages.forEach(page => {
            if (page.id === targetPage) {
              page.classList.remove('hidden');
              page.classList.add('active');
            } else {
              page.classList.add('hidden');
              page.classList.remove('active');
            }
          });
        });
      });
    }

// 初始化餐食标签页
    function initMealTabs() {
      elements.mealTabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
          const mealType = tab.getAttribute('data-meal');
          
          // 更新标签页状态
          elements.mealTabs.forEach(t => {
            t.classList.remove('active', 'text-primary', 'border-primary');
            t.classList.add('text-text-secondary', 'border-transparent');
          });
          tab.classList.add('active', 'text-primary', 'border-primary');
          tab.classList.remove('text-text-secondary', 'border-transparent');
          
          // 移动指示器
          elements.tabIndicator.style.transform = `translateX(${index * 100}%)`;
          
          // 显示对应内容
          elements.mealContents.forEach(content => {
            content.classList.add('hidden');
          });
          document.getElementById(`${mealType}-content`).classList.remove('hidden');
        });
      });
    }

// 初始化搜索功能
    function initSearch() {
      // 显示所有食物
      renderFoodCards(foodDatabase);
      
      // 搜索输入事件
      elements.foodSearchInput.addEventListener('input', () => {
        const searchTerm = elements.foodSearchInput.value.toLowerCase().trim();
        
        if (searchTerm === '') {
          renderFoodCards(foodDatabase);
          return;
        }
        
        // 搜索匹配的食物
        const filteredFoods = foodDatabase.filter(food => 
          food.name.toLowerCase().includes(searchTerm) ||
          food.category.toLowerCase().includes(searchTerm)
        );
        
        renderFoodCards(filteredFoods);
      });
    }

// 渲染食物卡片
    function renderFoodCards(foods) {
      const container = elements.searchResults.querySelector('.grid');
      container.innerHTML = '';
      
      if (foods.length === 0) {
        container.parentElement.classList.add('hidden');
        elements.searchEmptyState.classList.remove('hidden');
        return;
      }
      
      container.parentElement.classList.remove('hidden');
      elements.searchEmptyState.classList.add('hidden');
      
      foods.forEach(food => {
        const card = document.createElement('div');
        card.className = 'food-card bg-card card-shadow card-border rounded-lg overflow-hidden food-card-hover';
        
        // 处理图片或emoji
        let imageContent = '';
        if (food.image && food.image.startsWith('emoji:')) {
          const emojiType = food.image.split(':')[1];
          let emoji = '';
          let bgColor = 'bg-card-dark';
          
          switch(emojiType) {
            case 'kiwi': emoji = '🥝'; bgColor = 'bg-green-900/30'; break;
            case 'passionfruit': emoji = '🥭'; bgColor = 'bg-orange-900/30'; break; // 使用芒果emoji代替百香果
            case 'watermelon': emoji = '🍉'; bgColor = 'bg-red-900/30'; break;
            case 'broccoli': emoji = '🥦'; bgColor = 'bg-green-900/30'; break;
            case 'bokchoy': emoji = '🥬'; bgColor = 'bg-green-900/30'; break;
            case 'bread': emoji = '🍞'; bgColor = 'bg-yellow-900/30'; break;
            case 'rice': emoji = '🍚'; bgColor = 'bg-yellow-900/30'; break;
            case 'chicken': emoji = '🍗'; bgColor = 'bg-yellow-900/30'; break;
            case 'salmon': emoji = '🐟'; bgColor = 'bg-pink-900/30'; break;
            case 'egg': emoji = '🥚'; bgColor = 'bg-yellow-900/30'; break;
            default: emoji = '🍎'; bgColor = 'bg-red-900/30'; // 默认水果emoji
          }
          
          imageContent = `<div class="h-full ${bgColor} flex items-center justify-center text-4xl">${emoji}</div>`;
        } else {
          imageContent = `<img src="${food.image}" alt="${food.name}" class="w-full h-full object-cover">`;
        }
        
        card.innerHTML = `
          <div class="h-24 overflow-hidden border-b border-border">
            ${imageContent}
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm text-text-primary">${food.name}</h3>
            <div class="flex justify-between items-center mt-1">
              <span class="text-xs text-text-secondary">${food.category}</span>
              <span class="text-xs font-medium text-primary">${food.calories} 卡</span>
            </div>
          </div>
        `;
        
        card.addEventListener('click', () => showFoodDetail(food));
        container.appendChild(card);
      });
    }

// 初始化食物详情页
    function initFoodDetail() {
      // 返回按钮
      elements.backToSearch.addEventListener('click', () => {
        elements.foodDetailPage.classList.add('hidden');
        document.getElementById('search-page').classList.remove('hidden');
      });
      
      // 份量选择
      elements.portionBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          elements.portionBtns.forEach(b => {
            b.classList.remove('border-primary', 'bg-primary/10', 'border-glow');
            b.classList.add('border-border', 'bg-card-dark');
          });
          btn.classList.add('border-primary', 'bg-primary/10', 'border-glow');
          btn.classList.remove('border-border', 'bg-card-dark');
        });
      });
      
      // 添加到餐食按钮
      elements.addToMealBtn.addEventListener('click', () => {
        if (!userData.selectedFood) return;
        
        // 获取选中的份量
        const activePortion = document.querySelector('.portion-btn.border-primary');
        const portionText = activePortion.querySelector('.text-sm').textContent;
        const caloriesText = activePortion.querySelector('.text-xs').textContent;
        const calories = parseInt(caloriesText);
        
        // 计算份量倍数
        let multiplier = 1;
        if (portionText.includes('1/2')) multiplier = 0.5;
        else if (portionText.includes('2')) multiplier = 2;
        
        // 创建餐食项
        const mealItem = {
          id: Date.now(), // 使用时间戳作为唯一ID
          name: userData.selectedFood.name,
          calories: Math.round(userData.selectedFood.calories * multiplier),
          quantity: multiplier,
          image: userData.selectedFood.image,
          macros: {
            carbs: Math.round(userData.selectedFood.carbs * multiplier),
            protein: Math.round(userData.selectedFood.protein * multiplier),
            fat: Math.round(userData.selectedFood.fat * multiplier)
          }
        };
        
        // 添加到用户数据
        userData.meals[userData.selectedMealType].push(mealItem);
        
        // 更新总热量和宏量营养素
        userData.currentCalories += mealItem.calories;
        userData.macros.carbs += mealItem.macros.carbs;
        userData.macros.protein += mealItem.macros.protein;
        userData.macros.fat += mealItem.macros.fat;
        
        // 更新UI
        updateProgressRing();
        renderMealItems();
        
        // 返回仪表板
        navigateToPage('dashboard-page');
      });
    }

// 显示食物详情
    function showFoodDetail(food) {
      userData.selectedFood = food;
      
      // 更新详情页内容
      elements.foodDetailName.textContent = food.name;
      elements.foodDetailCalorie.textContent = `${food.calories} 卡路里`;
      elements.foodDetailCarbs.textContent = `${food.carbs}g`;
      elements.foodDetailProtein.textContent = `${food.protein}g`;
      elements.foodDetailFat.textContent = `${food.fat}g`;
      elements.foodDetailFiber.textContent = `${food.fiber}g`;
      
      // 根据食物类型显示对应的emoji
      const emojiElement = document.getElementById('food-detail-emoji');
      if (food.image && food.image.startsWith('emoji:')) {
        const emojiType = food.image.split(':')[1];
        switch(emojiType) {
          case 'kiwi': emojiElement.textContent = '🥝'; break;
          case 'passionfruit': emojiElement.textContent = '🥭'; break; // 使用芒果emoji代替百香果
          case 'watermelon': emojiElement.textContent = '🍉'; break;
          case 'broccoli': emojiElement.textContent = '🥦'; break;
          case 'bokchoy': emojiElement.textContent = '🥬'; break;
          case 'bread': emojiElement.textContent = '🍞'; break;
          case 'rice': emojiElement.textContent = '🍚'; break;
          case 'chicken': emojiElement.textContent = '🍗'; break;
          case 'salmon': emojiElement.textContent = '🐟'; break;
          case 'egg': emojiElement.textContent = '🥚'; break;
          default: emojiElement.textContent = '🍎'; // 默认水果emoji
        }
      } else {
        emojiElement.textContent = '🍎'; // 默认水果emoji
      }
      
      // 更新份量按钮
      elements.portionBtns[0].querySelector('.text-xs').textContent = `${Math.round(food.calories * 0.5)}卡路里`;
      elements.portionBtns[1].querySelector('.text-xs').textContent = `${food.calories}卡路里`;
      elements.portionBtns[2].querySelector('.text-xs').textContent = `${food.calories * 2}卡路里`;
      
      // 重置份量选择
      elements.portionBtns.forEach(btn => {
        btn.classList.remove('border-primary', 'bg-primary/10', 'border-glow');
        btn.classList.add('border-border', 'bg-card-dark');
      });
      elements.portionBtns[1].classList.add('border-primary', 'bg-primary/10', 'border-glow');
      elements.portionBtns[1].classList.remove('border-border', 'bg-card-dark');
      
      // 更新添加按钮文本
      const mealTypeText = {
        'breakfast': '早餐',
        'lunch': '午餐',
        'dinner': '晚餐',
        'snack': '零食'
      };
      elements.addToMealBtn.innerHTML = `<i class="fa fa-plus-circle mr-2"></i> 添加到${mealTypeText[userData.selectedMealType]}`;
      
      // 切换到详情页
      document.getElementById('search-page').classList.add('hidden');
      elements.foodDetailPage.classList.remove('hidden');
    }

// 渲染餐食项
    function renderMealItems() {
      for (const mealType in userData.meals) {
        const container = document.getElementById(`${mealType}-list`);
        const emptyState = container.nextElementSibling;
        
        if (userData.meals[mealType].length === 0) {
          container.classList.add('hidden');
          emptyState.classList.remove('hidden');
          continue;
        }
        
        container.classList.remove('hidden');
        emptyState.classList.add('hidden');
        container.innerHTML = '';
        
        userData.meals[mealType].forEach(item => {
          const mealItem = document.createElement('div');
          mealItem.className = 'bg-card card-shadow card-border rounded-lg p-3 flex justify-between items-center hover:border-primary/50 transition-colors';
          
          // 处理图片或emoji
          let imageContent = '';
          if (item.image && item.image.startsWith('emoji:')) {
            const emojiType = item.image.split(':')[1];
            let emoji = '';
            let bgColor = 'bg-card-dark';
            
            switch(emojiType) {
              case 'kiwi': emoji = '🥝'; bgColor = 'bg-green-900/30'; break;
              case 'passionfruit': emoji = '🥭'; bgColor = 'bg-orange-900/30'; break; // 使用芒果emoji代替百香果
              case 'watermelon': emoji = '🍉'; bgColor = 'bg-red-900/30'; break;
              case 'broccoli': emoji = '🥦'; bgColor = 'bg-green-900/30'; break;
              case 'bokchoy': emoji = '🥬'; bgColor = 'bg-green-900/30'; break;
              case 'bread': emoji = '🍞'; bgColor = 'bg-yellow-900/30'; break;
              case 'rice': emoji = '🍚'; bgColor = 'bg-yellow-900/30'; break;
              case 'chicken': emoji = '🍗'; bgColor = 'bg-yellow-900/30'; break;
              case 'salmon': emoji = '🐟'; bgColor = 'bg-pink-900/30'; break;
              case 'egg': emoji = '🥚'; bgColor = 'bg-yellow-900/30'; break;
              default: emoji = '🍎'; bgColor = 'bg-red-900/30'; // 默认水果emoji
            }
            
            imageContent = `<div class="w-full h-full flex items-center justify-center ${bgColor} text-xl">${emoji}</div>`;
          } else {
            imageContent = `<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">`;
          }
          
          mealItem.innerHTML = `
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-lg overflow-hidden mr-3 border border-border">
                ${imageContent}
              </div>
              <div>
                <h3 class="font-medium text-text-primary">${item.name}</h3>
                <p class="text-xs text-text-secondary">${item.quantity}份 · ${item.calories}卡路里</p>
              </div>
            </div>
            <button class="text-text-secondary hover:text-danger transition-colors delete-meal-item" data-id="${item.id}">
              <i class="fa fa-trash"></i>
            </button>
          `;
          
          container.appendChild(mealItem);
        });
        
        // 添加删除事件
        document.querySelectorAll('.delete-meal-item').forEach(btn => {
          btn.addEventListener('click', (e) => {
            const itemId = parseInt(e.currentTarget.getAttribute('data-id'));
            deleteMealItem(mealType, itemId);
          });
        });
      }
    }

// 删除餐食项
    function deleteMealItem(mealType, itemId) {
      const mealItems = userData.meals[mealType];
      const index = mealItems.findIndex(item => item.id === itemId);
      
      if (index !== -1) {
        const deletedItem = mealItems.splice(index, 1)[0];
        
        // 更新总热量和宏量营养素
        userData.currentCalories -= deletedItem.calories;
        userData.macros.carbs -= deletedItem.macros?.carbs || 0;
        userData.macros.protein -= deletedItem.macros?.protein || 0;
        userData.macros.fat -= deletedItem.macros?.fat || 0;
        
        // 更新UI
        updateProgressRing();
        renderMealItems();
      }
    }

// 初始化图表
    function initCharts() {
      // 每日摄入趋势图
      const calorieCtx = document.getElementById('calorie-chart').getContext('2d');
      new Chart(calorieCtx, {
        type: 'bar',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '摄入热量',
            data: [950, 1050, 850, 1100, 950, 1200, 950],
            backgroundColor: 'rgba(0, 229, 255, 0.8)',
            borderRadius: 6,
            borderColor: 'rgba(0, 229, 255, 1)',
            borderWidth: 1
          }, {
            label: '目标热量',
            data: [1200, 1200, 1200, 1200, 1200, 1200, 1200],
            type: 'line',
            borderColor: 'rgba(0, 176, 255, 0.8)',
            borderWidth: 2,
            borderDash: [5, 5],
            pointRadius: 0,
            fill: false
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(12, 18, 32, 0.9)',
              titleColor: '#e2e8f0',
              bodyColor: '#94a3b8',
              borderColor: 'rgba(42, 58, 80, 0.5)',
              borderWidth: 1,
              padding: 10,
              displayColors: false,
              callbacks: {
                label: function(context) {
                  let label = context.dataset.label || '';
                  if (label) {
                    label += ': ';
                  }
                  if (context.parsed.y !== null) {
                    label += context.parsed.y + ' 卡路里';
                  }
                  return label;
                }
              }
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                display: true,
                color: 'rgba(42, 58, 80, 0.2)'
              },
              ticks: {
                color: '#94a3b8'
              }
            },
            x: {
              grid: {
                display: false
              },
              ticks: {
                color: '#94a3b8'
              }
            }
          }
        }
      });
      
      // 营养分布图
      const nutritionCtx = document.getElementById('nutrition-chart').getContext('2d');
      new Chart(nutritionCtx, {
        type: 'doughnut',
        data: {
          labels: ['碳水化合物', '蛋白质', '脂肪'],
          datasets: [{
            data: [50, 30, 20],
            backgroundColor: [
              'rgba(0, 229, 255, 0.8)',
              'rgba(0, 198, 255, 0.8)',
              'rgba(255, 170, 0, 0.8)'
            ],
            borderColor: [
              'rgba(0, 229, 255, 1)',
              'rgba(0, 198, 255, 1)',
              'rgba(255, 170, 0, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              backgroundColor: 'rgba(12, 18, 32, 0.9)',
              titleColor: '#e2e8f0',
              bodyColor: '#94a3b8',
              borderColor: 'rgba(42, 58, 80, 0.5)',
              borderWidth: 1,
              padding: 10,
              displayColors: false,
              callbacks: {
                label: function(context) {
                  let label = context.label || '';
                  if (label) {
                    label += ': ';
                  }
                  if (context.parsed !== null) {
                    label += context.parsed + '%';
                  }
                  return label;
                }
              }
            }
          },
          cutout: '70%'
        }
      });
    }

// 导航到指定页面
    function navigateToPage(pageId) {
      elements.navBtns.forEach(btn => {
        if (btn.getAttribute('data-page') === pageId) {
          btn.click();
        }
      });
    }

// 绑定事件
    function bindEvents() {
      // 添加餐食按钮
      elements.addMealBtn.addEventListener('click', () => {
        userData.selectedMealType = 'breakfast';
        navigateToPage('search-page');
      });
      
      // 添加食物按钮（餐食空状态）
      elements.addFoodBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const mealType = btn.getAttribute('data-meal');
          userData.selectedMealType = mealType;
          navigateToPage('search-page');
        });
      });
      
      // 分类筛选按钮
      document.querySelectorAll('.category-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          // 更新按钮状态
          document.querySelectorAll('.category-btn').forEach(b => {
            b.classList.remove('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white');
            b.classList.add('bg-card-dark', 'text-text-secondary');
          });
          btn.classList.add('bg-gradient-to-r', 'from-primary', 'to-secondary', 'text-white');
          btn.classList.remove('bg-card-dark', 'text-text-secondary');
          
          // 筛选食物
          const category = btn.textContent.trim();
          if (category === '全部') {
            renderFoodCards(foodDatabase);
          } else {
            const filteredFoods = foodDatabase.filter(food => food.category === category);
            renderFoodCards(filteredFoods);
          }
        });
      });
    }

// 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', init);
  </script>

</body>
</html>

Related Examples

Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

9 months ago

772
404 Page Not Found

Author:
KULDEEP

8 months ago

1.5k
image

Author:
pablitodgb

8 months ago

458
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
ishimwe prince

9 months ago

1k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

9 months ago

849
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

8 months ago

1.1k
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

628
About Us Component

Author:
KULDEEP

8 months ago

1.3k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
Automation that delivers real results
We design high modern UI

Author:
Alif Bima Pradana

3 weeks ago

23
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

970
background animation
background animation

Author:
Anonymous

2 years ago

50.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components