{"id":19433,"date":"2025-04-29T01:26:34","date_gmt":"2025-04-29T01:26:34","guid":{"rendered":"https:\/\/hubsteel.casethemes.net\/?page_id=19433"},"modified":"2026-05-28T13:53:10","modified_gmt":"2026-05-28T08:53:10","slug":"home","status":"publish","type":"page","link":"https:\/\/feznavoi.uz\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"19433\" class=\"elementor elementor-19433\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76e8983 e-con-full e-flex e-con e-parent \" data-id=\"76e8983\" data-element_type=\"container\" data-e-type=\"container\" id=\"map\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\t\t<div class=\"elementor-element elementor-element-b2b4def elementor-widget elementor-widget-html\" data-id=\"b2b4def\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\t.widget {\n\t\tmargin: 0;\n\t\twidth: 100%;\n\t\tmax-height: 80vh;\n\t\tmin-height: 340px;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tposition: relative;\n\t}\n\t.scale {\n\t\twill-change: transform;\n\t\twidth: 100%;\n\t\tflex: 1 1 0;\n\t\tmin-height: 0;\n\t\tposition: relative;\n\t}\n\t.scene {\n\t\twidth: 100vw;\n\t\theight: clamp(300px, 42vw, 760px);\n\t\ttransition: transform 0.1s linear;\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\t#nav {\n\t\tdisplay: none;\n\t\tz-index: 200;\n\t}\n\t.map_btn {\n\t\tappearance: none;\n\t\tborder: none;\n\t\tpadding: clamp(7px, 1vh, 10px) 16px;\n\t\tfont-family: 'ClashGrotesk', sans-serif;\n\t\tfont-size: clamp(12px, 3.5vw, 15px);\n\t\tfont-weight: 700;\n\t\tletter-spacing: 0.07em;\n\t\ttext-transform: uppercase;\n\t\tbackground: #1db4ce;\n\t\tcolor: #fff;\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\ttransition: background 0.15s ease;\n\t\toutline: none;\n\t\t-webkit-tap-highlight-color: transparent;\n\t}\n\t.map_btn:hover,\n\t.map_btn:active {\n\t\tbackground: #1db4ce;\n\t\tpadding: clamp(7px, 1vh, 10px) 16px;\n\t}\n\t.area {\n\t\tposition: absolute;\n\t\toverflow: visible;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t}\n\t.area img {\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\tobject-fit: contain;\n\t\tpointer-events: none;\n\t\tuser-select: none;\n\t\ttransition: 0.2s ease;\n\t}\n\t.area_1 {\n\t\ttop: 5.6vw;\n\t\tleft: 22vw;\n\t}\n\t.area_2 {\n\t\twidth: 37vw;\n\t\ttop: 24.6vw;\n\t\tleft: 37.7vw;\n\t}\n\t.area_3 {\n\t\twidth: 61vw;\n\t\ttop: 1vw;\n\t\tleft: -1vw;\n\t}\n\n\t.scene.zoomed .area img {\n\t\tfilter: saturate(0) brightness(1.35);\n\t}\n\t.scene.has-hover .area img {\n\t\tfilter: saturate(0) brightness(1.35);\n\t}\n\t.scene .area.hovered img {\n\t\tfilter: none !important;\n\t}\n\t.scene.zoomed .area.active img {\n\t\tfilter: none !important;\n\t}\n\t.scene.zoomed .area {\n\t\tpointer-events: none;\n\t}\n\t.scene.zoomed .area.active {\n\t\tpointer-events: all !important;\n\t\tcursor: move;\n\t\tz-index: 20;\n\t}\n\n\t.area > .marker:not(.spawned) {\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\topacity: 1;\n\t\ttransform: translate(-50%, -50%) scale(var(--marker-scale, 1.25));\n\t}\n\t.scene.zoomed .area .marker:not(.spawned) {\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\ttransition: opacity 0.2s ease;\n\t}\n\n\t@keyframes markerPulse {\n\t\t0%,\n\t\t100% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t50% {\n\t\t\topacity: 0.75;\n\t\t\ttransform: scale(1.12);\n\t\t}\n\t}\n\t@keyframes markerAppear {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translate(-50%, -50%) scale(0.3);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translate(-50%, -50%) scale(1);\n\t\t}\n\t}\n\t@keyframes circleGrow {\n\t\t0% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t\t65% {\n\t\t\ttransform: scale(1.3);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\t@keyframes titleReveal {\n\t\tfrom {\n\t\t\tclip-path: inset(0 100% 0 0);\n\t\t}\n\t\tto {\n\t\t\tclip-path: inset(0 0% 0 0);\n\t\t}\n\t}\n\n\t.marker {\n\t\tposition: absolute;\n\t\ttransform: translate(-50%, -50%) scale(0);\n\t\tbackground: #1db4ce;\n\t\tborder: 1.5px solid rgba(255, 255, 255, 0.2);\n\t\tborder-radius: 50px;\n\t\toverflow: hidden;\n\t\tpointer-events: all;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\twidth: fit-content;\n\t\tz-index: 31;\n\t\topacity: 0;\n\t\tbox-shadow:\n\t\t\t0 4px 20px rgba(13, 166, 194, 0.5),\n\t\t\t0 2px 6px rgba(0, 0, 0, 0.1);\n\t\ttransition:\n\t\t\tfilter 0.2s ease,\n\t\t\tbox-shadow 0.2s ease,\n\t\t\tborder-radius 0.2s ease;\n\t}\n\t.marker.show {\n\t\tanimation: markerAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n\t}\n\t.marker.show .marker_head::before {\n\t\tanimation:\n\t\t\tcircleGrow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,\n\t\t\tmarkerPulse 2s ease-in-out 0.32s infinite;\n\t}\n\t.marker.show.expanded .marker_head::before {\n\t\tanimation: none;\n\t}\n\t.marker.show .marker_title {\n\t\tdisplay: inline-block;\n\t\tanimation: titleReveal 0.22s ease 0.2s both;\n\t}\n\t.marker:hover {\n\t\tfilter: brightness(1.1);\n\t\tbox-shadow:\n\t\t\t0 6px 28px rgba(13, 166, 194, 0.65),\n\t\t\t0 3px 10px rgba(0, 0, 0, 0.12);\n\t}\n\t.marker_head {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: clamp(3px, 0.22vw, 6px);\n\t\tpadding: clamp(4px, 0.28vw, 7px) clamp(7px, 0.45vw, 10px);\n\t}\n\t.marker_head::before {\n\t\tcontent: '+';\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: clamp(14px, 0.85vw, 18px);\n\t\theight: clamp(14px, 0.85vw, 18px);\n\t\tbackground: rgba(255, 255, 255, 0.28);\n\t\tborder: 1.5px solid rgba(255, 255, 255, 0.55);\n\t\tborder-radius: 50%;\n\t\tflex-shrink: 0;\n\t\tfont-size: clamp(11px, 0.62vw, 14px);\n\t\tcolor: #fff;\n\t\tline-height: 1;\n\t\ttransition: background 0.2s ease;\n\t}\n\t.marker_title {\n\t\tfont-size: clamp(9px, 0.5vw, 12px);\n\t\tfont-weight: 700;\n\t\tletter-spacing: 0.07em;\n\t\ttext-transform: uppercase;\n\t\tcolor: #fff;\n\t\tpadding-right: clamp(3px, 0.2vw, 6px);\n\t}\n\t.marker_body {\n\t\tmin-width: 100%;\n\t\tmax-height: 0;\n\t\toverflow: hidden;\n\t\ttransition:\n\t\t\tmax-height 0.28s ease,\n\t\t\tpadding 0.28s ease;\n\t\tpadding: 0 clamp(7px, 0.45vw, 10px);\n\t\tbox-sizing: border-box;\n\t}\n\t.marker_body p {\n\t\tfont-size: clamp(8px, 0.44vw, 11px);\n\t\tline-height: 1.6;\n\t\tcolor: rgba(255, 255, 255, 0.88);\n\t\twhite-space: normal;\n\t\tmargin: 0;\n\t}\n\t.marker.expanded {\n\t\tborder-radius: clamp(10px, 0.75vw, 14px);\n\t\tbox-shadow:\n\t\t\t0 8px 32px rgba(13, 166, 194, 0.55),\n\t\t\t0 4px 12px rgba(0, 0, 0, 0.12);\n\t}\n\t.marker.expanded .marker_body {\n\t\tmax-height: clamp(80px, 6vw, 130px);\n\t\tpadding: clamp(5px, 0.32vw, 8px) clamp(7px, 0.45vw, 10px) clamp(6px, 0.38vw, 9px);\n\t\tbackground: rgba(0, 0, 0, 0.08);\n\t\tborder-top: 1px solid rgba(255, 255, 255, 0.22);\n\t}\n\t.marker.expanded .marker_head::before {\n\t\tcontent: '\u2212';\n\t\tanimation: none !important;\n\t\tbackground: rgba(255, 255, 255, 0.45);\n\t\tborder-color: rgba(255, 255, 255, 0.75);\n\t}\n\n\t.area > .marker.label {\n\t\tborder-radius: 50px;\n\t\t--marker-scale: 0.9;\n\t}\n\t.area_2 > .marker.label {\n\t\ttop: calc(20% + 30px);\n\t\tleft: calc(30% + 30px);\n\t}\n\t.area > .marker.label .marker_head {\n\t\tpadding: clamp(4px, 0.28vw, 7px) clamp(7px, 0.46vw, 10px);\n\t}\n\t.area > .marker.label .marker_title {\n\t\tfont-size: clamp(8px, 0.44vw, 11px);\n\t\tletter-spacing: 0.06em;\n\t}\n\t.area > .marker.label .marker_head::before {\n\t\tdisplay: none;\n\t}\n\n\t.hint {\n\t\tposition: absolute;\n\t\tbottom: clamp(14px, 2.5vh, 24px);\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%) translateY(8px);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tbackground: rgba(255, 255, 255, 0.95);\n\t\tborder: 1.5px solid #e2e8f0;\n\t\tborder-radius: 50px;\n\t\tpadding: clamp(9px, 1vh, 13px) clamp(18px, 1.5vw, 26px);\n\t\tfont-size: clamp(12px, 0.8vw, 14px);\n\t\tfont-weight: 600;\n\t\tcolor: #1e2235;\n\t\tz-index: 300;\n\t\topacity: 0;\n\t\tpointer-events: none;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttransition:\n\t\t\topacity 0.2s ease,\n\t\t\ttransform 0.2s ease;\n\t}\n\t.hint.visible {\n\t\topacity: 1;\n\t\tpointer-events: auto;\n\t\ttransform: translateX(-50%) translateY(0);\n\t}\n\n\t@media (max-width: 991px) {\n\t\t.widget {\n\t\t\theight: auto;\n\t\t\tmin-height: unset;\n\t\t\tgap: 20px;\n\t\t\tposition: fixed;\n\t\t\tbottom: 20px;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t}\n\t\t.scale {\n\t\t\tflex: 0 0 auto;\n\t\t\toverflow: hidden;\n\t\t\ttransform: scale(2);\n\t\t\ttransform-origin: center 10%;\n\t\t}\n\t\t#nav {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\twidth: 100%;\n\t\t\tz-index: 200;\n\t\t\torder: -1;\n\t\t\tpadding: 12px 16px;\n\t\t\tgap: 8px;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.scene {\n\t\t\theight: clamp(260px, 65vw, 500px);\n\t\t}\n\t\t.hint {\n\t\t\tbackground: rgba(10, 21, 32, 0.8);\n\t\t\tborder-color: rgba(13, 166, 194, 0.4);\n\t\t\tcolor: rgba(255, 255, 255, 0.9);\n\t\t\tbackdrop-filter: blur(12px);\n\t\t\t-webkit-backdrop-filter: blur(12px);\n\t\t}\n\t\t.area > .marker.label {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t.hint {\n\t\t\tposition: static;\n\t\t\tleft: auto;\n\t\t\tbottom: auto;\n\t\t\ttransform: translateY(8px);\n\t\t\talign-self: center;\n\t\t\tmargin: 8px 0;\n\t\t}\n\t\t.hint.visible {\n\t\t\ttransform: translateY(0);\n\t\t}\n\t\t.marker_head {\n\t\t\tpadding: 2px 4px;\n\t\t\tgap: 2px;\n\t\t}\n\t\t.marker_head::before {\n\t\t\twidth: 8px;\n\t\t\theight: 8px;\n\t\t\tfont-size: 7px;\n\t\t}\n\t\t.marker_title {\n\t\t\tfont-size: 6px;\n\t\t\tpadding-right: 1px;\n\t\t}\n\t\t.marker_body p {\n\t\t\tfont-size: 5px;\n\t\t}\n\t\t.marker.expanded .marker_body {\n\t\t\tmax-height: 50px;\n\t\t\tpadding: 3px 4px 3px;\n\t\t}\n\t}\n\t@media (min-width: 992px) {\n\t\t.widget {\n\t\t\tpadding-top: clamp(10px, 2.4vh, 24px);\n\t\t\theight: calc(100vh - 160px);\n\t\t\tmax-height: none;\n\t\t}\n\t\t.scale {\n\t\t\ttransform: scale(2);\n\t\t\ttransform-origin: center;\n\t\t}\n\t}\n<\/style>\n\n<div class=\"widget\" id=\"widget\">\n\t<div class=\"scale\" id=\"scale\">\n\t\t<section class=\"scene\" id=\"scene\">\n\t\t\t<div class=\"area area_1\" data-index=\"0\">\n\t\t\t\t<img decoding=\"async\" src=\"\/a.png\" alt=\"\" draggable=\"false\" \/>\n\t\t\t<\/div>\n\t\t\t<div class=\"area area_2\" data-index=\"1\">\n\t\t\t\t<img decoding=\"async\" src=\"\/b.png\" alt=\"\" draggable=\"false\" \/>\n\t\t\t<\/div>\n\t\t\t<div class=\"area area_3\" data-index=\"2\">\n\t\t\t\t<img decoding=\"async\" src=\"\/c.png\" alt=\"\" draggable=\"false\" \/>\n\t\t\t<\/div>\n\t\t<\/section>\n\t<\/div>\n\t<div id=\"nav\"><\/div>\n\t<div class=\"hint\" id=\"hint\">\n\t\t<svg\n\t\t\twidth=\"18\"\n\t\t\theight=\"18\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstroke-width=\"2.5\"\n\t\t\tstroke-linecap=\"round\"\n\t\t\tstroke-linejoin=\"round\">\n\t\t\t<path d=\"M15 18l-6-6 6-6\" \/>\n\t\t<\/svg>\n\t\tOrqaga qaytish\n\t<\/div>\n<\/div>\n\n<script>\n\t;(function () {\n\t\t'use strict'\n\n\t\tvar MARKERS = [\n\t\t\t{ area: 0, type: 'label', i18n: { uz: \"Ob'ekt qurish\", ru: '\u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442', en: 'Build an Object' } },\n\t\t\t{\n\t\t\t\tarea: 0,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 38,\n\t\t\t\ty: 22,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: \"Elektr tarmog'i\", desc: 'Quvvat 500 kVt, podstansiyadan ulanish' },\n\t\t\t\t\tru: { title: '\u042d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0435\u0442\u044c', desc: '\u041c\u043e\u0449\u043d\u043e\u0441\u0442\u044c 500 \u043a\u0412\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0442 \u043f\u043e\u0434\u0441\u0442\u0430\u043d\u0446\u0438\u0438' },\n\t\t\t\t\ten: { title: 'Power Grid', desc: 'Capacity 500 kW, substation connection' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 0,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 60,\n\t\t\t\ty: 35,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: \"Suv ta'minoti\", desc: \"Markaziy suv ta'minoti, bosim 4 bar\" },\n\t\t\t\t\tru: { title: '\u0412\u043e\u0434\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u0435', desc: '\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0434\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u0435, \u0434\u0430\u0432\u043b\u0435\u043d\u0438\u0435 4 \u0431\u0430\u0440' },\n\t\t\t\t\ten: { title: 'Water Supply', desc: 'Central water supply, pressure 4 bar' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 0,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 48,\n\t\t\t\ty: 50,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Gaz quvuri', desc: \"Yuqori bosim, o'tkazuvchanlik 5000 m\\xB3\/soat\" },\n\t\t\t\t\tru: { title: '\u0413\u0430\u0437\u043e\u043f\u0440\u043e\u0432\u043e\u0434', desc: '\u0412\u044b\u0441\u043e\u043a\u043e\u0435 \u0434\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u0430\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c 5000 \u043c\u00b3\/\u0447' },\n\t\t\t\t\ten: { title: 'Gas Pipeline', desc: 'High pressure, capacity 5000 m\\xB3\/h' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{ area: 1, type: 'label', i18n: { uz: 'Infratuzilma', ru: '\u0418\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430', en: 'Infrastructure' } },\n\t\t\t{\n\t\t\t\tarea: 1,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 30,\n\t\t\t\ty: 40,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Maydon A10', desc: 'Maydoni 5000 m\\xB2, ruxsatnoma berilgan' },\n\t\t\t\t\tru: { title: '\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u041010', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 5000 \u043c\u00b2, \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u044b\u0434\u0430\u043d\u043e' },\n\t\t\t\t\ten: { title: 'Plot A10', desc: 'Area 5000 m\\xB2, permit issued' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 1,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 55,\n\t\t\t\ty: 30,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Maydon A20', desc: \"Maydoni 3000 m\\xB2, 2025 yanvardan bo'sh\" },\n\t\t\t\t\tru: { title: '\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u041020', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 3000 \u043c\u00b2, \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d \u0441 \u044f\u043d\u0432\u0430\u0440\u044f 2025' },\n\t\t\t\t\ten: { title: 'Plot A20', desc: 'Area 3000 m\\xB2, available from Jan 2025' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 1,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 65,\n\t\t\t\ty: 65,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Maydon A30', desc: \"Maydoni 4500 m\\xB2, yo'l asfaltlangan\" },\n\t\t\t\t\tru: { title: '\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u041030', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 4500 \u043c\u00b2, \u0434\u043e\u0440\u043e\u0433\u0430 \u0430\u0441\u0444\u0430\u043b\u044c\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430' },\n\t\t\t\t\ten: { title: 'Plot A30', desc: 'Area 4500 m\\xB2, road paved' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{ area: 2, type: 'label', i18n: { uz: 'Ijaraga olish', ru: '\u0410\u0440\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c', en: 'Rent' } },\n\t\t\t{\n\t\t\t\tarea: 2,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 40,\n\t\t\t\ty: 45,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Ombor 1', desc: 'Maydoni 2000 m\\xB2, isitiladi, eshik 4\\xD74 m' },\n\t\t\t\t\tru: { title: '\u0421\u043a\u043b\u0430\u0434 1', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 2000 \u043c\u00b2, \u043e\u0442\u0430\u043f\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0439, \u0432\u043e\u0440\u043e\u0442\u0430 4\u00d74 \u043c' },\n\t\t\t\t\ten: { title: 'Warehouse 1', desc: 'Area 2000 m\\xB2, heated, gate 4\\xD74 m' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 2,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 62,\n\t\t\t\ty: 35,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Ombor 2', desc: \"Maydoni 1500 m\\xB2, muzlatkich bo'limlari\" },\n\t\t\t\t\tru: { title: '\u0421\u043a\u043b\u0430\u0434 2', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 1500 \u043c\u00b2, \u043c\u043e\u0440\u043e\u0437\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043a\u0446\u0438\u0438' },\n\t\t\t\t\ten: { title: 'Warehouse 2', desc: 'Area 1500 m\\xB2, freezer sections' },\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tarea: 2,\n\t\t\t\ttype: 'point',\n\t\t\t\tx: 50,\n\t\t\t\ty: 70,\n\t\t\t\ti18n: {\n\t\t\t\t\tuz: { title: 'Ofis', desc: 'Maydoni 500 m\\xB2, A sinf, erkin rejalash' },\n\t\t\t\t\tru: { title: '\u041e\u0444\u0438\u0441', desc: '\u041f\u043b\u043e\u0449\u0430\u0434\u044c 500 \u043c\u00b2, \u043a\u043b\u0430\u0441\u0441 A, \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430\u044f \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u043a\u0430' },\n\t\t\t\t\ten: { title: 'Office', desc: 'Area 500 m\\xB2, class A, open plan' },\n\t\t\t\t},\n\t\t\t},\n\t\t]\n\n\t\tvar ZOOM = 2\n\t\tvar lang = (location.pathname.match(\/\\\/(uz|ru|en)(\\\/|$)\/) || ['', 'uz'])[1] || 'uz'\n\n\t\tfunction t(m) {\n\t\t\treturn m.i18n[lang] || m.i18n.uz\n\t\t}\n\n\t\tfunction mk(tag, cls) {\n\t\t\tvar el = document.createElement(tag)\n\t\t\tif (cls) el.className = cls\n\t\t\treturn el\n\t\t}\n\n\t\tvar root = document.getElementById('widget')\n\t\tvar scene = document.getElementById('scene')\n\t\tvar scaleEl = document.getElementById('scale')\n\t\tvar hint = document.getElementById('hint')\n\t\tvar navEl = document.getElementById('nav')\n\t\tvar areas = Array.from(root.querySelectorAll('.area'))\n\t\tvar active = null\n\n\t\tfunction resetZoom() {\n\t\t\tif (!active) return\n\t\t\tvar map = active\n\t\t\tactive = null\n\t\t\tmap.querySelectorAll('.marker.spawned').forEach(function (d) {\n\t\t\t\td.remove()\n\t\t\t})\n\t\t\thint.classList.remove('visible')\n\t\t\troot.classList.remove('is-zoomed')\n\t\t\tscene.style.cssText = ''\n\t\t\tmap.classList.remove('active')\n\t\t\tscene.classList.remove('zoomed')\n\t\t}\n\n\t\tfunction showLabels() {\n\t\t\tareas.forEach(function (m) {\n\t\t\t\tm.querySelectorAll('.marker.label').forEach(function (el) {\n\t\t\t\t\tel.remove()\n\t\t\t\t})\n\t\t\t})\n\t\t\tMARKERS.filter(function (m) {\n\t\t\t\treturn m.type === 'label'\n\t\t\t}).forEach(function (item) {\n\t\t\t\tvar el = mk('div', 'marker label')\n\t\t\t\tel.appendChild(mk('div', 'marker_head')).appendChild(mk('span', 'marker_title')).textContent = t(item)\n\t\t\t\tel.addEventListener('click', function () {\n\t\t\t\t\tif (!active) zoomIn(areas[item.area])\n\t\t\t\t})\n\t\t\t\tareas[item.area].appendChild(el)\n\t\t\t})\n\t\t}\n\n\t\tfunction zoomIn(map) {\n\t\t\tactive = map\n\t\t\tvar sr = scene.getBoundingClientRect(),\n\t\t\t\tcr = map.getBoundingClientRect()\n\t\t\tvar W = sr.width,\n\t\t\t\tS = W \/ window.innerWidth\n\t\t\tvar scx = (sr.left + sr.right) \/ 2,\n\t\t\t\tscy = (sr.top + sr.bottom) \/ 2\n\t\t\tvar mobile = window.innerWidth <= 991\n\t\t\tvar scaleRect = mobile && scaleEl ? scaleEl.getBoundingClientRect() : null\n\t\t\tvar scaleTop = scaleRect ? scaleRect.top : 0\n\t\t\tvar scaleBottom = scaleRect ? scaleRect.bottom : window.innerHeight\n\t\t\tvar centerX = window.innerWidth \/ 2\n\t\t\tvar centerY = mobile ? (scaleTop + scaleBottom) \/ 2 : window.innerHeight \/ 2\n\t\t\tvar mx = Math.max(0, (ZOOM * W) \/ 2 - window.innerWidth \/ 2)\n\t\t\tvar px = Math.max(-mx, Math.min(mx, centerX - (scx + ZOOM * (cr.left + cr.width \/ 2 - scx))))\n\t\t\tvar py\n\t\t\tif (mobile) {\n\t\t\t\tvar ztop = scy - (ZOOM * sr.height) \/ 2\n\t\t\t\tvar zbot = scy + (ZOOM * sr.height) \/ 2\n\t\t\t\tvar pyRaw = centerY - (scy + ZOOM * (cr.top + cr.height \/ 2 - scy))\n\t\t\t\tvar pyMin = scaleBottom - zbot\n\t\t\t\tvar pyMax = scaleTop - ztop\n\t\t\t\tpy = Math.max(pyMin, Math.min(pyMax, pyRaw))\n\t\t\t} else {\n\t\t\t\tvar my = Math.max(0, (ZOOM * sr.height) \/ 2 - window.innerHeight \/ 2)\n\t\t\t\tpy = Math.max(-my, Math.min(my, centerY - (scy + ZOOM * (cr.top + cr.height \/ 2 - scy))))\n\t\t\t}\n\t\t\tscene.style.transformOrigin = '50% 50%'\n\t\t\tscene.style.transform = 'scale(' + ZOOM + ') translate(' + px \/ (ZOOM * S) + 'px,' + py \/ (ZOOM * S) + 'px)'\n\t\t\tscene.classList.add('zoomed')\n\t\t\tmap.classList.add('active')\n\t\t\troot.classList.add('is-zoomed')\n\t\t\thint.classList.add('visible')\n\t\t\ttry {\n\t\t\t\thistory.pushState(null, '')\n\t\t\t} catch (e) {}\n\t\t\tsetTimeout(function () {\n\t\t\t\tshowDots(+map.dataset.index)\n\t\t\t}, 150)\n\t\t}\n\n\t\tfunction zoomOut() {\n\t\t\tif (!active) return\n\t\t\tvar map = active\n\t\t\tactive = null\n\t\t\tmap.querySelectorAll('.marker.spawned').forEach(function (d) {\n\t\t\t\td.remove()\n\t\t\t})\n\t\t\thint.classList.remove('visible')\n\t\t\troot.classList.remove('is-zoomed')\n\t\t\tscene.style.transform = 'scale(1)'\n\t\t\tsetTimeout(function () {\n\t\t\t\tscene.style.cssText = ''\n\t\t\t\tmap.classList.remove('active')\n\t\t\t\tscene.classList.remove('zoomed')\n\t\t\t\tshowLabels()\n\t\t\t}, 150)\n\t\t}\n\n\t\tfunction showDots(index) {\n\t\t\tvar cssScale =\n\t\t\t\tparseFloat(window.getComputedStyle(scaleEl).getPropertyValue('scale')) ||\n\t\t\t\t(function () {\n\t\t\t\t\tvar t = window.getComputedStyle(scaleEl).transform\n\t\t\t\t\tif (!t || t === 'none') return 1\n\t\t\t\t\tvar mat = t.match(\/matrix\\(([^,]+)\/)\n\t\t\t\t\treturn mat ? parseFloat(mat[1]) : 1\n\t\t\t\t})()\n\t\t\tvar markerScale = cssScale > 1 ? (1 \/ cssScale).toFixed(3) : '0.5'\n\n\t\t\tMARKERS.filter(function (m) {\n\t\t\t\treturn m.area === index && m.type === 'point'\n\t\t\t}).forEach(function (pt, i) {\n\t\t\t\tvar m = mk('div', 'marker spawned'),\n\t\t\t\t\tinfo = t(pt)\n\t\t\t\tm.style.scale = markerScale\n\t\t\t\tm.style.left = pt.x + '%'\n\t\t\t\tm.style.top = pt.y + '%'\n\t\t\t\tm.appendChild(mk('div', 'marker_head')).appendChild(mk('span', 'marker_title')).textContent = info.title\n\t\t\t\tm.appendChild(mk('div', 'marker_body')).appendChild(mk('p')).textContent = info.desc\n\t\t\t\tm.addEventListener('click', function (e) {\n\t\t\t\t\te.stopPropagation()\n\t\t\t\t\tvar was = m.classList.contains('expanded')\n\t\t\t\t\tif (active)\n\t\t\t\t\t\tactive.querySelectorAll('.marker.expanded').forEach(function (el) {\n\t\t\t\t\t\t\tel.classList.remove('expanded')\n\t\t\t\t\t\t})\n\t\t\t\t\tif (!was) m.classList.add('expanded')\n\t\t\t\t})\n\t\t\t\tif (active) active.appendChild(m)\n\t\t\t\tsetTimeout(function () {\n\t\t\t\t\tm.classList.add('show')\n\t\t\t\t}, i * 60)\n\t\t\t})\n\t\t}\n\n\t\tfunction initNav() {\n\t\t\tif (!navEl) return\n\t\t\tMARKERS.filter(function (m) {\n\t\t\t\treturn m.type === 'label'\n\t\t\t}).forEach(function (item) {\n\t\t\t\tvar btn = mk('button', 'map_btn')\n\t\t\t\tbtn.textContent = t(item)\n\t\t\t\tbtn.addEventListener('click', function () {\n\t\t\t\t\tresetZoom()\n\t\t\t\t\tzoomIn(areas[item.area])\n\t\t\t\t})\n\t\t\t\tnavEl.appendChild(btn)\n\t\t\t})\n\t\t}\n\n\t\tfunction goBack() {\n\t\t\ttry {\n\t\t\t\thistory.back()\n\t\t\t} catch (e) {\n\t\t\t\tzoomOut()\n\t\t\t}\n\t\t}\n\n\t\tfunction initEvents() {\n\t\t\twindow.addEventListener('popstate', function () {\n\t\t\t\tif (active) zoomOut()\n\t\t\t})\n\t\t\thint.addEventListener('click', goBack)\n\t\t\twindow.addEventListener(\n\t\t\t\t'wheel',\n\t\t\t\tfunction (e) {\n\t\t\t\t\tif (active && e.deltaY > 0) goBack()\n\t\t\t\t},\n\t\t\t\t{ passive: true },\n\t\t\t)\n\t\t\twindow.addEventListener('keydown', function (e) {\n\t\t\t\tif (e.key === 'Escape') zoomOut()\n\t\t\t})\n\t\t}\n\n\t\tvar n = hint.lastChild\n\t\twhile (n && n.nodeType !== 3) n = n.previousSibling\n\t\tif (n) n.textContent = ' ' + ({ uz: 'Orqaga qaytish', ru: '\u041d\u0430\u0437\u0430\u0434', en: 'Go Back' }[lang] || 'Orqaga qaytish')\n\n\t\tshowLabels()\n\t\tinitNav()\n\t\tinitEvents()\n\t\tinitHover()\n\n\t\tfunction initHover() {\n\t\t\tvar imgCanvases = areas.map(function (area) {\n\t\t\t\tvar img = area.querySelector('img')\n\t\t\t\tvar canvas = document.createElement('canvas')\n\t\t\t\tvar ctx = canvas.getContext('2d')\n\t\t\t\tfunction draw() {\n\t\t\t\t\tif (!img.naturalWidth) return\n\t\t\t\t\tcanvas.width = img.naturalWidth\n\t\t\t\t\tcanvas.height = img.naturalHeight\n\t\t\t\t\ttry {\n\t\t\t\t\t\tctx.drawImage(img, 0, 0)\n\t\t\t\t\t} catch (e) {}\n\t\t\t\t}\n\t\t\t\tif (img.complete && img.naturalWidth) draw()\n\t\t\t\telse img.addEventListener('load', draw)\n\t\t\t\treturn { area: area, img: img, canvas: canvas, ctx: ctx }\n\t\t\t})\n\n\t\t\tfunction clearHover() {\n\t\t\t\tscene.classList.remove('has-hover')\n\t\t\t\tareas.forEach(function (a) {\n\t\t\t\t\ta.classList.remove('hovered')\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tfunction getAlpha(cd, clientX, clientY) {\n\t\t\t\tvar r = cd.img.getBoundingClientRect()\n\t\t\t\tvar relX = clientX - r.left\n\t\t\t\tvar relY = clientY - r.top\n\t\t\t\tif (relX < 0 || relY < 0 || relX > r.width || relY > r.height) return 0\n\t\t\t\tvar px = Math.round((relX * cd.canvas.width) \/ r.width)\n\t\t\t\tvar py = Math.round((relY * cd.canvas.height) \/ r.height)\n\t\t\t\ttry {\n\t\t\t\t\treturn cd.ctx.getImageData(px, py, 1, 1).data[3]\n\t\t\t\t} catch (e) {\n\t\t\t\t\treturn 255\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tscene.addEventListener('mousemove', function (e) {\n\t\t\t\tif (active) return\n\t\t\t\tvar hovered = null\n\t\t\t\timgCanvases.forEach(function (cd) {\n\t\t\t\t\tif (getAlpha(cd, e.clientX, e.clientY) > 10) hovered = cd.area\n\t\t\t\t})\n\t\t\t\tif (hovered) {\n\t\t\t\t\tscene.classList.add('has-hover')\n\t\t\t\t\tareas.forEach(function (a) {\n\t\t\t\t\t\ta.classList.toggle('hovered', a === hovered)\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\tclearHover()\n\t\t\t\t}\n\t\t\t})\n\t\t\tscene.addEventListener('mouseleave', clearHover)\n\t\t}\n\t})()\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Back to back<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19433","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/pages\/19433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/comments?post=19433"}],"version-history":[{"count":69,"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/pages\/19433\/revisions"}],"predecessor-version":[{"id":23638,"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/pages\/19433\/revisions\/23638"}],"wp:attachment":[{"href":"https:\/\/feznavoi.uz\/en\/wp-json\/wp\/v2\/media?parent=19433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}