Echo Show v1

type: custom:button-card
entity: input_boolean.dummy_light1
tap_action:
  action: toggle
show_name: false
styles:
  grid:
    - grid-template-areas: '"weather alarm" "clock clock" "date date"'
    - grid-template-rows: min-content 1fr min-content
    - grid-template-columns: 1fr 1fr
    - row-gap: .5rem
  card:
    - height: 100%
    - padding: 2rem 2rem 3rem 2rem
    - background: center / cover no-repeat url(/local/images/album-art.jpg)
    - overflow: hidden
  custom_fields:
    filter1:
      - position: absolute
      - height: 150%
      - width: 150%
      - backdrop-filter: brightness(50%)
      - overflow: hidden
      - z-index: 1
    filter2:
      - position: absolute
      - height: 150%
      - width: 150%
      - backdrop-filter: brightness(100%)
      - overflow: hidden
      - z-index: 3
    weather:
      - justify-self: start
      - z-index: 2
    alarm:
      - justify-self: end
      - z-index: 2
    clock:
      - color: white
      - justify-self: center
      - font-size: 10rem
      - z-index: 2
    date:
      - justify-self: center
      - align-self: center
      - z-index: 2
    assistant:
      - position: absolute
      - justify-self: center
      - z-index: 4
      - bottom: 5%
state:
  - value: 'on'
    styles:
      custom_fields:
        filter2:
          - animation: brightness .5s ease-in-out forwards
        assistant:
          - animation: big .5s ease-in-out forwards
extra_styles: |
  @keyframes big {
    100% {
      bottom: 50%;
    }
  }
  @keyframes brightness {
    100% {
      backdrop-filter: brightness(50%);
    }
  }
custom_fields:
  filter1: .
  weather:
    card:
      type: custom:button-card
      show_name: true
      show_icon: true
      icon: fas:sun
      name: |
        [[[
          return states["weather.home"].attributes.temperature + ' °C'
        ]]]
      styles:
        grid:
          - grid-template-areas: '"i n"'
          - grid-template-columns: 1fr min-content
          - column-gap: .5rem
        card:
          - height: 100%
          - padding: 0
          - background: none
        name:
          - color: white
          - justify-self: center
          - align-self: center
          - font-size: 1.25rem
          - font-weight: 600
        img_cell:
          - justify-self: start
          - align-self: center
          - width: 1.25rem
          - height: 1.25rem
        icon:
          - width: 100%
          - color: white
  alarm:
    card:
      type: custom:button-card
      show_name: true
      show_icon: true
      icon: fas:clock
      name: 6:00 AM
      styles:
        grid:
          - grid-template-areas: '"i n"'
          - grid-template-columns: 1fr min-content
          - column-gap: .5rem
        card:
          - height: 100%
          - padding: 0
          - background: none
        name:
          - color: white
          - justify-self: center
          - align-self: center
          - font-size: 1.25rem
          - font-weight: 600
        img_cell:
          - justify-self: start
          - align-self: center
          - width: 1.25rem
          - height: 1.25rem
        icon:
          - width: 100%
          - color: white
  clock:
    card:
      type: custom:button-card
      show_name: true
      name: '[[[ return states["sensor.time"].state ]]]'
      styles:
        card:
          - height: 100%
          - padding: 1rem 0
          - background: none
        name:
          - color: white
          - justify-self: center
          - align-self: center
          - font-size: 5vmax
          - font-weight: 600
  date:
    card:
      type: custom:button-card
      show_name: true
      name: |
        [[[
          const options = { weekday: "short", month: "short", day: "numeric", };
          return new Date().toLocaleDateString([], options)
        ]]]
      styles:
        card:
          - padding: 0
          - background: none
        name:
          - color: white
          - justify-self: center
          - align-self: center
          - font-size: 1.25rem
          - font-weight: 600
  filter2: .
  assistant:
    card:
      type: custom:button-card
      entity: input_boolean.dummy_light1
      name: What can I do for you?
      show_icon: false
      tap_action:
        action: none
      styles:
        card:
          - height: .25rem
          - width: 4rem
          - border-radius: 500px
          - padding: 0
          - background: white
          - transform: translate(0%, 50%)
        name:
          - opacity: 0
      state:
        - value: 'on'
          styles:
            card:
              - animation: big2 .5s ease-in-out forwards
              - animation-delay: .75s
            name:
              - animation: big3 .75s ease-in-out forwards
              - animation-delay: 1s
      extra_styles: |
        @keyframes big2 {
          0%{
            height: .25rem;
            width: 4rem;

          }
          100% {
            height: 3.25rem;
            width: 16rem;
            transform: translate(0%, 50%);
          }
        }
        @keyframes big3 {
          0%{
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }