Untitled

kiosk_mode:
  mobile_settings:
    hide_header: true
    ignore_entity_settings: true
    custom_width: 768
decluttering_templates:
  ns_panel_home:
    card:
      type: custom:mod-card
      card_mod:
        style: |
          ha-card  {
            background-image: {% if is_state('sun.sun', 'above_horizon') %} 
            url("/local/pictures/domeDayCompressed.jpg") 
          {% else %} 
            url("/local/pictures/domeNightCompressed.jpg") 
          {% endif %};
          background-size: cover;
          background-position: center;
          height: 100%;
          padding: 3% 3.7% 2% 3.7%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-content: center;
          border-radius: 0;
          aspect-ratio: 1 / 1 !important;
          }
          @media (pointer:none), (pointer:coarse) {
              ha-card{
                position: absolute;
                top: 0;
                left: 0;
                height: 100vh !important;
                width: 100vw !important;
              }
            }
      card:
        type: vertical-stack
        cards: '[[homeCards]]'
  ns_clock:
    card:
      type: custom:button-card
      double_tap_action:
        action: navigate
        navigation_path: /profile/general
      custom_fields:
        time: |
          [[[
            const time = states['sensor.time'].state;
            const [hours, minutes] = time.split(':');
            return `${hours} ${minutes}`;
          ]]]
        date: |
          [[[
            return states['sensor.dayoftheweek'].state + ', ' + states['sensor.month'].state + '<span></span>'
          ]]]
        weather: |
          [[[
            var weather = states['weather.forecast_home'].state;
            return `<img src="/local/ic/google_weather_icons/${weather}.png" style="max-width: 100%; max-height: 100%;">`
          ]]]
        temperature: |
          [[[
            var temperature = Math.round(states['weather.forecast_home'].attributes.temperature);
            return temperature + '<span>°C</span>';
          ]]]
      styles:
        card:
          - background: transparent;
          - padding: 0
          - border-radius: 0;
        grid:
          - grid-template-columns: min-content min-content min-content min-content
          - grid-template-rows: 100px min-content
          - grid-template-areas: |
              "time time time" 
              "date weather temperature"
        custom_fields:
          time:
            - color: '#FFF8F5'
            - font-size: 96px
            - text-align: left
          date:
            - color: '#FFF8F5'
            - font-size: 24px
            - font-weight: 500
            - text-align: left
            - margin-left: 8px
            - filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25))
          temperature:
            - color: '#FFF8F5'
            - font-size: 24px
            - font-weight: 500
            - text-align: left
            - filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25))
          weather:
            - width: 24px
            - filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.25))
            - margin: 0 10px
            - display: flex
            - align-content: center
            - align-items: center
  ns_home_button_grid:
    card:
      type: custom:mod-card
      card_mod:
        style:
          layout-card $ grid-layout $: |
            mod-card{
              margin: 0 !important;
              padding: 0 !important;
            }
          .: |
            ha-card  {
              margin-top: 2cqw;
              container-type: inline-size;
            }
      card:
        type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 1fr 1fr 1fr
          grid-template-rows: 1fr 1fr
          padding: 0
          margin: 0
          grid-column-gap: 15px
          grid-row-gap: 15px
        cards: '[[buttons]]'
  ns_home_chips:
    card:
      type: custom:mod-card
      card_mod:
        style:
          layout-card $ grid-layout $: |
            #root{
              aspect-ratio: 1/1;
            }
            mod-card{
              margin: 0 !important;
              padding: 0 !important;
            }
      card:
        type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 1fr
          grid-template-rows: 1fr 1fr 1fr
          padding: 0
          margin: 0
        cards:
          - type: custom:mod-card
            view_layout:
              grid-area: 3 / 1 / 4 / 2
            card_mod:
              style:
                hui-horizontal-stack-card $: |
                  #root{
                    justify-content: flex-end;
                    align-items: flex-end;      
                    width: 100%;
                    gap: 7.5% !important;
                  }
                  button-card{
                    height: 85% !important;
                    aspect-ratio: 1/1 !important;
                  }
                  hui-conditional-card, decluttering-card{
                    flex: unset !important;
                  }
                hui-horizontal-stack-card $ decluttering-card $: |
                  #root{
                    
                  }
                .: |
                  ha-card{
                    width: 100%;
                    height: 100%;
                  }
            card:
              type: horizontal-stack
              cards: '[[chipsIcons]]'
  ns_home_thermostat:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      tap_action: '[[tapAction]]'
      variables:
        a_color: |
          [[[
            var color;
            switch(entity.state){
              case 'off':
                color = states['sun.sun'].state === 'above_horizon' ? '#85909A' : '#E4E4E4';
                break;
              case 'heat':
                color = '#B40707';
                break;
              case 'cool':
                color = '#0760B4';
                break; 
              case 'dry':
                color = '#F9F3A1';
                break; 
              case 'heat_cool':
                color = '#816E27';
                break; 
              case 'auto':
                color = '#816E27';
                break; 
              case 'fan_only':
                color = '#148638';
                break; 
            }
            return color;
          ]]]        
        circleColor: '[[[return variables.a_color]]]'
        icon: |
          [[[
            var icon;
            switch(entity.state){
              case 'off':
                icon = 'power_settings_new';
                break;
              case 'heat':
                icon = 'mode_heat';
                break;
              case 'cool':
                icon = 'mode_cool';
                break; 
              case 'dry':
                icon = 'cool_to_dry';
                break; 
              case 'heat_cool':
                icon = 'mode_heat_cool';
                break; 
              case 'auto':
                icon = 'mode_heat_cool';
                break; 
              case 'fan_only':
                icon = 'mode_fan';
                break; 
            }
            return icon;
          ]]]
      custom_fields:
        title: '[[title]]'
        subtitle: '[[subtitleParameters]]'
        top: |
          [[[
            return "<div style='font-family: Material Symbols Outlined; text-align: left;font-size: 5cqw; font-weight: 500;'>" + variables.icon + "</div> <div style='width: auto; height: 100%;background:" + variables.circleColor + "; border-radius: 100%; aspect-ratio: 1/1;'></div>"
          ]]]
      show_name: false
      show_icon: false
      styles:
        card:
          - box-sizing: border-box;
          - background: rgba(255, 255, 255, 0.41)
          - backdrop-filter: blur(7.7px)
          - border-radius: 5cqw
          - padding: 2cqw 2cqw 2cqw 2cqw
          - aspect-ratio: 1/1
          - border: .5cqw solid rgb(198, 198, 198)
          - color: '[[[ return variables.a_color ]]]'
        grid:
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: 1fr 10cqw 1fr 1fr
          - grid-template-areas: |
              "top top" ". ." "title title" "subtitle subtitle"
        custom_fields:
          top:
            - width: 100%
            - height: 100%
            - display: flex
            - justify-content: space-between
            - align-items: center;
          title:
            - text-align: left
            - font-size: 5cqw
            - font-weight: 500
          subtitle:
            - text-align: left
            - font-size: 3cqw
            - font-weight: 5
  button_template:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      tap_action: '[[tapAction]]'
      variables:
        circleColor: '[[circleColorParameters]]'
        icon: '[[iconParameters]]'
      custom_fields:
        title: '[[title]]'
        subtitle: '[[subtitleParameters]]'
        top: |
          [[[
            return "<div style='font-family: Material Symbols Outlined; text-align: left;font-size: 5cqw; font-weight: 500;'>" + variables.icon + "</div> <div style='width: auto; height: 100%;background:" + variables.circleColor + "; border-radius: 100%; aspect-ratio: 1/1;'></div>"
          ]]]
      show_name: false
      show_icon: false
      styles:
        card:
          - color: >
              [[[ return states['sun.sun'].state === 'above_horizon' ? 'black' :
              'black'; ]]]
          - box-sizing: border-box
          - background: rgba(255, 255, 255, 0.41)
          - backdrop-filter: blur(7.7px)
          - border-radius: 5cqw
          - padding: 2cqw 2cqw 2cqw 2cqw
          - aspect-ratio: 1/1
          - border: .5cqw solid rgb(198, 198, 198);
        grid:
          - grid-template-columns: 1fr 1fr
          - grid-template-rows: 1fr 10cqw 1fr 1fr
          - grid-template-areas: |
              "top top" ". ." "title title" "subtitle subtitle"
        custom_fields:
          top:
            - width: 100%
            - height: 100%
            - display: flex
            - justify-content: space-between
            - align-items: center;
          title:
            - text-align: left
            - font-size: 5cqw
            - font-weight: 500
          subtitle:
            - text-align: left
            - font-size: 3cqw
            - font-weight: 5
  popup_button_template:
    card:
      type: custom:button-card
      entity: '[[entity]]'
      tap_action: '[[tapAction]]'
      variables:
        isEnabled: '[[enabledCondition]]'
      custom_fields:
        title: '[[title]]'
        icon: '[[icon]]'
      show_name: false
      show_icon: false
      styles:
        card:
          - background: |
              [[[
                if(variables.isEnabled){
                    return "#8BD1D6";
                }
                else{
                  return "rgba(0, 0, 0, 0.14)";
                }
              ]]]          
          - border-radius: 5cqw
          - padding: 4cqw 2cqw 2cqw 2cqw
          - aspect-ratio: 1/1
        grid:
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr 1fr
          - grid-template-areas: |
              "icon" "title"
        custom_fields:
          title:
            - text-align: center
            - width: 100%
            - font-size: 3.5cqw
            - font-weight: 500
            - color: |
                [[[
                  if(variables.isEnabled){
                      return "#FFF8F5";
                  }
                  else{
                    return "#000000";
                  }
                ]]]  
          icon:
            - font-family: Material Symbols Outlined
            - text-align: center
            - width: 100%
            - font-size: 6cqw
            - color: |
                [[[
                  if(variables.isEnabled){
                      return "#FFF8F5";
                  }
                  else{
                    return "#000000";
                  }
                ]]]  
  popup_thermostat:
    card:
      type: custom:mod-card
      entity: '[[mainEntity]]'
      style:
        hui-vertical-stack-card $: |
          #root{
            justify-content: center;
          }
        .: |
          ha-card{
            background: {% if states(config.entity) == 'heat' %}#FFDBCD{% elif states(config.entity) == 'dry' %}#E3FECB{% elif states(config.entity) == 'cool' %}#CBE5FE{% else %}#DBDBDB{% endif %};
            padding: 23px;
            border-radius: 25px !important;
            width: 100%;
            aspect-ratio: 41/20
          }
      card:
        type: vertical-stack
        cards:
          - type: custom:button-card
            entity: '[[mainEntity]]'
            show_name: false
            show_icon: false
            custom_fields:
              'off': 'Off'
            styles:
              grid:
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr
                - grid-template-areas: |
                    "off"
              card:
                - background: transparent
                - padding: 0
                - height: 70px
              custom_fields:
                'off':
                  - font-size: 90px
                  - color: '[[textColor]]'
            state:
              - value: 'off'
                operator: '!='
                styles:
                  card:
                    - display: none;
          - type: custom:mushroom-climate-card
            visibility:
              - condition: state
                entity: '[[mainEntity]]'
                state_not: 'off'
            entity: '[[mainEntity]]'
            layout: vertical
            fill_container: false
            show_temperature_control: true
            tap_action:
              action: none
            card_mod:
              entity: '[[mainEntity]]'
              style:
                mushroom-climate-temperature-control $: |
                  mushroom-input-number, mushroom-button-group{
                    height: 100%;
                  }
                mushroom-climate-temperature-control $ mushroom-input-number $: |
                  .container{
                    padding: 0 !important;
                    height: 100% !important;
                  }
                  .value{
                    font-size: 90px;
                    font-weight: 400 !important;
                    color: #A83700 !important;
                  }
                  .button{
                    background-color: {% if states(config.entity) == 'heat' %}#FFBFA7{% elif states(config.entity) == 'dry' %}#cafe9d{% elif states(config.entity) == 'cool' %}#AAD4FD{% endif %} !important;
                    aspect-ratio: 11/7;
                    height: 42px !important;
                    padding: 0 !important;
                    border-radius: 10000px !important;
                  }
                  .minus > ha-icon::before{
                    content: 'REMOVE';
                  }
                  .plus > ha-icon::before{
                    content: 'ADD';
                  }
                  ha-icon::before{
                    font-family: Material Symbols Outlined;
                    font-size: 28px;
                    color: {% if states(config.entity) == 'heat' %}#A83700{% elif states(config.entity) == 'dry' %}#54B003{% elif states(config.entity) == 'cool' %}#035BB0{% endif %};
                  }
                  ha-icon{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  }
                mushroom-climate-temperature-control $ mushroom-input-number $ ha-icon $: |
                  ha-svg-icon{
                    display: none;
                  }
                .: |
                  ha-card{
                    background: transparent;
                    padding: 0 !important;
                    width: 100%;
                  }
                  mushroom-state-item {
                    display: none;
                  }
                  .actions, mushroom-climate-temperature-control{
                    height: 70px;
                  }
          - type: custom:button-card
            entity: '[[mainEntity]]'
            show_name: false
            show_icon: false
            custom_fields:
              currentTemp: >-
                [[[ return "Indoors " + entity.attributes.current_temperature +
                "°C" ]]]
            styles:
              grid:
                - grid-template-columns: 1fr
                - grid-template-rows: 1fr
                - grid-template-areas: |
                    "currentTemp"
              card:
                - background: transparent
                - color: green
                - padding: 0
                - position: absolute
              custom_fields:
                currentTemp:
                  - font-weight: 600
                  - font-size: 15px
                  - color: '[[textColor]]'
  popup_thermostat_hvac:
    card:
      type: grid
      columns: 4
      square: false
      cards:
        - type: custom:decluttering-card
          template: hvac_mode_buttons
          variables:
            - mainEntity: '[[mainEntity]]'
            - hvacMode: 'off'
        - type: custom:decluttering-card
          template: hvac_mode_buttons
          variables:
            - mainEntity: '[[mainEntity]]'
            - hvacMode: heat
        - type: custom:decluttering-card
          template: hvac_mode_buttons
          variables:
            - mainEntity: '[[mainEntity]]'
            - hvacMode: fan_only
        - type: custom:decluttering-card
          template: hvac_mode_buttons
          variables:
            - mainEntity: '[[mainEntity]]'
            - hvacMode: cool
  hvac_mode_buttons:
    card:
      type: custom:button-card
      entity: '[[mainEntity]]'
      custom_fields:
        icon: |
          [[[
            let mode = '[[hvacMode]]';
            switch(mode){
              case 'off':
                return 'power_settings_new';
              case 'heat':
                return 'wb_sunny'; 
              case 'cool':
                return 'mode_cool'; 
              case 'heat_cool':
                return 'mode_heat_cool'; 
              case 'auto':
                return 'mode_heat_cool'; 
              case 'dry':
                return 'cool_to_dry'; 
              case 'fan_only':
                return 'air'; 
            }
          ]]]
      show_icon: false
      show_name: false
      tap_action:
        action: perform-action
        perform_action: climate.set_hvac_mode
        target:
          entity_id: '[[mainEntity]]'
        data:
          hvac_mode: '[[hvacMode]]'
      styles:
        grid:
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr
          - grid-template-areas: |
              "icon"
        card:
          - opacity: |
              [[[
                if(entity.attributes.hvac_modes.includes('[[hvacMode]]')){
                  return 1;
                }
                else{
                  return 0.2;
                }
              ]]]
          - height: 42px
          - aspect-ratio: 1/1
          - background-color: '#DBDBDB'
          - border-radius: 14px
        custom_fields:
          icon:
            - color: '#141B2D'
            - font-family: Material Symbols Outlined
            - font-size: 24px
            - font-weight: 600
      state:
        - value: '[[hvacMode]]'
          styles:
            grid:
              - grid-template-columns: 1fr
              - grid-template-rows: 1fr
              - grid-template-areas: |
                  "icon"
            card:
              - height: 42px
              - aspect-ratio: 9/4
              - background-color: |
                  [[[
                    let mode = '[[hvacMode]]';
                    switch(mode){
                      case 'off':
                        return '#6b6b6b'; 
                      case 'heat':
                        return '#FFDBCD'; 
                      case 'cool':
                        return '#d9e6f7'; 
                      case 'heat_cool':
                        return '#FFF4CB'; 
                      case 'auto':
                        return '#FFF4CB'; 
                      case 'dry':
                        return '#dff6db'; 
                      case 'fan_only':
                        return '#dff6db'; 
                    }
                  ]]]
              - border-radius: 14px
            custom_fields:
              icon:
                - color: |
                    [[[
                      let mode = '[[hvacMode]]';
                      switch(mode){
                        case 'off':
                          return '#dbdbdb'; 
                        case 'heat':
                          return '#A83700'; 
                        case 'cool':
                          return '#d9e6f7'; 
                        case 'heat_cool':
                          return '#FFF4CB'; 
                        case 'auto':
                          return '#FFF4CB'; 
                        case 'dry':
                          return '#dff6db'; 
                        case 'fan_only':
                          return '#dff6db'; 
                      }
                    ]]]
                - font-family: Material Symbols Outlined
                - font-size: 24px
                - font-weight: 600