TimeFlow 🌿 - Beautiful Time Tracking App

A lightweight, beautiful time tracking application with stunning nature and space themes. Perfect for tracking your work hours and managing multiple projects with elegant visual design.

✨ Features

🎯 Core Functionality

• Precise Time Tracking: Start, pause, and stop timers with millisecond precision
• Project Management: Create and manage multiple projects with custom colors
• Daily Progress: Track total time spent per day with streak counter
• Data Persistence: All data saved locally in your browser
• Session History: Complete history of all your work sessions

🎨 Beautiful Themes

• Nature Theme: Serene gradients with organic colors and leaf motifs
• Space Theme: Dark cosmic backgrounds with purple accents and rocket icons
• Smooth Animations: Floating backgrounds, hover effects, and transitions
• Glassmorphism Design: Modern blur effects and translucent cards

⚡ User Experience

• Keyboard Shortcuts:
  • Ctrl/Cmd + Space: Start/Pause timer
  • Ctrl/Cmd + Enter: Stop timer
• Responsive Design: Works perfectly on desktop, tablet, and mobile
• Visual Feedback: Animated status indicators and timer pulse effects
• Intuitive Interface: Clean, modern design that's easy to navigate

🚀 Getting Started

Quick Start

1. Simply open index.html in your web browser
2. No installation or server setup required!
3. The app works completely offline once loaded

First Time Setup

1. Click "Add Project" to create your first custom project
2. Choose your preferred theme (Nature or Space) using the theme switcher
3. Select a project from the dropdown and click "Start" to begin tracking

📱 How to Use

Starting Your First Session

1. Select a Project: Choose from the dropdown (starts with "General Work")
2. Start Timer: Click the green "Start" button or use Ctrl/Cmd + Space
3. Work: The timer runs in the background with a beautiful pulsing animation
4. Pause/Resume: Use the orange "Pause" button when you need a break
5. Stop: Click the red "Stop" button when you're done to save the session

Managing Projects

1. Add New Project: Click the "Add Project" button
2. Choose Name: Enter a descriptive project name
3. Pick Color: Select a color to identify your project visually
4. Track Progress: View total time and session count for each project

Viewing Your Progress

• Today's Total: See how much time you've worked today
• Project Count: Number of projects you're tracking
• Streak Counter: Consecutive days you've worked
• Project Cards: Individual project summaries with time spent

🎨 Themes

Nature Theme 🌿

• Peaceful purple-blue gradients
• Floating organic light effects
• Leaf icon and natural colors
• Perfect for calm, focused work

Space Theme 🚀

• Deep cosmic dark backgrounds
• Purple and blue space nebula effects
• Rocket icon and stellar aesthetics
• Great for late-night coding sessions

💾 Data Management

Local Storage

• All data is stored locally in your browser
• No account required, completely private
• Data persists between browser sessions
• Works offline after initial load

Data Export/Import

• Data is stored in localStorage with keys:
  • timetracker_projects: Project data and sessions
  • timetracker_daily: Daily time totals
  • timetracker_streak: Work streak counter
  • timetracker_theme: Theme preference

Clearing Data

• Use the "Clear Data" button to reset everything
• Confirmation dialog prevents accidental deletion
• Cannot be undone, so use carefully!

🎯 Tips for Better Time Tracking

1. Create Specific Projects: Instead of "Work", use "Website Redesign" or "API Development"
2. Use Descriptive Names: Make project names clear and meaningful
3. Regular Breaks: Use the pause feature for short breaks
4. Daily Review: Check your progress at the end of each day
5. Consistent Tracking: Build a habit of starting the timer when you begin work

🛠️ Technical Details

Technologies Used

• HTML5: Semantic structure with modern elements
• CSS3: Advanced features like backdrop-filter, gradients, and animations
• Vanilla JavaScript: No frameworks, lightweight and fast
• Local Storage API: For data persistence
• Font Awesome: Beautiful icons
• Google Fonts: Inter typeface for excellent readability

Browser Compatibility

• Chrome/Edge: Full support (recommended)
• Firefox: Full support
• Safari: Full support
• Mobile browsers: Responsive design works on all modern mobile browsers

Performance

• Lightweight: Total size under 100KB
• Fast Loading: No external dependencies except fonts and icons
• Smooth Animations: 60fps animations with GPU acceleration
• Memory Efficient: Minimal JavaScript footprint

🔧 Customization

Adding Your Own Themes

To add a custom theme, edit the CSS file:

1. Create new theme class: .my-theme
2. Define background gradients and colors
3. Add theme-specific styling for cards and buttons
4. Update the theme switcher JavaScript

Modifying Colors

• Primary colors are defined as CSS custom properties
• Project colors can be any valid CSS color
• Theme colors are in the respective theme sections

📊 Data Structure

Project Object

{
  name: "Project Name",
  color: "#hexcolor",
  totalTime: milliseconds,
  sessions: [
    {
      project: "project-id",
      duration: milliseconds,
      date: "date string",
      timestamp: epoch_time
    }
  ]
}

🐛 Troubleshooting

Timer Not Starting

• Check if another timer is already running
• Refresh the page and try again
• Clear browser cache if issues persist

Data Not Saving

• Ensure localStorage is enabled in your browser
• Check if you're in private/incognito mode
• Verify browser storage quota isn't exceeded

Theme Not Switching

• Hard refresh the page (Ctrl+F5)
• Check browser console for JavaScript errors
• Ensure all CSS files are loaded properly

🤝 Contributing

This is a personal project, but if you'd like to suggest improvements:

1. Fork the repository
2. Make your changes
3. Test thoroughly
4. Submit a pull request with description

📄 License

This project is open source and available under the MIT License.

---

Enjoy beautiful, productive time tracking with TimeFlow! 🌿✨

Built with ❤️ for productive, mindful work sessions