From 8c65138a224f0aa3dfc0d5f9896107330a0257bf Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 08:31:53 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=92=84=20Add=20<NFTBookTooltips/>=20f?=
 =?UTF-8?q?or=20drm=20info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/Tooltips.vue | 42 +++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/NFTBook/Tooltips.vue

diff --git a/src/components/NFTBook/Tooltips.vue b/src/components/NFTBook/Tooltips.vue
new file mode 100644
index 000000000..b4270795d
--- /dev/null
+++ b/src/components/NFTBook/Tooltips.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    :class="[
+      'absolute',
+      'top-[24px]',
+      'z-50',
+
+      'flex',
+      'flex-col',
+      'items-start',
+      'px-[16px]',
+      'py-[8px]',
+
+      'border border-[#E3E3E3]',
+      'rounded-[12px]',
+      'bg-white',
+      'w-[230px]',
+
+      'text-[14px]',
+      'shadow-md',
+    ]"
+  >
+    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>
+    <p>{{ tooltipText }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NFTBookTooltips',
+  props: {
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+};
+</script>

From 75778f644f1d0288122db21ffc5df94e9d8637a0 Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 08:32:15 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=92=84=20Add=20<BottomDialog/>=20for?=
 =?UTF-8?q?=20mobile=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomDialog.vue | 46 +++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/BottomDialog.vue

diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
new file mode 100644
index 000000000..067c42970
--- /dev/null
+++ b/src/components/BottomDialog.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
+    <div
+      class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+    >
+      <div class="relative w-full">
+        <ButtonV2
+          circle="true"
+          size="small"
+          preset="tertiary"
+          class="absolute bottom-[12px] left-[12px]"
+          @click.prevent="close"
+        >
+          <IconClose class="w-[20px]" />
+        </ButtonV2>
+      </div>
+
+      <div
+        class="flex items-center justify-center w-full pt-[12px] pb-[8px] px-[20px]"
+      >
+        <h5 class="text-[18px] font-600 text-black" v-text="title" />
+      </div>
+      <div class="w-full h-[1px] bg-shade-gray" />
+
+      <div class="px-[20px] pt-[18px] pb-[24px]">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'BottomDialog',
+  props: {
+    title: {
+      type: String,
+      default: undefined,
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>

From ae696515f758e0d78cccb5fd9ccdcb23edd7705c Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Wed, 18 Dec 2024 08:37:05 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20Implement=20drm=20info=20UI?=
 =?UTF-8?q?=20to=20<SpecTableValue/>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Icon/Info.vue                  | 21 +++++++
 .../NFTBook/SpecTableItemAccessMethod.vue     | 26 +++++++-
 src/components/NFTBook/SpecTableValue.vue     | 59 ++++++++++++++++++-
 src/locales/en.json                           |  4 ++
 src/locales/zh-Hant.json                      |  4 ++
 5 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Icon/Info.vue

diff --git a/src/components/Icon/Info.vue b/src/components/Icon/Info.vue
new file mode 100644
index 000000000..e9c5bd1e4
--- /dev/null
+++ b/src/components/Icon/Info.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_2791_3213)">
+      <path
+        d="M7.33334 11.3333H8.66667V7.33334H7.33334V11.3333ZM8 1.33334C4.32 1.33334 1.33334 4.32001 1.33334 8.00001C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00001C14.6667 4.32001 11.68 1.33334 8 1.33334ZM8 13.3333C5.06 13.3333 2.66667 10.94 2.66667 8.00001C2.66667 5.06001 5.06 2.66668 8 2.66668C10.94 2.66668 13.3333 5.06001 13.3333 8.00001C13.3333 10.94 10.94 13.3333 8 13.3333ZM7.33334 6.00001H8.66667V4.66668H7.33334V6.00001Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2791_3213">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/src/components/NFTBook/SpecTableItemAccessMethod.vue b/src/components/NFTBook/SpecTableItemAccessMethod.vue
index 04d6db29f..ad98bef64 100644
--- a/src/components/NFTBook/SpecTableItemAccessMethod.vue
+++ b/src/components/NFTBook/SpecTableItemAccessMethod.vue
@@ -3,7 +3,12 @@
     <NFTBookSpecTableLabel
       :text="$t('nft_details_page_label_access_methods')"
     />
-    <NFTBookSpecTableValue :text="value" :preset="preset" />
+    <NFTBookSpecTableValue
+      :text="value"
+      :preset="preset"
+      :tooltip-title="tooltipsContent.title"
+      :tooltip-text="tooltipsContent.text"
+    />
   </component>
 </template>
 
@@ -29,6 +34,25 @@ export default {
         ? this.$t('nft_details_page_label_access_methods_downloadable')
         : this.$t('nft_details_page_label_access_methods_web_only');
     },
+    tooltipsContent() {
+      return this.isDownloadable
+        ? {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm_free'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltips_text_drm_free'
+            ),
+          }
+        : {
+            title: this.$t(
+              'nft_details_page_label_access_methods_tooltips_title_drm'
+            ),
+            text: this.$t(
+              'nft_details_page_label_access_methods_tooltips_text_drm'
+            ),
+          };
+    },
   },
 };
 </script>
diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
index 9a00a0fa5..54aaf54bc 100644
--- a/src/components/NFTBook/SpecTableValue.vue
+++ b/src/components/NFTBook/SpecTableValue.vue
@@ -1,9 +1,41 @@
 <template>
-  <div :class="['font-[600]', textStyle]" v-text="text" />
+  <div class="flex gap-[8px] items-center">
+    <div :class="['font-[600]', textStyle]" v-text="text" />
+    <div
+      v-if="tooltipText"
+      class="relative hidden group laptop:block"
+      @mouseenter="hoverTooltips"
+    >
+      <IconInfo />
+      <NFTBookTooltips
+        class="hidden group-hover:block"
+        :tooltip-text="tooltipText"
+        :tooltip-title="tooltipTitle"
+      />
+    </div>
+
+    <div
+      v-if="tooltipText"
+      class="cursor-pointer laptop:hidden"
+      @click="onclickShowTooltips"
+    >
+      <IconInfo />
+    </div>
+    <BottomDialog
+      v-if="showTooltips"
+      :title="tooltipTitle"
+      @close="closeTooltips"
+    >
+      <template #content>
+        {{ tooltipText }}
+      </template>
+    </BottomDialog>
+  </div>
 </template>
 
 <script>
 import { PRESET_TYPE } from '~/components/NFTBook/ItemCard';
