{"id":1075,"date":"2025-02-12T14:48:04","date_gmt":"2025-02-12T14:48:04","guid":{"rendered":"https:\/\/vc.cau.ac.kr\/attractivelaos\/?page_id=1075"},"modified":"2025-02-25T10:14:10","modified_gmt":"2025-02-25T10:14:10","slug":"sky-club-hot-air-balloon","status":"publish","type":"page","link":"https:\/\/vc.cau.ac.kr\/attractivelaos\/sky-club-hot-air-balloon\/","title":{"rendered":"Sky Club : Hot Air Balloon"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ko\" style=\"background: #000;\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" \/>\n  <script src=\"https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js\"><\/script>\n<\/head>\n<body>\n  <script>\n    document.addEventListener('DOMContentLoaded', () => {\n      const infoTitleEl = document.getElementById('infoTitle');\n      if (infoTitleEl) {\n        infoTitleEl.textContent = \"Sky Club : Hot Air Balloon\";\n      }\n    });\n  <\/script>\n  <a-scene id=\"myScene\"\n           loading-screen=\"enabled: false\"\n           background=\"color: #000\"\n           vr-mode-ui=\"enabled: false\"\n           renderer=\"xrEnabled: false\">\n    <a-assets timeout=\"1\">\n      <video id=\"myVideo\"\n             src=\"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-content\/uploads\/sites\/4\/2025\/02\/sky-club-hot-air-balloon.mp4\"\n             muted autoplay loop>\n      <\/video>\n      <audio id=\"narrationAudio\"\n             src=\"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-content\/uploads\/sites\/4\/2025\/02\/sky-club-hot-air-balloon.wav\"\n             muted autoplay loop>\n      <\/audio>\n    <\/a-assets>\n    <a-videosphere src=\"#myVideo\" rotation=\"0 260 0\"><\/a-videosphere>\n    <a-camera id=\"customCamera\" position=\"0 1.6 0\" rotation=\"0 90 0\" custom-look-controls><\/a-camera>\n  <\/a-scene>\n<\/body>\n<\/html>\n\n\n<style>\r\n  :root {\r\n    --line-color: #ffffff;\r\n    --hover-bg: rgba(255, 255, 255, 0.15);\r\n    --tooltip-bg: #ffffff;\r\n  }\r\n  body {\r\n    margin: 0; padding: 0;\r\n    background: #000;\r\n    font-family: sans-serif;\r\n  }\r\n\r\n  \/* \ud558\ub2e8 \ubc15\uc2a4 *\/\r\n  .bottom-container {\r\n    position: fixed;\r\n    bottom: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    width: 100%;\r\n    max-width: 800px;\r\n    border: 1px solid var(--line-color);\r\n    background: rgba(255, 255, 255, 0.1);\r\n    backdrop-filter: blur(7px);\r\n    z-index: 2000;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n  .bottom-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 50px;\r\n  }\r\n  .info, .audio-control {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    color: white;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n    flex-grow: 1;\r\n  }\r\n  .info svg, .audio-control svg {\r\n    margin-right: 6px;\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n  .info:hover, .audio-control:hover {\r\n    background: var(--hover-bg);\r\n  }\r\n  .info:active, .audio-control:active {\r\n    background: rgba(255, 255, 255, 0.25);\r\n    transform: scale(0.98);\r\n  }\r\n  .audio-row {\r\n    display: flex;\r\n    border-top: 1px solid var(--line-color);\r\n  }\r\n  .audio-control .icon-off { display: none; }\r\n  .audio-control.muted .icon-on { display: none; }\r\n  .audio-control.muted .icon-off { display: block; }\r\n  .divider {\r\n    width: 1px;\r\n    height: 50px;\r\n    background: var(--line-color);\r\n  }\r\n\r\n  \/* \ub4dc\ub85c\uc5b4 *\/\r\n  .drawer-wrapper {\r\n    position: fixed;\r\n    left: 50%;\r\n    bottom: 100px; \/* \ud558\ub2e8 \ubc15\uc2a4 \ub192\uc774(2\ud589\u00d750px) *\/\r\n    width: 100%;\r\n    max-width: 800px;\r\n    transform: translateX(-50%);\r\n    overflow: hidden;\r\n    z-index: 1500;\r\n  }\r\n  .drawer {\r\n    position: relative;\r\n    width: 100%;\r\n    max-height: 50vh;\r\n    overflow-y: auto;\r\n    background: rgba(255, 255, 255, 0.1);\r\n    backdrop-filter: blur(7px);\r\n    border-top: 1px solid var(--line-color);\r\n    border-left: 1px solid var(--line-color);\r\n    border-right: 1px solid var(--line-color);\r\n    transition: transform 0.4s ease;\r\n    transform: translateY(100%); \/* \ub2eb\ud798 \uc0c1\ud0dc *\/\r\n  }\r\n  .drawer.open {\r\n    transform: translateY(0);\r\n  }\r\n  .drawer-header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    padding: 15px;\r\n    border-bottom: 1px solid var(--line-color);\r\n    font-size: 18px;\r\n    font-weight: bold;\r\n    color: white;\r\n  }\r\n  .drawer-list {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 10px;\r\n    color: white;\r\n  }\r\n  .drawer-list li {\r\n    padding: 12px 15px;\r\n    border-bottom: 1px solid rgba(255,255,255,0.2);\r\n  }\r\n  .drawer-list li a {\r\n    color: white;\r\n    text-decoration: none;\r\n    font-size: 16px;\r\n  }\r\n  .close-btn {\r\n    background: none;\r\n    border: none;\r\n    font-size: 24px;\r\n    color: white;\r\n    cursor: pointer;\r\n  }\r\n  \/* \uc2a4\ud06c\ub864\ubc14 *\/\r\n  .drawer::-webkit-scrollbar {\r\n    width: 8px;\r\n  }\r\n  .drawer::-webkit-scrollbar-track {\r\n    background: rgba(255,255,255,0.1);\r\n  }\r\n  .drawer::-webkit-scrollbar-thumb {\r\n    background: rgba(255,255,255,0.4);\r\n    border-radius: 4px;\r\n  }\r\n  .drawer::-webkit-scrollbar-thumb:hover {\r\n    background: rgba(255,255,255,0.6);\r\n  }\r\n  \/* Firefox *\/\r\n  .drawer {\r\n    scrollbar-width: thin;\r\n    scrollbar-color: rgba(255,255,255,0.4) rgba(255,255,255,0.1);\r\n  }\r\n<\/style>\r\n\r\n<!-- \ud558\ub2e8 \ucee8\ud14c\uc774\ub108 (Info \/ \uc624\ub514\uc624 \ubc84\ud2bc) -->\r\n<div class=\"bottom-container\">\r\n  <!-- 1\ud589: Info \ubc84\ud2bc -->\r\n  <div class=\"bottom-row\">\r\n    <div class=\"info\" id=\"infoButton\">\r\n      <!-- \uc544\uc774\ucf58 -->\r\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n        <path d=\"M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm.75 15h-1.5v-6h1.5Zm0-8h-1.5v-2h1.5Z\"\/>\r\n      <\/svg>\r\n      <!-- \ud398\uc774\uc9c0\ubcc4\ub85c \uc138\ud305\ud560 \ud14d\uc2a4\ud2b8 -->\r\n      <span id=\"infoTitle\">[PAGE_TITLE]<\/span>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- 2\ud589: \uc624\ub514\uc624 \ucee8\ud2b8\ub864 -->\r\n  <div class=\"bottom-row audio-row\">\r\n    <div class=\"audio-control\" id=\"narration-mute\">\r\n      <!-- ON \uc544\uc774\ucf58 -->\r\n      <svg class=\"icon-on\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n        <path d=\"M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z\"\/>\r\n        <path d=\"M12 16v4m-3 0h6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M18 11a6 6 0 0 1-12 0\" stroke=\"white\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n      <!-- OFF \uc544\uc774\ucf58 -->\r\n      <svg class=\"icon-off\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n        <path d=\"M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3z\"\/>\r\n        <path d=\"M12 16v4m-3 0h6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M18 11a6 6 0 0 1-12 0\" stroke=\"white\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/>\r\n        <path d=\"M6 18l12-12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n      Narration\r\n    <\/div>\r\n    <div class=\"divider\"><\/div>\r\n    <div class=\"audio-control\" id=\"sound-mute\">\r\n      <!-- ON \uc544\uc774\ucf58 -->\r\n      <svg class=\"icon-on\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n        <path d=\"M10 4 6 8H3v8h3l4 4V4z\"\/>\r\n        <path d=\"M15 8.5a1 1 0 0 0-1.5 1.4 4 4 0 0 1 0 4.2 1 1 0 1 0 1.5 1.4 6 6 0 0 0 0-7z\"\/>\r\n      <\/svg>\r\n      <!-- OFF \uc544\uc774\ucf58 -->\r\n      <svg class=\"icon-off\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n        <path d=\"M10 4 6 8H3v8h3l4 4V4z\"\/>\r\n        <path d=\"M15 8.5a1 1 0 0 0-1.5 1.4 4 4 0 0 1 0 4.2 1 1 0 1 0 1.5 1.4 6 6 0 0 0 0-7z\"\/>\r\n        <path d=\"M6 18l12-12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n      <\/svg>\r\n      Sound\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \ub4dc\ub85c\uc5b4 -->\r\n<div class=\"drawer-wrapper\">\r\n  <div id=\"drawer\" class=\"drawer\">\r\n    <div class=\"drawer-header\">\r\n      <span>Lifestyle<\/span>\r\n      <button id=\"drawer-close\" class=\"close-btn\">\u00d7<\/button>\r\n    <\/div>\r\n    <ul class=\"drawer-list\">\r\n      <!-- \uc608\uc2dc \ub9c1\ud06c\ub4e4 -->\r\n      <li><a href=\"\/attractivelaos\/khok-saath-salt-village\">Khok Saath Salt Village<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/daily-shopping\">Daily Shopping<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/life-on-the-street\">Life on the Street<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/amusement-park-mekong-riverside\">Amusement Park : Mekong riverside<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/markets-in-vientiane\">Markets in Vientiane<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/sky-club-hot-air-balloon\">Sky Club : Hot Air Balloon<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/markets-in-vang-vieng\">Markets in Vang Vieng<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/transportation\">Transportation<\/a><\/li>\r\n      <li><a href=\"\/attractivelaos\/malls\">Malls<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \uc804\uc5ed \uc2a4\ud06c\ub9bd\ud2b8 -->\r\n<script>\r\n\r\n\/\/ (1) \uc624\ub514\uc624 \ucee8\ud2b8\ub864\r\nconst videoEl = document.getElementById('myVideo');\r\nconst narrationEl = document.getElementById('narrationAudio');\r\nconst soundMuteBtn = document.getElementById('sound-mute');\r\nconst narrationMuteBtn = document.getElementById('narration-mute');\r\n\r\nif (soundMuteBtn) {\r\n  soundMuteBtn.addEventListener('click', () => {\r\n    if (!videoEl) return;\r\n    videoEl.muted = !videoEl.muted;\r\n    soundMuteBtn.classList.toggle('muted', videoEl.muted);\r\n  });\r\n}\r\nif (narrationMuteBtn) {\r\n  narrationMuteBtn.addEventListener('click', () => {\r\n    if (!narrationEl) return;\r\n    narrationEl.muted = !narrationEl.muted;\r\n    narrationMuteBtn.classList.toggle('muted', narrationEl.muted);\r\n  });\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  \/\/ \uae30\ubcf8\uc801\uc73c\ub85c muted \uc0c1\ud0dc\ub85c \ud45c\uc2dc\r\n  if (soundMuteBtn) soundMuteBtn.classList.add('muted');\r\n  if (narrationMuteBtn) narrationMuteBtn.classList.add('muted');\r\n\r\n  \/\/ \uc790\ub3d9 \uc7ac\uc0dd \uc2dc\ub3c4 (mute \uc0c1\ud0dc\uc774\ubbc0\ub85c \ud06c\ub86c \uc815\ucc45\uc0c1 \ubb38\uc81c \uc5c6\uc74c)\r\n  if (videoEl) {\r\n    videoEl.muted = true;\r\n    videoEl.play().catch(()=>{});\r\n  }\r\n  if (narrationEl) {\r\n    narrationEl.muted = true;\r\n    narrationEl.play().catch(()=>{});\r\n  }\r\n});\r\n\r\n\/\/ (2) \uc601\uc0c1\/\ub0b4\ub808\uc774\uc158 \ub3d9\uae30\ud654\r\nif (videoEl && narrationEl) {\r\n  videoEl.addEventListener('play', () => { narrationEl.play().catch(()=>{}); });\r\n  videoEl.addEventListener('pause', () => { narrationEl.pause(); });\r\n  videoEl.addEventListener('timeupdate', () => {\r\n    if (Math.abs(videoEl.currentTime - narrationEl.currentTime) > 0.3) {\r\n      narrationEl.currentTime = videoEl.currentTime;\r\n    }\r\n  });\r\n}\r\n\r\n\/\/ (3) \ub4dc\ub85c\uc5b4 \uc5f4\uae30\/\ub2eb\uae30\r\nconst infoButton = document.getElementById('infoButton');\r\nconst drawer = document.getElementById('drawer');\r\nconst drawerClose = document.getElementById('drawer-close');\r\nif (infoButton && drawer) {\r\n  infoButton.addEventListener('click', () => {\r\n    drawer.classList.toggle('open');\r\n  });\r\n}\r\nif (drawerClose) {\r\n  drawerClose.addEventListener('click', () => {\r\n    drawer.classList.remove('open');\r\n  });\r\n}\r\n\/\/ \ub4dc\ub85c\uc5b4 \uc601\uc5ed \ub4dc\ub798\uadf8 \uc2dc A-Frame \ud68c\uc804 \ub9c9\uae30\r\nif (drawer) {\r\n  ['mousedown','mousemove','mouseup','touchstart','touchmove','touchend'].forEach(eventType => {\r\n    drawer.addEventListener(eventType, e => e.stopPropagation());\r\n  });\r\n}\r\n\r\n\/\/ (4) custom-look-controls \ub4f1\ub85d\r\nif (typeof AFRAME !== 'undefined') {\r\n  AFRAME.registerComponent('custom-look-controls', {\r\n    schema: { damping: { type: 'number', default: 0.05 } },\r\n    init: function () {\r\n      this.velocity = new THREE.Vector2(0, 0);\r\n      this.isDragging = false;\r\n      this.lastPos = null;\r\n\r\n      \/\/ \ub514\ubc14\uc774\uc2a4 \ubc29\ud5a5 \uc13c\uc11c \ube44\ud65c\uc131\ud654 (\uc6d0\uce58 \uc54a\ub294 \ud68c\uc804 \ubc29\uc9c0)\r\n      if (window.DeviceOrientationEvent) {\r\n        window.removeEventListener('deviceorientation', this.onDeviceOrientation);\r\n      }\r\n      \/\/ \uae30\uc874 look-controls \uc81c\uac70\r\n      const camera = document.getElementById('customCamera');\r\n      if (camera) {\r\n        camera.removeAttribute('look-controls');\r\n      }\r\n\r\n      \/\/ \ub9c8\uc6b0\uc2a4 \uc774\ubca4\ud2b8\r\n      this.onMouseDown = () => { this.isDragging = true; };\r\n      this.onMouseUp   = () => { this.isDragging = false; this.lastPos = null; };\r\n      this.onMouseMove = (evt) => {\r\n        if (this.isDragging && this.lastPos) {\r\n          let dx = evt.clientX - this.lastPos.x;\r\n          let dy = evt.clientY - this.lastPos.y;\r\n          dx *= -0.5;  \/\/ \ud68c\uc804 \ubc29\ud5a5 \uc870\uc815\r\n          dy *= -0.5;\r\n          this.velocity.set(dx, dy);\r\n        }\r\n        this.lastPos = { x: evt.clientX, y: evt.clientY };\r\n      };\r\n\r\n      \/\/ \ud130\uce58 \uc774\ubca4\ud2b8\r\n      this.onTouchStart = (evt) => {\r\n        this.isDragging = true;\r\n        this.lastPos = { x: evt.touches[0].clientX, y: evt.touches[0].clientY };\r\n      };\r\n      this.onTouchEnd = () => { this.isDragging = false; this.lastPos = null; };\r\n      this.onTouchMove = (evt) => {\r\n        if (this.isDragging && this.lastPos) {\r\n          let dx = evt.touches[0].clientX - this.lastPos.x;\r\n          let dy = evt.touches[0].clientY - this.lastPos.y;\r\n          dx *= -0.5;\r\n          dy *= -0.5;\r\n          this.velocity.set(dx, dy);\r\n          this.lastPos = { x: evt.touches[0].clientX, y: evt.touches[0].clientY };\r\n        }\r\n      };\r\n\r\n      window.addEventListener('mousedown', this.onMouseDown);\r\n      window.addEventListener('mouseup', this.onMouseUp);\r\n      window.addEventListener('mousemove', this.onMouseMove);\r\n      window.addEventListener('touchstart', this.onTouchStart);\r\n      window.addEventListener('touchend', this.onTouchEnd);\r\n      window.addEventListener('touchmove', this.onTouchMove);\r\n    },\r\n    tick: function () {\r\n      \/\/ damping\uc73c\ub85c \uce74\uba54\ub77c \ud68c\uc804 \uac10\uc18d\r\n      const rotation = this.el.getAttribute('rotation');\r\n      this.velocity.multiplyScalar(1 - this.data.damping);\r\n\r\n      rotation.y -= this.velocity.x * 0.1;\r\n      rotation.x -= this.velocity.y * 0.1;\r\n      \/\/ \uc0c1\ud558\uac01 \uc81c\ud55c\r\n      rotation.x = Math.max(-80, Math.min(80, rotation.x));\r\n\r\n      this.el.setAttribute('rotation', rotation);\r\n    },\r\n    remove: function () {\r\n      window.removeEventListener('mousedown', this.onMouseDown);\r\n      window.removeEventListener('mouseup', this.onMouseUp);\r\n      window.removeEventListener('mousemove', this.onMouseMove);\r\n      window.removeEventListener('touchstart', this.onTouchStart);\r\n      window.removeEventListener('touchend', this.onTouchEnd);\r\n      window.removeEventListener('touchmove', this.onTouchMove);\r\n\r\n      if (window.DeviceOrientationEvent) {\r\n        window.removeEventListener('deviceorientation', this.onDeviceOrientation);\r\n      }\r\n    }\r\n  });\r\n}\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"<p>Sky Club : Hot Air Balloon<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1075","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/pages\/1075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/comments?post=1075"}],"version-history":[{"count":5,"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/pages\/1075\/revisions"}],"predecessor-version":[{"id":1708,"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/pages\/1075\/revisions\/1708"}],"wp:attachment":[{"href":"https:\/\/vc.cau.ac.kr\/attractivelaos\/wp-json\/wp\/v2\/media?parent=1075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}