你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：
## 产品需求：
* **应用类型：** 中文“显化应用 (Manifestation App)”。
* **核心理念：** 帮助用户设定意图、培养积极心态、可视化目标，实践吸引力法则。
* **需要包含的核心页面：**
1. 启动页 (Splash Screen)
2. 主页/仪表盘 (Home/Dashboard)
3. 目标列表页 (Goals)
4. 目标详情页 (Goal Detail)
5. 创建/编辑目标页 (Add/Edit Goal)
6. 肯定语列表页 (Affirmations)
7. 感恩日记页 (Gratitude Journal)
8. 愿景板 (Vision Board)
9. 设置页 (Settings)
## 技术规格：
* **输出格式：** 单个完整的HTML文件。
* **布局：** 每行为**4个**横向排列的页面预览，可以有多行。
* **画板尺寸：** 375x812px (带1px灰色描边模拟手机边框)。
* **必须包含：**
* **矢量图标系统：** 使用``在HTML顶部定义所有图标。
* **动态折线图：** 在目标详情页，使用SVG ``和CSS `stroke-dasharray` 动画实现。
* **卡片悬浮效果：** 使用CSS `box-shadow` 模拟高程阴影，悬停时阴影增强。
* **图片占位：** 使用`![]()
`标签外链Unsplash (`source.unsplash.com`)，并使用**特定主题的URL**（如 `source.unsplash.com/400x300/?nature,water`）以确保内容相关性和稳定性。
## 新视觉风格：材质设计 (Material You / Material Design 3)
### 1. 视觉特性
* **1.1 动态色彩 (Dynamic Color):**
* **核心种子色 (Seed Color):** 以一个柔和的紫色 (`#6750A4`) 或蓝色 (`#4D96FF`) 为基础。
* **派生色盘:** 从种子色自动派生出一整套和谐的色彩方案，并系统性地应用到整个UI中：
* **主色 (Primary):** 用于关键组件，如FAB、高亮按钮。
* **表面色 (Surface):** 用于卡片、底部工作表等元素的背景。
* **容器色 (Container):** 用于需要与表面色区分的组件，如选中状态的导航项。
* **内容颜色:** 确保所有文字和图标颜色在不同背景上都有足够的可读性。
* **1.2 高程与光影 (Elevation & Shadow):**
* **柔和阴影:** 使用多层、柔和的`box-shadow`来模拟不同高度的元素（如卡片、按钮）投下的阴影，创造清晰的层级感。
* **表面着色:** 根据高程不同，浮起的元素表面可能会有非常轻微的颜色叠加，模拟光照效果。
* **1.3 形状系统 (Shape System):**
* **统一圆角:** 为不同类型的组件定义统一的圆角标准，例如：
* **卡片/对话框:** `border-radius: 16px;`
* **按钮/输入框:** `border-radius: 12px;`
* **FAB (浮动操作按钮):** `border-radius: 50%;` (完全圆形)
### 2. 元素设计
* **2.1 按钮:**
* **填充按钮 (Filled Button):** 用于最高优先级的操作，背景为主色。
* **色调按钮 (Tonal Button):** 用于中等优先级的操作，背景为主容器色，比填充按钮更柔和。
* **文本按钮 (Text Button):** 用于低优先级的操作。
* **FAB (浮动操作按钮):** 悬浮在内容之上，用于页面的主要创造性操作。
* **交互反馈:** 所有按钮点击时**必须有**标志性的**涟漪 (Ripple)** 动画效果。
* **2.2 输入框:**
* **样式:** 采用**填充式 (Filled)** 或**描边式 (Outlined)** 的文本输入框。
* **标签动画:** 标签文字在获得焦点时，会缩小并移动到输入框边框之上。
* **颜色:** 边框、背景、标签颜色需遵循派生的色彩系统，确保焦点状态清晰。
* **2.3 卡片:**
* **样式:** 使用**填充式 (Filled)**、**描边式 (Outlined)** 或**高程卡片 (Elevated)**。
* **布局:** 内容与卡片边缘有清晰的内边距 (`padding`)。
* **层次:** 通过阴影与背景分离，悬停时阴影可轻微增强。
* **2.4 图标:**
* **风格:** 遵循Google Material Symbols规范，提供**线性 (Regular)** 和**填充 (Filled)** 两种样式。
* **应用:** 在选中或激活状态下，图标从线性切换为填充样式，提供清晰的视觉反馈。
* **颜色:** 图标颜色应遵循派生的内容颜色规范。
* **2.5 数据可视化:**
* **图表:** 折线图、饼图等使用派生色盘中的主色和辅色，颜色清晰和谐。
* **线条与标记:** 折线图线条粗细适中，数据点标记清晰。
### 3. 文字设计
* **3.1 字体:**
* **字体栈:** `Roboto`, `Poppins`, `sans-serif`。
* **层级:** 遵循Material Design的类型层级（Type Scale），如 `Display`, `Headline`, `Title`, `Body`, `Label`，通过字号和字重明确区分。
* **3.2 字体颜色:**
* **对比度:** 所有文字颜色必须在其背景色上满足WCAG AA级或以上的对比度要求。
* **层次:** 使用派生的 `On Primary`, `On Surface` 等颜色，确保在不同背景下的可读性。
### 4. 动效设计
* **4.1 核心原则:** 动画应**信息丰富、重点突出、富于表现力**。
* **涟漪效果 (Ripple):** **必须实现**在所有可点击组件上的点击反馈。
* **状态变化:** 组件状态变化（如勾选框）应有平滑的过渡动画。
* **页面切换:** (概念上) 页面切换可以使用共享元素过渡或淡入淡出效果。
### 5. 布局设计
* **5.1 响应式网格:** 遵循8dp网格系统进行布局和间距设计。
* **组件:**
* **顶部应用栏 (Top App Bar):** 显示页面标题和操作。可设计为滚动时收缩的**大顶部应用栏**。
* **底部导航栏 (Navigation Bar):** 包含5个导航项。**选中项**的图标变为填充样式，并被一个**药丸状的活动指示器**包裹。
THE END
