Show off your Overview Page

ysc · February 5, 2022, 11:15am

Not really, it would be an headache to deal with the existing.

It’s not that complicated really:

the Home Page uid: home is to configure the home page as a whole (it is a special type of page, oh-home-page that only that page can use). It is not created until you save it once in the editor (otherwise it will use defaults).
the Overview page uid: overview is a standard oh-layout-page that is rendered in the first tab of the home page. It is created automatically by the setup wizard and cannot be deleted afterwards.

But I agree there could be a shortcut to edit the Overview page quickly from the home page itself, rather than having to go to Settings > Pages and finding it.

mstormi · February 5, 2022, 12:21pm

Thanks for explaining but having two “pages” that are actually one remains to be pretty unintuitive and confusing given that a number of even advanced users stumbled across, and I wouldn’t think improvements to the docs will be of much help here (many people don’t read those details anyway).
I also don’t get the point about your response “dealing with the existing”.
Having one place rather than two pages will be way more intuitive also to new users but if that’s too difficult to change in the codebase why can’t we at least change the “home page” label? That should not affect existing installs, should it.

ysc · February 5, 2022, 2:15pm

I get your point but yet tabbed pages use the same principle - you reference other pages in the individual tabs and you design those pages separately.
The reason is partly a practical one: no reason to build a designer for the Overview page, or pages in a tabbed page, if they are just regular pages.

So it’s just something that should be made easier to understand:

Home Page
\-- Overview Page

Tabbed Page
|-- Page in Tab 1
|-- Page in Tab 2
...
\-- Page in Tab n

Here the same applies, it would be good if you could go straight to editing the “sub-page” when you press the Edit link from the tabbed page in View mode.

Labels are chosen when you create the page so if you decide on another label (or another UID) you’d have older instances with the old name or UID and others with the new ones, even if it’s only the label it’s not a very good look. That’s what I meant with “deal with the existing”.

Rolli · February 5, 2022, 4:01pm

Here is my overview page.
As i use OH 99% on my phone, i made some small expandable custom widgets.

JustinG · February 5, 2022, 6:43pm

My overview gives me direct one or two click access to most of the things that are likely to require manual interaction via cells that highlight if there’s something of note (speaker playing, lights on, door open etc.) and open some custom widget when clicked on. Many of those custom widgets have broad actions (turn off all lights, pause all speakers, lock all doors) for easy whole home checks when leaving.

A few additional simple widgets are included for specific things (like my wife needing to temporarily disable pi-hole when I’m not home to whitelist things for her). And at the bottom informational widgets that don’t require action but fill me in on status of various important devices.
overview

Robert_Koperdak · May 25, 2026, 7:42pm

“Hi everyone! I’m just starting out with openHAB and wanted to share my initial dashboard setup. I’m currently testing with Aqara sensors and Tuya relay switches. Excited to be part of the community!” Robert

ErikDB · May 26, 2026, 6:18am

You’re just starting out with openHAB, and your overview page looks like that?! Impressive!

Mine is still empty after three years

mstormi · May 26, 2026, 7:29am

To be frank, it does not look like an openHAB page.

Can you share the code, please?

Robert_Koperdak · May 28, 2026, 9:12am

uid: veliny_dashboard_main
tags: [ ]
props:
parameters: [ ]
timestamp: May 25, 2026, 2:03:17 PM
component: div
config:
style:
background: >
radial-gradient(circle at 12% 18%, rgba(0, 122, 255, 0.10) 0%, rgba(0,
122, 255, 0) 30%), radial-gradient(circle at 88% 16%, rgba(52, 199, 89,
0.10) 0%, rgba(52, 199, 89, 0) 30%), radial-gradient(circle at 82% 82%,
rgba(255, 59, 48, 0.07) 0%, rgba(255, 59, 48, 0) 25%),
radial-gradient(circle at 18% 84%, rgba(255, 149, 0, 0.06) 0%, rgba(255,
149, 0, 0) 24%), linear-gradient(180deg, #f6f7fb 0%, #eef1f6 55%, #e9edf3
100%)
box-sizing: border-box
min-height: 100%
overflow: visible
padding: 10px
width: 100%
slots:
default:
- component: div
config:
style:
box-sizing: border-box
display: flex
flex-direction: column
gap: 14px
width: 100%
slots:
default:
- component: div
config:
style:
align-items: start
box-sizing: border-box
display: grid
gap: 14px
grid-template-columns: minmax(320px, 1.08fr) minmax(520px, 1.92fr)
width: 100%
slots:
default:
- component: div
config:
style:
box-sizing: border-box
display: flex
flex-direction: column
gap: 14px
min-width: 0
slots:
default:
- component: widget:veliny_clock_card
config:
homeName: Veliny 47
- component: div
config:
style:
box-sizing: border-box
display: grid
gap: 14px
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
min-width: 0
slots:
default:
- component: widget:veliny_master_topeni_mini
config:
activeItem: Topeni_AktivniZony
nazev: Topení
targetPage: page:termostaty
tempItem: Topeni_PrumernaTeplota
totalCount: 10
- component: widget:veliny_master_okna_mini
config:
countItem: Pocet_oken
nazev: Okna
- component: div
config:
style:
box-sizing: border-box
display: flex
flex-direction: column
gap: 14px
min-width: 0
slots:
default:
- component: widget:veliny_master_alarm_panel
config: {}
- component: div
config:
style:
box-sizing: border-box
display: grid
gap: 14px
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
min-width: 0
slots:
default:
- component: widget:veliny_master_svetla_mini
config:
countItem: PocetRozsvicenychSvetel
groupItem: gVsechnaSvetla
nazev: Světla
- component: widget:veliny_master_zasuvky_mini
config:
countItem: Pocet_zapnutych_zasuvek
groupItem: gVsechnyZasuvky
nazev: Zásuvky
- component: widget:veliny_master_voda_mini
config:
alarmItem: Voda_Master_Alarm
nazev: Voda
targetPage: page:voda
textItem: Voda_Master_Text
- component: widget:veliny_master_dvere_mini
config:
countItem: Pocet_dveri
nazev: Dveře
- component: f7-card
config:
style:
background: >
radial-gradient(circle at 78% 24%,
rgba(255,149,0,0.18) 0%,
rgba(255,149,0,0.07) 42%, rgba(255,149,0,0)
76%), linear-gradient(to bottom, hsla(12,
90%, 60%, 1), hsla(12, 90%, 96%, 1), 12%,
hsla(0, 0%, 100%, 1))
border-radius: 20px
box-shadow: 0px 6px 18px rgba(255,120,0,0.22), 0px 0px 14px
rgba(255,160,60,0.18)
height: 96px
margin: 4px
overflow: hidden
position: relative
slots:
default:
- component: div
config:
style:
background: radial-gradient(circle, rgba(255,170,60,0.24) 0%,
rgba(255,140,0,0.10) 42%,
rgba(255,140,0,0) 76%)
border-radius: 50%
height: 78px
position: absolute
right: 8px
top: 8px
width: 86px
z-index: 0
- component: Label
config:
style:
color: "#7a2d00"
font-size: 15px
font-weight: 650
left: 14px
position: absolute
top: 12px
z-index: 2
text: Požár
- component: Label
config:
style:
bottom: 14px
color: "#cc5a00"
font-size: 11px
font-weight: 600
left: 14px
position: absolute
z-index: 2
text: V pořádku
- component: Label
config:
style:
font-size: 36px
line-height: 36px
position: absolute
right: 24px
top: 24px
z-index: 2
text: 🔥
- component: f7-card
config:
style:
background: >
radial-gradient(circle at 78% 24%,
rgba(78,145,255,0.16) 0%,
rgba(78,145,255,0.06) 42%,
rgba(78,145,255,0) 76%), linear-gradient(to
bottom, hsla(205, 80%, 58%, 1), hsla(205,
80%, 96%, 1), 12%, hsla(0, 0%, 100%, 1))
border-radius: 20px
box-shadow: 0px 6px 18px rgba(80,150,255,0.22), 0px 0px 14px
rgba(110,180,255,0.18)
height: 96px
margin: 4px
overflow: hidden
position: relative
slots:
default:
- component: div
config:
style:
background: radial-gradient(circle, rgba(120,170,255,0.22) 0%,
rgba(70,130,255,0.08) 42%,
rgba(70,130,255,0) 76%)
border-radius: 50%
height: 78px
position: absolute
right: 8px
top: 8px
width: 86px
z-index: 0
- component: Label
config:
style:
color: "#0b4a84"
font-size: 15px
font-weight: 650
left: 14px
position: absolute
top: 12px
z-index: 2
text: Plyn
- component: Label
config:
style:
bottom: 14px
color: "#1473d6"
font-size: 11px
font-weight: 600
left: 14px
position: absolute
z-index: 2
text: V pořádku
- component: Label
config:
style:
font-size: 30px
line-height: 30px
position: absolute
right: 24px
top: 24px
z-index: 2
text: ⛽
- component: f7-card
config:
style:
background: >
radial-gradient(circle at 92% 18%, rgba(0,122,255,0.08) 0%,
rgba(0,122,255,0) 30%), linear-gradient(180deg,
rgba(255,255,255,0.96) 0%, rgba(247,248,251,0.96) 100%)
border-radius: 28px
box-shadow: 0px 10px 26px rgba(0,0,0,0.07)
box-sizing: border-box
margin: 0
overflow: hidden
padding: 20px 18px 18px 18px
position: relative
slots:
default:
- component: Label
config:
style:
color: "#1a1a1a"
display: block
font-size: 22px
font-weight: 700
margin-bottom: 18px
text: Přízemí
- component: div
config:
style:
box-sizing: border-box
display: grid
gap: 12px
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
width: 100%
slots:
default:
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Předsíň
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Koupelna
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Hala
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Jídelna
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Kuchyně
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Obývák
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Veranda
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Dílna
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Garáž
- component: f7-card
config:
style:
background: >
radial-gradient(circle at 88% 18%, rgba(255,149,0,0.08) 0%,
rgba(255,149,0,0) 30%), linear-gradient(180deg,
rgba(255,255,255,0.96) 0%, rgba(247,248,251,0.96) 100%)
border-radius: 28px
box-shadow: 0px 10px 26px rgba(0,0,0,0.07)
box-sizing: border-box
margin: 0
overflow: hidden
padding: 20px 18px 18px 18px
position: relative
slots:
default:
- component: Label
config:
style:
color: "#1a1a1a"
display: block
font-size: 22px
font-weight: 700
margin-bottom: 18px
text: Podkroví
- component: div
config:
style:
box-sizing: border-box
display: grid
gap: 12px
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
width: 100%
slots:
default:
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Chodba
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Ložnice
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Koupelna
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Pracovna
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Pokojíček
- component: f7-card
config:
style:
background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
border-radius: 18px
box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
height: 72px
margin: 0
overflow: hidden
position: relative
slots:
default:
- component: Label
config:
style:
color: "#111111"
font-size: 14px
font-weight: 650
left: 14px
position: absolute
top: 24px
text: Šatník

Robert_Koperdak · May 28, 2026, 9:19am

It’s not finished yet, I’m debugging the code and testing the Aqara HW (not working alarm via Matter)

Robert_Koperdak · May 28, 2026, 9:20am

uid: veliny_clock_card
tags:
props:
parameters:

