html
(custom)
<link rel="stylesheet" href="/css/ui-kit.css">
<div class="uk-container">
<div class="ui uk-row mb-16">
<div class="ui uk-row">
<span class="ui header uppercase">Гараж</span>
<i class="majordomo icon medium right-floated"></i>
</div>
<div class="ui divider"></div>
<div class="ui uk-row">
<span class="ui header">%ThisComputer.timeNow%</span>
<span class="ui header right-floated">%ThisComputer.Date%</span>
</div>
</div>
<div class="uk-content" style="width: 100%; text-align: center;">
<svg width="533" height="756" viewBox="0 0 533 756" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Garage">
<g id="Group 69">
<line id="Line 8" x1="92" y1="234" x2="137" y2="235" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 9" x1="194" y1="234" x2="477" y2="235" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 10" x1="362" y1="90" x2="87" y2="90" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 11" x1="437" y1="90" x2="477" y2="90" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 12" x1="89" y1="83" x2="89" y2="387" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 13" x1="89" y1="444" x2="89" y2="639" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 14" x1="153" y1="632" x2="90" y2="632" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 15" x1="477" y1="83" x2="477" y2="306" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 16" x1="477" y1="382" x2="477" y2="479" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 17" x1="477" y1="553" x2="477" y2="639" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 18" x1="413" y1="632" x2="475" y2="632" stroke="#3D3E3F" stroke-width="14"/>
<line id="Line 19" x1="362" y1="86.5" x2="437" y2="86.5" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 20" x1="362" y1="92.5" x2="437" y2="92.5" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 21" x1="480.5" y1="306" x2="480.5" y2="382" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 23" x1="480.5" y1="479" x2="480.5" y2="553" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 22" x1="474.5" y1="306" x2="474.5" y2="382" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 24" x1="474.5" y1="479" x2="474.5" y2="553" stroke="#3D3E3F" stroke-width="3"/>
<line id="Line 25" x1="153" y1="637" x2="413" y2="637" stroke="#3D3E3F" stroke-width="2"/>
<line id="Line 26" x1="153" y1="632" x2="413" y2="632" stroke="#3D3E3F" stroke-width="2"/>
<rect id="Rectangle 67" x="138" y="231" width="3" height="6" stroke="#3D3E3F" stroke-width="2"/>
<rect id="Rectangle 69" x="-1" y="-1" width="3" height="6" transform="matrix(0 -1 -1 0 91 442)" stroke="#3D3E3F" stroke-width="2"/>
<rect id="Rectangle 68" x="190" y="231" width="3" height="6" stroke="#3D3E3F" stroke-width="2"/>
<rect id="Rectangle 70" x="-1" y="-1" width="3" height="6" transform="matrix(0 -1 -1 0 91 390)" stroke="#3D3E3F" stroke-width="2"/>
<path id="Ellipse 37" d="M46.1657 422.425C51.0859 428.289 57.2399 432.994 64.1885 436.204C71.137 439.415 78.7087 441.052 86.363 440.999" stroke="#3D3E3F" stroke-width="2"/>
<line id="Line 28" x1="45.3507" y1="423.239" x2="86.3507" y2="388.239" stroke="#3D3E3F" stroke-width="2"/>
</g>
<g id="Garage_Light" filter="url(#filter0_f_324_127)" data-visibility="%swGarageLight.value%">
<ellipse cx="283" cy="430.5" rx="83" ry="125.5" fill="#FFE200" fill-opacity="0.9"/>
</g>
<g id="Boilerroom_Light" filter="url(#filter1_f_324_127)" data-visibility="%swBoilerroomLight.value%">
<ellipse cx="274.5" cy="162" rx="42" ry="153.5" transform="rotate(90 274.5 162)" fill="#FFE200" fill-opacity="0.9"/>
</g>
<g id="DoorButton" onclick="callMethod('swGarageDoor.turnOn');">
<path id="Rectangle Place" d="M259 654C259 648.477 263.477 644 269 644H297C302.523 644 307 648.477 307 654V682C307 687.523 302.523 692 297 692H269C263.477 692 259 687.523 259 682V654Z" fill="#D9D9D9"/>
<g id="open door" clip-path="url(#clip0_324_127)">
<path id="Icon" d="M285.8 676C285.248 676 284.8 676.448 284.8 677C284.8 677.552 285.248 678 285.8 678V676ZM287.908 676.77L288.382 677.651L288.382 677.651L287.908 676.77ZM288.782 675.847L287.881 675.413L287.881 675.413L288.782 675.847ZM278.092 658.23L278.566 659.111L278.566 659.111L278.092 658.23ZM276 661.378C276 661.93 276.448 662.378 277 662.378C277.552 662.378 278 661.93 278 661.378H276ZM277.218 659.153L278.119 659.587V659.587L277.218 659.153ZM288.782 659.153L287.881 659.587V659.587L288.782 659.153ZM287.908 658.23L288.382 657.349L287.908 658.23ZM279.731 659.073L279.366 660.004L279.731 659.073ZM283.731 660.644L284.097 659.714L283.731 660.644ZM282.269 678.927L282.634 677.996H282.634L282.269 678.927ZM278.269 677.356L277.903 678.286H277.903L278.269 677.356ZM285.8 657H280.2V659H285.8V657ZM285.8 678C286.343 678 286.813 678.001 287.2 677.968C287.599 677.933 287.999 677.857 288.382 677.651L287.434 675.889C287.39 675.913 287.295 675.952 287.028 675.975C286.747 675.999 286.377 676 285.8 676V678ZM288 673.622C288 674.229 287.999 674.627 287.976 674.932C287.953 675.226 287.913 675.346 287.881 675.413L289.683 676.282C289.869 675.897 289.938 675.496 289.97 675.086C290.001 674.686 290 674.198 290 673.622H288ZM288.382 677.651C288.95 677.345 289.402 676.863 289.683 676.282L287.881 675.413C287.778 675.626 287.619 675.79 287.434 675.889L288.382 677.651ZM280.2 657C279.657 657 279.187 656.999 278.8 657.032C278.401 657.067 278.001 657.143 277.618 657.349L278.566 659.111C278.61 659.087 278.705 659.048 278.972 659.025C279.253 659.001 279.623 659 280.2 659V657ZM278 661.378C278 660.771 278.001 660.373 278.024 660.068C278.047 659.774 278.087 659.654 278.119 659.587L276.317 658.718C276.131 659.103 276.062 659.504 276.03 659.914C275.999 660.314 276 660.802 276 661.378H278ZM277.618 657.349C277.05 657.655 276.598 658.137 276.317 658.718L278.119 659.587C278.222 659.374 278.381 659.21 278.566 659.111L277.618 657.349ZM290 661.378C290 660.802 290.001 660.314 289.97 659.914C289.938 659.504 289.869 659.103 289.683 658.718L287.881 659.587C287.913 659.654 287.953 659.774 287.976 660.068C287.999 660.373 288 660.771 288 661.378H290ZM285.8 659C286.377 659 286.747 659.001 287.028 659.025C287.295 659.048 287.39 659.087 287.434 659.111L288.382 657.349C287.999 657.143 287.599 657.067 287.2 657.032C286.813 656.999 286.343 657 285.8 657V659ZM289.683 658.718C289.402 658.137 288.95 657.655 288.382 657.349L287.434 659.111C287.619 659.21 287.778 659.374 287.881 659.587L289.683 658.718ZM288 661.378V673.622H290V661.378H288ZM279.366 660.004L283.366 661.575L284.097 659.714L280.097 658.142L279.366 660.004ZM284 662.506V677.065H286V662.506H284ZM282.634 677.996L278.634 676.425L277.903 678.286L281.903 679.858L282.634 677.996ZM278 675.494V660.935H276V675.494H278ZM278.634 676.425C278.252 676.274 278 675.905 278 675.494H276C276 676.728 276.755 677.835 277.903 678.286L278.634 676.425ZM284 677.065C284 677.77 283.29 678.254 282.634 677.996L281.903 679.858C283.871 680.631 286 679.18 286 677.065H284ZM283.366 661.575C283.748 661.726 284 662.095 284 662.506H286C286 661.272 285.245 660.165 284.097 659.714L283.366 661.575ZM280.097 658.142C278.129 657.369 276 658.82 276 660.935H278C278 660.23 278.71 659.746 279.366 660.004L280.097 658.142Z" fill="#3D3E3F"/>
</g>
</g>
<g id="GarageLightButton" onclick="callMethod('swGarageLight.switch');">
<path id="Rectangle Place_2" d="M259 397C259 391.477 263.477 387 269 387H297C302.523 387 307 391.477 307 397V425C307 430.523 302.523 435 297 435H269C263.477 435 259 430.523 259 425V397Z" fill="#D9D9D9"/>
<g id="light bulb">
<path id="Icon_2" d="M280 420H286M277 408C277 404.686 279.686 402 283 402C286.314 402 289 404.686 289 408C289 408.89 288.806 409.734 288.459 410.493C287.503 412.583 286 414.613 286 416.911C286 416.96 285.96 417 285.911 417H280.089C280.04 417 280 416.96 280 416.911C280 414.613 278.497 412.583 277.541 410.493C277.194 409.734 277 408.89 277 408Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
<g id="BoilerroomLightButton" onclick="callMethod('swBoilerroomLight.switch');">
<path id="Rectangle Place_3" d="M259 147C259 141.477 263.477 137 269 137H297C302.523 137 307 141.477 307 147V175C307 180.523 302.523 185 297 185H269C263.477 185 259 180.523 259 175V147Z" fill="#D9D9D9"/>
<g id="light bulb_2">
<path id="Icon_3" d="M280 170H286M277 158C277 154.686 279.686 152 283 152C286.314 152 289 154.686 289 158C289 158.89 288.806 159.734 288.459 160.493C287.503 162.583 286 164.613 286 166.911C286 166.96 285.96 167 285.911 167H280.089C280.04 167 280 166.96 280 166.911C280 164.613 278.497 162.583 277.541 160.493C277.194 159.734 277 158.89 277 158Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
<g id="Frame 15" filter="url(#filter2_d_324_127)">
<rect x="103.5" y="314" width="59" height="32" rx="8" fill="#1E1014" fill-opacity="0.64" shape-rendering="crispEdges"/>
<text id="Garage_Temp" fill="#EAEAEA" xml:space="preserve" style="white-space: pre" font-family="Roboto Condensed" font-size="24" font-weight="500" letter-spacing="0em"><tspan x="109.586" y="338.203"></tspan></text>
</g>
<g id="GarageDoorLock" data-visibility="%osGarageDoor.value%">
<path id="Icon_4" d="M85 415V413C85 410.791 86.7909 409 89 409C91.2091 409 93 410.791 93 413V415M85.2 427H92.8C93.9201 427 94.4802 427 94.908 426.782C95.2843 426.59 95.5903 426.284 95.782 425.908C96 425.48 96 424.92 96 423.8V418.2C96 417.08 96 416.52 95.782 416.092C95.5903 415.716 95.2843 415.41 94.908 415.218C94.4802 415 93.9201 415 92.8 415H85.2C84.0799 415 83.5198 415 83.092 415.218C82.7157 415.41 82.4097 415.716 82.218 416.092C82 416.52 82 417.08 82 418.2V423.8C82 424.92 82 425.48 82.218 425.908C82.4097 426.284 82.7157 426.59 83.092 426.782C83.5198 427 84.0799 427 85.2 427Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="GarageDoorOpenedLock" data-hidden="%osGarageDoor.value%">
<path id="Icon_5" d="M93 415V413C93 410.791 91.2091 409 89 409C87.9855 409 87.0593 409.378 86.3541 410M85.2 427H92.8C93.9201 427 94.4802 427 94.908 426.782C95.2843 426.59 95.5903 426.284 95.782 425.908C96 425.48 96 424.92 96 423.8V418.2C96 417.08 96 416.52 95.782 416.092C95.5903 415.716 95.2843 415.41 94.908 415.218C94.4802 415 93.9201 415 92.8 415H85.2C84.0799 415 83.5198 415 83.092 415.218C82.7157 415.41 82.4097 415.716 82.218 416.092C82 416.52 82 417.08 82 418.2V423.8C82 424.92 82 425.48 82.218 425.908C82.4097 426.284 82.7157 426.59 83.092 426.782C83.5198 427 84.0799 427 85.2 427Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="BoilerroomLock">
<path id="Icon_6" d="M162 231V229C162 226.791 163.791 225 166 225C168.209 225 170 226.791 170 229V231M162.2 243H169.8C170.92 243 171.48 243 171.908 242.782C172.284 242.59 172.59 242.284 172.782 241.908C173 241.48 173 240.92 173 239.8V234.2C173 233.08 173 232.52 172.782 232.092C172.59 231.716 172.284 231.41 171.908 231.218C171.48 231 170.92 231 169.8 231H162.2C161.08 231 160.52 231 160.092 231.218C159.716 231.41 159.41 231.716 159.218 232.092C159 232.52 159 233.08 159 234.2V239.8C159 240.92 159 241.48 159.218 241.908C159.41 242.284 159.716 242.59 160.092 242.782C160.52 243 161.08 243 162.2 243Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="BoilerroomOpenedLock">
<path id="Icon_7" d="M170 231V229C170 226.791 168.209 225 166 225C164.986 225 164.059 225.378 163.354 226M162.2 243H169.8C170.92 243 171.48 243 171.908 242.782C172.284 242.59 172.59 242.284 172.782 241.908C173 241.48 173 240.92 173 239.8V234.2C173 233.08 173 232.52 172.782 232.092C172.59 231.716 172.284 231.41 171.908 231.218C171.48 231 170.92 231 169.8 231H162.2C161.08 231 160.52 231 160.092 231.218C159.716 231.41 159.41 231.716 159.218 232.092C159 232.52 159 233.08 159 234.2V239.8C159 240.92 159 241.48 159.218 241.908C159.41 242.284 159.716 242.59 160.092 242.782C160.52 243 161.08 243 162.2 243Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="GarageGateOpenedLock">
<path id="Icon_8" d="M287 610V608C287 605.791 285.209 604 283 604C281.986 604 281.059 604.378 280.354 605M279.2 622H286.8C287.92 622 288.48 622 288.908 621.782C289.284 621.59 289.59 621.284 289.782 620.908C290 620.48 290 619.92 290 618.8V613.2C290 612.08 290 611.52 289.782 611.092C289.59 610.716 289.284 610.41 288.908 610.218C288.48 610 287.92 610 286.8 610H279.2C278.08 610 277.52 610 277.092 610.218C276.716 610.41 276.41 610.716 276.218 611.092C276 611.52 276 612.08 276 613.2V618.8C276 619.92 276 620.48 276.218 620.908C276.41 621.284 276.716 621.59 277.092 621.782C277.52 622 278.08 622 279.2 622Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="GarageGateLock">
<path id="Icon_9" d="M279 610V608C279 605.791 280.791 604 283 604C285.209 604 287 605.791 287 608V610M279.2 622H286.8C287.92 622 288.48 622 288.908 621.782C289.284 621.59 289.59 621.284 289.782 620.908C290 620.48 290 619.92 290 618.8V613.2C290 612.08 290 611.52 289.782 611.092C289.59 610.716 289.284 610.41 288.908 610.218C288.48 610 287.92 610 286.8 610H279.2C278.08 610 277.52 610 277.092 610.218C276.716 610.41 276.41 610.716 276.218 611.092C276 611.52 276 612.08 276 613.2V618.8C276 619.92 276 620.48 276.218 620.908C276.41 621.284 276.716 621.59 277.092 621.782C277.52 622 278.08 622 279.2 622Z" stroke="#3D3E3F" stroke-width="2" stroke-linecap="round"/>
</g>
</g>
<defs>
<filter id="filter0_f_324_127" x="0" y="105" width="566" height="651" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_324_127"/>
</filter>
<filter id="filter1_f_324_127" x="1" y="0" width="547" height="324" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_324_127"/>
</filter>
<filter id="filter2_d_324_127" x="99.5" y="312" width="67" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_324_127"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_324_127" result="shape"/>
</filter>
<clipPath id="clip0_324_127">
<rect width="24" height="24" fill="white" transform="translate(271 656)"/>
</clipPath>
</defs>
</div>
<div class="ui uk-row">
<div class="ui divider"></div>
<div class="ui uk-row bottom-menu">
<a href="/menu/205.html"><i class="user icon medium"></i></a>
<a href="/menu/206.html"><i class="thermometer icon medium"></i></a>
<a href="/menu/208.html"><i class="camera icon medium"></i></a>
<a href="/menu/212.html"><i class="chart-donut icon medium"></i></a>
<a href="/menu/227.html"><i class="home-3-alt icon medium"></i></a>
</div>
</div>
</div>
<style>
g[data-visibility="1"] {
display: block;
}
g[data-visibility="0"] {
display: none;
}
g[data-hidden="0"] {
display: block;
}
g[data-hidden="1"] {
display: none;
}
g[onclick]:hover > path {
fill: var(--btn-pressed);
}
</style>
<script type="text/javascript">
$("#Garage_Temp > tspan").html(Number(%tempGarage.value%).toFixed()+"°C");
</script>