State
(custom)
<div style="font-size:110px; text-align:center;">%Calendar.hour%<big id="blink">:</big>%Calendar.minute%</div>
<br>
<div style="font-family:Comic Sans MS; padding:5px; border: 5px groove white; font-size:16px; text-align:center;">%Calendar.data% %Calendar.day%</div>
<br>
<img src="/cms/scenes/styles/system/security_%Security.stateColor%.png" align="absmiddle"> %Security.stateDetails%
<img src="/cms/scenes/styles/system/system_%System.stateColor%.png" align="absmiddle"> %System.stateDetails%
<img src="/cms/scenes/styles/system/communication_%Communication.stateColor%.png" align="absmiddle"> %Communication.stateDetails%
<br>
%ThisComputer.somebodyHomeText%
<br>
<br>
%Belay.fullName%-%Belay.atHome_text%
<div style='font-weight:bold;color:red;display:%Switch0.status|"block;none"%'>Switch0-ON</div>
<div style='font-weight:bold;color:green;display:%Switch0.status|"none;block"%'>Switch0-OFF</div>
<h2 id="blink"></h2>
<style>
#blink {
-webkit-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
@-webkit-keyframes blink {
50% { color: rgb(34, 34, 34); }
51% { color: rgba(34, 34, 34, 0); }
100% { color: rgba(34, 34, 34, 0); }
}
@keyframes blink {
50% { color: rgb(34, 34, 34); }
51% { color: rgba(34, 34, 34, 0); }
100% { color: rgba(34, 34, 34, 0); }
}
</style>