.cursorrules

AI 的表现要求:
- 帮助我一步步生成网页代码。
- 每次生成代码后，解释这部分代码的作用。
- 使用简单易懂的语言，不要一次生成太多代码。

已完成的步骤：
1. 创建基本的 HTML 结构
   - 添加头部信息
   - 设置中文语言
   - 添加标题和段落

2. 添加 CSS 样式
   - 设置浅灰色背景
   - 设置红色标题

3. 添加图片功能
   - 插入本地图片 "绝世武功目录.png"
   - 设置图片居中显示
   - 添加图片自适应样式

4. 添加跳转按钮
   - 创建样式化的链接按钮
   - 设置跳转目标为 baidu.com
   - 添加鼠标悬停效果
   - 按钮居中显示

5. 优化布局
   - 调整图片位置到标题下方
   - 更新链接文字和目标

6. 美化页面样式
   - 设置段落文字样式
     * 蓝色文字
     * 微软雅黑字体
     * 16px 字体大小
   - 添加页面边框
     * 1像素黑色边框
     * 添加内边距
     * 限制内容宽度并居中

7. 添加交互功能
   - 添加弹窗按钮
     * 使用 JavaScript alert() 函数
     * 添加按钮样式
     * 设置鼠标悬停效果
   - 实现点击弹出对话框功能

8. 添加表单功能
   - 添加输入框
     * 设置提示文本
     * 添加输入框样式
   - 添加提交按钮
   - 添加欢迎消息显示
   - 添加输入验证
     * 检查空输入
     * 显示错误提示

9. 优化界面和交互
   - 优化按钮样式
     * 添加阴影效果
     * 添加悬停动画
     * 统一按钮样式
   - 添加时间问候功能
     * 根据当前时间显示问候语
     * 自动加载问候信息
     * 添加问候语样式

10. 增强交互效果
    - 添加随机背景色功能
      * 添加新按钮
      * 实现随机颜色生成
      * 添加按钮样式
    - 优化时间问候功能
      * 细分时间段
      * 添加晚上问候语
      * 优化判断逻辑

11. 增强背景色功能
    - 添加长按恢复功能
      * 实现长按检测
      * 添加定时器功能
      * 支持触摸设备
    - 优化视觉效果
      * 添加颜色过渡动画
      * 保存默认颜色值
      * 优化用户体验

注意事项：
- 确保图片文件存在于正确路径
- CSS 样式保持简洁易读
- 代码结构清晰，便于维护
- 注意字体后备方案
- JavaScript 代码简洁可读