label: Název domu
name: homeName
required: false
type: TEXT
timestamp: May 25, 2026, 12:39:19 PM
component: f7-card
config:
style:
background: “linear-gradient(180deg, #ffffff 0%, #f6f7fa 100%)”
border-radius: 26px
box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
height: 212px
margin: 4px
overflow: hidden
position: relative
slots:
default:
component: div
config:
style:
background: radial-gradient(circle, rgba(0,122,255,0.10) 0%,
rgba(0,122,255,0.04) 45%, rgba(0,122,255,0) 76%)
border-radius: 50%
height: 160px
position: absolute
right: -20px
top: -20px
width: 160px
z-index: 0
component: Label
config:
style:
color: “#8c8c91”
font-size: 14px
font-weight: 500
left: 22px
letter-spacing: 0.2px
position: absolute
text-transform: capitalize
top: 22px
z-index: 2
text: =dayjs().locale(“cs”).format(“dddd D. MMMM”)
component: Label
config:
style:
color: “#111111”
font-size: 46px
font-weight: 650
left: 22px
letter-spacing: -1.6px
line-height: 46px
position: absolute
top: 62px
z-index: 2
text: =dayjs().format(“HH:mm”)
component: Label
config:
style:
bottom: 24px
color: “#5f6065”
font-size: 18px
font-weight: 600
left: 22px
letter-spacing: -0.2px
position: absolute
z-index: 2
text: ‘=props.homeName ? props.homeName : “Veliny 47”’
component: div
config:
style:
bottom: 24px
height: 38px
max-width: 132px
min-width: 94px
overflow: hidden
position: absolute
right: 22px
z-index: 5
slots:
default:
component: Label
config:
style:
color: “#303236”
font-size: 13px
font-weight: 650
line-height: 15px
position: absolute
right: 0
text-align: right
top: 0
white-space: nowrap
text: =items[“Pocasi_Ikona”].state.toString() + " " +
items[“Pocasi_Teplota_Text”].state.toString()
component: Label
config:
style:
color: “#8a8d93”
font-size: 10px
font-weight: 500
line-height: 11px
max-width: 118px
overflow: hidden
position: absolute
right: 0
text-align: right
text-overflow: ellipsis
top: 19px
white-space: nowrap
text: =items[“Pocasi_Stav_Text”].state.toString()

mstormi · May 28, 2026, 9:31am

please use code fences

Robert_Koperdak · May 28, 2026, 9:46am

uid: veliny_top_demo4
tags: []
props:
  parameters:
  - context: item
    label: Item úniku vody / vodní alarm
    name: waterLeakItem
    required: false
    type: TEXT
timestamp: May 26, 2026, 8:31:58 AM
component: div
config:
  style:
    width: 100%
    box-sizing: border-box
    padding: 10px
    display: flex
    flex-direction: column
    gap: 14px
slots:
  default:
  - component: div
    config:
      style:
        position: relative
        width: 100%
        padding: 16px
        box-sizing: border-box
        border-radius: 28px
        overflow: hidden
        background: linear-gradient(180deg, rgba(255,255,255,0.48) 0%, rgba(244,248,252,0.38) 100%)
        border: 1px solid rgba(255,255,255,0.34)
        box-shadow: 0px 18px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.72)
        backdrop-filter: blur(12px)
        -webkit-backdrop-filter: blur(12px)
    slots:
      default:
      - component: div
        config:
          style:
            position: absolute
            left: 24%
            top: 16%
            width: 180px
            height: 180px
            border-radius: 50%
            background: radial-gradient(circle, rgba(0,210,255,0.10) 0%, rgba(0,210,255,0.04) 45%, rgba(0,210,255,0) 75%)
            z-index: '0'
      - component: div
        config:
          style:
            position: absolute
            right: 18%
            top: 18%
            width: 180px
            height: 180px
            border-radius: 50%
            background: radial-gradient(circle, rgba(52,199,89,0.10) 0%, rgba(52,199,89,0.04) 45%, rgba(52,199,89,0) 75%)
            z-index: '0'
      - component: div
        config:
          style:
            position: relative
            display: grid
            grid-template-columns: 1fr auto auto
            gap: 14px
            align-items: center
            height: 96px
            margin: 4px
            border-radius: 20px
            padding: 12px 16px
            box-sizing: border-box
            background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
            box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
            overflow: hidden
            z-index: '2'
        slots:
          default:
          - component: div
            config:
              style:
                background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10) 45%, rgba(0,170,40,0) 75%)
                border-radius: 50%
                height: 90px
                position: absolute
                right: 8px
                top: 4px
                width: 130px
                z-index: '0'
          - component: div
            config:
              style:
                display: flex
                flex-direction: column
                justify-content: center
                z-index: '2'
            slots:
              default:
              - component: Label
                config:
                  text: Alarm
                  style:
                    color: '#0d4f2a'
                    font-size: 18px
                    font-weight: bold
                    line-height: 20px
              - component: Label
                config:
                  text: Režim doma
                  style:
                    margin-top: 6px
                    color: '#23823a'
                    font-size: 12px
                    font-weight: '600'
          - component: div
            config:
              style:
                display: flex
                gap: 10px
                align-items: center
                z-index: '2'
            slots:
              default:
              - component: div
                config:
                  style:
                    min-width: 78px
                    height: 34px
                    border-radius: 17px
                    background: linear-gradient(180deg,#34c759 0%,#27a946 100%)
                    box-shadow: 0px 5px 12px rgba(52,199,89,0.28)
                    display: flex
                    justify-content: center
                    align-items: center
                slots:
                  default:
                  - component: Label
                    config:
                      text: Doma
                      style:
                        color: '#ffffff'
                        font-size: 13px
                        font-weight: '700'
              - component: div
                config:
                  style:
                    min-width: 88px
                    height: 34px
                    border-radius: 17px
                    background: rgba(255,255,255,0.62)
                    display: flex
                    justify-content: center
                    align-items: center
                slots:
                  default:
                  - component: Label
                    config:
                      text: Odchod
                      style:
                        color: '#936100'
                        font-size: 13px
                        font-weight: '650'
          - component: div
            config:
              style:
                display: flex
                flex-direction: column
                align-items: flex-end
                justify-content: center
                gap: 4px
                z-index: '2'
                min-width: 190px
            slots:
              default:
              - component: Label
                config:
                  text: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "Voda: ÚNIK VODY!" : "Voda: Stav: OK"'
                  style:
                    color: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "#cc0000" : "#23823a"'
                    font-size: 12px
                    font-weight: '650'
                    line-height: 14px
              - component: Label
                config:
                  text: 'Požár: Stav: OK'
                  style:
                    color: '#23823a'
                    font-size: 12px
                    font-weight: '650'
                    line-height: 14px
              - component: Label
                config:
                  text: 'Plyn: Stav: OK'
                  style:
                    color: '#23823a'
                    font-size: 12px
                    font-weight: '650'
                    line-height: 14px
      - component: div
        config:
          style:
            position: relative
            display: grid
            grid-template-columns: minmax(180px, 1fr) minmax(300px, 340px) minmax(180px, 1fr)
            gap: 18px
            align-items: center
            margin-top: 18px
            z-index: '2'
        slots:
          default:
          - component: div
            config:
              style:
                display: flex
                flex-direction: column
                gap: 12px
                min-width: '0'
            slots:
              default:
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: linear-gradient(to bottom, hsla(48, 90%, 54%, 0.95), hsla(48, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                    box-shadow: 0px 6px 18px rgba(255,193,7,0.20), 0px 0px 14px rgba(255,214,64,0.15)
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: radial-gradient(circle, rgba(255,221,70,0.28) 0%, rgba(255,193,7,0.12) 45%, rgba(255,193,7,0) 75%)
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: Label
                    config:
                      text: 💡
                      style:
                        position: absolute
                        right: 66px
                        top: 40px
                        font-size: 30px
                        line-height: 30px
                        opacity: '0.42'
                        z-index: '2'
                        transform: rotate(-12deg)
                        filter: drop-shadow(0 0 4px rgba(255,193,7,0.35))
                  - component: Label
                    config:
                      text: 💡
                      style:
                        position: absolute
                        right: 18px
                        top: 40px
                        font-size: 30px
                        line-height: 30px
                        opacity: '0.42'
                        z-index: '2'
                        transform: rotate(12deg)
                        filter: drop-shadow(0 0 4px rgba(255,193,7,0.35))
                  - component: Label
                    config:
                      text: 💡
                      style:
                        position: absolute
                        right: 34px
                        top: 18px
                        font-size: 50px
                        line-height: 50px
                        opacity: '0.90'
                        z-index: '2'
                        filter: drop-shadow(0 0 10px rgba(255,193,7,0.55))
                  - component: Label
                    config:
                      text: Světla
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '#664d00'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: Svítí 1
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '#b38600'
                        font-size: 12px
                        font-weight: '600'
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                    box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10) 45%, rgba(0,170,40,0) 75%)
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: div
                    config:
                      style:
                        position: absolute
                        right: 11px
                        top: 13px
                        width: 84px
                        height: 70px
                        z-index: '2'
                    slots:
                      default:
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 3px
                            top: 4px
                            width: 78px
                            height: 62px
                            border-radius: 50%
                            background: radial-gradient(circle, rgba(52,199,89,0.30) 0%, rgba(52,199,89,0.12) 50%, rgba(52,199,89,0) 76%)
                            z-index: '0'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 2px
                            top: 34px
                            width: 30px
                            height: 22px
                            border-radius: 10px
                            background: linear-gradient(145deg,#22bf43 0%,#0e902c 100%)
                            box-shadow: 0 6px 12px rgba(0,140,45,0.22)
                            z-index: '1'
                      - component: div
                        config:
                          style:
                            position: absolute
                            right: 2px
                            top: 34px
                            width: 30px
                            height: 22px
                            border-radius: 10px
                            background: linear-gradient(145deg,#22bf43 0%,#0e902c 100%)
                            box-shadow: 0 6px 12px rgba(0,140,45,0.22)
                            z-index: '1'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 20px
                            top: 9px
                            width: 44px
                            height: 50px
                            border-radius: 14px
                            background: linear-gradient(145deg,#27c84b 0%,#0d8f2b 100%)
                            box-shadow: 0 10px 18px rgba(0,140,45,0.32), inset 0 1px 2px rgba(255,255,255,0.20)
                            z-index: '2'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 30px
                            top: 21px
                            width: 25px
                            height: 25px
                            border-radius: 50%
                            background: linear-gradient(180deg,#f5fff6 0%,#e2f3e5 100%)
                            box-shadow: inset 0 2px 4px rgba(0,0,0,0.13)
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 36px
                            top: 26px
                            width: 5px
                            height: 5px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '4'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 46px
                            top: 26px
                            width: 5px
                            height: 5px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '4'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 41px
                            top: 37px
                            width: 5px
                            height: 5px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '4'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 9px
                            top: 39px
                            width: 16px
                            height: 16px
                            border-radius: 50%
                            background: rgba(242,255,244,0.94)
                            box-shadow: inset 0 1px 2px rgba(0,0,0,0.10)
                            z-index: '2'
                      - component: div
                        config:
                          style:
                            position: absolute
                            right: 9px
                            top: 39px
                            width: 16px
                            height: 16px
                            border-radius: 50%
                            background: rgba(242,255,244,0.94)
                            box-shadow: inset 0 1px 2px rgba(0,0,0,0.10)
                            z-index: '2'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 14px
                            top: 43px
                            width: 4px
                            height: 4px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 21px
                            top: 47px
                            width: 4px
                            height: 4px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            right: 21px
                            top: 43px
                            width: 4px
                            height: 4px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            right: 14px
                            top: 47px
                            width: 4px
                            height: 4px
                            border-radius: 50%
                            background: '#149333'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 33px
                            top: 13px
                            width: 18px
                            height: 9px
                            border-radius: 50%
                            background: rgba(255,255,255,0.18)
                            filter: blur(1px)
                            z-index: '4'
                  - component: Label
                    config:
                      text: Zásuvky
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '#004d00'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: Zapnuto 7
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '#008000'
                        font-size: 12px
                        font-weight: '600'
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(to bottom, hsla(0, 90%, 60%, 0.95), hsla(0, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))" : "linear-gradient(to bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))"'
                    box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0px 6px 18px rgba(255,0,0,0.20), 0px 0px 14px rgba(255,80,80,0.14)" : "0px 6px 18px rgba(20,115,214,0.18), 0px 0px 14px rgba(80,160,255,0.13)"'
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "radial-gradient(circle, rgba(255,70,70,0.24) 0%, rgba(255,0,0,0.10) 45%, rgba(255,0,0,0) 75%)" : "radial-gradient(circle, rgba(80,160,255,0.24) 0%, rgba(20,115,214,0.10) 45%, rgba(20,115,214,0) 75%)"'
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: div
                    config:
                      style:
                        position: absolute
                        right: 6px
                        top: 6px
                        width: 100px
                        height: 86px
                        z-index: '2'
                    slots:
                      default:
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 3px
                            top: 8px
                            width: 92px
                            height: 72px
                            border-radius: 50%
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "radial-gradient(circle, rgba(255,0,0,0.17) 0%, rgba(255,0,0,0.06) 52%, rgba(255,0,0,0) 76%)" : "radial-gradient(circle, rgba(210,145,72,0.18) 0%, rgba(20,115,214,0.06) 52%, rgba(20,115,214,0) 76%)"'
                            z-index: '0'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 50px
                            top: 22px
                            width: 16px
                            height: 38px
                            border-radius: 7px 7px 4px 4px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff7878 0%,#d52020 45%,#9f0000 100%)" : "linear-gradient(145deg,#ffe4bf 0%,#d59148 45%,#a86025 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 46px
                            top: 12px
                            width: 24px
                            height: 16px
                            border-radius: 6px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff9a9a 0%,#d42b2b 100%)" : "linear-gradient(145deg,#fff0d5 0%,#e1a35d 52%,#b66d2c 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '4'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 18px
                            top: 11px
                            width: 34px
                            height: 13px
                            border-radius: 8px 3px 3px 8px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff9a9a 0%,#d42b2b 100%)" : "linear-gradient(145deg,#fff0d5 0%,#e1a35d 52%,#b66d2c 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            transform: perspective(50px) rotateY(-18deg)
                            z-index: '5'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 66px
                            top: 11px
                            width: 30px
                            height: 13px
                            border-radius: 3px 8px 8px 3px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff9a9a 0%,#d42b2b 100%)" : "linear-gradient(145deg,#fff0d5 0%,#e1a35d 52%,#b66d2c 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            transform: perspective(50px) rotateY(18deg)
                            z-index: '5'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 54px
                            top: 7px
                            width: 13px
                            height: 21px
                            border-radius: 5px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff9a9a 0%,#d42b2b 100%)" : "linear-gradient(145deg,#fff0d5 0%,#e1a35d 52%,#b66d2c 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '6'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 24px
                            top: 49px
                            width: 58px
                            height: 22px
                            border-radius: 15px 8px 8px 5px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff7878 0%,#d52020 45%,#9f0000 100%)" : "linear-gradient(145deg,#ffe4bf 0%,#d59148 45%,#a86025 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '2'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 18px
                            top: 57px
                            width: 20px
                            height: 24px
                            border-radius: 0 0 13px 13px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff7878 0%,#d52020 45%,#9f0000 100%)" : "linear-gradient(145deg,#ffe4bf 0%,#d59148 45%,#a86025 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '2'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 78px
                            top: 50px
                            width: 12px
                            height: 25px
                            border-radius: 2px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "linear-gradient(145deg,#ff9a9a 0%,#d42b2b 100%)" : "linear-gradient(145deg,#fff0d5 0%,#e1a35d 52%,#b66d2c 100%)"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "0 8px 16px rgba(204,0,0,0.30), inset 0 1px 2px rgba(255,255,255,0.30)" : "0 8px 16px rgba(160,95,35,0.24), inset 0 1px 2px rgba(255,255,255,0.36)"'
                            z-index: '3'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 35px
                            top: 54px
                            width: 38px
                            height: 4px
                            border-radius: 50%
                            background: rgba(255,255,255,0.34)
                            filter: blur(1px)
                            z-index: '7'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 54px
                            top: 27px
                            width: 5px
                            height: 25px
                            border-radius: 4px
                            background: rgba(255,255,255,0.30)
                            filter: blur(0.4px)
                            z-index: '7'
                      - component: div
                        config:
                          style:
                            position: absolute
                            left: 21px
                            top: 78px
                            width: 12px
                            height: 19px
                            border-radius: 70% 70% 70% 0
                            background: linear-gradient(135deg,#a7ecff 0%,#2c99ff 55%,#0072e8 100%)
                            transform: rotate(45deg)
                            opacity: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "1" : "0"'
                            box-shadow: 0 6px 12px rgba(20,115,214,0.26)
                            z-index: '8'
                  - component: Label
                    config:
                      text: Voda
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "#660000" : "#004a86"'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "ÚNIK VODY!" : "Stav: OK"'
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '=(props.waterLeakItem && items[props.waterLeakItem] && ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase())) ? "#cc0000" : "#007aff"'
                        font-size: 12px
                        font-weight: '700'
          - component: div
            config:
              style:
                display: flex
                justify-content: center
                align-items: center
                min-width: '0'
            slots:
              default:
              - component: div
                config:
                  style:
                    width: 300px
                    height: 300px
                    border-radius: 50%
                    position: relative
                    overflow: hidden
                    background: radial-gradient(circle at 50% 50%, rgba(18,30,40,0.08) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.06) 100%)
                    border: 1px solid rgba(255,255,255,0.22)
                    box-shadow: 0px 18px 40px rgba(0,0,0,0.06), inset 0 0 0 10px rgba(255,255,255,0.04), inset 0 0 0 22px rgba(0,210,255,0.05)
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        position: absolute
                        left: 18px
                        top: 18px
                        width: 264px
                        height: 264px
                        border-radius: 50%
                        border: 2px solid rgba(0,210,255,0.28)
                        box-shadow: 0 0 18px rgba(0,210,255,0.10)
                        z-index: '1'
                  - component: div
                    config:
                      style:
                        position: absolute
                        left: 42px
                        top: 42px
                        width: 216px
                        height: 216px
                        border-radius: 50%
                        border: 2px dashed rgba(255,255,255,0.16)
                        z-index: '1'
                  - component: Label
                    config:
                      text: =dayjs().locale("cs").format("dddd D. MMMM")
                      style:
                        position: absolute
                        left: '0'
                        right: '0'
                        top: 56px
                        text-align: center
                        color: '#8c8c91'
                        font-size: 14px
                        font-weight: '500'
                        text-transform: capitalize
                        z-index: '3'
                  - component: Label
                    config:
                      text: =dayjs().format("HH:mm")
                      style:
                        position: absolute
                        left: '0'
                        right: '0'
                        top: 102px
                        text-align: center
                        color: '#111111'
                        font-size: 58px
                        line-height: 58px
                        font-weight: '650'
                        letter-spacing: -1.8px
                        z-index: '3'
                  - component: Label
                    config:
                      text: Veliny 47
                      style:
                        position: absolute
                        left: '0'
                        right: '0'
                        bottom: 86px
                        text-align: center
                        color: '#5f6065'
                        font-size: 18px
                        font-weight: '600'
                        z-index: '3'
                  - component: Label
                    config:
                      text: =items["Pocasi_Ikona"].state.toString() + " " + items["Pocasi_Teplota_Text"].state.toString()
                      style:
                        position: absolute
                        left: '0'
                        right: '0'
                        bottom: 56px
                        text-align: center
                        color: '#303236'
                        font-size: 14px
                        font-weight: '650'
                        z-index: '3'
                  - component: Label
                    config:
                      text: =items["Pocasi_Stav_Text"].state.toString()
                      style:
                        position: absolute
                        left: '0'
                        right: '0'
                        bottom: 38px
                        text-align: center
                        color: '#8a8d93'
                        font-size: 11px
                        font-weight: '500'
                        z-index: '3'
          - component: div
            config:
              style:
                display: flex
                flex-direction: column
                gap: 12px
                min-width: '0'
            slots:
              default:
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                    box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10) 45%, rgba(0,170,40,0) 75%)
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: Label
                    config:
                      text: 🚪
                      style:
                        position: absolute
                        right: 34px
                        top: 20px
                        font-size: 48px
                        line-height: 48px
                        opacity: '0.78'
                        z-index: '2'
                        filter: drop-shadow(0 0 8px rgba(52,199,89,0.18))
                  - component: Label
                    config:
                      text: Dveře
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '#004d00'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: Zavřeny
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '#008000'
                        font-size: 12px
                        font-weight: '600'
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: linear-gradient(to bottom, hsla(0, 90%, 60%, 0.95), hsla(0, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                    box-shadow: 0px 6px 18px rgba(255,0,0,0.20), 0px 0px 14px rgba(255,80,80,0.14)
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: radial-gradient(circle, rgba(255,70,70,0.24) 0%, rgba(255,0,0,0.10) 45%, rgba(255,0,0,0) 75%)
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: Label
                    config:
                      text: 🪟
                      style:
                        position: absolute
                        right: 34px
                        top: 20px
                        font-size: 48px
                        line-height: 48px
                        opacity: '0.82'
                        z-index: '2'
                        filter: drop-shadow(0 0 8px rgba(255,0,0,0.18))
                  - component: Label
                    config:
                      text: Okna
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '#660000'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: 'Otevřena: 3'
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '#cc0000'
                        font-size: 12px
                        font-weight: '600'
              - component: f7-card
                config:
                  style:
                    height: 96px
                    margin: 4px
                    border-radius: 20px
                    background: linear-gradient(to bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                    box-shadow: 0px 6px 18px rgba(20,115,214,0.18), 0px 0px 14px rgba(80,160,255,0.13)
                    overflow: hidden
                    position: relative
                slots:
                  default:
                  - component: div
                    config:
                      style:
                        background: radial-gradient(circle, rgba(80,160,255,0.24) 0%, rgba(20,115,214,0.10) 45%, rgba(20,115,214,0) 75%)
                        border-radius: 50%
                        height: 78px
                        position: absolute
                        right: 8px
                        top: 10px
                        width: 98px
                        z-index: '0'
                  - component: Label
                    config:
                      text: 🌡️
                      style:
                        position: absolute
                        right: 34px
                        top: 20px
                        font-size: 48px
                        line-height: 48px
                        opacity: '0.84'
                        z-index: '2'
                        filter: drop-shadow(0 0 8px rgba(20,115,214,0.24))
                  - component: Label
                    config:
                      text: Topení
                      style:
                        position: absolute
                        left: 16px
                        top: 14px
                        z-index: '5'
                        color: '#004a86'
                        font-size: 16px
                        font-weight: bold
                  - component: Label
                    config:
                      text: Ø 26,1 °C
                      style:
                        position: absolute
                        left: 16px
                        bottom: 14px
                        z-index: '5'
                        color: '#1473d6'
                        font-size: 12px
                        font-weight: '600'
      - component: div
        config:
          style:
            position: relative
            display: grid
            grid-template-columns: repeat(3, minmax(0, 1fr))
            gap: 14px
            margin-top: 18px
            z-index: '2'
        slots:
          default:
          - component: f7-card
            config:
              style:
                height: 96px
                margin: 4px
                border-radius: 20px
                background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                overflow: hidden
                position: relative
            slots:
              default:
              - component: div
                config:
                  style:
                    background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10) 45%, rgba(0,170,40,0) 75%)
                    border-radius: 50%
                    height: 78px
                    position: absolute
                    right: 8px
                    top: 10px
                    width: 98px
                    z-index: '0'
              - component: Label
                config:
                  text: 🔥
                  style:
                    position: absolute
                    right: 28px
                    top: 30px
                    font-size: 34px
                    line-height: 34px
                    opacity: '0.92'
                    z-index: '2'
              - component: Label
                config:
                  text: Požár
                  style:
                    position: absolute
                    left: 16px
                    top: 14px
                    z-index: '5'
                    color: '#004d00'
                    font-size: 16px
                    font-weight: bold
              - component: Label
                config:
                  text: 'Stav: OK'
                  style:
                    position: absolute
                    left: 16px
                    bottom: 14px
                    z-index: '5'
                    color: '#008000'
                    font-size: 12px
                    font-weight: '600'
          - component: f7-card
            config:
              style:
                height: 96px
                margin: 4px
                border-radius: 20px
                background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                overflow: hidden
                position: relative
            slots:
              default:
              - component: div
                config:
                  style:
                    background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10) 45%, rgba(0,170,40,0) 75%)
                    border-radius: 50%
                    height: 78px
                    position: absolute
                    right: 8px
                    top: 10px
                    width: 98px
                    z-index: '0'
              - component: Label
                config:
                  text: ⛽
                  style:
                    position: absolute
                    right: 28px
                    top: 30px
                    font-size: 34px
                    line-height: 34px
                    opacity: '0.92'
                    z-index: '2'
              - component: Label
                config:
                  text: Plyn
                  style:
                    position: absolute
                    left: 16px
                    top: 14px
                    z-index: '5'
                    color: '#004d00'
                    font-size: 16px
                    font-weight: bold
              - component: Label
                config:
                  text: 'Stav: OK'
                  style:
                    position: absolute
                    left: 16px
                    bottom: 14px
                    z-index: '5'
                    color: '#008000'
                    font-size: 12px
                    font-weight: '600'
          - component: f7-card
            config:
              style:
                height: 96px
                margin: 4px
                border-radius: 20px
                background: linear-gradient(to bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%, 96%, 0.82), 12%, rgba(255,255,255,0.72))
                box-shadow: 0px 6px 18px rgba(20,115,214,0.18), 0px 0px 14px rgba(80,160,255,0.13)
                overflow: hidden
                position: relative
            slots:
              default:
              - component: div
                config:
                  style:
                    background: radial-gradient(circle, rgba(80,160,255,0.24) 0%, rgba(20,115,214,0.10) 45%, rgba(20,115,214,0) 75%)
                    border-radius: 50%
                    height: 78px
                    position: absolute
                    right: 8px
                    top: 10px
                    width: 98px
                    z-index: '0'
              - component: Label
                config:
                  text: 🎥
                  style:
                    position: absolute
                    right: 28px
                    top: 30px
                    font-size: 34px
                    line-height: 34px
                    opacity: '0.92'
                    z-index: '2'
              - component: Label
                config:
                  text: Kamery
                  style:
                    position: absolute
                    left: 16px
                    top: 14px
                    z-index: '5'
                    color: '#004a86'
                    font-size: 16px
                    font-weight: bold
              - component: Label
                config:
                  text: 6 online
                  style:
                    position: absolute
                    left: 16px
                    bottom: 14px
                    z-index: '5'
                    color: '#1473d6'
                    font-size: 12px
                    font-weight: '600'
  - component: div
    config:
      style:
        display: grid
        grid-template-columns: repeat(3, minmax(0, 1fr))
        gap: 14px
        width: 100%
        box-sizing: border-box
    slots:
      default:
      - component: f7-card
        config:
          style:
            margin: '0'
            height: 96px
            border-radius: 26px
            background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247,248,251,0.98) 100%)
            box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
            position: relative
            overflow: hidden
            cursor: pointer
          action: navigate
          actionPage: page:prizemi
        slots:
          default:
          - component: Label
            config:
              text: Přízemí
              style:
                position: absolute
                left: 22px
                top: 34px
                color: '#1a1a1a'
                font-size: 22px
                font-weight: '700'
          - component: Label
            config:
              text: ⌂
              style:
                position: absolute
                right: 24px
                top: 31px
                font-size: 28px
                line-height: 28px
                opacity: '0.78'
      - component: f7-card
        config:
          style:
            margin: '0'
            height: 96px
            border-radius: 26px
            background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247,248,251,0.98) 100%)
            box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
            position: relative
            overflow: hidden
            cursor: pointer
          action: navigate
          actionPage: page:podkrovi
        slots:
          default:
          - component: Label
            config:
              text: Podkroví
              style:
                position: absolute
                left: 22px
                top: 34px
                color: '#1a1a1a'
                font-size: 22px
                font-weight: '700'
          - component: Label
            config:
              text: ⌃
              style:
                position: absolute
                right: 24px
                top: 31px
                font-size: 28px
                line-height: 28px
                opacity: '0.78'
      - component: f7-card
        config:
          style:
            margin: '0'
            height: 96px
            border-radius: 26px
            background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(247,248,251,0.98) 100%)
            box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
            position: relative
            overflow: hidden
            cursor: pointer
          action: navigate
          actionPage: page:technicka_cast
        slots:
          default:
          - component: Label
            config:
              text: Technická část
              style:
                position: absolute
                left: 22px
                top: 34px
                color: '#1a1a1a'
                font-size: 22px
                font-weight: '700'
          - component: Label
            config:
              text: ⚙
              style:
                position: absolute
                right: 24px
                top: 31px
                font-size: 28px
                line-height: 28px
                opacity: '0.78'

