弥散色感风格

你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：你需要作为产品经理规划这页面，作为设计师思考这些原型页面的设计；

## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
*   **应用名称:** (暂定) MindBloom / Aura / ManifestMe (选择一个或保留占位符)
*   **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标、记录感恩，从而更好地实践吸引力法则，显化理想生活。
*   **核心模块与功能:**
    *   **启动页 (Splash Screen):** 应用加载时的品牌展示。
    *   **主页/仪表盘 (Home/Dashboard):**
        *   显示问候语和用户昵称。
        *   展示“今日意图”或随机一条用户收藏的肯定语。
        *   关键目标摘要卡片（如1-2个核心目标）。
        *   快速访问入口按钮（如“添加新目标”、“查看肯定语”、“记录感恩”）。
        *   (可选) 一个小的感恩摘要或可视化提醒。
    *   **目标设定与管理 (Goals):**
        *   **目标列表页:** 以卡片形式展示所有目标，包含目标名称、状态（进行中/已完成）、缩略图（可选）。
        *   **目标详情页:**
            *   目标名称、描述、设定的截止日期（若有）。
            *   关联的肯定语列表。
            *   关联的愿景板图片展示区域。
            *   **进度追踪模块:**
                *   包含一个**动态折线图**，展示用户自我评估的信心指数或相关行动频率随时间的变化（数据为示例）。图表加载时使用 `stroke-dasharray` 动画。
                *   手动添加进度记录的入口。
        *   **创建/编辑目标表单页:**
            *   输入目标名称（必填）。
            *   输入目标详细描述（多行文本）。
            *   选择目标分类（可选，如事业、健康等）。
            *   上传关联图片（用于愿景板/目标）。
            *   设定截止日期（日期选择器概念）。
            *   表单采用**无边框设计**，仅保留圆角背景。
    *   **肯定语 (Affirmations):**
        *   **肯定语列表页:** 展示应用内置或用户自定义/收藏的肯定语列表。提供分类筛选。
        *   **肯定语详情/练习页 (可选):** 单独展示一条肯定语，可能有背景音乐播放或计时器辅助练习。
    *   **感恩日记 (Gratitude Journal):**
        *   **日记列表页:** 按日期展示过往的感恩记录条目摘要。
        *   **添加/查看日记页:** 用于输入/编辑当日的感恩内容（至少3条），查看单条详情。
    *   **愿景板 (Vision Board):**
        *   展示用户上传和排版的图片、文字，形成可视化看板。
    *   **设置 (Settings):**
        *   账户信息（昵称、头像）。
        *   通知提醒设置。
        *   外观主题（虽然我们定义了，但可以放个入口概念）。
        *   关于/帮助。
*   **主要导航:**
    *   使用**底部标签栏 (Bottom Tab Bar)**，包含5个主要入口：主页、目标、肯定语、日记/愿景板 (合并或取舍)、设置。


## 技术规格：
▸ 单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
APP的单页布局尽量饱满，多增加一些好看的卡片布局或者图表样式
整体设计颜色严格遵循配色模块的颜色

## 配色
    --primary-100:#d4eaf7;
    --primary-200:#b6ccd8;
    --primary-300:#3b3c3d;
    --accent-100:#71c4ef;
    --accent-200:#00668c;
    --text-100:#1d1c1c;
    --text-200:#313d44;
    --bg-100:#fffefb;
    --bg-200:#f5f4f1;
    --bg-300:#cccbc8;
      
     
## 弥散色风格

#### 1. 关键点一：梦幻的弥散/光晕背景 (The Dreamy Diffused/Aura Background)
这是整个视觉的基底。这个背景不是简单的线性渐变，而是多个色块柔和地融合成的“光晕”效果。

#### 2. 关键点二：颗粒/噪点质感 (The Grain/Noise Texture)
仔细看，背景上有一层非常细微的颗粒感，这能极大地提升界面的高级感和质感，避免纯数字渐变的“塑料感”。

#### 3. 关键点三：玻璃拟态卡片 (Glassmorphism Cards)
这是界面的核心内容区，也是最吸引人的部分。

#### 4. 关键点四：清晰的排版与文字效果
背景很花哨，所以前景文字必须清晰。

#### 5. 关键点五：整体布局与结构 (Layout & Structure)
要将这些卡片和元素有序地排列起来，你需要现代的CSS布局技术。