showcase.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PetContext - ADHD 友好的游戏化桌面宠物任务管理器</title>
<style>
  :root {
    --primary: #6C5CE7;
    --primary-light: #A29BFE;
    --accent: #FD79A8;
    --accent2: #00CEC9;
    --bg: #0F0F1A;
    --bg2: #1A1A2E;
    --bg3: #25253A;
    --text: #E8E8F0;
    --text-muted: #9999B0;
    --border: #333355;
    --card-shadow: 0 8px 32px rgba(108, 92, 231, 0.15);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
  }
  a { color: var(--primary-light); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* Hero */
  .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    background: radial-gradient(ellipse at 50% 20%, rgba(108, 92, 231, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(253, 121, 168, 0.1) 0%, transparent 50%);
    position: relative;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236C5CE7' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
  }
  .hero-content { position: relative; z-index: 1; max-width: 800px; }
  .logo-emoji { font-size: 80px; margin-bottom: 20px; display: block; }
  .hero h1 {
    font-size: 3.2em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-light), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    letter-spacing: -1px;
  }
  .hero .subtitle {
    font-size: 1.3em;
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 600px;
  }
  .badge-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg2);
  }
  .badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
  }
  .badge .dot.rust { background: #DEA584; }
  .badge .dot.vue { background: #42B883; }
  .badge .dot.tauri { background: #FFC131; }
  .badge .dot.ai { background: var(--accent); }

  .cta-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
  }
  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4);
    text-decoration: none;
  }

  /* Section */
  .section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 24px;
  }
  .section-title {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
  }
  .section-desc {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Feature cards */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }
  .feature-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow);
  }
  .feature-icon {
    font-size: 2.2em;
    margin-bottom: 16px;
    display: block;
  }
  .feature-card h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: var(--primary-light);
  }
  .feature-card p {
    color: var(--text-muted);
    font-size: 0.95em;
  }

  /* Architecture */
  .arch-section { background: var(--bg2); }
  .arch-table {
    width: 100%;
    border-collapse: collapse;
    max-width: 700px;
    margin: 0 auto;
  }
  .arch-table th, .arch-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
  }
  .arch-table th {
    color: var(--primary-light);
    font-weight: 600;
    width: 140px;
    white-space: nowrap;
  }
  .arch-table td { color: var(--text-muted); }

  /* Workflow */
  .workflow-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
    margin: 0 auto;
  }
  .workflow-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg2);
    border-radius: 14px;
    padding: 24px;
    border: 1px solid var(--border);
  }
  .step-num {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1em;
  }
  .step-content h4 { margin-bottom: 6px; }
  .step-content p { color: var(--text-muted); font-size: 0.93em; }

  /* Highlights */
  .highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 40px;
  }
  .highlight-item {
    text-align: center;
    padding: 28px 20px;
    border-radius: 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
  }
  .highlight-num {
    font-size: 2.4em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent2), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .highlight-label {
    color: var(--text-muted);
    font-size: 0.9em;
    margin-top: 4px;
  }

  /* Footer */
  .footer {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 0.9em;
    border-top: 1px solid var(--border);
  }

  /* Responsive */
  @media (max-width: 640px) {
    .hero h1 { font-size: 2em; }
    .features-grid { grid-template-columns: 1fr; }
    .section { padding: 48px 16px; }
  }
</style>
</head>
<body>

<!-- Hero -->
<section class="hero">
  <div class="hero-content">
    <span class="logo-emoji">&#x1F431;</span>
    <h1>PetContext</h1>
    <p class="subtitle">
      ADHD 友好的游戏化桌面宠物任务管理器<br>
      AI 驱动 &middot; 游戏化激励 &middot; 屏幕智能感知
    </p>
    <div class="badge-row">
      <span class="badge"><span class="dot tauri"></span>Tauri 2.0</span>
      <span class="badge"><span class="dot rust"></span>Rust</span>
      <span class="badge"><span class="dot vue"></span>Vue 3</span>
      <span class="badge"><span class="dot ai"></span>LLM / VLM</span>
    </div>
    <a class="cta-btn" href="#features">探索功能</a>
  </div>
</section>

<!-- Features -->
<section class="section" id="features">
  <h2 class="section-title">核心功能</h2>
  <p class="section-desc">将任务管理变成一场有趣的游戏，让猫猫陪你一起专注</p>
  <div class="features-grid">

    <div class="feature-card">
      <span class="feature-icon">&#x1F43E;</span>
      <h3>Live2D 桌面宠物</h3>
      <p>透明窗口的 Live2D 猫猫始终陪伴在桌面上。支持拖拽移动，双击唤出对话窗口，气泡消息温馨提醒。窗口智能定位，无论桌宠在屏幕哪个角落，对话窗口都能正确弹出。</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon">&#x1F9E0;</span>
      <h3>AI 任务拆解</h3>
      <p>接入 OpenAI 兼容 API，基于 ADHD 执行功能辅助原则，将模糊的大任务拆解为 5-15 分钟可完成的原子级步骤。每步附带 XP 经验值、具体启动动作和趣味描述，降低行动门槛。</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon">&#x1F4F8;</span>
      <h3>VLM 屏幕智能分析</h3>
      <p>Rust 原生截屏实现，无需 Python。1-60 秒可配置间隔自动截屏，VLM 视觉模型分析屏幕内容，自动提取待办事项和截止日期，判断工作/学习/娱乐/休息状态。截图 3 张轮换存储。</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon">&#x23F0;</span>
      <h3>智能提醒系统</h3>
      <p>久坐提醒可配置间隔，8 条轮换健康提示。截止日期三级预警：提前 48 小时温馨提示、24 小时内警告、4 小时内紧急提醒，4 小时冷却避免重复打扰。</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon">&#x1F4CA;</span>
      <h3>日报与月报</h3>
      <p>自动统计鼠标点击和键盘敲击次数，结合 VLM 情绪分析、任务完成情况生成结构化报告。LLM 生成叙事性总结，支持导出为 PDF 和 Word 文档。月报包含每日明细表格。</p>
    </div>

    <div class="feature-card">
      <span class="feature-icon">&#x1F3AE;</span>
      <h3>游戏化激励</h3>
      <p>XP 经验值系统、能量等级评估、完成奖励建议、分心防护盾。将枯燥的待办事项变成令人期待的游戏任务，用多巴胺驱动行动力。</p>
    </div>

  </div>