Robert_Koperdak · May 28, 2026, 9:51am

uid: veliny_master_voda_mini
tags: []
props:
  parameters:
    - context: item
      label: Item s alarm stavem
      name: alarmItem
      required: true
      type: TEXT
    - context: item
      label: Item s textem
      name: textItem
      required: true
      type: TEXT
    - label: Název
      name: nazev
      required: true
      type: TEXT
    - label: Cílová stránka
      name: targetPage
      required: true
      type: TEXT
timestamp: May 24, 2026, 3:08:36 AM
component: f7-card
config:
  style:
    background: '=Number(items[props.alarmItem].state) > 0 ? "linear-gradient(to
      bottom, hsla(0, 90%, 60%, 1), hsla(0, 90%, 95%, 1), 10% , hsla(0, 0%,
      100%, 1) )" : "linear-gradient(to bottom, hsla(210, 90%, 58%, 1),
      hsla(210, 90%, 95%, 1), 10% , hsla(0, 0%, 100%, 1) )"'
    border-radius: 20px
    box-shadow: '=Number(items[props.alarmItem].state) > 0 ? "0px 6px 18px rgba(255,
      0, 0, 0.28), 0px 0px 14px rgba(255, 80, 80, 0.22)" : "0px 6px 18px rgba(0,
      122, 255, 0.24), 0px 0px 14px rgba(80, 150, 255, 0.18)"'
    height: 96px
    margin: 4px
    overflow: hidden
    position: relative
