Countdown Web App

A beautiful, slim, no-tracking countdown timer web application with glassmorphism design and dynamic backgrounds.

🔗 Live Demo: https://comigor.github.io/countdown/

Features

• ✨ Beautiful Glassmorphism Design - Modern, elegant UI with backdrop blur effects
• 🎨 Dynamic Backgrounds - Pexels API integration with keyword search and 5-minute rotation
• 📱 Fully Responsive - Works seamlessly on mobile, tablet, and desktop
• 🔒 Privacy-First - Zero tracking, no cookies, no localStorage, no analytics
• ⚙️ URL-Configurable - All settings via URL parameters (no UI needed)
• 🎉 Celebration Mode - Optional confetti animation when countdown expires
• 📦 Single File - No build step, no dependencies, just pure HTML/CSS/JS
• ✅ Fully Tested - 34 Playwright tests covering all functionality

Usage

Configure the countdown using URL parameters:

Required Parameters

Parameter	Description	Example
date	Target date/time in ISO 8601 format	2025-12-31T23:59:59

Optional Parameters

Parameter	Description	Example
title	Page title	New Year 2026
description	Subtitle text	Countdown begins
keywords	Pexels search terms (comma-separated)	nature,beach,sunset
pexels_key	Pexels API key (required for keyword search)	YOUR_API_KEY
expired_message	Custom message when countdown reaches zero	Happy New Year!
celebrate	Show confetti animation on expire	true

Example URLs

Basic countdown:

https://comigor.github.io/countdown/?date=2025-12-31T23:59:59

With custom title and description:

https://comigor.github.io/countdown/?date=2025-12-31T23:59:59&title=New%20Year%202026&description=Countdown%20begins

With Pexels backgrounds (requires API key):

https://comigor.github.io/countdown/?date=2025-12-31T23:59:59&keywords=fireworks,celebration&pexels_key=YOUR_KEY

With celebration animation:

https://comigor.github.io/countdown/?date=2000-01-01T00:00:00&celebrate=true&expired_message=Happy%20New%20Year!

Full example:

https://comigor.github.io/countdown/?date=2025-12-31T23:59:59&title=New%20Year%202026&description=Countdown%20begins&keywords=fireworks,celebration&pexels_key=YOUR_KEY&expired_message=Happy%20New%20Year!&celebrate=true

Development

Prerequisites

• Bun v1.3.5 or higher

Install Dependencies

bun install

Run Tests

bun test
# or
bunx playwright test

All 34 tests should pass:

• 5 structure tests
• 8 parameter parsing tests
• 4 countdown logic tests
• 4 Pexels API tests
• 4 styling tests
• 5 expired state tests
• 4 integration tests

Local Development

Simply open index.html in a browser. No build step required!

For live reload during development:

# Use any static file server, e.g.:
bunx serve .

Deployment

The app automatically deploys to GitHub Pages via GitHub Actions on every push to master:

1. Tests run automatically
2. If tests pass, deploys to GitHub Pages
3. Live at: https://comigor.github.io/countdown/

Technology Stack

• Runtime: Bun - Fast all-in-one JavaScript runtime
• Testing: Playwright - End-to-end testing framework
• Deployment: GitHub Pages - Static site hosting
• CI/CD: GitHub Actions - Automated testing and deployment
• Images: Pexels API - Free stock photos (optional)

Architecture

• Single-file app: All HTML, CSS, and JavaScript in index.html (no build step)
• Zero dependencies: No external libraries (no moment.js, no confetti.js)
• No tracking: No localStorage, no cookies, no analytics
• Accurate timing: Uses Date.now() comparison (not accumulated intervals)
• Graceful fallbacks: Pexels → Lorem Picsum → Solid color (#1a1a2e)

Privacy

This app is designed with privacy in mind:

• ✅ No cookies
• ✅ No localStorage
• ✅ No analytics or tracking scripts
• ✅ No external dependencies (except optional Pexels API)
• ✅ All configuration via URL parameters
• ✅ Verified with automated tests

License

MIT