蓝心便签所 · vivo 端侧 AI 情感便签打印机

每天一封小 v 从你的手机里为你写的信。

一个单文件 HTML Demo，模拟 vivo 端侧 AI 悄悄读懂你的手机数据（音乐、阅读、视频、聊天、相册…），然后主动打印一张温柔的便签给你。

✨ 特点

• 单文件 · index.html 双击即开，无需构建
• 三主题 · 简约文艺 / 赛博朋克 / 治愈线条小狗
• 12 种便签场景 × 模板槽位随机 = 每次内容都不一样
• 打字机 + 音效 + 撕纸动画 · 沉浸感拉满
• 保存图片 / 分享 · 一键生成 PNG 发朋友圈
• 零后端 · 零构建 · 零依赖上传 · 纯前端

---

🚀 部署到 Vercel（3 分钟上线）

方式 A：网页拖拽（最快 · 30 秒）

1. 打开 https://vercel.com/new
2. 用 GitHub 账号登录
3. 点击 "Deploy without Git" 或直接把整个 demo_Creative 文件夹拖进去
4. 等待 10 秒 → 拿到 https://xxx.vercel.app 链接

方式 B：CLI 部署（推荐 · 支持一键更新）

# 一次性安装
npm i -g vercel

# 在项目目录里
cd d:\Bluecode\demo_Creative
vercel

# 首次会问几个问题：
#   ? Set up and deploy? → Y
#   ? Which scope? → 选你的账号
#   ? Link to existing project? → N
#   ? What's your project's name? → bluechat-notes
#   ? In which directory is your code located? → ./
# 等 10 秒 → 输出 Preview URL

# 之后想更新就一条命令：
vercel --prod

方式 C：GitHub 关联（自动部署）

1. 把这个文件夹推到 GitHub 仓库
2. Vercel 网站选择 Import Git Repository
3. 一路默认，Vercel 会自动检测为静态站点
4. 之后每次 git push 都会自动重新部署

---

📁 文件结构

demo_Creative/
├── index.html      # 全部代码（HTML + CSS + JS）· ~80KB
├── vercel.json     # Vercel 部署配置
└── README.md       # 本文件

---

🌐 外部依赖（都已换国内 CDN · 国内可正常访问）

• html2canvas@1.4.1 · 来自 staticfile.net（阿里免费 CDN）· 用于导出便签图片
• 系统字体 fallback · 已去除 Google Fonts

---

🎯 玩法速览

操作	效果
首次打开	自动出一张"今日份"便签
点顶部胶囊	6 种预设场景 · 一键打印
输入框自由输入	关键词智能匹配 12 种场景
🎲 骰子按钮	盲盒 · 随机来一张
点托盘小票	弹窗查看 + 保存图片 + 分享
顶部主题切换	简约 / 赛博 / 治愈 三主题
顶部小喇叭	静音开关

---

🎨 12 种便签场景

情绪速写 · 每日金句 · 深夜档 · 循环最多的歌 · 一年前的今天 · 追剧笔记 · 给未来的你 · 陌生人的一句话 · 你们的季节 · 心动瞬间 · 今日份 · 一次犹豫

---

made with ♡ by vivo