slots:
  default:
    - component: oh-link
      config:
        action: navigate
        actionPage: =props.targetPage
        style:
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
          z-index: 10
    - component: oh-image
      config:
        style:
          height: '=Number(items[props.alarmItem].state) > 0 ? "78px" : "72px"'
          object-fit: contain
          opacity: "0.98"
          position: absolute
          right: '=Number(items[props.alarmItem].state) > 0 ? "8px" : "12px"'
          top: '=Number(items[props.alarmItem].state) > 0 ? "8px" : "11px"'
          transition: all 0.3s ease
          width: '=Number(items[props.alarmItem].state) > 0 ? "78px" : "72px"'
          z-index: 1
        url: '=Number(items[props.alarmItem].state) > 0 ?
          "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIj4KPGRlZnM+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJhdXJhIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNzA3MCIgc3RvcC1vcGFjaXR5PSIwLjM4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIgc3RvcC1vcGFjaXR5PSIwLjE2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImRyb3AiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmIzYjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGZpbHRlciBpZD0ic2hhZG93IiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSI1IiBzdGREZXZpYXRpb249IjUiIGZsb29kLWNvbG9yPSIjZmYzYjMwIiBmbG9vZC1vcGFjaXR5PSIwLjMyIi8+CiAgPC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiLz4KPGNpcmNsZSBjeD0iODQiIGN5PSI5MSIgcj0iNTgiIGZpbGw9InVybCgjYXVyYSkiLz4KPGcgZmlsdGVyPSJ1cmwoI3NoYWRvdykiPgogIDxwYXRoIGQ9Ik04NiAzMSBDMTAzIDU1IDEyMiA3MyAxMjIgOTYgQzEyMiAxMjAgMTA0IDEzNyA4MiAxMzcgQzYwIDEzNyA0MyAxMjAgNDMgOTggQzQzIDc0IDY3IDU1IDg2IDMxIFoiIGZpbGw9InVybCgjZHJvcCkiIHRyYW5zZm9ybT0icm90YXRlKDEyIDgyIDg2KSIvPgogIDxlbGxpcHNlIGN4PSI3MyIgY3k9IjcwIiByeD0iOCIgcnk9IjE5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgyOCA3MyA3MCkiLz4KICA8cGF0aCBkPSJNMzkgODMgQzQ4IDk2IDU4IDEwNSA1OCAxMTggQzU4IDEzMSA0OCAxNDAgMzYgMTQwIEMyNCAxNDAgMTUgMTMxIDE1IDExOSBDMTUgMTA1IDI5IDk1IDM5IDgzIFoiIGZpbGw9InVybCgjZHJvcCkiIG9wYWNpdHk9IjAuODgiLz4KICA8cGF0aCBkPSJNMTMwIDgzIEMxMzkgOTYgMTQ5IDEwNSAxNDkgMTE4IEMxNDkgMTMxIDEzOSAxNDAgMTI3IDE0MCBDMTE1IDE0MCAxMDYgMTMxIDEwNiAxMTkgQzEwNiAxMDUgMTIwIDk1IDEzMCA4MyBaIiBmaWxsPSJ1cmwoI2Ryb3ApIiBvcGFjaXR5PSIwLjg4Ii8+CjwvZz4KPC9zdmc+"
          :
          "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIj4KPGRlZnM+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJhdXJhIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwYTBmZiIgc3RvcC1vcGFjaXR5PSIwLjM4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIgc3RvcC1vcGFjaXR5PSIwLjE2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImRyb3AiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiM2RjZmYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGZpbHRlciBpZD0ic2hhZG93IiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSI1IiBzdGREZXZpYXRpb249IjUiIGZsb29kLWNvbG9yPSIjMDA3YWZmIiBmbG9vZC1vcGFjaXR5PSIwLjMyIi8+CiAgPC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiLz4KPGNpcmNsZSBjeD0iODQiIGN5PSI5MSIgcj0iNTgiIGZpbGw9InVybCgjYXVyYSkiLz4KPGcgZmlsdGVyPSJ1cmwoI3NoYWRvdykiPgogIDxwYXRoIGQ9Ik04NiAzMSBDMTAzIDU1IDEyMiA3MyAxMjIgOTYgQzEyMiAxMjAgMTA0IDEzNyA4MiAxMzcgQzYwIDEzNyA0MyAxMjAgNDMgOTggQzQzIDc0IDY3IDU1IDg2IDMxIFoiIGZpbGw9InVybCgjZHJvcCkiIHRyYW5zZm9ybT0icm90YXRlKDEyIDgyIDg2KSIvPgogIDxlbGxpcHNlIGN4PSI3MyIgY3k9IjcwIiByeD0iOCIgcnk9IjE5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgyOCA3MyA3MCkiLz4KICA8cGF0aCBkPSJNMzkgODMgQzQ4IDk2IDU4IDEwNSA1OCAxMTggQzU4IDEzMSA0OCAxNDAgMzYgMTQwIEMyNCAxNDAgMTUgMTMxIDE1IDExOSBDMTUgMTA1IDI5IDk1IDM5IDgzIFoiIGZpbGw9InVybCgjZHJvcCkiIG9wYWNpdHk9IjAuODgiLz4KICA8cGF0aCBkPSJNMTMwIDgzIEMxMzkgOTYgMTQ5IDEwNSAxNDkgMTE4IEMxNDkgMTMxIDEzOSAxNDAgMTI3IDE0MCBDMTE1IDE0MCAxMDYgMTMxIDEwNiAxMTkgQzEwNiAxMDUgMTIwIDk1IDEzMCA4MyBaIiBmaWxsPSJ1cmwoI2Ryb3ApIiBvcGFjaXR5PSIwLjg4Ii8+CjwvZz4KPC9zdmc+"'
    - component: Label
      config:
        style:
          color: '=Number(items[props.alarmItem].state) > 0 ? "#660000" : "#003366"'
          font-size: 16px
          font-weight: bold
          left: 16px
          position: absolute
          top: 14px
          z-index: 5
        text: =props.nazev
    - component: Label
      config:
        style:
          bottom: 14px
          color: '=Number(items[props.alarmItem].state) > 0 ? "#cc0000" : "#007aff"'
          font-size: 12px
          font-weight: 600
          left: 16px
          position: absolute
          z-index: 5
        text: =items[props.textItem].state

