一个现代化的便签墙网页应用，采用纯前端技术（HTML、CSS、JavaScript）和PHP后端，无需数据库。

演示地址：https://rom.shanriver.top

✨ 核心功能

• 随机生成温馨文字便签（80条预设内容）
• 便签可自由拖动重新排列
• 点击便签产生涟漪特效
• 可调节的生成速度（100-2000ms）
• 明暗模式切换

🎨 设计特点

• macOS风格美学设计
• 毛玻璃（Glassmorphism）UI效果
• 渐变色彩和微妙阴影
• 流畅的动画和过渡效果
• 完整的响应式设计
• 代码诗意元素融入

💾 数据存储

• 前端：使用 localStorage 缓存便签
• 后端：PHP 文件系统存储（可选）
• 无需数据库，开箱即用

sticky_notes_pure/
├── index.html          # 主HTML文件
├── styles.css          # 样式表
├── script.js           # JavaScript主文件
├── api.php             # PHP后端API（可选）
├── README.md           # 本文件
└── data/               # 数据存储目录（自动创建）
    └── stickies.json   # 便签数据文件

1. 将所有文件放在Web服务器的目录中
2. 在浏览器中打开 index.html
3. 便签数据自动保存到浏览器的 localStorage

1. 确保服务器支持PHP 7.0+
2. 将所有文件放在Web服务器的目录中
3. 确保 data/ 目录可写入
4. 在浏览器中打开 index.html
5. 便签数据将保存到服务器的 data/stickies.json

1. 点击"开始生成"按钮
2. 便签将以设定的速度随机生成
3. 每个便签包含一条温馨文字
4. 便签随机分布在屏幕上，具有不同的颜色和旋转角度

1. 将鼠标悬停在便签上，会显示"拖动"提示
2. 点击并按住便签
3. 拖动到所需位置
4. 松开鼠标完成拖动

1. 点击任何便签
2. 产生优雅的涟漪扩散效果
3. 为交互增添视觉反馈

1. 在生成中时，使用底部面板的"生成速度"滑块
2. 范围从100ms到2000ms
3. 实时调整生成速度

1. 点击右上角的月亮/太阳图标
2. 在亮色和暗色模式之间切换
3. 主题偏好自动保存

1. 点击"暂停"按钮停止生成
2. 点击"清空"按钮清除所有便签
3. 点击"继续生成"继续生成便签

• 前端：HTML5、CSS3、Vanilla JavaScript
• 后端：PHP 7.0+（可选）
• 存储：localStorage（前端）或 JSON 文件（后端）
• 设计：毛玻璃、渐变、动画、响应式

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• 移动浏览器（iOS Safari、Chrome Mobile）

编辑 script.js 中的 WARM_MESSAGES 数组：

const WARM_MESSAGES = [
    "您的文字1",
    "您的文字2",
    // ...
];

编辑 script.js 中的 STICKY_COLORS 数组：

const STICKY_COLORS = [
    "#fef3c7",  // 浅黄色
    "#fce7f3",  // 浅粉色
    // ...
];

编辑 index.html 中的 speed slider：

<input type="range" id="speedSlider" min="100" max="2000" step="100" value="500">

加载保存的便签数据

响应：

{
    "success": true,
    "data": [
        {
            "id": 0,
            "message": "保持好心情",
            "left": 100,
            "top": 200,
            "rotation": 2.5,
            "bgColor": "#fef3c7"
        }
    ]
}

保存便签数据

请求体：

[
    {
        "id": 0,
        "message": "保持好心情",
        "left": 100,
        "top": 200,
        "rotation": 2.5,
        "bgColor": "#fef3c7"
    }
]

获取生成速度配置

响应：

{
    "speed": 500,
    "min": 100,
    "max": 2000
}

清空所有便签数据

响应：

{
    "success": true,
    "message": "Stickies cleared successfully"
}

1. localStorage 限制：浏览器 localStorage 通常限制为 5-10MB，足以存储数千个便签
2. 跨域问题：如果前后端在不同域名，需要配置 CORS
3. PHP 文件权限：确保 data/ 目录对Web服务器可写
4. 隐私：便签数据存储在本地，不会上传到第三方服务器

本项目由山河授权制作。

• 初始版本发布
• 支持纯前端和PHP后端两种模式
• 完整的拖动、点击特效和主题切换功能
• 响应式设计支持所有设备

如有问题或建议，欢迎反馈。

---

用代码诗意 · 记录生活片段