</section>

<!-- Numbers -->
<section class="section">
  <h2 class="section-title">项目亮点</h2>
  <div class="highlights">
    <div class="highlight-item">
      <div class="highlight-num">6</div>
      <div class="highlight-label">Rust 后端模块</div>
    </div>
    <div class="highlight-item">
      <div class="highlight-num">20+</div>
      <div class="highlight-label">Tauri 命令</div>
    </div>
    <div class="highlight-item">
      <div class="highlight-num">3</div>
      <div class="highlight-label">任务视图维度</div>
    </div>
    <div class="highlight-item">
      <div class="highlight-num">2</div>
      <div class="highlight-label">报告导出格式</div>
    </div>
  </div>
</section>

<!-- Architecture -->
<section class="section arch-section">
  <h2 class="section-title">技术架构</h2>
  <p class="section-desc">现代化桌面应用技术栈，性能与体验兼备</p>
  <table class="arch-table">
    <tr><th>应用框架</th><td>Tauri 2.0 - 轻量安全的跨平台桌面框架</td></tr>
    <tr><th>前端</th><td>Vue 3 + TypeScript + Vite - 响应式 UI</td></tr>
    <tr><th>后端</th><td>Rust + Tokio - 高性能异步运行时</td></tr>
    <tr><th>桌宠渲染</th><td>PixiJS + pixi-live2d-display - 流畅 Live2D 动画</td></tr>
    <tr><th>AI 集成</th><td>OpenAI 兼容 API (LLM + VLM 多模态)</td></tr>
    <tr><th>截屏</th><td>xcap - Rust 原生跨平台截屏</td></tr>
    <tr><th>输入监听</th><td>rdev - 全局鼠标键盘事件捕获</td></tr>
    <tr><th>文档导出</th><td>printpdf (PDF) + docx-rs (Word)</td></tr>
    <tr><th>启动管理</th><td>tauri-plugin-autostart - 开机自启动</td></tr>
  </table>
</section>

<!-- Workflow -->
<section class="section">
  <h2 class="section-title">使用流程</h2>
  <p class="section-desc">简单四步，让猫猫成为你的专注伙伴</p>
  <div class="workflow-steps">
    <div class="workflow-step">
      <div class="step-num">1</div>
      <div class="step-content">
        <h4>安装并配置</h4>
        <p>运行安装程序，启动后在设置中配置你的 LLM/VLM API 地址和密钥。支持 OpenAI、DeepSeek、Qwen 等任何兼容接口。</p>
      </div>
    </div>
    <div class="workflow-step">
      <div class="step-num">2</div>
      <div class="step-content">
        <h4>输入任务</h4>
        <p>双击猫猫唤出对话窗口，输入你想完成的任务。AI 自动将其拆解为原子级小步骤，每步附带 XP 和具体行动指引。</p>
      </div>
    </div>
    <div class="workflow-step">
      <div class="step-num">3</div>
      <div class="step-content">
        <h4>专注执行</h4>
        <p>开启自动截屏分析，VLM 实时感知你的工作状态。猫猫在截止日期前提醒你，久坐时关心你的健康，让你专注又安心。</p>
      </div>
    </div>
    <div class="workflow-step">
      <div class="step-num">4</div>
      <div class="step-content">
        <h4>回顾与成长</h4>
        <p>查看日报和月报，了解自己的工作模式和效率趋势。导出 PDF/Word 存档，见证每一天的进步。</p>
      </div>
    </div>
  </div>
</section>

<!-- Feature Details -->
<section class="section">
  <h2 class="section-title">更多特性</h2>
  <div class="features-grid">
    <div class="feature-card">
      <span class="feature-icon">&#x1F5A5;&#xFE0F;</span>
      <h3>智能窗口定位</h3>
      <p>对话窗口根据桌宠位置和屏幕空间自动选择弹出方向。即使桌宠在屏幕右下角，窗口也不会超出屏幕边界。</p>
    </div>
    <div class="feature-card">
      <span class="feature-icon">&#x1F504;</span>
      <h3>开机自启动</h3>
      <p>在设置中一键开启/关闭开机自启动，每次开机猫猫自动出现在桌面等你。</p>
    </div>
    <div class="feature-card">
      <span class="feature-icon">&#x1F4C5;</span>
      <h3>多维任务视图</h3>
      <p>日/周/月三种视图切换查看任务，截止日期用颜色标签标识紧急程度（绿色安全、黄色警告、红色紧急）。</p>
    </div>
    <div class="feature-card">
      <span class="feature-icon">&#x1F50D;</span>
      <h3>洞察视图</h3>
      <p>VLM 分析历史记录，查看屏幕分析结果、活动摘要、情绪变化趋势和 AI 建议。</p>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="footer">
  <p>PetContext &copy; 2025 &middot; Built with Tauri 2.0, Rust, Vue 3</p>
  <p style="margin-top:8px;">ADHD 友好 &middot; 游戏化激励 &middot; AI 驱动</p>
</footer>

</body>
</html>