作为一名资深APP UI设计师，请根据以下详细的产品需求和设计规范，为一款中文的“显化应用 (Manifestation App)”创建一套完整的UI界面设计方案，并最终生成一个包含所有设计页面的、符合技术规格的**单一HTML文件**。 ## 1. 应用概念与核心功能 * **应用名称:** (暂定) MindBloom / Aura / ManifestMe (选择一个或保留占位符) * **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标、记录感恩，从而更好地实践吸引力法则，显化理想生活。 * **核心模块与功能:** * **启动页 (Splash Screen):** 应用加载时的品牌展示。 * **主页/仪表盘 (Home/Dashboard):** * 显示问候语和用户昵称。 * 展示“今日意图”或随机一条用户收藏的肯定语。 * 关键目标摘要卡片（如1-2个核心目标）。 * 快速访问入口按钮（如“添加新目标”、“查看肯定语”、“记录感恩”）。 * (可选) 一个小的感恩摘要或可视化提醒。 * **目标设定与管理 (Goals):** * **目标列表页:** 以卡片形式展示所有目标，包含目标名称、状态（进行中/已完成）、缩略图（可选）。 * **目标详情页:** * 目标名称、描述、设定的截止日期（若有）。 * 关联的肯定语列表。 * 关联的愿景板图片展示区域。 * **进度追踪模块:** * 包含一个**动态折线图**，展示用户自我评估的信心指数或相关行动频率随时间的变化（数据为示例）。图表加载时使用 `stroke-dasharray` 动画。 * 手动添加进度记录的入口。 * **创建/编辑目标表单页:** * 输入目标名称（必填）。 * 输入目标详细描述（多行文本）。 * 选择目标分类（可选，如事业、健康等）。 * 上传关联图片（用于愿景板/目标）。 * 设定截止日期（日期选择器概念）。 * 表单采用**无边框设计**，仅保留圆角背景。 * **肯定语 (Affirmations):** * **肯定语列表页:** 展示应用内置或用户自定义/收藏的肯定语列表。提供分类筛选。 * **肯定语详情/练习页 (可选):** 单独展示一条肯定语，可能有背景音乐播放或计时器辅助练习。 * **感恩日记 (Gratitude Journal):** * **日记列表页:** 按日期展示过往的感恩记录条目摘要。 * **添加/查看日记页:** 用于输入/编辑当日的感恩内容（至少3条），查看单条详情。 * **愿景板 (Vision Board):** * 展示用户上传和排版的图片、文字，形成可视化看板。 * **设置 (Settings):** * 账户信息（昵称、头像）。 * 通知提醒设置。 * 外观主题（虽然我们定义了，但可以放个入口概念）。 * 关于/帮助。 * **主要导航:** * 使用**底部标签栏 (Bottom Tab Bar)**，包含5个主要入口：主页、目标、肯定语、日记/愿景板 (合并或取舍)、设置。 ## 2. 新视觉风格 (晶白风格 Crystal White Style) * **核心元素风格:** * **晶白渐变:** 关键UI元素（如首页摘要卡、目标卡片、底部导航栏、弹出的模态窗口/操作菜单）采用**从白色到透明的线性渐变**作为背景 (`background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1));` 或类似效果)。透明度的起止和过渡应精心设计，以在纯白背景上**利用透明度拉开视觉层次**。 * **边缘界定:** 由于渐变末端趋于透明，可考虑添加极细微、浅色的边框 (`border: 1px solid rgba(0, 0, 0, 0.05);` 或 `rgba(255, 255, 255, 0.3)`) 或非常柔和的内阴影来帮助界定元素轮廓，避免完全融入背景。 * **背景与层级:** * **页面背景:** 推荐使用纯净的白色 (`#FFFFFF`) 或带有极其微弱纹理/渐变的浅色背景（如 `#F8F4F0` 保持不变也可，以便透明部分能显现出来）。 * **投影与发光:** 使用柔和的**投影 (`filter: drop-shadow(...)` 或 `box-shadow`)** 和/或**外发光 (`box-shadow` 模拟)** 来体现元素的**悬浮感和上下层级关系**，尤其是在卡片堆叠或模态框弹出时。阴影颜色应非常浅淡（如 `rgba(0, 0, 0, 0.05)` 到 `rgba(0, 0, 0, 0.1)`）。 * **配色方案:** * **主导色:** 白色 (通过渐变和透明度体现)。 * **主文字:** 深灰 `#4A4A4A` (确保在白色/透明背景下的可读性)。 * **次要文字/提示文字:** 浅灰 `#888888`。 * **点缀色/强调色:** 柔和橙色 `#FF7F50` (用于按钮、图标、图表线条、选中状态、焦点指示)。可考虑调整为更冷色调或饱和度更低的版本以配合整体晶白感，但 `#FF7F50` 亦可作为对比色保留。 * **极简字体排版:** * 字体: 优先使用 `Poppins`, `Roboto`, `思源黑体` (Sans-serif)。 * 显示：文字显示为中文 * 层级: * 大标题 (页面标题): `30px` Bold。 * 卡片标题/重要标签: `20px` Medium。 * 正文/列表项: `16px` Regular。 * 小字号/说明文字: `14px` Regular。 * 通过字重 (Bold, Medium, Regular) 和颜色 (`#4A4A4A`, `#888888`) 区分信息主次。 * **表单优化:** * 输入框 (``, `

