CountO

A Linux-themed countdown timer web application with terminal aesthetics

CountO is a sleek, minimalist countdown timer website featuring a distinctive Linux terminal-inspired UI. Built with vanilla HTML, CSS, and JavaScript, it allows users to create and manage multiple countdown timers with custom titles—all stored locally in the browser. No login, no backend, no hassle!

🔗 Live Demo: https://counto.w3spaces.com/

✨ Features

Core Functionality

• Create Multiple Countdowns: Add unlimited countdown timers with custom event titles
• Real-time Updates: Live countdown display showing days, hours, minutes, and seconds
• Local Storage: All countdowns are automatically saved to your browser's local storage
• Auto-cleanup: Expired countdowns are automatically removed after 3 seconds
• Persistent Data: Your countdowns remain even after closing the browser
• No Registration Required: Complete privacy—everything runs client-side

Linux Terminal Theme

• Dark Terminal Aesthetic: Classic black background (#0a0a0a) with matrix-style grid pattern
• Terminal Green Color Scheme: Authentic terminal green (#00ff00) with glowing text effects
• Monospace Fonts: Ubuntu Mono, Courier New, and Consolas for that genuine terminal feel
• Window Manager Style Cards: Countdown cards styled like Linux desktop environment windows
• Terminal Prompt Header: Features root@counto:~$ prompt prefix
• CRT Monitor Effect: Glowing borders and text shadows mimicking old-school terminals
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

🚀 Installation & Usage

Quick Start (Online)

No installation needed! Simply visit:

https://counto.w3spaces.com/

Local Development

1. Clone the repository:

   git clone https://github.com/yourusername/CountO.git
   cd CountO

2. Open in browser:

   # Simply open the index.html file in your browser
   # On Linux/Mac:
   open source/index.html
   
   # On Windows:
   start source/index.html
   
   # Or use a local server (recommended):
   python -m http.server 8000
   # Then visit: http://localhost:8000/source/

📖 How to Use

Adding a Countdown

1. Click the "+ NEW" button (bottom-right corner with green glow)
2. A terminal-style window will appear
3. Enter your event title in the text field
4. Select the date and time for your countdown
5. Click "ADD" to create the countdown
6. Click "CANCEL" to close without adding

Managing Countdowns

• View Countdowns: All active countdowns appear as window-style cards in the main area
• Delete Countdown: Click the red × button on any countdown card's title bar
• Automatic Removal: Countdowns that reach zero display "Event Ended!" in red and auto-delete after 3 seconds

Data Persistence

• All countdowns are automatically saved to browser's localStorage
• Countdowns persist across browser sessions
• Clearing browser data will remove saved countdowns

🛠️ Technologies Used

• HTML5 - Semantic markup structure
• CSS3 - Custom styling with advanced features:
  • CSS Grid for responsive layout
  • CSS Custom Properties for theming
  • Gradients and box shadows for depth
  • Pseudo-elements for decorative effects
  • Media queries for responsive design
• Vanilla JavaScript (ES6+) - No frameworks or libraries:
  • DOM manipulation
  • LocalStorage API
  • Event handling
  • Timer intervals
  • Date/Time calculations

📁 Project Structure

CountO/
├── source/
│   ├── index.html        # Main HTML file
│   ├── style.css         # Linux-themed styling
│   ├── countdown.js      # Core functionality
│   └── calender.svg      # Favicon
└── README.md             # Documentation

🎨 Design Features

Color Palette

• Background: #0a0a0a (Near black)
• Primary Green: #00ff00 (Terminal green)
• Dark Green: #00aa00 (Accents)
• Card Background: #1a1a1a (Dark gray)
• Error/End Red: #ff0000 (Alert red)
• Button Gradients: #00aa00 to #008800

Typography

• Primary Font: Ubuntu Mono (Linux system font)
• Fallbacks: Courier New, Consolas, Monaco
• Style: Monospace for authentic terminal aesthetic

Visual Effects

• Glowing text shadows on countdown numbers
• Pulsing glow effects on hover
• Window-style title bars with gradients
• Grid pattern background overlay
• Smooth transitions and animations

🌐 Browser Compatibility

• Chrome/Edge (Chromium) - ✅ Fully Supported
• Firefox - ✅ Fully Supported
• Safari - ✅ Fully Supported
• Opera - ✅ Fully Supported
• Mobile Browsers - ✅ Responsive Design

Minimum Requirements:

• Modern browser with ES6 support
• JavaScript enabled
• LocalStorage enabled

🔧 Customization

Changing the Color Scheme

Edit the CSS variables in style.css:

/* Change terminal green to another color */
color: #00ff00; /* Change to your preferred color */
border: 2px solid #00ff00; /* Update borders */

Modifying the Terminal Prompt

Edit the h1::before pseudo-element in style.css:

h1::before {
  content: "root@counto:~$ "; /* Customize your prompt */
}

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests
• Improve documentation

📄 License

This project is open source and available under the GNU GENERAL PUBLIC License.

👤 Author

Created with ❤️ for Linux enthusiasts and terminal lovers
 _~ Sathika Shervin Hettiarachchi_

🙏 Acknowledgments

• Inspired by classic Linux terminal interfaces
• Ubuntu Mono font by Canonical Ltd.
• Built with pure vanilla JavaScript—no dependencies!