Add birthday countdown cards to mobile dashboard

main_dashboard.yaml

@@ -932,8 +932,6 @@ views:
                     base_config:
                       state_styles:
                         idle:
-                          button:
-                            background-color: var(--table-row-alternative-background-color)
                           name:
                             color: white
                           icon:

mobile_dashboard.yaml

@@ -524,6 +524,294 @@ views:
               icon: mdi:cellphone-information
               navigation_path: /dashboard-mobile/mobile-devices
               columns: '4'
+          - type: custom:timeflow-card
+            title: >-
+              {% set person_name = "Tony" %} {% set birth_year = 1988 %} {% set
+              birthday_month = 9 %} {% set birthday_day = 8 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set age = next_birthday.year - birth_year %} {{
+              person_name }}'s {{ age }}{{ 
+                'st' if age % 10 == 1 and age % 100 != 11 else
+                'nd' if age % 10 == 2 and age % 100 != 12 else
+                'rd' if age % 10 == 3 and age % 100 != 13 else
+                'th'
+              }} Birthday
+            target_date: >-
+              {% set birthday_month = 9 %} {% set birthday_day = 8 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {{ next_birthday.isoformat() }}
+            creation_date: >-
+              {% set current_date = now() %} {% set start_of_year =
+              current_date.replace(month=1, day=1, hour=0, minute=0, second=0,
+              microsecond=0) %} {{ start_of_year.isoformat() }}
+            show_days: true
+            show_hours: true
+            show_minutes: true
+            show_seconds: false
+            expired_text: Happy Birthday Tony! 🎉
+            color: >-
+              {% set birthday_month = 9 %} {% set birthday_day = 8 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set days_until = (next_birthday -
+              current_date).days %} {% if days_until == 0 %}
+                #FF6B6B
+              {% elif days_until <= 7 %}
+                #4ECDC4
+              {% elif days_until <= 30 %}
+                #45B7D1
+              {% else %}
+                #96CEB4
+              {% endif %}
+            background_color: '#2C3150'
+            progress_color: '#D0CFCF'
+            aspect_ratio: 4/2
+            stroke_width: 6
+            card_mod:
+              style: |
+                ha-card .title {
+                  font-size: 2.2rem;
+                }
+                ha-card .subtitle {
+                  font-size: 2.0rem;
+                }
+            visibility:
+              - condition: numeric_state
+                entity: sensor.anniversary_tony_s_birthday
+                below: 8
+          - type: custom:timeflow-card
+            title: >-
+              {% set person_name = "Tina" %} {% set birth_year = 1988 %} {% set
+              birthday_month = 8 %} {% set birthday_day = 14 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set age = next_birthday.year - birth_year %} {{
+              person_name }}'s {{ age }}{{ 
+                'st' if age % 10 == 1 and age % 100 != 11 else
+                'nd' if age % 10 == 2 and age % 100 != 12 else
+                'rd' if age % 10 == 3 and age % 100 != 13 else
+                'th'
+              }} Birthday
+            target_date: >-
+              {% set birthday_month = 8 %} {% set birthday_day = 14 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {{ next_birthday.isoformat() }}
+            creation_date: >-
+              {% set current_date = now() %} {% set start_of_year =
+              current_date.replace(month=1, day=1, hour=0, minute=0, second=0,
+              microsecond=0) %} {{ start_of_year.isoformat() }}
+            show_days: true
+            show_hours: true
+            show_minutes: true
+            show_seconds: false
+            expired_text: Happy Birthday Tina! 🎉
+            color: >-
+              {% set birthday_month = 8 %} {% set birthday_day = 14 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set days_until = (next_birthday -
+              current_date).days %} {% if days_until == 0 %}
+                #FF6B6B
+              {% elif days_until <= 7 %}
+                #4ECDC4
+              {% elif days_until <= 30 %}
+                #45B7D1
+              {% else %}
+                #96CEB4
+              {% endif %}
+            background_color: '#2C3150'
+            progress_color: '#D0CFCF'
+            aspect_ratio: 4/2
+            stroke_width: 6
+            card_mod:
+              style: |
+                ha-card .title {
+                  font-size: 2.2rem;
+                }
+                ha-card .subtitle {
+                  font-size: 2.0rem;
+                }
+            visibility:
+              - condition: numeric_state
+                entity: sensor.anniversary_tina_s_birthday
+                below: 8
+          - type: custom:timeflow-card
+            title: >-
+              {% set person_name = "Kallen" %} {% set birth_year = 2012 %} {% set
+              birthday_month = 2 %} {% set birthday_day = 7 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set age = next_birthday.year - birth_year %} {{
+              person_name }}'s {{ age }}{{ 
+                'st' if age % 10 == 1 and age % 100 != 11 else
+                'nd' if age % 10 == 2 and age % 100 != 12 else
+                'rd' if age % 10 == 3 and age % 100 != 13 else
+                'th'
+              }} Birthday
+            target_date: >-
+              {% set birthday_month = 2 %} {% set birthday_day = 7 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {{ next_birthday.isoformat() }}
+            creation_date: >-
+              {% set current_date = now() %} {% set start_of_year =
+              current_date.replace(month=1, day=1, hour=0, minute=0, second=0,
+              microsecond=0) %} {{ start_of_year.isoformat() }}
+            show_days: true
+            show_hours: true
+            show_minutes: true
+            show_seconds: false
+            expired_text: Happy Birthday Kallen! 🎉
+            color: >-
+              {% set birthday_month = 2 %} {% set birthday_day = 7 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set days_until = (next_birthday -
+              current_date).days %} {% if days_until == 0 %}
+                #FF6B6B
+              {% elif days_until <= 7 %}
+                #4ECDC4
+              {% elif days_until <= 30 %}
+                #45B7D1
+              {% else %}
+                #96CEB4
+              {% endif %}
+            background_color: '#2C3150'
+            progress_color: '#D0CFCF'
+            aspect_ratio: 4/2
+            stroke_width: 6
+            card_mod:
+              style: |
+                ha-card .title {
+                  font-size: 2.2rem;
+                }
+                ha-card .subtitle {
+                  font-size: 2.0rem;
+                }
+            visibility:
+              - condition: numeric_state
+                entity: sensor.anniversary_kallen_s_birthday
+                below: 8
+          - type: custom:timeflow-card
+            title: >-
+              {% set person_name = "Emmalynn" %} {% set birth_year = 2022 %} {% set
+              birthday_month = 1 %} {% set birthday_day = 10 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set age = next_birthday.year - birth_year %} {{
+              person_name }}'s {{ age }}{{ 
+                'st' if age % 10 == 1 and age % 100 != 11 else
+                'nd' if age % 10 == 2 and age % 100 != 12 else
+                'rd' if age % 10 == 3 and age % 100 != 13 else
+                'th'
+              }} Birthday
+            target_date: >-
+              {% set birthday_month = 1 %} {% set birthday_day = 10 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {{ next_birthday.isoformat() }}
+            creation_date: >-
+              {% set current_date = now() %} {% set start_of_year =
+              current_date.replace(month=1, day=1, hour=0, minute=0, second=0,
+              microsecond=0) %} {{ start_of_year.isoformat() }}
+            show_days: true
+            show_hours: true
+            show_minutes: true
+            show_seconds: false
+            expired_text: Happy Birthday Emmalynn! 🎉
+            color: >-
+              {% set birthday_month = 1 %} {% set birthday_day = 10 %} {% set
+              current_date = now() %} {% set this_year_birthday =
+              current_date.replace(month=birthday_month, day=birthday_day,
+              hour=0, minute=0, second=0, microsecond=0) %} {% if current_date >
+              this_year_birthday %}
+                {% set next_birthday = this_year_birthday.replace(year=this_year_birthday.year + 1) %}
+              {% else %}
+                {% set next_birthday = this_year_birthday %}
+              {% endif %} {% set days_until = (next_birthday -
+              current_date).days %} {% if days_until == 0 %}
+                #FF6B6B
+              {% elif days_until <= 7 %}
+                #4ECDC4
+              {% elif days_until <= 30 %}
+                #45B7D1
+              {% else %}
+                #96CEB4
+              {% endif %}
+            background_color: '#2C3150'
+            progress_color: '#D0CFCF'
+            aspect_ratio: 4/2
+            stroke_width: 6
+            card_mod:
+              style: |
+                ha-card .title {
+                  font-size: 2.2rem;
+                }
+                ha-card .subtitle {
+                  font-size: 2.0rem;
+                }
+            visibility:
+              - condition: numeric_state
+                entity: sensor.anniversary_emmalynn_s_birthday
+                below: 8
           - type: heading
             icon: mdi:cctv
             heading: Cameras