Robert_Koperdak · May 28, 2026, 9:52am

uid: veliny_master_zasuvky_mini
tags: []
props:
  parameters:
    - context: item
      label: Skupina všech zásuvek
      name: groupItem
      required: true
      type: TEXT
    - context: item
      label: Item s počtem zapnutých zásuvek
      name: countItem
      required: true
      type: TEXT
    - label: Název
      name: nazev
      required: true
      type: TEXT
timestamp: May 22, 2026, 12:23:41 PM
component: f7-card
config:
  style:
    background: '=Number(items[props.countItem].state) > 0 ? "linear-gradient(to
      bottom, hsla(125, 70%, 45%, 1), hsla(125, 70%, 95%, 1), 12%, hsla(0, 0%,
      100%, 1))" : "white"'
    border-radius: 20px
    box-shadow: '=Number(items[props.countItem].state) > 0 ? "0px 6px 18px rgba(0,
      180, 40, 0.28), 0px 0px 14px rgba(60, 220, 90, 0.22)" : "0px 4px 12px
      rgba(0,0,0,0.05)"'
    height: 96px
    margin: 4px
    overflow: hidden
    position: relative
slots:
  default:
    - component: oh-link
      config:
        action: command
        actionCommand: OFF
        actionItem: =props.groupItem
        style:
          height: 100%
          left: 0
          position: absolute
          top: 0
          width: 100%
          z-index: 10
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ?
            "radial-gradient(circle, rgba(70,220,90,0.30) 0%,
            rgba(0,170,40,0.12) 42%, rgba(0,170,40,0) 75%)" : "transparent"'
          border-radius: 50%
          height: 78px
          position: absolute
          right: 8px
          top: 10px
          width: 98px
          z-index: 0
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ?
            "linear-gradient(145deg, #13a020 0%, #087d12 100%)" :
            "linear-gradient(145deg, #eeeeee 0%, #d0d0d0 100%)"'
          border-radius: 8px
          box-shadow: '=Number(items[props.countItem].state) > 0 ? "0 0 8px
            rgba(0,180,40,0.28), inset 0 2px 2px rgba(255,255,255,0.20), inset 0
            -3px 6px rgba(0,0,0,0.14)" : "inset 0 2px 2px rgba(255,255,255,0.6),
            inset 0 -3px 6px rgba(0,0,0,0.08)"'
          height: 24px
          opacity: '=Number(items[props.countItem].state) > 0 ? "0.88" : "0.22"'
          position: absolute
          right: 66px
          top: 48px
          transform: rotate(-8deg)
          width: 24px
          z-index: 1
    - component: div
      config:
        style:
          background: white
          border-radius: 50%
          box-shadow: inset 0 1px 3px rgba(0,0,0,0.10)
          height: 14px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 71px
          top: 53px
          width: 14px
          z-index: 2
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 76px
          top: 54px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 80px
          top: 61px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 73px
          top: 61px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ?
            "linear-gradient(145deg, #13a020 0%, #087d12 100%)" :
            "linear-gradient(145deg, #eeeeee 0%, #d0d0d0 100%)"'
          border-radius: 8px
          box-shadow: '=Number(items[props.countItem].state) > 0 ? "0 0 8px
            rgba(0,180,40,0.28), inset 0 2px 2px rgba(255,255,255,0.20), inset 0
            -3px 6px rgba(0,0,0,0.14)" : "inset 0 2px 2px rgba(255,255,255,0.6),
            inset 0 -3px 6px rgba(0,0,0,0.08)"'
          height: 24px
          opacity: '=Number(items[props.countItem].state) > 0 ? "0.88" : "0.22"'
          position: absolute
          right: 18px
          top: 48px
          transform: rotate(8deg)
          width: 24px
          z-index: 1
    - component: div
      config:
        style:
          background: white
          border-radius: 50%
          box-shadow: inset 0 1px 3px rgba(0,0,0,0.10)
          height: 14px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 23px
          top: 53px
          width: 14px
          z-index: 2
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 28px
          top: 54px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 32px
          top: 61px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          height: 3px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.55"'
          position: absolute
          right: 25px
          top: 61px
          width: 3px
          z-index: 3
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ?
            "linear-gradient(145deg, #13a020 0%, #087d12 100%)" :
            "linear-gradient(145deg, #eeeeee 0%, #d0d0d0 100%)"'
          border-radius: 10px
          box-shadow: '=Number(items[props.countItem].state) > 0 ? "0 0 12px
            rgba(0,180,40,0.40), inset 0 2px 3px rgba(255,255,255,0.24), inset 0
            -4px 8px rgba(0,0,0,0.16)" : "inset 0 2px 3px rgba(255,255,255,0.7),
            inset 0 -4px 8px rgba(0,0,0,0.10)"'
          height: 38px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.30"'
          position: absolute
          right: 38px
          top: 34px
          width: 38px
          z-index: 4
    - component: div
      config:
        style:
          background: white
          border-radius: 50%
          box-shadow: inset 0 1px 4px rgba(0,0,0,0.12)
          height: 22px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.58"'
          position: absolute
          right: 46px
          top: 42px
          width: 22px
          z-index: 5
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.22)
          height: 5px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.58"'
          position: absolute
          right: 54px
          top: 44px
          width: 5px
          z-index: 6
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.22)
          height: 5px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.58"'
          position: absolute
          right: 60px
          top: 53px
          width: 5px
          z-index: 6
    - component: div
      config:
        style:
          background: '=Number(items[props.countItem].state) > 0 ? "#0b8f17" : "#8f8f8f"'
          border-radius: 50%
          box-shadow: inset 0 1px 1px rgba(0,0,0,0.22)
          height: 5px
          opacity: '=Number(items[props.countItem].state) > 0 ? "1" : "0.58"'
          position: absolute
          right: 48px
          top: 53px
          width: 5px
          z-index: 6
    - component: div
      config:
        style:
          background: rgba(255,255,255,0.22)
          border-radius: 50%
          height: 7px
          opacity: '=Number(items[props.countItem].state) > 0 ? "0.70" : "0.18"'
          position: absolute
          right: 48px
          top: 36px
          transform: rotate(-18deg)
          width: 14px
          z-index: 7
    - component: Label
      config:
        style:
          color: '=Number(items[props.countItem].state) > 0 ? "#004d00" : "#333333"'
          font-size: 16px
          font-weight: bold
          left: 16px
          position: absolute
          top: 14px
          z-index: 8
        text: =props.nazev
    - component: Label
      config:
        style:
          bottom: 14px
          color: '=Number(items[props.countItem].state) > 0 ? "#008000" : "gray"'
          font-size: 12px
          font-weight: 600
          left: 16px
          position: absolute
          z-index: 8
        text: '=Number(items[props.countItem].state) > 0 ? "Zapnuto " +
          Math.trunc(Number(items[props.countItem].state)) : "Vše vypnuto"'

hmerk · May 29, 2026, 3:57pm

Coud you please edit the post with your
veliny_dashboard_main
code and use the correct code fences. It is badly formatted and therefore not useable.
Thanks!

Robert_Koperdak · May 29, 2026, 5:54pm

uid: veliny_dashboard_main
tags: []
props:
  parameters: []
timestamp: May 25, 2026, 2:03:17 PM
component: div
config:
  style:
    background: >
      radial-gradient(circle at 12% 18%, rgba(0, 122, 255, 0.10) 0%, rgba(0,
      122, 255, 0) 30%), radial-gradient(circle at 88% 16%, rgba(52, 199, 89,
      0.10) 0%, rgba(52, 199, 89, 0) 30%), radial-gradient(circle at 82% 82%,
      rgba(255, 59, 48, 0.07) 0%, rgba(255, 59, 48, 0) 25%),
      radial-gradient(circle at 18% 84%, rgba(255, 149, 0, 0.06) 0%, rgba(255,
      149, 0, 0) 24%), linear-gradient(180deg, #f6f7fb 0%, #eef1f6 55%, #e9edf3
      100%)
    box-sizing: border-box
    min-height: 100%
    overflow: visible
    padding: 10px
    width: 100%
