Take a Break - 休息一下

💡 Inspiration

In our modern work environment, especially for those of us spending long hours in front of computers, the importance of taking regular breaks is often overlooked. This project was born from a personal experience of dealing with the negative effects of prolonged sitting and continuous screen time.

🎯 Purpose

"Take a Break" is designed to help desk workers maintain better work-life balance and physical health by:

• Reminding users to take regular breaks
• Encouraging simple stretching exercises
• Tracking daily sitting time and break patterns
• Providing visual feedback through an intuitive 3D interface

🛠 Technical Features

• 3D Visual Timer: An engaging 3D card that rotates to show break status
• Customizable Settings: Flexible break intervals and duration settings
• Statistics Dashboard: Track your break patterns and sitting time
• Desktop Notifications: Gentle reminders when it's time to take a break
• Responsive Design: Works seamlessly across different devices

🚀 Getting Started

1. Clone the repository
2. Install dependencies:

pnpm install

3. Start the development server:

For MacOS:

npm run dev:mac

For Windows:

npm run dev:win

For Linux:

npm run dev:linux

🔧 Tech Stack

• React + TypeScript
• Vite
• TailwindCSS
• Three.js for 3D animations
• Local Storage for data persistence

查看中文版本 (Chinese Version) 👈

💡 项目灵感

在现代工作环境中，特别是对于我们这些长期在电脑前工作的人来说，经常忽视定期休息的重要性。这个项目源于个人经历，因为长期久坐和持续盯着屏幕工作所带来的负面影响。

🎯 项目目的

"休息一下"旨在帮助办公室工作者通过以下方式保持更好的工作生活平衡和身体健康：

• 提醒用户定期休息
• 鼓励简单的伸展运动
• 追踪每日久坐时间和休息模式
• 通过直观的3D界面提供视觉反馈

🛠 技术特点

• 3D可视化计时器：富有趣味性的3D卡片，通过旋转展示休息状态
• 自定义设置：灵活的休息间隔和时长设置
• 数据统计面板：追踪您的休息模式和久坐时间
• 桌面通知：当到休息时间时发送温和提醒
• 响应式设计：在不同设备上完美运行

🚀 快速开始

1. 克隆仓库
2. 安装依赖：

pnpm install

3. 启动开发服务器：

MacOS系统：

npm run dev:mac

Windows系统：

npm run dev:win

Linux系统：

npm run dev:linux

🔧 技术栈

• React + TypeScript
• Vite
• TailwindCSS
• Three.js 实现3D动画
• Local Storage 实现数据持久化

📸 Screenshots

[Screenshots will be added here]

📄 License

MIT License