# login

**Repository Path**: omnibook/login

## Basic Information

- **Project Name**: login
- **Description**: 一个带有创意动画角色的交互式登录页面，为用户带来愉悦的登录体验。
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-16
- **Last Updated**: 2026-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Login Page - Animated Interactive Experience

<div align="center">

![License](https://img.shields.io/badge/license-ISC-blue)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)

一个带有创意动画角色的交互式登录页面，为用户带来愉悦的登录体验。

[功能特性](#功能特性) • [快速开始](#快速开始) • [预览](#预览) • [技术栈](#技术栈) • [项目结构](#项目结构)

</div>

---

## 目录

- [概述](#概述)
- [功能特性](#功能特性)
- [快速开始](#快速开始)
- [动画交互说明](#动画交互说明)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [自定义配置](#自定义配置)
- [测试](#测试)
- [浏览器兼容性](#浏览器兼容性)
- [贡献指南](#贡献指南)
- [许可证](#许可证)

---

## 概述

这是一个精心设计的登录页面，具有独特的交互动画系统。页面左侧展示四个可爱的角色（紫色、黑色、橙色、黄色半圆形生物），它们会根据用户的操作做出各种有趣的反应：

- 眼睛跟随鼠标移动
- 自动随机眨眼
- 输入时角色互相注视
- 显示密码时角色害羞遮眼
- 紫色角色会偷偷瞄密码
- 登录失败时角色摇头表示遗憾

这种微交互设计让枯燥的登录过程变得生动有趣，提升了用户体验。

---

## 功能特性

### 核心功能
- **登录表单验证** - Email 和密码格式验证
- **密码可见性切换** - 点击眼睛图标显示/隐藏密码
- **记住登录状态** - "记住30天"选项
- **第三方登录** - Google 登录按钮（UI已实现，后端待对接）
- **表单错误提示** - 友好的错误消息显示
- **加载状态** - 登录按钮加载动画

### 动画交互
| 交互 | 角色反应 |
|------|---------|
| 鼠标移动 | 所有角色眼睛跟随鼠标 |
| 自动 | 角色随机眨眼 |
| 输入邮箱 | 紫色和黑色角色互相注视 |
| 输入密码 | 角色互相注视，紫色角色准备偷看 |
| 显示密码 | 所有角色害羞移开视线 |
| 密码显示中 | 紫色角色偶尔偷看密码 |
| 登录失败 | 所有角色摇头表示遗憾 |

### UI/UX 特性
- **响应式设计** - 适配桌面和移动设备
- **现代化界面** - 紫色渐变背景，简洁表单设计
- **装饰性元素** - 网格背景、光晕效果
- **无障碍支持** - 语义化 HTML，键盘导航友好
- **表单自动完成** - 支持浏览器自动填充

---

## 快速开始

### 前置要求

- 一个现代浏览器（Chrome 90+、Firefox 88+、Safari 14+、Edge 90+）
- 本地服务器（可选，用于避免 CORS 问题）

### 安装与运行

1. **克隆项目**
```bash
git clone https://gitee.com/omnibook/login.git
cd login
```

2. **安装依赖**（用于测试）
```bash
npm install
```

3. **启动本地服务器**
```bash
# 使用 Python
python -m http.server 8000

# 或使用 Node.js http-server
npx http-server

# 或使用 PHP
php -S localhost:8000
```

4. **打开浏览器**
访问 `http://localhost:8000`

### 直接打开

由于使用纯前端技术，你也可以直接在浏览器中打开 `index.html` 文件。

---

## 动画交互说明

这个项目的核心是角色动画系统。以下是一些技术细节：

### 角色系统

四个角色分别是：
- **紫色角色** - 最高的角色，位于后层，有眼白
- **黑色角色** - 中等高度，位于中层，有眼白
- **橙色角色** - 半圆形，位于前左，纯瞳孔设计
- **黄色角色** - 半圆形，位于前右，纯瞳孔设计，有嘴巴

### 交互状态机

```javascript
state = {
    showPassword: false,      // 密码是否可见
    password: '',             // 当前密码内容
    mouseX: 0, mouseY: 0,     // 鼠标位置
    isTyping: false,          // 用户是否正在输入
    isLookingAtEachOther: false,  // 角色是否互相注视
    isPurplePeeking: false    // 紫色角色是否正在偷看
}
```

### 测试账号

```
Email: test@test.com
Password: 123456
```

---

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| HTML5 | - | 页面结构 |
| CSS3 | - | 样式和动画 |
| JavaScript (ES6+) | - | 交互逻辑 |
| Playwright | ^1.58.2 | 端到端测试 |

### 主要技术点

- **Vanilla JavaScript** - 无框架依赖，轻量高效
- **CSS Animations** - 流畅的角色动画
- **RequestAnimationFrame** - 优化的鼠标跟踪
- **Event Delegation** - 高效的事件处理
- **State Management** - 集中式状态管理

---

## 项目结构

```
login/
├── index.html          # 主 HTML 文件
├── style.css           # 样式文件
├── script.js           # 交互逻辑
├── package.json        # 项目配置
├── package-lock.json   # 依赖锁定文件
├── README.md           # 项目文档
├── .playwright-mcp/    # Playwright 配置（自动生成）
└── node_modules/       # 依赖包

```

---

## 自定义配置

### 修改品牌信息

编辑 `index.html` 中的以下内容：

```html
<!-- Logo 和品牌名 -->
<div class="logo-icon">✨</div>
<span>YourBrand</span>
```

### 修改测试账号

编辑 `script.js` 第 453 行：

```javascript
if (email === 'your-email@example.com' && password === 'your-password') {
    alert('Login successful!');
}
```

### 调整角色位置

编辑 `script.js` 中的 `updateCharacters()` 函数，修改以下属性：

- `height` - 角色高度
- `transform` - 变换（倾斜、位移）
- `left/top` - 眼睛容器位置

### 修改颜色主题

编辑 `style.css` 中的 CSS 变量或直接修改颜色值。

---

## 测试

本项目使用 Playwright 进行端到端测试。

### 运行测试

```bash
# 安装 Playwright 浏览器
npx playwright install

# 运行测试
npm test
```

### 编写测试用例

测试文件应放置在 `tests/` 目录下（需创建）。

---

## 浏览器兼容性

| 浏览器 | 最低版本 |
|--------|---------|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |
| Opera | 76+ |

### 已知问题

- IE11 及以下版本不支持（使用了 ES6+ 和 CSS Grid）
- 某些移动端浏览器可能存在动画性能问题

---

## 贡献指南

欢迎贡献！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

### 代码规范

- 使用 2 空格缩进
- 遵循 ESLint 规范
- 添加必要的注释
- 测试新功能

---

## 许可证

本项目采用 ISC 许可证 - 详见 [LICENSE](LICENSE) 文件

---

## 致谢

- 设计灵感来源于现代登录页面设计趋势
- 角色动画设计参考了 Material Design 动画原则
- 图标使用内联 SVG，无外部依赖

---

## 联系方式

如有问题或建议，请通过以下方式联系：

- 提交 [Issue](../../issues)
- 发送邮件：nucdev@outlook.com 

---

<div align="center">

**Made with ❤️ and ✨**

</div>