slots:
  default:
    - component: div
      config:
        style:
          box-sizing: border-box
          display: flex
          flex-direction: column
          gap: 14px
          width: 100%
      slots:
        default:
          - component: div
            config:
              style:
                align-items: start
                box-sizing: border-box
                display: grid
                gap: 14px
                grid-template-columns: minmax(320px, 1.08fr) minmax(520px, 1.92fr)
                width: 100%
            slots:
              default:
                - component: div
                  config:
                    style:
                      box-sizing: border-box
                      display: flex
                      flex-direction: column
                      gap: 14px
                      min-width: 0
                  slots:
                    default:
                      - component: widget:veliny_clock_card
                        config:
                          homeName: Veliny 47
                      - component: div
                        config:
                          style:
                            box-sizing: border-box
                            display: grid
                            gap: 14px
                            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
                            min-width: 0
                        slots:
                          default:
                            - component: widget:veliny_master_topeni_mini
                              config:
                                activeItem: Topeni_AktivniZony
                                nazev: Topení
                                targetPage: page:termostaty
                                tempItem: Topeni_PrumernaTeplota
                                totalCount: 10
                            - component: widget:veliny_master_okna_mini
                              config:
                                countItem: Pocet_oken
                                nazev: Okna
                - component: div
                  config:
                    style:
                      box-sizing: border-box
                      display: flex
                      flex-direction: column
                      gap: 14px
                      min-width: 0
                  slots:
                    default:
                      - component: widget:veliny_master_alarm_panel
                        config: {}
                      - component: div
                        config:
                          style:
                            box-sizing: border-box
                            display: grid
                            gap: 14px
                            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
                            min-width: 0
                        slots:
                          default:
                            - component: widget:veliny_master_svetla_mini
                              config:
                                countItem: PocetRozsvicenychSvetel
                                groupItem: gVsechnaSvetla
                                nazev: Světla
                            - component: widget:veliny_master_zasuvky_mini
                              config:
                                countItem: Pocet_zapnutych_zasuvek
                                groupItem: gVsechnyZasuvky
                                nazev: Zásuvky
                            - component: widget:veliny_master_voda_mini
                              config:
                                alarmItem: Voda_Master_Alarm
                                nazev: Voda
                                targetPage: page:voda
                                textItem: Voda_Master_Text
                            - component: widget:veliny_master_dvere_mini
                              config:
                                countItem: Pocet_dveri
                                nazev: Dveře
                            - component: f7-card
                              config:
                                style:
                                  background: >
                                    radial-gradient(circle at 78% 24%,
                                    rgba(255,149,0,0.18) 0%,
                                    rgba(255,149,0,0.07) 42%, rgba(255,149,0,0)
                                    76%), linear-gradient(to bottom, hsla(12,
                                    90%, 60%, 1), hsla(12, 90%, 96%, 1), 12%,
                                    hsla(0, 0%, 100%, 1))
                                  border-radius: 20px
                                  box-shadow: 0px 6px 18px rgba(255,120,0,0.22), 0px 0px 14px
                                    rgba(255,160,60,0.18)
                                  height: 96px
                                  margin: 4px
                                  overflow: hidden
                                  position: relative
                              slots:
                                default:
                                  - component: div
                                    config:
                                      style:
                                        background: radial-gradient(circle, rgba(255,170,60,0.24) 0%,
                                          rgba(255,140,0,0.10) 42%,
                                          rgba(255,140,0,0) 76%)
                                        border-radius: 50%
                                        height: 78px
                                        position: absolute
                                        right: 8px
                                        top: 8px
                                        width: 86px
                                        z-index: 0
                                  - component: Label
                                    config:
                                      style:
                                        color: "#7a2d00"
                                        font-size: 15px
                                        font-weight: 650
                                        left: 14px
                                        position: absolute
                                        top: 12px
                                        z-index: 2
                                      text: Požár
                                  - component: Label
                                    config:
                                      style:
                                        bottom: 14px
                                        color: "#cc5a00"
                                        font-size: 11px
                                        font-weight: 600
                                        left: 14px
                                        position: absolute
                                        z-index: 2
                                      text: V pořádku
                                  - component: Label
                                    config:
                                      style:
                                        font-size: 36px
                                        line-height: 36px
                                        position: absolute
                                        right: 24px
                                        top: 24px
                                        z-index: 2
                                      text: 🔥
                            - component: f7-card
                              config:
                                style:
                                  background: >
                                    radial-gradient(circle at 78% 24%,
                                    rgba(78,145,255,0.16) 0%,
                                    rgba(78,145,255,0.06) 42%,
                                    rgba(78,145,255,0) 76%), linear-gradient(to
                                    bottom, hsla(205, 80%, 58%, 1), hsla(205,
                                    80%, 96%, 1), 12%, hsla(0, 0%, 100%, 1))
                                  border-radius: 20px
                                  box-shadow: 0px 6px 18px rgba(80,150,255,0.22), 0px 0px 14px
                                    rgba(110,180,255,0.18)
                                  height: 96px
                                  margin: 4px
                                  overflow: hidden
                                  position: relative
                              slots:
                                default:
                                  - component: div
                                    config:
                                      style:
                                        background: radial-gradient(circle, rgba(120,170,255,0.22) 0%,
                                          rgba(70,130,255,0.08) 42%,
                                          rgba(70,130,255,0) 76%)
                                        border-radius: 50%
                                        height: 78px
                                        position: absolute
                                        right: 8px
                                        top: 8px
                                        width: 86px
                                        z-index: 0
                                  - component: Label
                                    config:
                                      style:
                                        color: "#0b4a84"
                                        font-size: 15px
                                        font-weight: 650
                                        left: 14px
                                        position: absolute
                                        top: 12px
                                        z-index: 2
                                      text: Plyn
                                  - component: Label
                                    config:
                                      style:
                                        bottom: 14px
                                        color: "#1473d6"
                                        font-size: 11px
                                        font-weight: 600
                                        left: 14px
                                        position: absolute
                                        z-index: 2
                                      text: V pořádku
                                  - component: Label
                                    config:
                                      style:
                                        font-size: 30px
                                        line-height: 30px
                                        position: absolute
                                        right: 24px
                                        top: 24px
                                        z-index: 2
                                      text: ⛽
          - component: f7-card
            config:
              style:
                background: >
                  radial-gradient(circle at 92% 18%, rgba(0,122,255,0.08) 0%,
                  rgba(0,122,255,0) 30%), linear-gradient(180deg,
                  rgba(255,255,255,0.96) 0%, rgba(247,248,251,0.96) 100%)
                border-radius: 28px
                box-shadow: 0px 10px 26px rgba(0,0,0,0.07)
                box-sizing: border-box
                margin: 0
                overflow: hidden
                padding: 20px 18px 18px 18px
                position: relative
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: "#1a1a1a"
                      display: block
                      font-size: 22px
                      font-weight: 700
                      margin-bottom: 18px
                    text: Přízemí
                - component: div
                  config:
                    style:
                      box-sizing: border-box
                      display: grid
                      gap: 12px
                      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
                      width: 100%
                  slots:
                    default:
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Předsíň
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Koupelna
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Hala
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Jídelna
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Kuchyně
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Obývák
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Veranda
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Dílna
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Garáž
          - component: f7-card
            config:
              style:
                background: >
                  radial-gradient(circle at 88% 18%, rgba(255,149,0,0.08) 0%,
                  rgba(255,149,0,0) 30%), linear-gradient(180deg,
                  rgba(255,255,255,0.96) 0%, rgba(247,248,251,0.96) 100%)
                border-radius: 28px
                box-shadow: 0px 10px 26px rgba(0,0,0,0.07)
                box-sizing: border-box
                margin: 0
                overflow: hidden
                padding: 20px 18px 18px 18px
                position: relative
            slots:
              default:
                - component: Label
                  config:
                    style:
                      color: "#1a1a1a"
                      display: block
                      font-size: 22px
                      font-weight: 700
                      margin-bottom: 18px
                    text: Podkroví
                - component: div
                  config:
                    style:
                      box-sizing: border-box
                      display: grid
                      gap: 12px
                      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
                      width: 100%
                  slots:
                    default:
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Chodba
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Ložnice
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Koupelna
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Pracovna
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Pokojíček
                      - component: f7-card
                        config:
                          style:
                            background: "linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%)"
                            border-radius: 18px
                            box-shadow: 0px 6px 16px rgba(0,0,0,0.05)
                            height: 72px
                            margin: 0
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: Label
                              config:
                                style:
                                  color: "#111111"
                                  font-size: 14px
                                  font-weight: 650
                                  left: 14px
                                  position: absolute
                                  top: 24px
                                text: Šatník

Robert_Koperdak · May 29, 2026, 5:55pm

uid: veliny_top_demo4
tags: []
props:
  parameters:
    - context: item
      label: Item úniku vody / vodní alarm
      name: waterLeakItem
      required: false
      type: TEXT
timestamp: May 28, 2026, 9:38:06 AM
component: div
config:
  style:
    width: 100%
    box-sizing: border-box
    padding: 10px
    display: flex
    flex-direction: column
    gap: 14px
