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

Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 months ago

219
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.5k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

7 months ago

1k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

7 months ago

1.1k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
Tailwind Google Map widget

Author:
Dung Vuong

7 months ago

444
Payment success page example

Author:
Anonymous

8 months ago

1.4k
About Us Component

Author:
KULDEEP

7 months ago

1.3k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

9 months ago

1.1k
Sign up
sign up page

Author:
gidy

8 months ago

1.3k
about video
about kelaplus video

Author:
Omer fils ELENGA

7 months ago

776
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

579

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components