Lavatrice Samuele Desuo

type: custom:button-card
entity: sensor.lavatrice
name: Lavatrice
icon: hue:room-laundry
show_state: false
show_label: true
tap_action:
  action: none
double_tap_action:
  action: none
label: |
  [[[
   var initialTime = states['sensor.lavatrice_initial_time'].state;
   var remainingTime = states['sensor.lavatrice_remaining_time'].state;

   // Controlla se i valori sono numeri validi
   if (!isNaN(initialTime) && !isNaN(remainingTime)) {
     return "<br>⏱ <span style='font-weight: bold; color: white;'>" + Math.round(initialTime) + " ⏳ <span style='font-weight: bold; color: white;'>" + Math.round(remainingTime) + "</span>";
   } else {
     return "<br>⏱ <span style='font-weight: bold; color: white;'>0:00:00</span> ⏳ <span style='font-weight: bold; color: white;'>0:00:00</span>";
   }
  ]]]
custom_fields:
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          tap_action:
            action: more-info
          entity: sensor.lavatrice_spin_speed
          show_state: true
          show_label: true
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:rotate-3d-variant
            {% else %}
              mdi:rotate-3d-variant
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}

            {% endif %}
        - type: template
          tap_action:
            action: more-info
          entity: sensor.lavatrice_water_temp
          show_state: true
          show_label: true
          icon: |
            {% if is_state(entity, 'on') %}
              mdi:thermometer
            {% else %}
              mdi:thermometer
            {% endif %}
          icon_color: |
            {% if is_state(entity, 'on') %}
              black
            {% else %}

            {% endif %}
        - type: template
          tap_action:
            action: more-info
          entity: sensor.lavatrice_run_state
          icon: mdi:washing-machine
          show_state: true
          show_label: true
      card_mod:
        style:
          mushroom-template-chip:nth-child(3)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(65, 105, 235, 1)' if is_state('sensor.lavatrice_run_state', '-') else 'rgba(255, 255, 0, 0.6)' }};
                animation: {{ 'ping 2s ease-out infinite' if not is_state('sensor.lavatrice_run_state', '-') else 'none' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('sensor.lavatrice', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(2)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(65, 105, 235, 1)' if is_state('sensor.lavatrice_water_temp', 'Non selezionato') else 'rgba(255, 255, 0, 0.6)' }};
                animation: {{ 'ping 2s ease-out infinite' if not is_state('sensor.lavatrice_water_temp', 'Non selezionato') else 'none' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('sensor.lavatrice', 'on') }};
              }
              @keyframes illumination {
              0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
          mushroom-template-chip:nth-child(1)$:
            mushroom-chip$: |
              ha-card {
                --chip-background: {{ 'rgba(65, 105, 235, 1)' if is_state('sensor.lavatrice_spin_speed', 'Non selezionato') else 'rgba(255, 255, 0, 0.6)' }};
                animation: {{ 'ping 2s ease-out infinite' if not is_state('sensor.lavatrice_spin_speed', 'Non selezionato') else 'none' }};
                padding: 5px !important;
                border-radius: 100px !important;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-amber), 1);
                }
                100% {
                  box-shadow: 0 0 5px 10px rgba(var(--rgb-amber), 0);
                }
              }
              ha-card:active {
                transform: translateY(1.5px);
                transition: 0s;
                box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
              }
            .: |
              ha-state-icon {
                animation: {{ 'illumination 2s infinite' if is_state('sensor.lavatrice', 'on') }};
              }
              @keyframes illumination {
                0%, 100% { clip-path: inset(0 0 0 0); }
                95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
              }
state:
  - value: 'off'
    styles:
      img_cell:
        - background: '#1e90ff'
        - opacity: 0.6
  - value: unavailable
    styles:
      img_cell:
        - background: '#ff0000'
        - opacity: 0.3
styles:
  grid:
    - grid-template-areas: '"n btn" "l btn" "i btn"'
    - grid-template-columns: 1fr min-content
    - grid-template-rows: min-content min-content 1fr
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 140px
    - height: 140px
    - left: 0
    - bottom: 0
    - margin: 0 0 -30px -30px
    - background: orange
    - border-radius: 200px
  icon:
    - width: 70px
    - color: white
    - opacity: ''
  card:
    - padding: 22px 28px 22px 22px
  custom_fields:
    btn:
      - justify-content: end
      - align-self: start
  name:
    - justify-self: start
    - justify-content: start
    - align-self: start
    - font-size: 18px
    - font-weight: 500
    - color: null
columns: 2
card_mod:
  style: |
    ha-card {
      border: 0px solid white;
      background: rgba(255, 255, 255, 0);
      padding: 0;
      box-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.3);
      position: relative;
      animation: neon-animation 8s linear infinite;
      --neon-color:
          orange
    }
    @keyframes neon-animation {
      0% { box-shadow: -7px -7px 10px 1px var(--neon-color); }
      20% { box-shadow: 0 -7px 10px 1px var(--neon-color); }
      40% {box-shadow: 7px 0 10px 1px var(--neon-color); }
      60% { box-shadow: 7px 7px 10px 1px var(--neon-color); }
      80% { box-shadow: -7px 7px 10px 1px var(--neon-color); }
      100% { box-shadow: -7px -7px 10px 1px var(--neon-color); }
    }