+import { logTrackerEvent } from '~/util/EventLogger';
 
 export default {
   props: {
@@ -15,6 +47,19 @@ export default {
       type: String,
       default: PRESET_TYPE.DEFAULT,
     },
+    tooltipText: {
+      type: String,
+      default: undefined,
+    },
+    tooltipTitle: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      showTooltips: false,
+    };
   },
   computed: {
     textStyle() {
@@ -22,5 +67,17 @@ export default {
       return 'text-dark-gray';
     },
   },
+  methods: {
+    hoverTooltips() {
+      logTrackerEvent(this, 'NFTBook', 'TooltipsHover', '', 1);
+    },
+    onclickShowTooltips() {
+      this.showTooltips = true;
+      logTrackerEvent(this, 'NFTBook', 'TooltipsClicked', '', 1);
+    },
+    closeTooltips() {
+      this.showTooltips = false;
+    },
+  },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 572e81ca3..94ca35432 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -668,6 +668,10 @@
   "nft_details_page_errormessage_transfer_self": "You cannot send Writing NFT to yourself.",
   "nft_details_page_label_access_methods": "Access Method",
   "nft_details_page_label_access_methods_downloadable": "Read online / Download",
+  "nft_details_page_label_access_methods_tooltips_text_drm": "Refers to eBooks that have digital rights management technology, allowing readers to open and read the content on our site.",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM Content",
+  "nft_details_page_label_access_methods_tooltips_text_drm_free": "Refers to eBooks without digital rights management technology, allowing readers to freely download and transfer the eBook to different devices.",
+  "nft_details_page_label_access_methods_tooltips_title_drm_free": "DRM-Free Content",
   "nft_details_page_label_access_methods_web_only": "Read Online",
   "nft_details_page_label_ar_view_in_mobile": "Experience your NFT live",
   "nft_details_page_label_class_page": "View all events from this content",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index 5471c3a5b..0404f829d 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -668,6 +668,10 @@
   "nft_details_page_errormessage_transfer_self": "不能發送給自己",
   "nft_details_page_label_access_methods": "閱讀方式",
   "nft_details_page_label_access_methods_downloadable": "站內閱讀 / 檔案下載",
+  "nft_details_page_label_access_methods_tooltips_text_drm": "指設有數位版權管理技術的電子書，讀者可以於我們的站內開啟及閱讀內容。",
+  "nft_details_page_label_access_methods_tooltips_title_drm": "DRM 內容",
+  "nft_details_page_label_access_methods_tooltips_text_drm_free": "指沒有數位版權管理技術的電子書，讀者可以自由下載和傳輸電子書到不同裝置。",
+  "nft_details_page_label_access_methods_tooltips_title_drm_free": "不設 DRM 內容",
   "nft_details_page_label_access_methods_web_only": "站內閱讀",
   "nft_details_page_label_ar_view_in_mobile": "將你的 NFT 帶到現實",
   "nft_details_page_label_class_page": "檢視此系列的其他事件",

From 14a2c43bd481b84baa1b4f3fdb3781659aa315de Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 10:53:14 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=92=84=20Fix=20z-index=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NFTBook/SpecTableValue.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NFTBook/SpecTableValue.vue b/src/components/NFTBook/SpecTableValue.vue
index 54aaf54bc..e5a75193c 100644
--- a/src/components/NFTBook/SpecTableValue.vue
+++ b/src/components/NFTBook/SpecTableValue.vue
@@ -3,7 +3,7 @@
     <div :class="['font-[600]', textStyle]" v-text="text" />
     <div
       v-if="tooltipText"
-      class="relative hidden group laptop:block"
+      class="relative z-[300] hidden group laptop:block"
       @mouseenter="hoverTooltips"
     >
       <IconInfo />

From 1e6d2ccf88df79137bb65b8f29ab7205712d1d9f Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 11:20:59 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20backdrop=20behavio?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomDialog.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
index 067c42970..f7efeaeed 100644
--- a/src/components/BottomDialog.vue
+++ b/src/components/BottomDialog.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="fixed inset-0 z-50 bg-black bg-opacity-[30%]">
+  <div
+    class="fixed inset-0 z-[1000001] bg-opacity-25 backdrop-filter bg-dark-gray backdrop-blur-sm"
+    @click="close"
+  >
     <div
       class="fixed left-0 bottom-0 flex flex-col items-center gap-[8px] w-full bg-white rounded-t-[16px]"
+      @click.stop
     >
       <div class="relative w-full">
         <ButtonV2
@@ -18,7 +22,7 @@
       <div
         class="flex items-center justify-center w-full pt-[12px] pb-[8px] px-[20px]"
       >
-        <h5 class="text-[18px] font-600 text-black" v-text="title" />
+        <p class="block text-[18px] font-600 text-black" v-text="title" />
       </div>
       <div class="w-full h-[1px] bg-shade-gray" />
 
@@ -37,9 +41,17 @@ export default {
       default: undefined,
     },
   },
+  mounted() {
+    // Prevent scrolling on the body when the dialog is open
+    document.body.classList.add('overflow-hidden');
+  },
+  beforeUnmount() {
+    document.body.classList.remove('overflow-hidden');
+  },
   methods: {
     close() {
       this.$emit('close');
+      document.body.classList.remove('overflow-hidden');
     },
   },
 };

From 85a0a83779bc9cfa4ad112e487cda532a0d71aaf Mon Sep 17 00:00:00 2001
From: AuroraHuang22 <aurora90376@gmail.com>
Date: Fri, 20 Dec 2024 11:26:01 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=84=20Adjust=20minor=20style=20iss?=
 =?UTF-8?q?ues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BottomDialog.vue     | 2 +-
 src/components/NFTBook/Tooltips.vue | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/BottomDialog.vue b/src/components/BottomDialog.vue
index f7efeaeed..85aadddfa 100644
--- a/src/components/BottomDialog.vue
+++ b/src/components/BottomDialog.vue
@@ -26,7 +26,7 @@
       </div>
       <div class="w-full h-[1px] bg-shade-gray" />
 
-      <div class="px-[20px] pt-[18px] pb-[24px]">
+      <div class="px-[20px] pt-[18px] pb-[48px]">
         <slot name="content" />
       </div>
     </div>
diff --git a/src/components/NFTBook/Tooltips.vue b/src/components/NFTBook/Tooltips.vue
index b4270795d..dcbb59a37 100644
--- a/src/components/NFTBook/Tooltips.vue
+++ b/src/components/NFTBook/Tooltips.vue
@@ -20,8 +20,11 @@
       'shadow-md',
     ]"
   >
-    <h4 class="font-600 text-dark-gray">{{ tooltipTitle }}</h4>
-    <p>{{ tooltipText }}</p>
+    <p
+      class="block text-[14px] font-600 text-dark-gray"
+      v-text="tooltipTitle"
+    />
+    <p v-text="tooltipText" />
   </div>
 </template>