Added Garden Gate Card(Lock Card)

dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/README.md

@@ -0,0 +1,18 @@
+Added a new gate card 
+
+Features:
+  Supports one lock entity and one unlock entity.
+  Icon changes based on the state of a icon_entity.
+  Can also be usedfor doors or garage doors with some modifications.
+
+Variables
+  unlock_entity: 
+  lock_entity:
+  unlock_action: 
+  lock_action: 
+  icon_entity:
+
+  <img width="392" alt="Screenshot 2025-04-18 at 10 50 03" src="https://github.com/user-attachments/assets/27d3cb66-7d50-4a4b-8c4b-5bc7da6e0e64" />
+<img width="391" alt="Screenshot 2025-04-18 at 10 49 34" src="https://github.com/user-attachments/assets/edc8329d-9f29-4cdc-ad13-53e70d9ba819" />
+<img width="396" alt="Screenshot 2025-04-18 at 10 49 09" src="https://github.com/user-attachments/assets/a8b57897-96b6-4c0b-815f-72def7171f6b" />
+<img width="394" alt="Screenshot 2025-04-18 at 10 49 25" src="https://github.com/user-attachments/assets/c512b302-8339-44ec-ae12-b0783dbfb465" />

dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/hc_garden_gate_card.yaml

@@ -0,0 +1,100 @@
+hc_garden_gate_card:
+  variables:
+    unlock_entity: 
+    lock_entity:
+    unlock_action: lock.unlock
+    lock_action: lock.lock
+    icon_entity:
+  triggers_update:
+    - "[[[ return entity.entity_id; ]]]"
+    - "[[[ return variables.icon_entity; ]]]"
+  show_icon: true
+  show_name: true
+  show_state: true
+  icon: >
+    [[[ return states[variables.icon_entity]?.state === 'on' ? 'mdi:gate-open' : 'mdi:gate'; ]]]
+  styles:
+    grid:
+      - grid-template-areas: |
+          'i n buttons'
+          'i s buttons'
+      - grid-template-columns: 1fr auto auto
+      - grid-template-rows: min-content min-content min-content min-content
+    card:
+      - padding: 20px
+    icon:
+      - grid-area: i
+      - position: absolute
+      - color: >
+          [[[
+            return states[variables.icon_entity]?.state === 'on'
+              ? 'var(--color-red)'
+              : 'var(--color-blue)';
+          ]]]
+      - bottom: -15%
+      - left: -28%
+      - width: 100%
+      - z-index: 10
+      - border-radius: 10px
+      - transform: scale(1)
+    name:
+      - grid-area: i
+      - justify-self: start
+      - align-self: start
+      - font-family: montserrat
+      - font-weight: 500
+      - z-index: 2
+    state:
+      - grid-area: i
+      - padding-top: 20px
+      - opacity: 0.8
+      - font-size: 12px
+      - justify-self: start
+      - align-self: start
+      - font-family: montserrat
+      - z-index: 2
+  tap_action: none
+  custom_fields:
+    buttons:
+      card:
+        type: custom:button-card
+        styles:
+          grid:
+            - grid-template-areas: |
+                'item_1'
+                'item_2'
+            - row-gap: 1rem
+          card:
+            - padding: 10px
+            - border-radius: 50px
+            - background-color: var(--button-card-background)
+            - z-index: 3
+        custom_fields:
+          item_1:
+            card:
+              type: custom:button-card
+              icon: mdi:lock-open
+              styles: &icon_style
+                icon:
+                  - width: 25px
+                card:
+                  - padding: 10px
+                  - border-radius: 500px
+                  - box-shadow: none
+                  - pointer-events: auto
+                  - background: none
+              tap_action:
+                action: call-service
+                service: "[[[ return variables.unlock_action ]]]"
+                target:
+                  entity_id: "[[[ return variables.unlock_entity ]]]"
+          item_2:
+            card:
+              type: custom:button-card
+              icon: mdi:lock
+              styles: *icon_style
+              tap_action:
+                action: call-service
+                service: "[[[ return variables.lock_action ]]]"
+                target:
+                  entity_id: "[[[ return variables.lock_entity ]]]"

dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/README.md

@@ -0,0 +1,26 @@
+Added a New 3-Person Header Card
+
+Features:
+Supports up to 3 people instead of the default 1. 
+Can be scaled from 3-person down to a 1 person.
+Inspired by the Header Card by MD3VIX i added the location icon for each person displayed.
+
+```
+variables:
+  person_entity1:
+  person_entity2:
+  person_entity3:
+```
+
+```
+- type: custom:button-card
+  template: hc_header_card_3_person
+  entity: weather.forecast_home
+  variables:
+    person_entity1: person.sebastian
+    person_entity2: person.rune
+    person_entity3: person.cybele
+```
+
+<img width="408" alt="Screenshot 2025-04-18 at 17 55 24" src="https://github.com/user-attachments/assets/1f81fd53-d73f-42c4-a3ec-f3669fb8c641" />
+<img width="398" alt="Screenshot 2025-04-18 at 17 55 35" src="https://github.com/user-attachments/assets/d90efa7e-5808-405a-abd1-81b125c16072" />

dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_1_person.yaml