`): **去除默认边框** (`border: none;`)，使用流畅圆角 (`border-radius: 12px;`) 和浅色背景 (`background-color: rgba(255, 255, 255, 0.8);` 或 `#FFFFFF` 配合浅投影)。内边距 (`padding`) 舒适。获得焦点 (`:focus`) 时，显示**柔和的橙色外发光** (`box-shadow: 0 0 8px 2px rgba(255, 127, 80, 0.3);`)。
*   **交互动效:**
    *   **按钮:** 默认状态可带有极其微弱的**白色外发光**或浅灰色投影。点击时有 `transform: scale(0.98)` 或 透明度变化 `opacity: 0.8` 的反馈。
    *   **卡片:** 在支持悬停的场景（代码预览时模拟），鼠标悬停 (`:hover`) 时触发**轻微上浮** (`transform: translateY(-4px);`) 并**增强投影或外发光** (`filter: drop-shadow(0 12px 20px rgba(0,0,0,0.08));`)。优先使用 `filter: drop-shadow()` 实现更自然的悬浮感。

## 3. 技术规格

*   **输出格式:** 单个完整的HTML文件。所有CSS样式使用 `<style>` 标签内嵌，必要的简单JS（如图表动画触发）也内嵌在 `<script>` 标签中。
*   **布局:**
    *   HTML Body内创建一个容器，用于横向排列所有页面预览。
    *   每行展示 **6个** 页面预览。使用 Flexbox 或 Grid 布局实现。
    *   当页面数量超过6个时，自动换行。
*   **页面预览画板:**
    *   每个页面预览模拟手机屏幕，尺寸严格为 **375x812px**。
    *   为每个画板添加 **1px 的浅灰色描边** (`border: 1px solid #E0E0E0;`) 模拟手机边框，使其在白色背景下可见。
    *   画板之间需要有适当的间距 (`margin`)。
*   **矢量图标系统:**
    *   **必须** 使用SVG `<symbol>` 技术定义图标。在HTML文件顶部 `<svg>` 块中定义所有需要的图标（如 home, target, quote, image, journal, settings, add, check, arrow-right, search, edit, delete, play-circle 等）。
    *   在页面中通过 `<svg><use xlink:href="#icon-name"></use></svg>` 的方式引用图标。图标颜色应能通过CSS `fill: currentColor;` 控制，以便继承父元素的颜色或单独设置（通常是主文字色或点缀色）。
*   **动态折线图:**
    *   在“目标详情页”的进度追踪模块中实现。
    *   使用SVG `<path>` 绘制折线。
    *   **必须** 使用CSS `stroke-dasharray` 和 `stroke-dashoffset` 属性，并配合 `@keyframes` 动画，实现线条从起点到终点动态绘制出来的效果。线条颜色使用点缀色 (`#FF7F50`)。
*   **卡片悬浮效果:**
    *   应用于主页、目标列表等页面的卡片元素。
    *   **必须** 优先尝试通过 CSS `filter: drop-shadow(...)` 属性实现悬浮时的阴影效果，以获得更平滑、真实的投影。如果实现复杂或效果不佳，可回退到 `box-shadow`。配合 `transition` 使效果平滑。
