{"id":27,"date":"2025-04-29T07:59:22","date_gmt":"2025-04-29T07:59:22","guid":{"rendered":"https:\/\/vc.cau.ac.kr\/attractivehungary\/?page_id=27"},"modified":"2025-04-30T05:38:04","modified_gmt":"2025-04-30T05:38:04","slug":"the-pearladox","status":"publish","type":"page","link":"https:\/\/vc.cau.ac.kr\/attractivehungary\/the-pearladox\/","title":{"rendered":"The Pearladox"},"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 = \"The Pearladox\";\n      }\n\n      const videoEl = document.getElementById('myVideo');\n      if (videoEl) {\n        videoEl.addEventListener('ended', () => {\n          window.location.href = '\/attractivehungary\/RECONNECTION';\n        });\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\/attractivehungary\/wp-content\/uploads\/sites\/5\/2025\/04\/MOME-Convert-Team2.mp4\"\n             muted autoplay>\n      <\/video>\n    <\/a-assets>\n    <a-videosphere src=\"#myVideo\" rotation=\"0 0 0\"><\/a-videosphere>\n    <a-camera id=\"customCamera\" position=\"0 1.6 0\" rotation=\"90 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;\r\n      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,\r\n    .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,\r\n    .audio-control svg {\r\n      margin-right: 6px;\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n    .info:hover,\r\n    .audio-control:hover {\r\n      background: var(--hover-bg);\r\n    }\r\n    .info:active,\r\n    .audio-control:active {\r\n      background: rgba(255, 255, 255, 0.25);\r\n      \/* \uc6d0\ub798 \ud06c\uae30 \uc720\uc9c0, transform \uc0ad\uc81c *\/\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 {\r\n      display: none;\r\n    }\r\n    .audio-control.muted .icon-on {\r\n      display: none;\r\n    }\r\n    .audio-control.muted .icon-off {\r\n      display: block;\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 2\ud589 \u00d7 50px *\/\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%);\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-content {\r\n      padding: 0px 15px;\r\n      color: white;\r\n      font-size: 16px;\r\n      line-height: 1.5;\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\r\n    \/* \ub4dc\ub798\uadf8 \uc2dc \uc120\ud0dd \ubc29\uc9c0 *\/\r\n    .bottom-container,\r\n    .drawer-wrapper,\r\n    .bottom-container *,\r\n    .drawer-wrapper * {\r\n      user-select: none;\r\n      -webkit-user-select: none;\r\n      -moz-user-select: none;\r\n      -ms-user-select: none;\r\n    }\r\n  <\/style>\r\n\r\n  <!-- \ud558\ub2e8 \ucee8\ud14c\uc774\ub108 -->\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        <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        <span\r\n          id=\"infoTitle\"\r\n          data-description=\"\r\n<strong>Subject<\/strong> \u00a0 Kis gy\u00f6ngy (Seed pearl) <hr>\r\nEven if the dream shatters,<br> every step toward it was real.<br> The outcome isn\u2019t everything. <br>There\u2019s a sense of fulfillment only those who dared  <br>the journey can feel.\r\n          \">\r\n          Subject\r\n        <\/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 muted\" id=\"sound-mute\">\r\n        <svg class=\"icon-on\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n          <path d=\"M10 4L6 8H3v8h3l4 4V4z\"\/><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        <svg class=\"icon-off\" viewBox=\"0 0 24 24\" fill=\"white\">\r\n          <path d=\"M10 4L6 8H3v8h3l4 4V4z\"\/><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\"\/><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 id=\"drawer-title\">Subject<\/span>\r\n        <button id=\"drawer-close\" class=\"close-btn\">\u00d7<\/button>\r\n      <\/div>\r\n      <div class=\"drawer-content\">\r\n        <p id=\"drawer-description\"><\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/\/ \uc624\ub514\uc624 \ud1a0\uae00\r\n    const videoEl = document.getElementById('myVideo');\r\n    const soundMuteBtn = document.getElementById('sound-mute');\r\n    if (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\n    document.addEventListener('DOMContentLoaded', () => {\r\n      if (soundMuteBtn) soundMuteBtn.classList.add('muted');\r\n      if (videoEl) {\r\n        videoEl.muted = true;\r\n        videoEl.play().catch(() => {});\r\n      }\r\n    });\r\n\r\n    \/\/ Drawer \uc5f4\uae30\/\ub2eb\uae30 \ubc0f \uc124\uba85 \uc0bd\uc785\r\n    const infoButton  = document.getElementById('infoButton');\r\n    const infoTitleEl = document.getElementById('infoTitle');\r\n    const drawer      = document.getElementById('drawer');\r\n    const drawerDesc  = document.getElementById('drawer-description');\r\n    const drawerTitle = document.getElementById('drawer-title');\r\n    const drawerClose = document.getElementById('drawer-close');\r\n\r\n    if (infoButton) {\r\n      infoButton.addEventListener('click', () => {\r\n        drawerTitle.textContent = infoTitleEl.textContent;\r\n        drawerDesc.innerHTML    = infoTitleEl.dataset.description.trim();\r\n        drawer.classList.toggle('open');\r\n      });\r\n    }\r\n    if (drawerClose) {\r\n      drawerClose.addEventListener('click', () => {\r\n        drawer.classList.remove('open');\r\n      });\r\n    }\r\n\r\n\/\/ A-Frame custom-look-controls \ucef4\ud3ec\ub10c\ud2b8\r\n  if (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        \/\/ \uae30\uc874 look-controls \uc81c\uac70\r\n        const camera = document.getElementById('customCamera');\r\n        if (camera) camera.removeAttribute('look-controls');\r\n\r\n        \/\/ \ub9c8\uc6b0\uc2a4\/\ud130\uce58 \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\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            const dx = (evt.clientX - this.lastPos.x) * -0.5;\r\n            const dy = (evt.clientY - this.lastPos.y) * -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        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            const dx = (evt.touches[0].clientX - this.lastPos.x) * -0.5;\r\n            const dy = (evt.touches[0].clientY - this.lastPos.y) * -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        const rotation = this.el.getAttribute('rotation');\r\n        this.velocity.multiplyScalar(1 - this.data.damping);\r\n        rotation.y -= this.velocity.x * 0.1;\r\n        rotation.x -= this.velocity.y * 0.1;\r\n        rotation.x = Math.max(-80, Math.min(80, rotation.x));\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    });\r\n  }\r\n\r\n  <\/script>\r\n\n","protected":false},"excerpt":{"rendered":"<p>IMMERSIVE BEATS : The Pearladox<\/p>\n","protected":false},"author":2,"featured_media":10,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":9,"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/pages\/27\/revisions\/264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/media\/10"}],"wp:attachment":[{"href":"https:\/\/vc.cau.ac.kr\/attractivehungary\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}