# IT工具合集 - 黑白简约风格网站

这是一个现代化设计的工具合集网站，采用黑白简约风格，提供多种实用工具。目前包含VIP视频解析和图片格式转换功能，界面设计精美，注重用户体验。

## 特点

- **黑白简约风格**：采用现代化设计，简洁大气
- **响应式布局**：适配各种设备尺寸，从手机到桌面
- **暗黑模式支持**：一键切换浅色/深色主题
- **交互动效**：优雅的过渡动画和交互效果
- **完全前端实现**：便于与后端工具集成

## 已实现工具

1. **VIP视频解析**
   - 支持解析各大视频网站VIP视频
   - 提供常用视频网站快速入口
   - 简洁友好的视频播放界面

2. **图片格式转换**
   - 支持JPG、PNG、WEBP等多种格式转换
   - 可调整图片质量和尺寸
   - 拖放上传支持
   - 图片预览与结果展示

## 目录结构

```
├── index.html        # 主页
├── video.html        # VIP视频解析工具页面
├── image.html        # 图片格式转换工具页面
├── styles.css        # 自定义样式
└── script.js         # 交互脚本
```

## 技术栈

- **HTML5/CSS3**：现代网页标准
- **Tailwind CSS**：实用工具类CSS框架，用于快速构建界面
- **JavaScript**：原生JS实现交互功能
- **Font Awesome**：图标库

## 使用方法

1. 克隆或下载本仓库
2. 直接打开`index.html`即可在浏览器中查看
3. 对于实际工具功能，需要整合您已实现的工具后端代码

## 主要功能特性

### 全局功能

- 响应式布局设计
- 浅色/深色主题切换
- 侧边栏导航（在移动设备上为抽屉式导航）
- 回到顶部按钮
- 工具卡片交互效果

### 视频解析工具

- 网址输入与解析
- 视频播放区域
- 常用视频网站快速入口
- 使用说明指引

### 图片转换工具

- 拖放上传支持
- 图片预览功能
- 多种输出格式选择
- 质量与尺寸调整
- 转换结果预览与下载

## 自定义与扩展

### 添加新工具

1. 在`index.html`中的工具卡片区域添加新工具卡片
2. 创建相应的工具页面（参考已有工具页面结构）
3. 在`script.js`中添加相应的初始化功能函数

### 样式定制

- 主要样式在`styles.css`中定义
- 可通过修改CSS变量快速更改主题色调

## 注意事项

- 本项目仅包含前端UI界面
- 实际工具功能需要整合您已实现的后端代码
- 视频解析功能需要替换为实际的解析接口
- 图片转换功能需要实现实际的图片处理逻辑

## 未来扩展计划

- 添加更多实用工具
- 用户账户系统
- 收藏与历史记录
- 工具使用统计
- 更多主题配色选项

---

## 预览图

![主页预览](preview/home.png)
![视频解析工具](preview/video-tool.png)
![图片转换工具](preview/image-tool.png)

---

© 2025 IT工具合集 | 界面设计