{"id":16640,"date":"2026-04-15T15:05:43","date_gmt":"2026-04-15T10:05:43","guid":{"rendered":"http:\/\/hobbi.st\/?page_id=16640"},"modified":"2026-04-15T15:05:43","modified_gmt":"2026-04-15T10:05:43","slug":"smartgroup","status":"publish","type":"page","link":"https:\/\/hobbi.st\/ru\/smartgroup\/","title":{"rendered":"smartgroup"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Wizdom Smart Building Control<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap');\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f8fafc; \/* slate-50 *\/\r\n height: 100vh;\r\n overflow: hidden;\r\n }\r\n\r\n \/* --- Grid Buttons --- *\/\r\n .control-btn {\r\n aspect-ratio: 1;\r\n background-color: #1e293b !important; \/* slate-800 *\/\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n border: 2px solid transparent !important;\r\n opacity: 1 !important;\r\n }\r\n\r\n .control-btn i {\r\n font-size: 1.75rem;\r\n color: white !important;\r\n }\r\n\r\n .control-btn.active {\r\n box-shadow: 0 0 20px rgba(59, 130, 246, 0.5) !important; \/* Blue glow *\/\r\n border-color: #3b82f6 !important; \/* blue-500 *\/\r\n background-color: #0f172a !important; \/* darker slate *\/\r\n }\r\n\r\n \/* Special 9th Button *\/\r\n .control-btn.special {\r\n background-color: #7dd3fc !important; \/* sky-300 *\/\r\n border: none !important;\r\n }\r\n .control-btn.special.active {\r\n box-shadow: 0 0 20px rgba(125, 211, 252, 0.8) !important;\r\n filter: brightness(1.1);\r\n }\r\n\r\n \/* --- Showroom (Building SVG Style) --- *\/\r\n .house-zone {\r\n transition: opacity 0.4s ease, fill 0.4s ease, color 0.4s ease;\r\n opacity: 0.3;\r\n cursor: pointer;\r\n fill: #94a3b8; \/* slate-400 *\/\r\n color: #94a3b8; \/* slate-400 *\/\r\n pointer-events: all;\r\n }\r\n\r\n .house-zone:hover {\r\n opacity: 0.6;\r\n fill: #64748b;\r\n color: #64748b;\r\n }\r\n\r\n .house-zone.active {\r\n opacity: 1;\r\n fill: #3b82f6; \/* blue-500 *\/\r\n color: #3b82f6;\r\n stroke: #3b82f6;\r\n filter: drop-shadow(0px 0px 8px rgba(59, 130, 246, 0.5));\r\n animation: pulse-glow 2s infinite;\r\n }\r\n\r\n \/* Fix for custom path provided *\/\r\n #svg-climate.active path {\r\n fill: #3b82f6 !important;\r\n }\r\n\r\n @keyframes pulse-glow {\r\n 0% { filter: drop-shadow(0px 0px 5px rgba(59, 130, 246, 0.4)); }\r\n 50% { filter: drop-shadow(0px 0px 15px rgba(59, 130, 246, 0.8)); }\r\n 100% { filter: drop-shadow(0px 0px 5px rgba(59, 130, 246, 0.4)); }\r\n }\r\n\r\n \/* --- Bottom Bar --- *\/\r\n .info-bar {\r\n background-color: #334155;\r\n color: white;\r\n transform: translateY(120%);\r\n transition: transform 0.3s ease-out;\r\n }\r\n .info-bar.visible {\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"flex flex-col h-full max-w-md mx-auto bg-white shadow-2xl relative\">\r\n\r\n <!-- Main Content Area -->\r\n <main class=\"flex-1 flex flex-col justify-between p-4 pb-24 pt-8 relative overflow-y-auto bg-slate-50\">\r\n \r\n <!-- 1. Showroom Visualization: Smart Building (Top) -->\r\n <div class=\"flex-1 flex items-center justify-center relative min-h-[250px] mb-4\">\r\n <div class=\"w-full h-full relative\">\r\n <svg viewbox=\"0 0 800 600\" class=\"w-full h-full drop-shadow-md\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <!-- Clean Building Background -->\r\n <g id=\"building-bg\" fill=\"none\" stroke=\"#e2e8f0\" stroke-width=\"4\">\r\n <!-- Main Building Tower -->\r\n <rect x=\"250\" y=\"100\" width=\"300\" height=\"350\" rx=\"10\" stroke=\"#cbd5e1\" stroke-width=\"6\" fill=\"white\"\/>\r\n \r\n <!-- Roof \/ Tech Area -->\r\n <rect x=\"290\" y=\"70\" width=\"220\" height=\"30\" rx=\"4\" fill=\"#f8fafc\" stroke=\"#cbd5e1\" stroke-width=\"4\"\/>\r\n \r\n <!-- Underground Parking -->\r\n <rect x=\"150\" y=\"450\" width=\"500\" height=\"100\" rx=\"10\" fill=\"#f1f5f9\" stroke=\"#cbd5e1\" stroke-width=\"6\"\/>\r\n <line x1=\"150\" y1=\"450\" x2=\"650\" y2=\"450\" stroke=\"#cbd5e1\" stroke-width=\"6\" \/> <!-- Ground Line -->\r\n \r\n <!-- Floors Dividers -->\r\n <line x1=\"250\" y1=\"216\" x2=\"550\" y2=\"216\" \/>\r\n <line x1=\"250\" y1=\"333\" x2=\"550\" y2=\"333\" \/>\r\n \r\n <!-- Elevator Shaft -->\r\n <rect x=\"370\" y=\"100\" width=\"60\" height=\"350\" fill=\"#f8fafc\" stroke=\"#e2e8f0\" stroke-width=\"2\"\/>\r\n\r\n <!-- Decorative Windows -->\r\n <rect x=\"280\" y=\"140\" width=\"60\" height=\"40\" rx=\"4\" fill=\"#f8fafc\" \/>\r\n <rect x=\"460\" y=\"140\" width=\"60\" height=\"40\" rx=\"4\" fill=\"#f8fafc\" \/>\r\n <rect x=\"280\" y=\"250\" width=\"60\" height=\"40\" rx=\"4\" fill=\"#f8fafc\" \/>\r\n <rect x=\"460\" y=\"250\" width=\"60\" height=\"40\" rx=\"4\" fill=\"#f8fafc\" \/>\r\n \r\n <!-- Labels -->\r\n <text x=\"310\" y=\"55\" fill=\"#94a3b8\" font-size=\"14\" font-weight=\"bold\" stroke=\"none\">\u0422\u0435\u0445. \u044d\u0442\u0430\u0436<\/text>\r\n <text x=\"170\" y=\"150\" fill=\"#94a3b8\" font-size=\"14\" font-weight=\"bold\" stroke=\"none\">\u0416\u0438\u043b\u044b\u0435 \u044d\u0442\u0430\u0436\u0438<\/text>\r\n <text x=\"170\" y=\"400\" fill=\"#94a3b8\" font-size=\"14\" font-weight=\"bold\" stroke=\"none\">\u041b\u043e\u0431\u0431\u0438<\/text>\r\n <text x=\"170\" y=\"505\" fill=\"#94a3b8\" font-size=\"14\" font-weight=\"bold\" stroke=\"none\">\u041f\u0430\u0440\u043a\u0438\u043d\u0433<\/text>\r\n <\/g>\r\n\r\n <!-- Interactive Elements (Mapped to Smart Building buttons) -->\r\n \r\n <!-- 1. Intercom (\u041b\u043e\u0431\u0431\u0438) -->\r\n <g id=\"svg-intercom\" class=\"house-zone\" transform=\"translate(300, 400)\">\r\n <rect x=\"-15\" y=\"-20\" width=\"30\" height=\"40\" rx=\"4\" fill=\"currentColor\"\/>\r\n <circle cx=\"0\" cy=\"-5\" r=\"5\" fill=\"white\"\/>\r\n <path d=\"M-8 10 h16\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <\/g>\r\n\r\n <!-- 2. Climate \/ Ventilation (Roof) - Using the provided custom path -->\r\n <g id=\"svg-climate\" class=\"house-zone\" transform=\"translate(-60, -345) scale(1)\">\r\n <!-- Repositioned to sit on the roof -->\r\n <path class=\"cls-84\" fill=\"currentColor\" d=\"M461.26,429a53.29,53.29,0,0,0-7.3-10.74c-5.38-6.63-10.95-13.49-13.25-30.47l-1.44-10.65-7.93,7.26c-.85.77-18.06,16.84-17.06,40.59a45.52,45.52,0,0,1-5.11-4.44l-7.62-7.66-1.9,10.64c-.12.67-2.87,16.51,1.8,31.57,3.93,12.65,15.46,21.27,29.38,22,.62,0,1.22.05,1.83.05,13.33,0,25-7.4,30-19.23a33.48,33.48,0,0,0,2.19-7.49C466.27,441.92,463.68,434.08,461.26,429Zm-7.5,19.55a21.82,21.82,0,0,1-1.45,4.94c-4.11,9.67-13.49,12.72-20.91,12.35s-16.16-4.26-19.2-14.07h0a55.61,55.61,0,0,1-2.21-16,36.66,36.66,0,0,0,10.26,4.94l9.6,2.49-2.79-9.52c-2.85-9.69-1.79-19.44,3.16-29,.59-1.15,1.21-2.23,1.83-3.23,3.43,11.94,8.72,18.45,13.18,23.93a43.18,43.18,0,0,1,5.87,8.48C452.83,437.45,454.7,443,453.76,448.53Z\"><\/path>\r\n <\/g>\r\n\r\n <!-- 3. Video (Parking and Entrance) -->\r\n <g id=\"svg-video\" class=\"house-zone\" transform=\"translate(200, 480)\">\r\n <path d=\"M0 0 L-15 -10 L-15 10 Z\" fill=\"currentColor\"\/>\r\n <rect x=\"-25\" y=\"-8\" width=\"12\" height=\"16\" rx=\"2\" fill=\"currentColor\"\/>\r\n <circle cx=\"0\" cy=\"0\" r=\"30\" fill=\"transparent\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"2 4\"\/>\r\n <\/g>\r\n\r\n <!-- 4. Lighting \u041c\u041e\u041f (Corridors) -->\r\n <g id=\"svg-light\" class=\"house-zone\" transform=\"translate(310, 160)\">\r\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"currentColor\"\/>\r\n <path d=\"M-20 0 L-25 0 M20 0 L25 0 M0 -20 L0 -25 M-14 -14 L-18 -18 M14 -14 L18 -18 M-14 14 L-18 18 M14 14 L18 18\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/g>\r\n\r\n <!-- 5. Leaks \/ Counters (Basement Tech Room) -->\r\n <g id=\"svg-leak\" class=\"house-zone\" transform=\"translate(580, 500)\">\r\n <path d=\"M0 -20 C-10 -10 -15 0 -15 10 A15 15 0 0 0 15 10 C15 0 10 -10 0 -20 Z\" fill=\"currentColor\"\/>\r\n <rect x=\"-20\" y=\"30\" width=\"40\" height=\"5\" fill=\"currentColor\"\/>\r\n <\/g>\r\n\r\n <!-- 6. Access Control (Parking Barrier) -->\r\n <g id=\"svg-access\" class=\"house-zone\" transform=\"translate(150, 440)\">\r\n <rect x=\"0\" y=\"-30\" width=\"10\" height=\"40\" fill=\"currentColor\" rx=\"2\"\/>\r\n <rect x=\"10\" y=\"-25\" width=\"60\" height=\"8\" fill=\"currentColor\"\/> <!-- Barrier Arm -->\r\n <\/g>\r\n\r\n <!-- 7. Elevators -->\r\n <g id=\"svg-elevator\" class=\"house-zone\" transform=\"translate(400, 275)\">\r\n <rect x=\"-22\" y=\"-35\" width=\"44\" height=\"70\" rx=\"2\" fill=\"currentColor\"\/>\r\n <line x1=\"0\" y1=\"-35\" x2=\"0\" y2=\"35\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <path d=\"M-8 -15 l4 -4 l4 4 m-8 30 l4 4 l4 -4\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <\/g>\r\n\r\n <!-- 8. Electricity (Main Switchboard) -->\r\n <g id=\"svg-power\" class=\"house-zone\" transform=\"translate(400, 500)\">\r\n <rect x=\"-25\" y=\"-30\" width=\"50\" height=\"60\" rx=\"4\" fill=\"currentColor\"\/>\r\n <path d=\"M-5 -10 L5 -10 L-2 0 L6 0 L-4 15 L-1 5 L-8 5 Z\" fill=\"white\"\/>\r\n <\/g>\r\n\r\n <!-- 9. Fire Alarm -->\r\n <g id=\"svg-fire\" class=\"house-zone\" transform=\"translate(500, 400)\">\r\n <rect x=\"-12\" y=\"-20\" width=\"24\" height=\"35\" rx=\"4\" fill=\"currentColor\"\/>\r\n <circle cx=\"0\" cy=\"-5\" r=\"6\" fill=\"white\"\/>\r\n <path d=\"M-6 10 h12\" stroke=\"white\" stroke-width=\"2\"\/>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n \r\n <!-- WhatsApp Bubble -->\r\n <div class=\"absolute bottom-4 right-4 w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer hover:bg-green-600 transition-colors z-20\">\r\n <i class=\"fa-brands fa-whatsapp text-2xl\"><\/i>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2. Controls Grid (Bottom) -->\r\n <div class=\"grid grid-cols-3 gap-4\">\r\n <!-- Row 1 -->\r\n <button class=\"control-btn group\" data-target=\"svg-intercom\" data-label=\"\u0414\u043e\u043c\u043e\u0444\u043e\u043d\u0438\u044f\">\r\n <i class=\"fa-solid fa-phone-volume\"><\/i>\r\n <\/button>\r\n <button class=\"control-btn group\" data-target=\"svg-climate\" data-label=\"\u041e\u0431\u0449\u0435\u0434\u043e\u043c\u043e\u0432\u043e\u0439 \u043a\u043b\u0438\u043c\u0430\u0442\">\r\n <i class=\"fa-solid fa-fan\"><\/i>\r\n <\/button>\r\n <button class=\"control-btn group\" data-target=\"svg-video\" data-label=\"\u0412\u0438\u0434\u0435\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\">\r\n <i class=\"fa-solid fa-video\"><\/i>\r\n <\/button>\r\n\r\n <!-- Row 2 -->\r\n <button class=\"control-btn group\" data-target=\"svg-light\" data-label=\"\u041e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u041c\u041e\u041f\">\r\n <i class=\"fa-regular fa-lightbulb\"><\/i>\r\n <\/button>\r\n <button class=\"control-btn group\" data-target=\"svg-leak\" data-label=\"\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0430\u0432\u0430\u0440\u0438\u0439\">\r\n <i class=\"fa-solid fa-faucet-drip\"><\/i>\r\n <\/button>\r\n <button class=\"control-btn group\" data-target=\"svg-access\" data-label=\"\u0421\u041a\u0423\u0414 \/ \u0428\u043b\u0430\u0433\u0431\u0430\u0443\u043c\u044b\">\r\n <i class=\"fa-solid fa-id-badge\"><\/i>\r\n <\/button>\r\n\r\n <!-- Row 3 -->\r\n <button class=\"control-btn group\" data-target=\"svg-elevator\" data-label=\"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0444\u0442\u0430\u043c\u0438\">\r\n <i class=\"fa-solid fa-elevator\"><\/i>\r\n <\/button>\r\n <button class=\"control-btn group\" data-target=\"svg-power\" data-label=\"\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u0435\">\r\n <i class=\"fa-solid fa-bolt\"><\/i>\r\n <\/button>\r\n <!-- Special 9th Button -->\r\n <button class=\"control-btn special group\" data-target=\"svg-fire\" data-label=\"\u041f\u043e\u0436\u0430\u0440\u043d\u0430\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\">\r\n <i class=\"fa-solid fa-fire-extinguisher\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <!-- Bottom Info Bar -->\r\n <div id=\"bottom-bar\" class=\"info-bar absolute bottom-4 left-4 right-4 rounded-xl p-4 flex items-center justify-between shadow-2xl z-30\">\r\n <div class=\"flex items-center gap-4\">\r\n <div id=\"bar-icon-container\" class=\"w-10 h-10 rounded-full border border-white\/20 flex items-center justify-center text-xl\">\r\n <i id=\"bar-icon\" class=\"fa-solid fa-elevator\"><\/i>\r\n <\/div>\r\n <div class=\"font-semibold text-sm leading-tight\" id=\"bar-text\">\r\n \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0444\u0442\u0430\u043c\u0438\r\n <\/div>\r\n <\/div>\r\n <button class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white shadow-lg\">\r\n <i class=\"fa-solid fa-arrow-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const buttons = document.querySelectorAll('.control-btn');\r\n const svgZones = document.querySelectorAll('.house-zone');\r\n const bottomBar = document.getElementById('bottom-bar');\r\n const barText = document.getElementById('bar-text');\r\n const barIcon = document.getElementById('bar-icon');\r\n \r\n \/\/ Core Logic for Activation\r\n function setStatus(targetId, isActive) {\r\n \/\/ Find Button and SVG\r\n const btn = document.querySelector(`.control-btn[data-target=\"${targetId}\"]`);\r\n const svg = document.getElementById(targetId);\r\n \r\n if (isActive) {\r\n if (btn) btn.classList.add('active');\r\n if (svg) svg.classList.add('active');\r\n \r\n \/\/ Update Info Bar to this new active item\r\n if (btn) {\r\n barText.textContent = btn.getAttribute('data-label');\r\n barIcon.className = btn.querySelector('i').className;\r\n bottomBar.classList.add('visible');\r\n }\r\n } else {\r\n if (btn) btn.classList.remove('active');\r\n if (svg) svg.classList.remove('active');\r\n \r\n \/\/ Logic to handle info bar if we deactivate the currently shown item\r\n const remainingActive = document.querySelector('.control-btn.active');\r\n if (remainingActive) {\r\n barText.textContent = remainingActive.getAttribute('data-label');\r\n barIcon.className = remainingActive.querySelector('i').className;\r\n } else {\r\n bottomBar.classList.remove('visible');\r\n }\r\n }\r\n }\r\n\r\n \/\/ Click Handler for Buttons\r\n buttons.forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.stopPropagation(); \/\/ prevent double firing\r\n const targetId = btn.getAttribute('data-target');\r\n const isCurrentlyActive = btn.classList.contains('active');\r\n setStatus(targetId, !isCurrentlyActive); \/\/ Toggle\r\n });\r\n });\r\n\r\n \/\/ Click Handler for SVG Zones (Showroom)\r\n svgZones.forEach(zone => {\r\n zone.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n const targetId = zone.id;\r\n const isCurrentlyActive = zone.classList.contains('active');\r\n setStatus(targetId, !isCurrentlyActive); \/\/ Toggle\r\n });\r\n });\r\n\r\n \/\/ Default activation (Elevator is active by default for demonstration)\r\n setTimeout(() => {\r\n setStatus('svg-elevator', true);\r\n }, 100);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Wizdom Smart Building Control \u0422\u0435\u0445. \u044d\u0442\u0430\u0436 \u0416\u0438\u043b\u044b\u0435 \u044d\u0442\u0430\u0436\u0438 \u041b\u043e\u0431\u0431\u0438 \u041f\u0430\u0440\u043a\u0438\u043d\u0433 \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0444\u0442\u0430\u043c\u0438<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":-8,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"give_campaign_id":0,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"pmpro_default_level":"","footnotes":""},"class_list":["post-16640","page","type-page","status-publish","hentry","pmpro-has-access"],"campaignId":"","_links":{"self":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/16640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/comments?post=16640"}],"version-history":[{"count":1,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/16640\/revisions"}],"predecessor-version":[{"id":16641,"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/pages\/16640\/revisions\/16641"}],"wp:attachment":[{"href":"https:\/\/hobbi.st\/ru\/wp-json\/wp\/v2\/media?parent=16640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}