# bookbilling-prototype

**Repository Path**: fxzer/bookbilling-prototype

## Basic Information

- **Project Name**: bookbilling-prototype
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-26
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 记账应用原型

这是一个移动端记账应用的前端原型，使用HTML、CSS和JavaScript开发，结合Tailwind CSS框架实现UI界面。

## 主要功能

- **首页**：显示账户余额、月度收支概览、预算进度、支出趋势和最近交易记录
- **账单页**：按月份查看账单、日历视图展示每日收支情况
- **统计页**：支出分类分析、收支趋势图表
- **快速记账**：便捷添加收入、支出和转账记录
- **分类管理**：自定义收支分类
- **设置页**：账单导入导出、预算设置、主题切换、数据备份等选项

## 技术栈

- HTML5
- CSS3
- JavaScript
- Tailwind CSS
- Chart.js (用于数据可视化)

## 页面结构

- `index.html` - 入口页面
- `/pages/home.html` - 首页
- `/pages/bills.html` - 账单页
- `/pages/statistics.html` - 统计分析页
- `/pages/quick-entry.html` - 快速记账页
- `/pages/add-category.html` - 分类管理页
- `/pages/settings.html` - 设置页
- `/components/statusbar.html` - 状态栏组件
- `/components/tabbar.html` - 底部导航栏组件
- `/css/main.css` - 主样式文件

## 使用方法

1. 直接在移动设备浏览器中打开 `index.html` 文件
2. 或在桌面浏览器中使用开发者工具的移动设备模拟模式查看

## 设计特点

- 遵循iOS设计规范
- 响应式设计，适配不同尺寸的移动设备
- 简洁直观的用户界面
- 柔和的色彩方案和过渡动画

## 注意事项

- 本项目仅为前端原型，不包含后端功能
- 数据为模拟数据，不会实际保存
- 最佳浏览体验请使用iOS设备或Safari浏览器