How Bourne Leisure Streamlined Operations Across 39 Resort Sites<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: #f5f5f5;\n overflow-x: hidden;\n }\n\n .layout-container {\n min-height: 100vh;\n padding: 2rem;\n display: flex;\n flex-direction: row-reverse;\n gap: 2rem;\n align-items: flex-start;\n position: relative;\n }\n\n .video-container {\n width: 70%;\n top: 2rem;\n }\n\n #player {\n width: 100%;\n min-height: 600px;\n border-radius: 1rem;\n background: #000;\n }\n\n .content-side {\n width: 30%;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n\n .progress-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n .progress-item {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .progress-item:hover {\n background: rgba(7, 79, 87, 0.1);\n }\n\n .play-button {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: #074f57;\n border: none;\n cursor: pointer;\n color: white;\n transition: all 0.3s ease;\n padding: 0;\n flex-shrink: 0;\n }\n\n .play-button:hover {\n transform: scale(1.1);\n filter: brightness(1.1);\n }\n\n .progress-item.active .play-button {\n transform: scale(1.1);\n }\n\n .progress-label {\n font-size: 1rem;\n color: #333;\n cursor: pointer;\n }\n\n .progress-item.active .progress-label {\n font-weight: 500;\n }\n\n .play-icon {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 4px 0 4px 6px;\n border-color: transparent transparent transparent white;\n margin-left: 2px;\n }\n\n .pause-icon {\n display: flex;\n gap: 3px;\n margin: 0 auto;\n }\n\n .pause-icon span {\n width: 4px;\n height: 14px;\n background: white;\n border-radius: 2px;\n }\n\n .content-card {\n background: white;\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n\n .scroll-container {\n display: none;\n }\n\n h2 {\n margin-bottom: 1rem;\n color: #333;\n }\n\n p {\n color: #666;\n line-height: 1.6;\n }\n\n @media screen and (max-width: 768px) {\n .layout-container {\n flex-direction: column;\n padding: 1rem;\n gap: 1rem;\n }\n\n .video-container {\n width: 100%;\n top: 1rem;\n }\n\n #player {\n min-height: 400px;\n border-radius: 0.5rem;\n }\n\n .content-side {\n width: 100%;\n }\n\n .progress-item {\n padding: 0.75rem;\n }\n\n .play-button {\n width: 32px;\n height: 32px;\n }\n\n .play-icon {\n border-width: 6px 0 6px 10px;\n }\n\n .pause-icon span {\n width: 5px;\n height: 16px;\n }\n\n .progress-label {\n font-size: 1.1rem;\n }\n\n .content-card {\n padding: 1.5rem;\n }\n\n h2 {\n font-size: 1.3rem;\n }\n }\n\n @media screen and (max-width: 480px) {\n .play-button {\n width: 40px;\n height: 40px;\n }\n\n .content-card {\n padding: 1rem;\n }\n\n h2 {\n font-size: 1.2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"layout-container\">\n <div class=\"video-container\">\n <div id=\"player\"><\/div>\n <\/div>\n \n <div class=\"content-side\">\n <div class=\"progress-container\">\n <div id=\"management\" class=\"progress-item active\" data-time=\"9\" data-duration=\"41\">\n <button class=\"play-button\" aria-label=\"Visi\u00f3n general de las operaciones de juego\">\n <div class=\"play-icon\"><\/div>\n <\/button>\n <div class=\"progress-label\">Panorama de la gesti\u00f3n<\/div>\n <\/div>\n <div id=\"safety\" class=\"progress-item\" data-time=\"42\" data-duration=\"98\">\n <button class=\"play-button\" aria-label=\"Cumplimiento de las normas de seguridad en los juegos\">\n <div class=\"play-icon\"><\/div>\n <\/button>\n <div class=\"progress-label\">Seguridad de las atracciones<\/div>\n <\/div>\n <div id=\"food\" class=\"progress-item\" data-time=\"98\" data-duration=\"140\">\n <button class=\"play-button\" aria-label=\"Seguimiento del mantenimiento de las obras\">\n <div class=\"play-icon\"><\/div>\n <\/button>\n <div class=\"progress-label\">Alimentaci\u00f3n y bebidas<\/div>\n <\/div>\n <div id=\"quality\" class=\"progress-item\" data-time=\"156\" data-duration=\"217\">\n <button class=\"play-button\" aria-label=\"Gesti\u00f3n de la calidad del juego\">\n <div class=\"play-icon\"><\/div>\n <\/button>\n <div class=\"progress-label\">Calidad del agua<\/div>\n <\/div>\n <div id=\"incidents\" class=\"progress-item\" data-time=\"229\" data-duration=\"500\">\n <button class=\"play-button\" aria-label=\"\u00c9xito de la implantaci\u00f3n de Play\">\n <div class=\"play-icon\"><\/div>\n <\/button>\n <div class=\"progress-label\">Incidentes y reclamaciones<\/div>\n <\/div>\n<\/div>\n\n <div id=\"activeCard\" class=\"content-card\">\n <h2>Panorama de la gesti\u00f3n<\/h2>\n <p>Bourne Leisure puede ahora gestionar y supervisar las operaciones a distancia en los 39 centros de su grupo tur\u00edstico.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let player;\n let currentSectionIndex = 0;\n let userPaused = false;\n let progressCheckTimeout = null;\n const progressItems = document.querySelectorAll('.progress-item');\n const activeCard = document.getElementById('activeCard');\n const isMobile = window.matchMedia(\"(max-width: 768px)\").matches;\n\n const contentData = [\n {\n title: \"Management Overview\",\n text: \"Bourne Leisure can now manage and monitor operations remotely throughout the 39 sites of their resort group.\"\n },\n {\n title: \"Safety and Operations Compliance\",\n text: \"The on-site Leisure and activity teams have been empowered with easy-to-use mobile checklists and safer systems of work.\"\n },\n {\n title: \"Food and Beverage\",\n text: \"Adam describes how his F&B teams now report directly and consistently through a customised view for the benefit of his managerial oversight.\"\n },\n {\n title: \"Quality Management\",\n text: \"As a key player in ensuring e.g. water quality and safe leisure operations, Luke explains how the system empowers himself and his department.\"\n },\n {\n title: \"Incidents and claims\",\n text: \"Paul describes how detailed documentation is now available at the click of a button - emphasizing a diligent conduct while saving time and resources.\"\n }\n ];\n\n \/\/ Load YouTube API\n const tag = document.createElement('script');\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n function onYouTubeIframeAPIReady() {\n player = new YT.Player('player', {\n videoId: 'NK8N_BhNQqU', \/\/ Replace with your video ID\n playerVars: {\n playsinline: 1,\n modestbranding: 1,\n rel: 0,\n cc_load_policy: 1,\n cc_lang_pref: 'en',\n hl: 'en'\n },\n events: {\n 'onStateChange': onPlayerStateChange,\n 'onReady': onPlayerReady\n }\n });\n }\n\n function onPlayerReady(event) {\n updateActiveSection(0);\n \n \/\/ Check for hash in URL and set proper time\n const hash = window.location.hash;\n if (hash) {\n const sectionId = hash.substring(1);\n const index = {\n 'management': 0,\n 'safety': 1,\n 'food': 2,\n 'quality': 3,\n 'incidents': 4\n }[sectionId];\n \n if (index !== undefined) {\n currentSectionIndex = index;\n const time = parseFloat(progressItems[index].dataset.time);\n player.seekTo(time);\n updateActiveSection(index);\n }\n }\n }\n\n function checkProgress() {\n if (progressCheckTimeout) {\n clearTimeout(progressCheckTimeout);\n }\n\n if (!userPaused && player && player.getCurrentTime) {\n const currentTime = player.getCurrentTime();\n const currentSection = progressItems[currentSectionIndex];\n const sectionEndTime = parseFloat(currentSection.dataset.duration);\n\n if (currentTime >= sectionEndTime) {\n if (currentSectionIndex < progressItems.length - 1) {\n currentSectionIndex++;\n updateActiveSection(currentSectionIndex);\n }\n \/\/ Remove the else block that was pausing the video\n }\n\n progressCheckTimeout = setTimeout(checkProgress, 1000);\n }\n }\n\n function updatePlayButtons(currentIndex, isPlaying) {\n document.querySelectorAll('.play-button').forEach((button, index) => {\n button.innerHTML = index === currentIndex && isPlaying ? \n '<div class=\"pause-icon\"><span><\/span><span><\/span><\/div>' :\n '<div class=\"play-icon\"><\/div>';\n });\n }\n\n function updateActiveSection(index) {\n progressItems.forEach((item, i) => {\n if (i === index) {\n item.classList.add('active');\n } else {\n item.classList.remove('active');\n }\n });\n\n const content = contentData[index];\n activeCard.innerHTML = `\n <h2>${content.title}<\/h2>\n <p>${content.text}<\/p>\n `;\n\n if (player && player.getPlayerState) {\n updatePlayButtons(index, player.getPlayerState() === YT.PlayerState.PLAYING);\n }\n }\n\n function onPlayerStateChange(event) {\n if (event.data === YT.PlayerState.PLAYING) {\n userPaused = false;\n updatePlayButtons(currentSectionIndex, true);\n checkProgress();\n } else if (event.data === YT.PlayerState.PAUSED) {\n userPaused = true;\n updatePlayButtons(currentSectionIndex, false);\n if (progressCheckTimeout) {\n clearTimeout(progressCheckTimeout);\n }\n }\n }\n\n progressItems.forEach((item, index) => {\n const playButton = item.querySelector('.play-button');\n \n function handleClick(e) {\n e.stopPropagation();\n \n if (progressCheckTimeout) {\n clearTimeout(progressCheckTimeout);\n }\n\n \/\/ First check if we're clicking the currently playing section\n if (currentSectionIndex === index && player.getPlayerState() === YT.PlayerState.PLAYING) {\n \/\/ If it's playing, pause it\n player.pauseVideo();\n userPaused = true;\n updatePlayButtons(index, false);\n } else {\n \/\/ Either different section or current section is paused\n currentSectionIndex = index;\n const time = parseFloat(item.dataset.time);\n player.seekTo(time);\n player.playVideo();\n userPaused = false;\n updateActiveSection(index);\n }\n }\n \n playButton.addEventListener('click', handleClick);\n item.addEventListener('click', handleClick);\n });\n \n \/\/ Function to load specific section from URL hash\n function loadSectionFromHash() {\n const hash = window.location.hash;\n if (hash && player && player.seekTo) { \/\/ Make sure player is ready\n const sectionId = hash.substring(1); \/\/ Remove the # symbol\n const index = {\n 'management': 0,\n 'safety': 1,\n 'food': 2,\n 'quality': 3,\n 'incidents': 4\n }[sectionId];\n \n if (index !== undefined) {\n currentSectionIndex = index;\n const time = parseFloat(progressItems[index].dataset.time);\n setTimeout(() => { \/\/ Add small delay to ensure player is ready\n player.seekTo(time);\n player.playVideo();\n updateActiveSection(index);\n }, 1000);\n }\n }\n }\n\n \/\/ Listen for hash changes\n window.addEventListener('hashchange', loadSectionFromHash);\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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>Racionalizaci\u00f3n de las operaciones en Bourne Leisure C\u00f3mo Bourne Leisure racionaliz\u00f3 las operaciones en 39 complejos tur\u00edsticos Panorama de la gesti\u00f3n Seguridad de las atracciones Comida y bebida Calidad del agua Gesti\u00f3n de incidentes y reclamaciones Panorama Bourne Leisure puede ahora gestionar y supervisar las operaciones a distancia en los 39 complejos tur\u00edsticos de su grupo.<\/p>","protected":false},"author":1,"featured_media":10557,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"class_list":["post-10633","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/pages\/10633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/comments?post=10633"}],"version-history":[{"count":65,"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/pages\/10633\/revisions"}],"predecessor-version":[{"id":11193,"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/pages\/10633\/revisions\/11193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/media\/10557"}],"wp:attachment":[{"href":"https:\/\/mobaro.com\/es\/wp-json\/wp\/v2\/media?parent=10633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}