Skip to content

TimeFlow-Card v1.0.0

Choose a tag to compare

View all tags
@Rishi8078 Rishi8078 released this 21 Jul 22:32
v1.0.0
c91d5d9

TimeFlow Card v1.0.0

🎉 Introducing TimeFlow Card - A beautiful countdown timer card for Home Assistant with animated progress circles and intelligent time formatting.

✨ What's New

🎨 Advanced Styling System

  • Card-mod integration - Full compatibility for complex CSS styling and animations
  • Native styling options - Simple config-based styling for titles, cards, and progress circles
  • True proportional scaling - Elements automatically resize based on card dimensions
  • Responsive design - Perfect display on mobile, tablet, and desktop

⏰ Smart Countdown Features

  • Flexible time units - Show/hide months, days, hours, minutes, seconds as needed
  • Natural language formatting - "5 days and 3 hours" or compact "5d 3h" display
  • Entity support - Use sensor values for dynamic countdowns
  • Custom expired messages - Personalized completion text when timers finish
  • Cross-platform compatibility - Reliable date parsing across all devices

📦 Installation

HACS (Recommended)

  1. Open HACS → Frontend → "⋮" (three dots menu) → Custom repositories
  2. Add repository URL: https://github.com/Rishi8078/TimeFlow-Card
  3. Select category: "Dashboard"
  4. Click "Add" → Install → Add to Lovelace resources

Manual Installation

  1. Download timeflow-card.js from releases
  2. Copy to config/www/ directory
  3. Add to Lovelace resources

💡 Quick Start Examples

Basic Countdown

type: custom:timeflow-card
title: "New Year 2026"
target_date: "2026-01-01T00:00:00"

Entity-Based Timer

type: custom:timeflow-card
title: "Next Backup"
target_date: sensor.backup_next_scheduled
creation_date: sensor.backup_last_completed

Custom Styling

type: custom:timeflow-card
title: "Project Deadline"
target_date: "2025-12-31T23:59:59"
styles:
  title: ["color: #FF5722", "font-weight: bold"]
  card: ["border: 2px solid #4CAF50"]

Card-mod Integration

type: custom:timeflow-card
title: "Important Event"
target_date: "2025-08-15T18:00:00"
card_mod:
  style: |
    ha-card {
      background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    }

🌟 Why TimeFlow Card?

Perfect for tracking:

  • Project deadlines and milestones
  • Event countdowns (birthdays, vacations, holidays)
  • Maintenance schedules (backups, updates, renewals)
  • Goal timelines (exams, competitions, launches)
  • Any time-sensitive objectives

🤝 Community

  • GitHub Repository: TimeFlow-Card
  • Issues & Support: GitHub Issues
  • Documentation: Full README with examples and configuration options

🙏 Thank You

TimeFlow Card is built with ❤️ for the Home Assistant community. We welcome feedback, feature requests, and contributions to make it even better!

📋 Full Changelog

  • feat: Major styling system overhaul - fix native styles and improve proportional scaling
  • feat: Add card-mod compatibility for advanced styling
  • fix: Expired text now shows as subtitle instead of title
  • docs: Enhance documentation and HACS metadata for release
  • chore: Reset version to 1.0.0 for initial public release
  • feat: Update preview image with latest card design

Download: timeflow-card.js

Assets 2
Loading