*   **图片占位:**
    *   **核心要求:** 确保所有设计的图片区域在最终HTML中**必须可靠显示**，避免出现破损图片或空白区域。追求更佳的视觉效果和多样性。
    *   **优化策略:**
        *   **策略一 (推荐优先，兼顾美观与灵活性): 使用可靠的、基于ID的图片服务 (如 Picsum Photos)。**
            *   **替代 Unsplash:** 放弃之前固定的 Unsplash URL。改为使用 `picsum.photos` 这类服务，但**严格使用其基于特定图片ID的URL格式**，**严禁使用随机 (`/random`) 功能**。
            *   **URL 格式:** `https://picsum.photos/id/{IMAGE_ID}/{width}/{height}` (例如: `https://picsum.photos/id/1011/400/400`)。
            *   **增加多样性:** 请从以下**扩展的 Picsum ID 列表**中选择并**循环使用**，以提供更丰富的视觉内容：
                *   `10` (Forest)
                *   `20` (Cityscape)
                *   `33` (Abstract Texture)
                *   `42` (Minimalist Object)
                *   `1011` (Woman with hat)
                *   `1015` (Lake reflection)
                *   `1025` (Dog)
                *   `103` (Lighthouse)
                *   `1040` (Mountains)
                *   `1062` (Laptop on desk)
                *   `1074` (Waves)
                *   `1080` (Abstract Lights)
                *   `200` (Man looking at view)
                *   `219` (Coffee)
                *   `237` (Puppy)
                *   (你可以根据需要进一步扩充此列表，确保ID有效)
            *   **使用方法:** 在 `<img>` 标签中使用这些固定的ID链接，并设置 `alt` 属性（如 `alt="Placeholder Image from Picsum"`）。确保通过CSS控制尺寸和 `object-fit: cover;`。
        *   **策略二 (最可靠的后备方案 / 适用于简单场景): 生成美观的内联 SVG 占位符。**
            *   **提升美观度:** 不再是简单的灰色矩形。创建更具设计感的SVG占位符，使其与**霓虹渐变主题**相协调：
                *   **背景:** 使用深色背景（如 `#1A1A2E`, `#2C0A2C` 或与页面背景匹配的深色）。
                *   **内容:**
                    *   可以包含**微妙的几何图案**（如细线网格、点阵）。
                    *   或者绘制简单的**抽象形状**（圆、弧线、波浪线）。
                    *   或者使用**霓虹色的渐变**作为SVG背景或内部元素的填充/描边（例如，从亮蓝到洋红的细微渐变条）。
                    *   可以在中心放置一个简单的**矢量图标** (使用 `<use>` 引用 `icon-image` 等)，并用**霓虹强调色** (`#00BFFF`, `#FF00FF` 等) 或**亮白色**进行着色，甚至可以给图标添加微弱的 `filter: drop-shadow()` 模拟辉光。
            *   **多样化SVG:** 尽量为不同类型的图片区域（如头像、列表缩略图、愿景板背景块）生成**略有不同**的SVG占位符图案或配色，增加视觉趣味性。
            *   **实现:** 直接在HTML中嵌入 `<svg>` 代码，确保其尺寸适应容器。
    *   **实施优先级:**
        *   对于需要**真实照片感**的区域（如愿景板主要图片、目标详情大图），**优先尝试策略一 (Picsum ID)**。
        *   对于**头像、列表缩略图**等小型或次要区域，或作为策略一失败时的**最终后备**，**必须使用策略二 (美观SVG)**。
    *   **最终目标:** 无论采用哪种策略，生成的 HTML 在浏览器中打开时，所有设计的图片区域都**必须有吸引人的、符合主题的可见内容**。

---

**修改总结:**

1.  **放弃固定 Unsplash:** 完全移除了对特定 Unsplash 链接的依赖。
2.  **引入 Picsum Photos (ID based):** 推荐使用 `picsum.photos` 并提供了一个**更长、更多样化**的固定图片 ID 列表，以增加视觉丰富度，同时强调**必须使用 ID 格式**而非随机。
3.  **大幅强化 SVG 占位符:**
    *   从“简单占位”提升为“美观的 SVG 占位符”。
    *   给出了具体的**设计建议**，使其与**霓虹渐变主题**融合（深色背景、霓虹色元素、几何/抽象图案、图标辉光）。
    *   强调了 SVG 占位符的**多样化**。
4.  **明确优先级:** 指导何时优先使用 Picsum ID（需要照片感），何时使用或回退到美观的 SVG（简单场景/最可靠后备）。
5.  **提升最终目标要求:** 从“有可见内容”提升到“有吸引人的、符合主题的可见内容”。

现在，这个关于图片占位符的说明更加灵活、强调美观，并提供了更可靠和多样化的实现路径，同时保留了SVG作为最终保障。请将这部分替换掉原提示词中对应的 Section 3 的“图片占位”部分。

## 4. 预期产出

请基于以上所有需求，生成一份结构清晰、代码规范的 **HTML完整代码**。代码应能直接在浏览器中打开，并展示所有设计的页面预览，符合布局和样式要求（**特别是新的晶白风格**）。确保包含了SVG图标定义、CSS样式（含晶白渐变、投影/发光、配色、字体、无边框表单、动效）、以及图表动画的实现。

</article></body></html>