diff --git a/dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/README.md b/dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/README.md
new file mode 100644
index 0000000..2883107
--- /dev/null
+++ b/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:
+
+ 
+
+
+
diff --git a/dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/hc_garden_gate_card.yaml b/dashboard/HaCasa/templates/custom_templates/hc_garden_gate_card/hc_garden_gate_card.yaml
new file mode 100644
index 0000000..f0f0b22
--- /dev/null
+++ b/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 ]]]"
diff --git a/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/README.md b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/README.md
new file mode 100644
index 0000000..cb55356
--- /dev/null
+++ b/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
+```
+
+
+
diff --git a/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_1_person.yaml b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_1_person.yaml
new file mode 100644
index 0000000..8817678
--- /dev/null
+++ b/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' })}
+
+
+ `;
+ }
+ 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 = `
+ `
+ if (!entity || !entity.state) return 'fas:question';
+ const weather = entity.state.toLowerCase();
+ return style + '
' || '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%
+
diff --git a/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_2_person.yaml b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_2_person.yaml
new file mode 100644
index 0000000..7f7bb3d
--- /dev/null
+++ b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_2_person.yaml
@@ -0,0 +1,277 @@
+hc_header_card_2_person:
+ variables:
+ air_quality_sensor:
+ person_entity1:
+ person_entity2:
+ 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' })}
+
+
+ `;
+ }
+ 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 person2"
+ "weather_icon l person1 person2"
+ - 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' ]]]"
+ person2:
+ - justify-self: end
+ - display: "[[[ return variables.person_entity2 ? 'block' : 'none' ]]]"
+ air_quality:
+ - jusity-self: end
+ - margin-left: "-30px"
+ - align-self: center
+ custom_fields:
+ weather_icon: |
+ [[[
+ const style = `
+ `
+ if (!entity || !entity.state) return 'fas:question';
+ const weather = entity.state.toLowerCase();
+ return style + ' ' || '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%
+ person2:
+ card:
+ type: custom:button-card
+ entity: "[[[ return variables.person_entity2 ]]]"
+ 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_entity2].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_entity2].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%
diff --git a/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_3_person.yaml b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_3_person.yaml
new file mode 100644
index 0000000..44dea39
--- /dev/null
+++ b/dashboard/HaCasa/templates/custom_templates/hc_header_card_3_person/hc_header_card_3_person.yaml
@@ -0,0 +1,366 @@
+hc_header_card_3_person:
+ variables:
+ air_quality_sensor:
+ person_entity1:
+ person_entity2:
+ person_entity3:
+ 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' })}
+
+
+ `;
+ }
+ 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 person2 person3"
+ "weather_icon l person1 person2 person3"
+ - 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' ]]]"
+ person2:
+ - justify-self: end
+ - display: "[[[ return variables.person_entity2 ? 'block' : 'none' ]]]"
+ person3:
+ - justify-self: end
+ - display: "[[[ return variables.person_entity3 ? 'block' : 'none' ]]]"
+ air_quality:
+ - jusity-self: end
+ - margin-left: "-30px"
+ - align-self: center
+ custom_fields:
+ weather_icon: |
+ [[[
+ const style = `
+ `
+ if (!entity || !entity.state) return 'fas:question';
+ const weather = entity.state.toLowerCase();
+ return style + ' ' || '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%
+ person2:
+ card:
+ type: custom:button-card
+ entity: "[[[ return variables.person_entity2 ]]]"
+ 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_entity2].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_entity2].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%
+ person3:
+ card:
+ type: custom:button-card
+ entity: "[[[ return variables.person_entity3 ]]]"
+ 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_entity3].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_entity3].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%