@@ -0,0 +1,190 @@
+hc_header_card_1_person:
+  variables:
+    air_quality_sensor:
+    person_entity1:
+  show_icon: false
+  show_label: true
+  name: |
+    [[[
+      const today = new Date();
+      const aqi = states[variables.air_quality_sensor]?.state || 0; // Replace with your AQI entity
+      let icon, color;
+
+      if (aqi <= 50) {
+        icon = 'mdi:alpha-g-box';
+        color = 'var(--color-green)';
+      } else if (aqi <= 100) {
+        icon = 'mdi:alpha-m-box';
+        color = 'var(--color-yellow)';
+      } else if (aqi <= 150) {
+        icon = 'mdi:alpha-u-box';
+        color = 'var(--color-orange)';
+      } else if (aqi <= 200) {
+        icon = 'mdi:alpha-u-box';
+        color = 'var(--color-red)';  
+      } else if (aqi <= 300) {
+        icon = 'mdi:alpha-v-box-box';
+        color = 'var(--color-purple)';
+      } else if (aqi <= 500) {
+        icon = 'mdi:alpha-h-box-box';
+        color = 'var(--color-orange)';      
+      } else {
+        icon = 'mdi:emoticon-dead';
+        color = 'var(--color-red)';
+      }
+
+      if (variables.air_quality_sensor) {
+        return `
+          ${today.toLocaleString('en-US', { month: 'long', day: 'numeric' })}
+          <ha-icon
+            icon="${icon}"
+            style="width: auto; height: 16px; color: ${color};"
+            title="AQI: ${aqi}">
+          </ha-icon>
+        `;
+      }
+      else {
+      return `
+        ${today.toLocaleString('en-US', { month: 'long', day: 'numeric' })}
+      `;
+      }
+    ]]]
+  label: |
+    [[[ return states[entity.entity_id].attributes.temperature + '° - ' +
+    states[entity.entity_id].attributes.humidity + '%']]]
+  styles:
+    card:
+      - box-shadow: none
+      - background: none
+      - border-radius: 0%
+      - padding-right: 4px
+    grid:
+      - grid-template-areas: |
+          "weather_icon n person1"
+          "weather_icon l person1"
+      - grid-template-columns: min-content min-content 1fr
+      - grid-template-rows: min-content min-content
+      - column-gap: 5px
+    name:
+      - justify-self: start
+      - font-family: montserrat
+      - font-weight: 800
+      - font-size: 16px
+      - align-self: end
+    label:
+      - justify-self: start
+      - font-family: montserrat
+      - font-size: 14px
+      - color: var(--subtext-color)
+    custom_fields:
+      weather_icon:
+        - justify-self: start
+        - padding: 0
+        - margin: 0
+      person1:
+        - justify-self: end
+        - display: "[[[ return variables.person_entity1 ? 'block' : 'none' ]]]"
+      air_quality:
+        - jusity-self: end
+        - margin-left: "-30px"
+        - align-self: center
+  custom_fields:
+    weather_icon: |
+      [[[
+        const style = `
+          <style>
+            .center {
+              display: block;
+              width: 50px;
+              height: 50px;
+            }
+          </style>`
+        if (!entity || !entity.state) return 'fas:question';
+        const weather = entity.state.toLowerCase();
+        return style + '<img src = "/local/images/weather/' + weather + '.svg" class="center"/> ' || 'fas:question'
+      ]]]
+    person1:
+      card:
+        type: custom:button-card
+        entity: "[[[ return variables.person_entity1 ]]]"
+        show_entity_picture: true
+        show_name: false
+        styles:
+          card:
+            - height: 55px
+            - width: 55px
+            - margin: 0
+            - padding: 0
+            - border-radius: 50%
+            - justify-self: end
+            - position: relative
+            - overflow: visible
+          img_cell:
+            - height: 100%
+            - width: 100%
+            - border-radius: 25px
+            - overflow: hidden
+          entity_picture:
+            - height: 100%
+            - width: 100%
+            - object-fit: cover
+            - border-radius: 25px
+        custom_fields:
+          status:
+            card:
+              type: "custom:button-card"
+              icon: |
+                [[[
+                  var stato = states[variables.person_entity1].state;
+                  if (stato === 'home') {
+                    return 'fapro:house-fill';
+                  } else if (stato === 'Ullern') {
+                    return 'mdi:account-school';
+                  } else if (stato === 'Strømstad') {
+                    return 'mdi:lighthouse';
+                  } else if (stato === 'Toten') {
+                    return 'mdi:tractor';
+                  } else if (stato === 'Oslo') {
+                    return 'mdi:stethoscope';
+                  } else {
+                    return 'fas:plane';
+                  }
+                ]]]
+              show_name: false
+              show_state: false
+              show_label: false
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        var stato = states[variables.person_entity1].state;
+                        if (stato === 'home') {
+                          return 'var(--color-green)';
+                        } else if (stato === 'Strømstad') {
+                          return 'var(--color-blue)';
+                        } else if (stato === 'Toten') {
+                          return 'var(--color-brown)';
+                        } else if (stato === 'Ullern') {
+                          return 'var(--color-yellow)';
+                        } else if (stato === 'Oslo') {
+                          return 'var(--color-red)';
+                        } else {
+                          return 'var(--color-blue)';
+                        }
+                      ]]]
+                  - color: white
+                  - border-radius: 50%
+                  - height: 22px
+                  - width: 22px
+                  - position: absolute
+                  - top: -63px
+                  - right: -3px
+                  - display: flex
+                  - align-items: center
+                  - justify-content: center
+                  - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2)
+                icon:
+                  - color: white
+                  - width: 60%
+                  - height: 60%
+