Cartes d'affichage de l'heure et de la date

Voici des cartes permettant d'afficher l'heure un peu différemment que proposé nativement.

Prérequis:

• Button Card: https://github.com/custom-cards/button-card

• card-mod 3: https://github.com/thomasloven/lovelace-card-mod

Cartes:

Vous pouvez bien entendu mettre cette carte dans le cadre de titre en haut de votre tableau de bord.
Pour ce faire il suffit de cliquer sur le bouton permettant d'ajouter un titre, et de remplacer le YAML de la carte par celle que je propose.

type: custom:button-card
layout: icon_name_state2nd
entity: sensor.date
size: 24px
show_icon: false
show_name: false
show_state: false
styles:
  card:
    - padding: 0
    - padding-top: 26px
  grid:
    - grid-template-areas: '''date s'''
    - grid-template-columns: auto min-content
    - grid-template-rows: auto min-content
  custom_fields:
    date:
      - align-self: end
      - justify-self: right
      - margin-right: 15px
      - margin-bottom: 9px
      - font-size: 16px
      - text-align: right
custom_fields:
  date: |-
    [[[
      let now = new Date();
      let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
      return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
    ]]]
card_mod:
  style: |
    ha-card {
      backdrop-filter: none !important;
      background-color: transparent;
      box-shadow: none;
      border: none;
    }
grid_options:
  columns: 6
  rows: 1

type: clock
clock_size: medium
show_seconds: true
grid_options:
  columns: 6
  rows: 1
card_mod:
  style:
    .: |
      ha-card {
        backdrop-filter: none !important;
        background: transparent;
        box-shadow: none;
        border: none;
      }

      ha-card > .time-wrapper.size-medium {
        height: auto;
        padding: 0;
        row-gap: 12px;
      }

      ha-card > .time-wrapper.size-medium .time-parts {
        font-size: 4rem;
      }

      ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
      ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
        font-size: 24px;
        margin-left: 8px;
      }

type: horizontal-stack
cards:
  - type: clock
    clock_size: medium
    show_seconds: true
    grid_options:
      columns: 6
      rows: 1
    card_mod:
      style:
        .: |
          ha-card {
            backdrop-filter: none !important;
            background: transparent;
            box-shadow: none;
            border: none;
            float: right;
            margin-right: -52px
          }

          ha-card > .time-wrapper.size-medium {
            height: auto;
            padding: 0;
          }

          ha-card > .time-wrapper.size-medium .time-parts {
            font-size: 4rem;
          }

          ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
          ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
            font-size: 22px;
            margin-left: 8px;
          }
  - type: custom:button-card
    layout: icon_name_state2nd
    entity: sensor.date
    size: 24px
    show_icon: false
    show_name: false
    show_state: false
    styles:
      card:
        - padding: 0
      grid:
        - grid-template-areas: "'date'"
        - grid-template-columns: auto
        - grid-template-rows: auto
      custom_fields:
        date:
          - height: 20px
          - align-self: end
          - justify-self: start
          - margin-left: 20px
          - margin-right: 15px
          - margin-top: 22px
          - font-size: 20px
    custom_fields:
      date: |-
        [[[
          let now = new Date();
          let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
          return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
        ]]]
    card_mod:
      style: |
        ha-card {
          backdrop-filter: none !important;
          background-color: transparent;
          box-shadow: none;
          border: none;
        }
grid_options:
  columns: full

type: vertical-stack
cards:
  - type: clock
    clock_size: medium
    show_seconds: true
    grid_options:
      columns: 6
      rows: 1
    card_mod:
      style:
        .: |
          ha-card {
            backdrop-filter: none !important;
            background: transparent;
            box-shadow: none;
            border: none;
          }

          ha-card > .time-wrapper.size-medium {
            height: auto;
            padding: 0;
            row-gap: 12px;
          }

          ha-card > .time-wrapper.size-medium .time-parts {
            font-size: 4rem;
          }

          ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
          ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
            font-size: 24px;
            margin-left: 8px;
          }
  - type: custom:button-card
    layout: icon_name_state2nd
    entity: sensor.date
    size: 24px
    show_icon: false
    show_name: false
    show_state: false
    styles:
      card:
        - padding: 0
      grid:
        - grid-template-areas: "'date s'"
        - grid-template-columns: auto min-content
        - grid-template-rows: auto min-content
      custom_fields:
        date:
          - align-self: end
          - justify-self: center
          - margin-right: 15px
          - margin-bottom: 9px
          - font-size: 16px
    custom_fields:
      date: |-
        [[[
          let now = new Date();
          let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
          return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
        ]]]
    card_mod:
      style: |
        ha-card {
          backdrop-filter: none !important;
          background-color: transparent;
          box-shadow: none;
          border: none;
        }