{"id":12,"date":"2023-04-18T15:26:44","date_gmt":"2023-04-18T13:26:44","guid":{"rendered":"https:\/\/oloffson.cz\/?page_id=12"},"modified":"2023-07-26T13:02:09","modified_gmt":"2023-07-26T11:02:09","slug":"ubytovani","status":"publish","type":"page","link":"https:\/\/oloffson.cz\/en\/ubytovani\/","title":{"rendered":"Apartments"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-57651c8f elementor-section-full_width elementor-section-height-min-height elementor-section-stretched elementor-section-height-default elementor-section-items-middle\" data-id=\"57651c8f\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cddc697\" data-id=\"cddc697\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c018b73 elementor-section-full_width elementor-section-height-min-height elementor-section-stretched search-bar elementor-section-height-default elementor-section-items-middle\" data-id=\"c018b73\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ea7b5a6\" data-id=\"ea7b5a6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-035da7b elementor-widget elementor-widget-hello_world_widget_2\" data-id=\"035da7b\" data-element_type=\"widget\" data-widget_type=\"hello_world_widget_2.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\r\n\r\n.number-input {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  text-transform: uppercase;\r\n}\r\n.number-input input {\r\n  width: 26px;\r\n  text-align: center;\r\n  font-size: 18px;\r\n  border: none;\r\n\tcolor: black !important;\r\n\tpadding: 0;\r\n}\r\n.number-input button {\r\n  transition: 250ms;\r\n  background-color: transparent;\r\n  border: none;\r\n\tcolor: black;\r\n  padding: 5px;\r\n  font-size: 18px;\r\n  cursor: pointer;\r\n}\r\n\r\n.number-input button:hover {\r\n  background-color: #eee;\r\n}\r\n\r\n.form_search{\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tflex-wrap: wrap;\r\n}\r\n\r\n.form_search > *{\r\n\tmargin: 0 6px;\r\n}\r\n\r\n.form_search > button{\r\n\tborder: none;\r\n\tborder-radius: 0;\r\n\tbackground-color: black;\r\n\twidth: 50px;\r\n\theight: 50px;\r\n}\r\n\r\n#date-picker{\r\n\tpadding: 12px 38px 12px 12px;\r\n\tbackground-image: url(\"https:\/\/siestacloudlivestorage.azureedge.net\/default\/e239dd8a-0399-4af2-a514-65acb176fd42.svg\");\r\n\tbackground-repeat: no-repeat;\r\n\tbackground-position: calc(100% - 12px);\r\n\tbackground-size: 21px 19.2px;\r\n\tfont-weight: bold;\r\n\twidth: 28ch !important;\r\n}\r\n\r\n#date-picker,#room-picker{\r\n\tmargin: 0 7.5px;\r\n\ttext-transform:uppercase;\r\n\twidth: min-content;\r\n\tborder: none;\r\n\tborder-radius: 0;\r\n\tbackground-color: white;\r\n\tcolor: black;\r\n}\r\n\r\n#date-picker::placeholder, #room-text {\r\n    font-weight: bold;\r\n    color: #1c1c1c;\r\n\t\tletter-spacing: 1px;\r\n}\r\n\r\n#room-range{\r\n\tz-index: 1;\r\n\tbackground-color: white;\r\n  display: none;\r\n  flex-direction: column;\r\n  width: 290px;\r\n  padding: 20px;\r\n  justify-content: space-evenly;\r\n  position: absolute;\r\n\ttop: calc(100%);\r\n\tleft: 0;\r\n\tbox-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);\r\n}\r\n\r\n#room-range > button{\r\n\tcolor: white;\r\n\tbackground-color: black;\r\n\tborder: none;\r\n\tborder-radius: 0;\r\n}\r\n\r\n.room-container{\r\n  position: relative;\r\n\tbackground-color: white;\r\n\tpadding: 12px;\r\n}\r\n\r\n#room-output > img{\r\n\theight: 12px !important;\r\n\twidth: auto;\r\n}\r\n\r\n#date-form{\r\n\tpadding: 30px !important;\r\n\tdisplay: inline-flex;\r\n\tjustify-content: center;\r\n\talign-items: flex-start;\r\n\tflex-direction: column;\r\n\tbackground-color: #2C2D2C;\r\n\toverflow: hidden;\r\n\ttransform: translateY(-10px);\r\n}\r\n\r\n#date-form label{\r\n\tfont-size: 22px;\r\n\tcolor: white;\r\n\t\r\n}\r\n\r\n#date-form hr{\r\n\twidth:150%;\r\n\tmargin-top: 0 !important;\r\n\ttransform: translateX(-30px);\r\n\tborder: 1px solid white;\r\n}\r\n\r\n#date-form input::-webkit-input-placeholder {color:black !important;}\r\n#date-form input::-moz-placeholder          {color:black !important;}\r\n#date-form input:-moz-placeholder           {color:black !important;}\r\n#date-form input:-ms-input-placeholder      {color:black !important;}\r\n\r\n\/*Start & End select date*\/\r\n.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange,.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange{\r\n\tborder-radius: 0;\r\n\tborder: 1px solid #aca083 !important;\r\n}\r\n\r\n.flatpickr-day.today{\r\n\tborder: 1px solid black;\r\n\tborder-radius: 0;\r\n}\r\n\r\n.flatpickr-day.inRange{\r\n\tbox-shadow: none;\r\n\tcolor: rgba(0,0,0,.87) !important;\r\n\tborder: 1px solid #aca083 !important;\r\n\tborder-radius: 0;\r\n}\r\n<\/style>  \r\n\r\n\r\n<script src=\"https:\/\/npmcdn.com\/flatpickr\/dist\/flatpickr.min.js\"><\/script>\r\n<script src=\"https:\/\/npmcdn.com\/flatpickr\/dist\/l10n\/cs.js\"><\/script>\r\n\r\n<form class=\"form_search\" action=\"\">\r\n    <input id=\"date-picker\" name=\"date\" type=\"date\" placeholder=\"Arrival - departure\" \/>\r\n    <div class=\"room-container\">\r\n        <div id=\"room-output\"><span id=\"room-text\">Guests and apartments<\/span> <img decoding=\"async\" src=\"https:\/\/siestacloudlivestorage.azureedge.net\/default\/e239dd8a-0399-4af2-a514-65acb176fd42.svg\" alt=\"\" \/><\/div>\r\n        <input id=\"room-picker\" name=\"occupancies\" type=\"hidden\" value=\"none\" \/>\r\n        <div id=\"room-range\" style=\"display: none\">\r\n            <div class=\"number-input\">\r\n                <label for=\"guest\">Guest count:<\/label>\r\n                <div class=\"button-container\">\r\n                    <button class=\"decrement\" type=\"button\">-<\/button>\r\n                    <input id=\"guest-count\" class=\"number\" name=\"guest\" type=\"text\" value=\"2\" \/>\r\n                    <button class=\"increment\" type=\"button\">+<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"number-input\">\r\n                <label for=\"room\">room:<\/label>\r\n                <div class=\"button-container\">\r\n                    <button class=\"decrement\" type=\"button\">-<\/button>\r\n                    <input id=\"room-count\" class=\"number\" name=\"room\" type=\"text\" value=\"1\" \/>\r\n                    <button class=\"increment\" type=\"button\">+<\/button>\r\n                <\/div>\r\n            <\/div>\r\n            <button type=\"button\" id=\"peopleSelectorButton\">Use<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <button type=\"submit\" id=\"submitForm\"><img decoding=\"async\" src=\"https:\/\/siestacloudlivestorage.azureedge.net\/default\/e2f9e58c-d032-49ec-986c-29d2c9503f2c.svg\" alt=\"\" \/><\/button>\r\n<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n\r\n<script>\r\n    WUBOOK_ID = \"1524722130\";\r\n\r\n    CALENDAR_CONFIG = {\r\n        mode: \"range\",\r\n        dateFormat: \"j. M y\",\r\n        locale: \"cs\",\r\n        minDate: new Date(),\r\n        defaultDate: [new Date().fp_incr(1), new Date().fp_incr(2)],\r\n    };\r\n\r\n    class PeopleSelectorBar {\r\n        constructor() {\r\n            this.init();\r\n        }\r\n\r\n        datePicker;\r\n\r\n        init() {\r\n            this.datePicker = flatpickr(\"#date-picker\", CALENDAR_CONFIG);\r\n\r\n            document.getElementById(\"room-output\").addEventListener(\"click\", () => this.onRoomOutputClick());\r\n            document.getElementById(\"peopleSelectorButton\").addEventListener(\"click\", () => this.onPeopleSelectorClick());\r\n            document.getElementById(\"submitForm\").addEventListener(\"click\", (event) => this.submitForm(event));\r\n\r\n            const numberInputs = document.querySelectorAll(\".number-input\");\r\n\r\n            numberInputs.forEach((numberInput) => {\r\n                const decrementBtn = numberInput.querySelector(\".decrement\");\r\n                const incrementBtn = numberInput.querySelector(\".increment\");\r\n                const inputField = numberInput.querySelector(\".number\");\r\n\r\n                decrementBtn.addEventListener(\"click\", () => {\r\n                    let value = parseInt(inputField.value);\r\n                    if (value > 1) {\r\n                        value--;\r\n                        inputField.value = value;\r\n                    }\r\n                });\r\n\r\n                incrementBtn.addEventListener(\"click\", () => {\r\n                    let value = parseInt(inputField.value);\r\n                    value++;\r\n                    inputField.value = value;\r\n                });\r\n            });\r\n        }\r\n\r\n        submitForm(event) {\r\n            event.preventDefault();\r\n            const dfrom = this.datePicker.selectedDates[0] ? flatpickr.formatDate(this.datePicker.selectedDates[0], \"d\/m\/Y\") : \"today\";\r\n            const dto = this.datePicker.selectedDates[0] ? flatpickr.formatDate(this.datePicker.selectedDates[1], \"d\/m\/Y\") : flatpickr.formatDate(new Date().fp_incr(1), \"d\/m\/Y\");\r\n            let guestCount = document.getElementById(\"guest-count\").value;\r\n            let numRooms = document.getElementById(\"room-count\").value;\r\n            window.open(`https:\/\/wubook.net\/wbkd\/wbk\/?lcode=${WUBOOK_ID}&dfrom=${dfrom}&dto=${dto}&occupancies=${guestCount}`, \"_blank\");\r\n        }\r\n\r\n        onRoomOutputClick() {\r\n            this.tooglePeopleSelectorBar();\r\n        }\r\n\r\n        onPeopleSelectorClick() {\r\n            this.tooglePeopleSelectorBar();\r\n            this.dataToString();\r\n        }\r\n\r\n        tooglePeopleSelectorBar() {\r\n            const roomParameters = document.getElementById(\"room-range\");\r\n            console.log(roomParameters);\r\n            if (roomParameters.style.display === \"none\") {\r\n                roomParameters.style.display = \"flex\";\r\n            } else {\r\n                roomParameters.style.display = \"none\";\r\n            }\r\n        }\r\n\r\n        dataToString() {\r\n            let guestCount = document.getElementById(\"guest-count\").value;\r\n            let numRooms = document.getElementById(\"room-count\").value;\r\n            let roomText = document.getElementById(\"room-picker\");\r\n            let roomOutput = document.getElementById(\"room-text\");\r\n\r\n            if (guestCount > numRooms) {\r\n                \/\/TODO: if guests are more than rooms\r\n            }\r\n            const [roomAssignments, roomString, guestString] = this.splitGuestsIntoRooms(guestCount, numRooms);\r\n\r\n            roomText.value = roomAssignments;\r\n            roomOutput.innerHTML = guestString + \", \" + roomString;\r\n        }\r\n\r\n        splitGuestsIntoRooms(guestCount, numRooms) {\r\n            const roomParameters = document.getElementById(\"room-range\");\r\n            let guestsPerRoom = Math.floor(guestCount \/ numRooms);\r\n            let remainingGuests = guestCount % numRooms;\r\n            let roomAssignments = [];\r\n\r\n            for (let i = 0; i < numRooms; i++) {\r\n                const roomSize = guestsPerRoom + (remainingGuests > 0 ? 1 : 0);\r\n                roomAssignments.push(roomSize);\r\n                remainingGuests--;\r\n            }\r\n\r\n            let guestString = `${guestCount} ${guestCount == 1 ? \"HOST\" : \"HOST\u00c9\"}`;\r\n            let roomString = `${numRooms} ${numRooms == 1 ? \"POKOJ\" : \"POKOJE\"}`;\r\n            roomParameters.style.display = \"none\";\r\n            return [roomAssignments.join(\"_\"), roomString, guestString];\r\n        }\r\n    }\r\n    new PeopleSelectorBar();\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2deaf47a section-content elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2deaf47a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2b753f1d content-box\" data-id=\"2b753f1d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-4a36c0e3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a36c0e3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-294a95e3 text-box-left text-box\" data-id=\"294a95e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2bfb74cd text-box elementor-widget elementor-widget-text-editor\" data-id=\"2bfb74cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h1 class=\"font-hero\" style=\"text-align: center;\">Penzion Oloffson<\/h1><hr \/><div>Nothing will disturb you from your concentrated work or peaceful rest as the apartments are located in the back of the house. Each apartment is equipped with a kitchen, a bathroom and a comfortable bedroom.<\/div><div>We also have a baby cot, high chair and a grill available for you.<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-286596d2\" data-id=\"286596d2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-67cd0fb2 elementor-widget elementor-widget-image\" data-id=\"67cd0fb2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/cfac7eab-3b41-420f-81e5-d6789a8b3e3b.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d2b6fc elementor-widget elementor-widget-image\" data-id=\"9d2b6fc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/f13013a0-8ffe-4881-a97a-d9971d901399.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f21f669 elementor-widget elementor-widget-image\" data-id=\"f21f669\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"533\" src=\"https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-1024x682.jpg\" class=\"attachment-large size-large wp-image-1231\" alt=\"\" srcset=\"https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-1024x682.jpg 1024w, https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-300x200.jpg 300w, https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-768x512.jpg 768w, https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-18x12.jpg 18w, https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d-600x400.jpg 600w, https:\/\/oloffson.cz\/wp-content\/uploads\/2023\/06\/small_43f43d99-9d0c-444c-bbee-3363910ac67d.jpg 1280w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65ca8d3f elementor-widget elementor-widget-image\" data-id=\"65ca8d3f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"http:\/\/oloffson.cz\/wp-content\/uploads\/2023\/04\/719e94e4-cbe2-40c7-b1b8-6bd961c96f7a.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dad5715 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dad5715\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b395a44\" data-id=\"b395a44\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4599d31 elementor-widget elementor-widget-Vypis ubytovani\" data-id=\"4599d31\" data-element_type=\"widget\" data-widget_type=\"Vypis ubytovani.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n#room-template{\r\n\tflex-direction: column !important;\r\n}\r\n.skeleton-container{\r\n\tflex-direction: column !important;\r\n    padding: 10px;\r\n}\r\n.skeleton{\r\n\tanimation: skeleton-loading 1s linear infinite alternate;\r\n\tborder-radius: 0.175rem;\r\n}\r\n.skeleton-img{\r\n\theight: 296px !important;\r\n\tmargin-bottom: 1rem;\r\n}\r\n.skeleton-title{\r\n\theight: 1.375rem;\r\n\tmargin: 0.25rem 0 0.5rem 0;\r\n\twidth: 90%;\r\n}\r\n.skeleton-text{\r\n\twidth: 100%;\r\n\theight: 0.5rem;\r\n\tmargin-bottom: 0.25rem;\r\n\tborder-radius: 0.125rem;\r\n}\r\n.skeleton-text:nth-child(5){\r\n\tmargin-bottom: 0;\r\n\twidth: 80% !important;\r\n}\r\n.skeleton-button{\r\n\theight: 1.75rem;\r\n\twidth: 50%;\r\n\tmargin: 0.9rem 0;\r\n}\r\n@keyframes skeleton-loading {\r\n\t0%{\r\n\t\tbackground-color: hsl(200,20%,70%);\r\n\t}\r\n\t\r\n\t100%{\r\n\t\tbackground-color: hsl(200,20%,95%);\r\n\t}\r\n}\r\n\t\r\n\r\n#rooms{\r\n\tdisplay:flex;\r\n\tflex-direction: row;\r\n\tflex-wrap: wrap;\r\n\twidth: 100%;\r\n\talign-items: flex-start;\r\n\tjustify-content: space-evenly;\r\n}\r\n\t\r\n#rooms .room-link{\r\n\tpadding:0;\r\n\ttransition: all .4s;\r\n\tflex-direction: column;\r\n\tdisplay:flex;\r\n\tcolor: black;\r\n\twidth: 29%;\r\n\tmin-width: 280px;\r\n\tmargin: 24px;\r\n}\r\n#rooms .room-link div{\r\n\tpadding: 12px\r\n}\r\n#rooms .room-link:hover{\r\n\tbox-shadow: 0 6.4px 12.9px rgba(0,0,0,.055), 0 51px 103px rgba(0,0,0,.11);\r\n}\r\n#rooms .room-link img, .room-img-placeholder {\r\n    width: 100%;\r\n    height: 296px;\r\n    object-fit: cover;\r\n}\r\n\t\r\n#rooms .room-link div {\r\n    padding: 12px;\r\n}\r\n\t\r\n#rooms h2 {\r\n    margin-bottom: 0;\r\n}\r\n\t\r\n#rooms p {\r\n    font-family: fontMainRegular;\r\n    font-size: 1rem;\r\n}\r\n\r\n#rooms a .button-link, #rooms .button-link {\r\n\r\n    color: white;\r\n    padding: 8px 16px;\r\n    transition: all 200ms;\r\n    border: 0;\r\n    display: inline-block;\r\n}\r\n<\/style>\r\n\r\n    <div id=\"rooms\"><\/div>\r\n\r\n<script>\r\n    async function init() {\r\n    const loadingHTML = createLoadingHTML();\r\n    insertHTML(loadingHTML);\r\n    const roomsRaw = await fetchRooms().catch((error) => console.error);\r\n    if (!roomsRaw) return;\r\n    const roomsWitchPictures = await fetchPicturesFromRooms(roomsRaw).catch((error) => console.error);\r\n    if (!roomsWitchPictures) return;\r\n    const roomsHTML = mapHTMLWithRooms(roomsWitchPictures);\r\n    insertHTML(roomsHTML);\r\n}\r\ninit();\r\nfunction mapHTMLWithRooms(rooms) {\r\n    let roomsHTML = \"\";\r\n    rooms.map((room) => {\r\n        roomsHTML += createHTMLDOM(room);\r\n    });\r\n    return roomsHTML;\r\n}\r\nfunction createHTMLDOM(room) {\r\n    const heroImageDOM = room?.hero_image ? `<img decoding=\"async\" src=\"${room?.hero_image}\">` : `<div class=\"room-img-placeholder\"><\/div>`;\r\n    const heroTitleDOM = room?.acf?.name ? `<h2>${room?.acf?.name}<\/h2>` : \"<h2>undefined<h2>\";\r\n    const countDOM = room?.acf?.guest_number ? `<p>Po\u010det host\u016f: ${room?.acf?.guest_number}<\/p>` :  \"\";\r\n    let roomLink = assignLinkLanguage(room?.link);\r\n\r\n    return `\r\n    <section class=\"room-link\">\r\n    ${heroImageDOM}\r\n    <div>\r\n        ${heroTitleDOM}\r\n        ${countDOM}\r\n        <a href=\"${roomLink}\">\r\n        <button class=\"button-link\">UK\u00c1ZAT POKOJ - REZERVOVAT<\/button>\r\n        <\/a>\r\n    <\/div>\r\n    <\/section>`;\r\n}\r\nfunction assignLinkLanguage(link) {\r\n    const currentUrl = document.URL;\r\n    const pattern = \/\\\/(en|de|sk|pl|ru)\\\/\/;\r\n    const match = currentUrl.match(pattern);\r\n\r\n    if (match) {\r\n        const language = match[1];\r\n        return link.replace(`${window.location.origin}\/`, `${window.location.origin}\/${language}\/`);\r\n    }\r\n\r\n    return link;\r\n}\r\nfunction fetchRooms() {\r\n    return fetch(`${window.location.origin}\/wp-json\/wp\/v2\/room`).then((body) => body.json());\r\n}\r\nasync function fetchPicturesFromRooms(roomsRaw) {\r\n    let asyncMap = roomsRaw.map(async (room) => {\r\n        if (!room[\"_links\"][\"wp:featuredmedia\"]) return { ...room, hero_image: null };\r\n        const image = await fetch(`${room[\"_links\"][\"wp:featuredmedia\"][0][\"href\"]}`).then((body) => body.json());\r\n        room.hero_image = image.source_url || null;\r\n        return room;\r\n    });\r\n    let result = await Promise.all(asyncMap);\r\n    return result;\r\n}\r\nfunction createLoadingHTML() {\r\n    let loadingHTML = \"\";\r\n    let i = 0;\r\n    while (i < 10) {\r\n        loadingHTML += `\r\n        <div id=\"room-template\" class=\"room-link skeleton-container\">\r\n            <div class=\"skeleton skeleton-img\"><\/div>\r\n            <div class=\"skeleton skeleton-title\"><\/div>\r\n            <div class=\"skeleton skeleton-text\"><\/div>\r\n            <div class=\"skeleton skeleton-button\"><\/div>\r\n\t    <\/div>\r\n        `;\r\n        i++;\r\n    }\r\n    return loadingHTML;\r\n}\r\nfunction insertHTML(html) {\r\n    document.getElementById(\"rooms\").innerHTML = html;\r\n}\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ac055c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4ac055c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-caee1b8\" data-id=\"caee1b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-793aeeb elementor-widget elementor-widget-spacer\" data-id=\"793aeeb\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9d3deb9 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"9d3deb9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6cc40b46\" data-id=\"6cc40b46\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-489dc163 elementor-widget elementor-widget-google_maps\" data-id=\"489dc163\" data-element_type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=Palack%C3%A9ho%20n%C3%A1m%C4%9Bst%C3%AD%20%C4%8Dp.%2015%2C%20394%2064%2C%20Po%C4%8D%C3%A1tky&#038;t=m&#038;z=14&#038;output=embed&#038;iwloc=near\"\n\t\t\t\t\ttitle=\"Palack\u00e9ho n\u00e1m\u011bst\u00ed \u010dp. 15, 394 64, Po\u010d\u00e1tky\"\n\t\t\t\t\taria-label=\"Palack\u00e9ho n\u00e1m\u011bst\u00ed \u010dp. 15, 394 64, Po\u010d\u00e1tky\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>HOST\u00c9 A APARTM\u00c1NY Po\u010det host\u016f: &#8211; + Pokoj: &#8211; + POU\u017d\u00cdT Penzion Oloffson V apartm\u00e1nech budete m\u00edt naprost\u00fd klid na neru\u0161en\u00fd odpo\u010dinek nebo soust\u0159ed\u011bnou pr\u00e1ci. Nach\u00e1z\u00ed se toti\u017e v zadn\u00edm traktu budovy. Ka\u017ed\u00fd disponuje vybavenou kuchyn\u00ed, koupelnou a pohodlnou lo\u017enic\u00ed.D\u00e1le pro v\u00e1s m\u00e1me k dispozici d\u011btskou post\u00fdlku \u010di \u017eidli\u010dku a gril<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":0,"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"wp:attachment":[{"href":"https:\/\/oloffson.cz\/en\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}