slots:
  default:
    - component: div
      config:
        style:
          position: relative
          width: 100%
          padding: 16px
          box-sizing: border-box
          border-radius: 28px
          overflow: hidden
          background: linear-gradient(180deg, rgba(255,255,255,0.48) 0%,
            rgba(244,248,252,0.38) 100%)
          border: 1px solid rgba(255,255,255,0.34)
          box-shadow: 0px 18px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.72)
          backdrop-filter: blur(12px)
          -webkit-backdrop-filter: blur(12px)
      slots:
        default:
          - component: div
            config:
              style:
                position: absolute
                left: 24%
                top: 16%
                width: 180px
                height: 180px
                border-radius: 50%
                background: radial-gradient(circle, rgba(0,210,255,0.10) 0%,
                  rgba(0,210,255,0.04) 45%, rgba(0,210,255,0) 75%)
                z-index: "0"
          - component: div
            config:
              style:
                position: absolute
                right: 18%
                top: 18%
                width: 180px
                height: 180px
                border-radius: 50%
                background: radial-gradient(circle, rgba(52,199,89,0.10) 0%,
                  rgba(52,199,89,0.04) 45%, rgba(52,199,89,0) 75%)
                z-index: "0"
          - component: div
            config:
              style:
                position: relative
                display: grid
                grid-template-columns: 1fr auto auto
                gap: 14px
                align-items: center
                height: 96px
                margin: 4px
                border-radius: 20px
                padding: 12px 16px
                box-sizing: border-box
                background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%,
                  96%, 0.82), 12%, rgba(255,255,255,0.72))
                box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                overflow: hidden
                z-index: "2"
            slots:
              default:
                - component: div
                  config:
                    style:
                      background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10)
                        45%, rgba(0,170,40,0) 75%)
                      border-radius: 50%
                      height: 90px
                      position: absolute
                      right: 8px
                      top: 4px
                      width: 130px
                      z-index: "0"
                - component: div
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      justify-content: center
                      z-index: "2"
                  slots:
                    default:
                      - component: Label
                        config:
                          text: Alarm
                          style:
                            color: "#0d4f2a"
                            font-size: 18px
                            font-weight: bold
                            line-height: 20px
                      - component: Label
                        config:
                          text: Režim doma
                          style:
                            margin-top: 6px
                            color: "#23823a"
                            font-size: 12px
                            font-weight: "600"
                - component: div
                  config:
                    style:
                      display: flex
                      gap: 10px
                      align-items: center
                      z-index: "2"
                  slots:
                    default:
                      - component: div
                        config:
                          style:
                            min-width: 78px
                            height: 34px
                            border-radius: 17px
                            background: linear-gradient(180deg,#34c759 0%,#27a946 100%)
                            box-shadow: 0px 5px 12px rgba(52,199,89,0.28)
                            display: flex
                            justify-content: center
                            align-items: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Doma
                                style:
                                  color: "#ffffff"
                                  font-size: 13px
                                  font-weight: "700"
                      - component: div
                        config:
                          style:
                            min-width: 88px
                            height: 34px
                            border-radius: 17px
                            background: rgba(255,255,255,0.62)
                            display: flex
                            justify-content: center
                            align-items: center
                        slots:
                          default:
                            - component: Label
                              config:
                                text: Odchod
                                style:
                                  color: "#936100"
                                  font-size: 13px
                                  font-weight: "650"
                - component: div
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      align-items: flex-end
                      justify-content: center
                      gap: 4px
                      z-index: "2"
                      min-width: 190px
                  slots:
                    default:
                      - component: Label
                        config:
                          text: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                            ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                            ? "Voda: ÚNIK VODY!" : "Voda: Stav: OK"'
                          style:
                            color: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                              ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                              ? "#cc0000" : "#23823a"'
                            font-size: 12px
                            font-weight: "650"
                            line-height: 14px
                      - component: Label
                        config:
                          text: "Požár: Stav: OK"
                          style:
                            color: "#23823a"
                            font-size: 12px
                            font-weight: "650"
                            line-height: 14px
                      - component: Label
                        config:
                          text: "Plyn: Stav: OK"
                          style:
                            color: "#23823a"
                            font-size: 12px
                            font-weight: "650"
                            line-height: 14px
          - component: div
            config:
              style:
                position: relative
                display: grid
                grid-template-columns: minmax(180px, 1fr) minmax(300px, 340px) minmax(180px, 1fr)
                gap: 18px
                align-items: center
                margin-top: 18px
                z-index: "2"
            slots:
              default:
                - component: div
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      gap: 12px
                      min-width: "0"
                  slots:
                    default:
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: linear-gradient(to bottom, hsla(48, 90%, 54%, 0.95), hsla(48, 90%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))
                            box-shadow: 0px 6px 18px rgba(255,193,7,0.20), 0px 0px 14px
                              rgba(255,214,64,0.15)
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: radial-gradient(circle, rgba(255,221,70,0.28) 0%,
                                    rgba(255,193,7,0.12) 45%, rgba(255,193,7,0)
                                    75%)
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: Label
                              config:
                                text: 💡
                                style:
                                  position: absolute
                                  right: 66px
                                  top: 40px
                                  font-size: 30px
                                  line-height: 30px
                                  opacity: "0.42"
                                  z-index: "2"
                                  transform: rotate(-12deg)
                                  filter: drop-shadow(0 0 4px rgba(255,193,7,0.35))
                            - component: Label
                              config:
                                text: 💡
                                style:
                                  position: absolute
                                  right: 18px
                                  top: 40px
                                  font-size: 30px
                                  line-height: 30px
                                  opacity: "0.42"
                                  z-index: "2"
                                  transform: rotate(12deg)
                                  filter: drop-shadow(0 0 4px rgba(255,193,7,0.35))
                            - component: Label
                              config:
                                text: 💡
                                style:
                                  position: absolute
                                  right: 34px
                                  top: 18px
                                  font-size: 50px
                                  line-height: 50px
                                  opacity: "0.90"
                                  z-index: "2"
                                  filter: drop-shadow(0 0 10px rgba(255,193,7,0.55))
                            - component: Label
                              config:
                                text: Světla
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: "#664d00"
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: Svítí 1
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: "#b38600"
                                  font-size: 12px
                                  font-weight: "600"
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))
                            box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10)
                                    45%, rgba(0,170,40,0) 75%)
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: Label
                              config:
                                text: 🔌
                                style:
                                  position: absolute
                                  right: 30px
                                  top: 25px
                                  font-size: 44px
                                  line-height: 44px
                                  opacity: "0.84"
                                  z-index: "2"
                                  filter: drop-shadow(0 0 8px rgba(52,199,89,0.30))
                            - component: Label
                              config:
                                text: Zásuvky
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: "#004d00"
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: Zapnuto 7
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: "#008000"
                                  font-size: 12px
                                  font-weight: "600"
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                              ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                              ? "linear-gradient(to bottom, hsla(0, 90%, 60%,
                              0.95), hsla(0, 90%, 96%, 0.82), 12%,
                              rgba(255,255,255,0.72))" : "linear-gradient(to
                              bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))"'
                            box-shadow: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                              ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                              ? "0px 6px 18px rgba(255,0,0,0.20), 0px 0px 14px
                              rgba(255,80,80,0.14)" : "0px 6px 18px
                              rgba(20,115,214,0.18), 0px 0px 14px
                              rgba(80,160,255,0.13)"'
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "radial-gradient(circle,
                                    rgba(255,70,70,0.24) 0%, rgba(255,0,0,0.10)
                                    45%, rgba(255,0,0,0) 75%)" :
                                    "radial-gradient(circle,
                                    rgba(80,160,255,0.24) 0%,
                                    rgba(20,115,214,0.10) 45%,
                                    rgba(20,115,214,0) 75%)"'
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: oh-image
                              config:
                                style:
                                  height: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "78px" : "72px"'
                                  object-fit: contain
                                  opacity: "0.98"
                                  position: absolute
                                  right: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "8px" : "12px"'
                                  top: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "8px" : "11px"'
                                  transition: all 0.3s ease
                                  width: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "78px" : "72px"'
                                  z-index: 1
                                url: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                  ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                  ?
                                  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIj4KPGRlZnM+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJhdXJhIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNzA3MCIgc3RvcC1vcGFjaXR5PSIwLjM4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIgc3RvcC1vcGFjaXR5PSIwLjE2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImRyb3AiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmIzYjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmM2IzMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGZpbHRlciBpZD0ic2hhZG93IiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSI1IiBzdGREZXZpYXRpb249IjUiIGZsb29kLWNvbG9yPSIjZmYzYjMwIiBmbG9vZC1vcGFjaXR5PSIwLjMyIi8+CiAgPC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiLz4KPGNpcmNsZSBjeD0iODQiIGN5PSI5MSIgcj0iNTgiIGZpbGw9InVybCgjYXVyYSkiLz4KPGcgZmlsdGVyPSJ1cmwoI3NoYWRvdykiPgogIDxwYXRoIGQ9Ik04NiAzMSBDMTAzIDU1IDEyMiA3MyAxMjIgOTYgQzEyMiAxMjAgMTA0IDEzNyA4MiAxMzcgQzYwIDEzNyA0MyAxMjAgNDMgOTggQzQzIDc0IDY3IDU1IDg2IDMxIFoiIGZpbGw9InVybCgjZHJvcCkiIHRyYW5zZm9ybT0icm90YXRlKDEyIDgyIDg2KSIvPgogIDxlbGxpcHNlIGN4PSI3MyIgY3k9IjcwIiByeD0iOCIgcnk9IjE5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgyOCA3MyA3MCkiLz4KICA8cGF0aCBkPSJNMzkgODMgQzQ4IDk2IDU4IDEwNSA1OCAxMTggQzU4IDEzMSA0OCAxNDAgMzYgMTQwIEMyNCAxNDAgMTUgMTMxIDE1IDExOSBDMTUgMTA1IDI5IDk1IDM5IDgzIFoiIGZpbGw9InVybCgjZHJvcCkiIG9wYWNpdHk9IjAuODgiLz4KICA8cGF0aCBkPSJNMTMwIDgzIEMxMzkgOTYgMTQ5IDEwNSAxNDkgMTE4IEMxNDkgMTMxIDEzOSAxNDAgMTI3IDE0MCBDMTE1IDE0MCAxMDYgMTMxIDEwNiAxMTkgQzEwNiAxMDUgMTIwIDk1IDEzMCA4MyBaIiBmaWxsPSJ1cmwoI2Ryb3ApIiBvcGFjaXR5PSIwLjg4Ii8+CjwvZz4KPC9zdmc+"
                                  :
                                  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIj4KPGRlZnM+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJhdXJhIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwYTBmZiIgc3RvcC1vcGFjaXR5PSIwLjM4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIgc3RvcC1vcGFjaXR5PSIwLjE2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8bGluZWFyR3JhZGllbnQgaWQ9ImRyb3AiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNiM2RjZmYiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwN2FmZiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPGZpbHRlciBpZD0ic2hhZG93IiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSI1IiBzdGREZXZpYXRpb249IjUiIGZsb29kLWNvbG9yPSIjMDA3YWZmIiBmbG9vZC1vcGFjaXR5PSIwLjMyIi8+CiAgPC9maWx0ZXI+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIGZpbGw9Im5vbmUiLz4KPGNpcmNsZSBjeD0iODQiIGN5PSI5MSIgcj0iNTgiIGZpbGw9InVybCgjYXVyYSkiLz4KPGcgZmlsdGVyPSJ1cmwoI3NoYWRvdykiPgogIDxwYXRoIGQ9Ik04NiAzMSBDMTAzIDU1IDEyMiA3MyAxMjIgOTYgQzEyMiAxMjAgMTA0IDEzNyA4MiAxMzcgQzYwIDEzNyA0MyAxMjAgNDMgOTggQzQzIDc0IDY3IDU1IDg2IDMxIFoiIGZpbGw9InVybCgjZHJvcCkiIHRyYW5zZm9ybT0icm90YXRlKDEyIDgyIDg2KSIvPgogIDxlbGxpcHNlIGN4PSI3MyIgY3k9IjcwIiByeD0iOCIgcnk9IjE5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgyOCA3MyA3MCkiLz4KICA8cGF0aCBkPSJNMzkgODMgQzQ4IDk2IDU4IDEwNSA1OCAxMTggQzU4IDEzMSA0OCAxNDAgMzYgMTQwIEMyNCAxNDAgMTUgMTMxIDE1IDExOSBDMTUgMTA1IDI5IDk1IDM5IDgzIFoiIGZpbGw9InVybCgjZHJvcCkiIG9wYWNpdHk9IjAuODgiLz4KICA8cGF0aCBkPSJNMTMwIDgzIEMxMzkgOTYgMTQ5IDEwNSAxNDkgMTE4IEMxNDkgMTMxIDEzOSAxNDAgMTI3IDE0MCBDMTE1IDE0MCAxMDYgMTMxIDEwNiAxMTkgQzEwNiAxMDUgMTIwIDk1IDEzMCA4MyBaIiBmaWxsPSJ1cmwoI2Ryb3ApIiBvcGFjaXR5PSIwLjg4Ii8+CjwvZz4KPC9zdmc+"'
                            - component: Label
                              config:
                                text: Voda
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "#660000" : "#004a86"'
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                  ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                  ? "ÚNIK VODY!" : "Stav: OK"'
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: '=(props.waterLeakItem && items[props.waterLeakItem] &&
                                    ["ON","OPEN","ALARM","UNIK","LEAK","TRUE"].includes(items[props.waterLeakItem].state.toString().toUpperCase()))
                                    ? "#cc0000" : "#007aff"'
                                  font-size: 12px
                                  font-weight: "700"
                - component: div
                  config:
                    style:
                      display: flex
                      justify-content: center
                      align-items: center
                      min-width: "0"
                  slots:
                    default:
                      - component: div
                        config:
                          style:
                            width: 300px
                            height: 300px
                            border-radius: 50%
                            position: relative
                            overflow: hidden
                            background: radial-gradient(circle at 50% 50%, rgba(18,30,40,0.08) 0%,
                              rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.10)
                              55%, rgba(255,255,255,0.06) 100%)
                            border: 1px solid rgba(255,255,255,0.22)
                            box-shadow: 0px 18px 40px rgba(0,0,0,0.06), inset 0 0 0 10px
                              rgba(255,255,255,0.04), inset 0 0 0 22px
                              rgba(0,210,255,0.05)
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  position: absolute
                                  left: 18px
                                  top: 18px
                                  width: 264px
                                  height: 264px
                                  border-radius: 50%
                                  border: 2px solid rgba(0,210,255,0.28)
                                  box-shadow: 0 0 18px rgba(0,210,255,0.10)
                                  z-index: "1"
                            - component: div
                              config:
                                style:
                                  position: absolute
                                  left: 42px
                                  top: 42px
                                  width: 216px
                                  height: 216px
                                  border-radius: 50%
                                  border: 2px dashed rgba(255,255,255,0.16)
                                  z-index: "1"
                            - component: Label
                              config:
                                text: =dayjs().locale("cs").format("dddd D. MMMM")
                                style:
                                  position: absolute
                                  left: "0"
                                  right: "0"
                                  top: 56px
                                  text-align: center
                                  color: "#8c8c91"
                                  font-size: 14px
                                  font-weight: "500"
                                  text-transform: capitalize
                                  z-index: "3"
                            - component: Label
                              config:
                                text: =dayjs().format("HH:mm")
                                style:
                                  position: absolute
                                  left: "0"
                                  right: "0"
                                  top: 102px
                                  text-align: center
                                  color: "#111111"
                                  font-size: 58px
                                  line-height: 58px
                                  font-weight: "650"
                                  letter-spacing: -1.8px
                                  z-index: "3"
                            - component: Label
                              config:
                                text: Veliny 47
                                style:
                                  position: absolute
                                  left: "0"
                                  right: "0"
                                  bottom: 86px
                                  text-align: center
                                  color: "#5f6065"
                                  font-size: 18px
                                  font-weight: "600"
                                  z-index: "3"
                            - component: Label
                              config:
                                text: =items["Pocasi_Ikona"].state.toString() + " " +
                                  items["Pocasi_Teplota_Text"].state.toString()
                                style:
                                  position: absolute
                                  left: "0"
                                  right: "0"
                                  bottom: 56px
                                  text-align: center
                                  color: "#303236"
                                  font-size: 14px
                                  font-weight: "650"
                                  z-index: "3"
                            - component: Label
                              config:
                                text: =items["Pocasi_Stav_Text"].state.toString()
                                style:
                                  position: absolute
                                  left: "0"
                                  right: "0"
                                  bottom: 38px
                                  text-align: center
                                  color: "#8a8d93"
                                  font-size: 11px
                                  font-weight: "500"
                                  z-index: "3"
                - component: div
                  config:
                    style:
                      display: flex
                      flex-direction: column
                      gap: 12px
                      min-width: "0"
                  slots:
                    default:
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))
                            box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10)
                                    45%, rgba(0,170,40,0) 75%)
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: Label
                              config:
                                text: 🚪
                                style:
                                  position: absolute
                                  right: 34px
                                  top: 20px
                                  font-size: 48px
                                  line-height: 48px
                                  opacity: "0.78"
                                  z-index: "2"
                                  filter: drop-shadow(0 0 8px rgba(52,199,89,0.18))
                            - component: Label
                              config:
                                text: Dveře
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: "#004d00"
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: Zavřeny
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: "#008000"
                                  font-size: 12px
                                  font-weight: "600"
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: linear-gradient(to bottom, hsla(0, 90%, 60%, 0.95), hsla(0, 90%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))
                            box-shadow: 0px 6px 18px rgba(255,0,0,0.20), 0px 0px 14px rgba(255,80,80,0.14)
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: radial-gradient(circle, rgba(255,70,70,0.24) 0%, rgba(255,0,0,0.10)
                                    45%, rgba(255,0,0,0) 75%)
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: Label
                              config:
                                text: 🪟
                                style:
                                  position: absolute
                                  right: 34px
                                  top: 20px
                                  font-size: 48px
                                  line-height: 48px
                                  opacity: "0.82"
                                  z-index: "2"
                                  filter: drop-shadow(0 0 8px rgba(255,0,0,0.18))
                            - component: Label
                              config:
                                text: Okna
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: "#660000"
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: "Otevřena: 3"
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: "#cc0000"
                                  font-size: 12px
                                  font-weight: "600"
                      - component: f7-card
                        config:
                          style:
                            height: 96px
                            margin: 4px
                            border-radius: 20px
                            background: linear-gradient(to bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%,
                              96%, 0.82), 12%, rgba(255,255,255,0.72))
                            box-shadow: 0px 6px 18px rgba(20,115,214,0.18), 0px 0px 14px
                              rgba(80,160,255,0.13)
                            overflow: hidden
                            position: relative
                        slots:
                          default:
                            - component: div
                              config:
                                style:
                                  background: radial-gradient(circle, rgba(80,160,255,0.24) 0%,
                                    rgba(20,115,214,0.10) 45%,
                                    rgba(20,115,214,0) 75%)
                                  border-radius: 50%
                                  height: 78px
                                  position: absolute
                                  right: 8px
                                  top: 10px
                                  width: 98px
                                  z-index: "0"
                            - component: Label
                              config:
                                text: 🌡️
                                style:
                                  position: absolute
                                  right: 34px
                                  top: 20px
                                  font-size: 48px
                                  line-height: 48px
                                  opacity: "0.84"
                                  z-index: "2"
                                  filter: drop-shadow(0 0 8px rgba(20,115,214,0.24))
                            - component: Label
                              config:
                                text: Topení
                                style:
                                  position: absolute
                                  left: 16px
                                  top: 14px
                                  z-index: "5"
                                  color: "#004a86"
                                  font-size: 16px
                                  font-weight: bold
                            - component: Label
                              config:
                                text: Ø 26,1 °C
                                style:
                                  position: absolute
                                  left: 16px
                                  bottom: 14px
                                  z-index: "5"
                                  color: "#1473d6"
                                  font-size: 12px
                                  font-weight: "600"
          - component: div
            config:
              style:
                position: relative
                display: grid
                grid-template-columns: repeat(3, minmax(0, 1fr))
                gap: 14px
                margin-top: 18px
                z-index: "2"
            slots:
              default:
                - component: f7-card
                  config:
                    style:
                      height: 96px
                      margin: 4px
                      border-radius: 20px
                      background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%,
                        96%, 0.82), 12%, rgba(255,255,255,0.72))
                      box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                      overflow: hidden
                      position: relative
                  slots:
                    default:
                      - component: div
                        config:
                          style:
                            background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10)
                              45%, rgba(0,170,40,0) 75%)
                            border-radius: 50%
                            height: 78px
                            position: absolute
                            right: 8px
                            top: 10px
                            width: 98px
                            z-index: "0"
                      - component: Label
                        config:
                          text: 🔥
                          style:
                            position: absolute
                            right: 28px
                            top: 30px
                            font-size: 34px
                            line-height: 34px
                            opacity: "0.92"
                            z-index: "2"
                      - component: Label
                        config:
                          text: Požár
                          style:
                            position: absolute
                            left: 16px
                            top: 14px
                            z-index: "5"
                            color: "#004d00"
                            font-size: 16px
                            font-weight: bold
                      - component: Label
                        config:
                          text: "Stav: OK"
                          style:
                            position: absolute
                            left: 16px
                            bottom: 14px
                            z-index: "5"
                            color: "#008000"
                            font-size: 12px
                            font-weight: "600"
                - component: f7-card
                  config:
                    style:
                      height: 96px
                      margin: 4px
                      border-radius: 20px
                      background: linear-gradient(to bottom, hsla(125, 70%, 45%, 0.95), hsla(125, 70%,
                        96%, 0.82), 12%, rgba(255,255,255,0.72))
                      box-shadow: 0px 6px 18px rgba(0,180,40,0.18), 0px 0px 14px rgba(60,220,90,0.14)
                      overflow: hidden
                      position: relative
                  slots:
                    default:
                      - component: div
                        config:
                          style:
                            background: radial-gradient(circle, rgba(70,220,90,0.24) 0%, rgba(0,170,40,0.10)
                              45%, rgba(0,170,40,0) 75%)
                            border-radius: 50%
                            height: 78px
                            position: absolute
                            right: 8px
                            top: 10px
                            width: 98px
                            z-index: "0"
                      - component: Label
                        config:
                          text: ⛽
                          style:
                            position: absolute
                            right: 28px
                            top: 30px
                            font-size: 34px
                            line-height: 34px
                            opacity: "0.92"
                            z-index: "2"
                      - component: Label
                        config:
                          text: Plyn
                          style:
                            position: absolute
                            left: 16px
                            top: 14px
                            z-index: "5"
                            color: "#004d00"
                            font-size: 16px
                            font-weight: bold
                      - component: Label
                        config:
                          text: "Stav: OK"
                          style:
                            position: absolute
                            left: 16px
                            bottom: 14px
                            z-index: "5"
                            color: "#008000"
                            font-size: 12px
                            font-weight: "600"
                - component: f7-card
                  config:
                    style:
                      height: 96px
                      margin: 4px
                      border-radius: 20px
                      background: linear-gradient(to bottom, hsla(207, 90%, 58%, 0.95), hsla(207, 90%,
                        96%, 0.82), 12%, rgba(255,255,255,0.72))
                      box-shadow: 0px 6px 18px rgba(20,115,214,0.18), 0px 0px 14px
                        rgba(80,160,255,0.13)
                      overflow: hidden
                      position: relative
                  slots:
                    default:
                      - component: div
                        config:
                          style:
                            background: radial-gradient(circle, rgba(80,160,255,0.24) 0%,
                              rgba(20,115,214,0.10) 45%, rgba(20,115,214,0) 75%)
                            border-radius: 50%
                            height: 78px
                            position: absolute
                            right: 8px
                            top: 10px
                            width: 98px
                            z-index: "0"
                      - component: Label
                        config:
                          text: 🎥
                          style:
                            position: absolute
                            right: 28px
                            top: 30px
                            font-size: 34px
                            line-height: 34px
                            opacity: "0.92"
                            z-index: "2"
                      - component: Label
                        config:
                          text: Kamery
                          style:
                            position: absolute
                            left: 16px
                            top: 14px
                            z-index: "5"
                            color: "#004a86"
                            font-size: 16px
                            font-weight: bold
                      - component: Label
                        config:
                          text: 6 online
                          style:
                            position: absolute
                            left: 16px
                            bottom: 14px
                            z-index: "5"
                            color: "#1473d6"
                            font-size: 12px
                            font-weight: "600"
    - component: div
      config:
        style:
          display: grid
          grid-template-columns: repeat(3, minmax(0, 1fr))
          gap: 14px
          width: 100%
          box-sizing: border-box
      slots:
        default:
          - component: f7-card
            config:
              style:
                margin: "0"
                height: 96px
                border-radius: 26px
                background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%,
                  rgba(247,248,251,0.98) 100%)
                box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
                position: relative
                overflow: hidden
                cursor: pointer
              action: navigate
              actionPage: page:prizemi
            slots:
              default:
                - component: Label
                  config:
                    text: Přízemí
                    style:
                      position: absolute
                      left: 22px
                      top: 34px
                      color: "#1a1a1a"
                      font-size: 22px
                      font-weight: "700"
                - component: Label
                  config:
                    text: ⌂
                    style:
                      position: absolute
                      right: 24px
                      top: 31px
                      font-size: 28px
                      line-height: 28px
                      opacity: "0.78"
          - component: f7-card
            config:
              style:
                margin: "0"
                height: 96px
                border-radius: 26px
                background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%,
                  rgba(247,248,251,0.98) 100%)
                box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
                position: relative
                overflow: hidden
                cursor: pointer
              action: navigate
              actionPage: page:podkrovi
            slots:
              default:
                - component: Label
                  config:
                    text: Podkroví
                    style:
                      position: absolute
                      left: 22px
                      top: 34px
                      color: "#1a1a1a"
                      font-size: 22px
                      font-weight: "700"
                - component: Label
                  config:
                    text: ⌃
                    style:
                      position: absolute
                      right: 24px
                      top: 31px
                      font-size: 28px
                      line-height: 28px
                      opacity: "0.78"
          - component: f7-card
            config:
              style:
                margin: "0"
                height: 96px
                border-radius: 26px
                background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%,
                  rgba(247,248,251,0.98) 100%)
                box-shadow: 0px 10px 26px rgba(0,0,0,0.06)
                position: relative
                overflow: hidden
                cursor: pointer
              action: navigate
              actionPage: page:technicka_cast
            slots:
              default:
                - component: Label
                  config:
                    text: Technická část
                    style:
                      position: absolute
                      left: 22px
                      top: 34px
                      color: "#1a1a1a"
                      font-size: 22px
                      font-weight: "700"
                - component: Label
                  config:
                    text: ⚙
                    style:
                      position: absolute
                      right: 24px
                      top: 31px
                      font-size: 28px
                      line-height: 28px
                      opacity: "0.78"