112 lines
2.9 KiB
Markdown
112 lines
2.9 KiB
Markdown
# 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界面
|
||
- 实际工具功能需要整合您已实现的后端代码
|
||
- 视频解析功能需要替换为实际的解析接口
|
||
- 图片转换功能需要实现实际的图片处理逻辑
|
||
|
||
## 未来扩展计划
|
||
|
||
- 添加更多实用工具
|
||
- 用户账户系统
|
||
- 收藏与历史记录
|
||
- 工具使用统计
|
||
- 更多主题配色选项
|
||
|
||
---
|
||
|
||
## 预览图
|
||
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
© 2025 IT工具合集 | 界面设计 |