Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

FOCUS CARDS

A minimalist, fullscreen web application for managing tasks, chores, exercises, and any other items you want to focus on. Built with a clean black and white design that helps you stay focused on what matters.

🎯 What is FOCUS CARDS?

FOCUS CARDS is a productivity tool that helps you organize and tackle your tasks through a simple three-mode workflow. Whether you have chores to do, breathing exercises to practice, or any other items you want to focus on, this app helps you prioritize and complete them systematically.

✨ Features

  • Minimalist Design: Clean black and white interface for distraction-free focus
  • Three-Mode Workflow: Input → Review → Focus
  • Touch & Keyboard Support: Works seamlessly on mobile and desktop
  • Local Storage: Your cards persist between sessions
  • Auto-Fade UI: Interface elements fade out during inactivity for cleaner focus
  • Color Schemes: Multiple calming color themes that start randomly on each load
  • Responsive Design: Optimized for any screen size
  • Bulk Card Input: Paste lists of cards separated by semicolons (;) for quick input
  • Fullscreen Mode: Press F during startup to enter fullscreen mode in browsers
  • Dynamic Color Refresh: Refresh the page to get a new random color scheme

🚀 How to Use

Mode 1: Input Cards

  • Type anything you want to focus on: chores, exercises, todo items, etc.
  • Press Enter to save each card
  • Bulk Input: Paste multiple cards separated by semicolons (;) for quick input
  • Press Enter three times on empty input to finish and move to review mode
  • Press Backspace on empty input to clear all memory

Mode 2: Review & Prioritize

  • See all your cards one by one
  • Swipe Right (→) or press : Move card to your "focus pile" (cards you want to tackle now)
  • Swipe Left (←) or press : Store card for later (keeps it in memory for next session)
  • Continue until all cards are sorted

Mode 3: Focus & Complete

  • Work with only your preselected "focus pile" cards
  • Cards appear in random order - keep scrolling until you find what you want to do
  • Swipe Right (→) or press : Keep card in pile (for more practice or later)
  • Swipe Left (←) or press : Remove card from pile (mark as completed)
  • When counter reaches 0, you've completed all your focus items!
  • App automatically returns to Mode 1 with your stored cards still in memory

🎮 Controls

Mobile/Touch

  • Tap and swipe left or right on cards
  • Tap input field to type
  • Tap and hold to see swipe instructions

Desktop

  • Arrow keys (←/→) for swiping cards
  • Enter key for input confirmation
  • Backspace key on empty input to clear memory
  • Mouse click and drag for swiping
  • F key during startup to enter fullscreen mode

💡 Use Cases

  • Daily Chores: Input all your household tasks, prioritize the important ones, then tackle them systematically
  • Breathing Exercises: Create cards for different breathing techniques and practice them randomly
  • Study Topics: Input subjects you need to review, prioritize the most important ones
  • Work Tasks: Organize your work items and focus on the highest priority ones
  • Personal Goals: Break down larger goals into smaller, manageable cards

🛠️ Getting Started

  1. Download or clone this repository
  2. Open index.html in any modern web browser
  3. Start typing your first card
  4. Follow the on-screen instructions for each mode

No installation, no dependencies, no setup required!

📱 Browser Compatibility

  • ✅ Chrome/Chromium
  • ✅ Firefox
  • ✅ Safari
  • ✅ Edge
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🏗️ Technical Details

  • Pure Web Technologies: HTML, CSS, and JavaScript only
  • No Dependencies: Works offline without any external libraries
  • Local Storage: Your data stays private and local to your browser
  • Responsive Design: Automatically scales for any screen size
  • Modern Web Standards: Uses ES6 classes and modern CSS features

📁 File Structure

focus-cards/
├── index.html      # Main HTML file
├── styles.css      # CSS styling and animations
├── script.js       # JavaScript application logic
└── README.md       # This documentation

🤝 Contributing

This is a simple, focused tool. If you have ideas for improvements that maintain the minimalist philosophy, feel free to:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

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

🙏 Acknowledgments

Built with focus and simplicity in mind. Perfect for anyone who wants to stay organized without the complexity of modern productivity apps.


Stay focused. Get things done.

About

A minimalist, fullscreen web app for managing tasks and staying focused with a clean black and white design.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Contributors

Languages