# MTimer 官网

> 基于番茄工作法的 AI 时间专注助手官方网站

![MTimer](https://img.shields.io/badge/MTimer-2.0-red)

## 项目简介

MTimer 是一款跨平台桌面生产力工具，结合番茄工作法与 AI 智能助手，帮助用户提升专注力和工作效率。官网采用玻璃态暗黑风格设计，展示产品的核心功能和特性。

## 核心功能

- **番茄时钟** - 经典 25 分钟番茄工作法，支持自定义时长
- **智能待办** - AI 辅助任务规划和优先级排序
- **专注模式** - 屏蔽干扰，沉浸式工作体验
- **数据洞察** - 可视化图表展示专注趋势和效率分析
- **AI 助手** - 集成多种大模型（DeepSeek、智谱 AI、通义千问、OpenAI）

## 技术栈

- **HTML5** - 语义化标签
- **CSS3** - 玻璃态效果、CSS 变量、动画
- **JavaScript (ES6+)** - 原生 JS，无框架依赖

## 设计特色

### 视觉风格

- **玻璃态暗黑主题** - 毛玻璃卡片效果 + 深色背景
- **番茄红品牌色** - #ff6b6b 作为主色调
- **渐变动画** - 流动的渐变背景球体
- **悬浮元素** - 视差效果和浮动卡片

### 交互动画

- **平滑滚动** - 导航锚点平滑跳转
- **滚动显现** - 元素进入视口时淡入动画
- **数字动画** - 统计数据动态增长
- **番茄倒计时** - 番茄时钟实时倒数
- **AI 对话演示** - 自动播放的 AI 对话展示

### 响应式设计

- 支持桌面、平板、手机三种设备
- 断点：480px、768px、1024px
- 移动端优化的导航和布局

## 文件结构

```
TomatoTimer/
├── index.html      # 主页面
├── style.css       # 样式文件
├── app.js          # 交互脚本
└── README.md       # 项目说明
```

## 快速开始

### 本地预览

直接在浏览器中打开 `index.html` 文件：

```bash
# 使用默认浏览器打开
open index.html

# 或使用 Python 启动本地服务器
python3 -m http.server 8000

# 或使用 Node.js
npx serve .
```

### 在线部署

可以部署到以下平台：

- [Vercel](https://vercel.com)
- [Netlify](https://netlify.com)
- [GitHub Pages](https://pages.github.com)

## 页面结构

### 1. 导航栏 (Navbar)

- 固定顶部，滚动时添加毛玻璃效果
- 品牌标识 + 导航链接 + CTA 按钮

### 2. 英雄区 (Hero Section)

- 大标题 + 副标题
- 番茄时钟动画展示
- 浮动信息卡片
- 统计数据展示

### 3. 功能特性 (Features)

- 四个核心功能卡片
- 图标 + 标题 + 描述 + 特性列表
- 悬停效果

### 4. AI 助手 (AI Assistant)

- 左侧：功能介绍列表
- 右侧：AI 对话演示
- 自动播放对话动画

### 5. 数据洞察 (Statistics)

- SVG 柱状图（周趋势）
- 三个统计卡片
- 数字增长动画

### 6. 支持模型 (Models)

- 四种 AI 模型卡片
- Logo + 名称 + 描述 + 标签
- 悬停旋转效果

### 7. 行动号召 (CTA)

- 下载按钮（Windows / macOS / Linux）
- 渐变背景

### 8. 页脚 (Footer)

- 品牌信息
- 链接分组
- 版权信息

## 设计系统

### 颜色

```css
--color-tomato: #ff6b6b; /* 主色 - 番茄红 */
--color-blue: #3a82f6; /* 辅助色 - 蓝色 */
--color-green: #32cd32; /* 成功色 - 绿色 */
--bg-primary: #0a0a0f; /* 主背景 */
--bg-secondary: #12121a; /* 次背景 */
--text-primary: #e5eaf3; /* 主文字 */
--text-secondary: #a3abb2; /* 次文字 */
```

### 玻璃态效果

```css
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
```

### 动画缓动

```css
/* 标准缓动 */
cubic-bezier(0.16, 1, 0.3, 1)

/* 弹簧缓动 */
cubic-bezier(0.34, 1.56, 0.64, 1)
```

## 可访问性

- ✅ 颜色对比度符合 WCAG AA 标准
- ✅ 支持键盘导航
- ✅ 焦点状态可见
- ✅ 尊重 `prefers-reduced-motion` 设置
- ✅ 语义化 HTML 标签

## 浏览器支持

| 浏览器  | 最低版本 |
| ------- | -------- |
| Chrome  | 90+      |
| Firefox | 88+      |
| Safari  | 14+      |
| Edge    | 90+      |

## 性能优化

- CSS 动画使用 `transform` 和 `opacity`
- 滚动事件使用节流（throttle）优化
- Intersection Observer 懒加载动画
- 无外部依赖，原生 JS 实现

## 自定义配置

### 修改品牌色

编辑 `style.css` 中的 CSS 变量：

```css
:root {
  --color-tomato: #your-color;
  /* ... */
}
```

### 调整动画速度

```css
:root {
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
}
```

### 禁用动画

如果用户偏好减少动画，所有动画会自动禁用。

## 项目规范

本网站遵循 [UI/UX Pro Max](https://claude.com/claude-code) 设计指南：

- ✅ 无表情符号图标（使用 SVG）
- ✅ 所有可点击元素有 `cursor-pointer`
- ✅ 悬停状态平滑过渡（150-300ms）
- ✅ 明暗模式文本对比度 4.5:1 以上
- ✅ 响应式断点：375px, 768px, 1024px, 1440px

## 更新日志

### v1.0.0 (2025-01-26)

- 🎉 初始版本发布
- ✨ 玻璃态暗黑主题
- ✨ 番茄时钟动画
- ✨ AI 对话演示
- ✨ 数据可视化图表
- ✨ 响应式设计

**Made with ❤️ by MTimer Team**