From bbd81750c9c20820be1244e95323705e1c1b4fcb Mon Sep 17 00:00:00 2001
From: qcrao <qcrao91@gmail.com>
Date: Tue, 9 Jul 2024 15:55:56 +0800
Subject: [PATCH] beautify bug dialog

---
 popup.css  | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 popup.html | 24 ++++++++++++++---
 popup.js   | 57 +++++++++++++++++++++++++++++-----------
 3 files changed, 140 insertions(+), 18 deletions(-)

diff --git a/popup.css b/popup.css
index 36b37eb..6400c94 100644
--- a/popup.css
+++ b/popup.css
@@ -172,3 +172,80 @@ button#bulk-archive {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 5% auto;
+  padding: 0;
+  border-radius: 10px;
+  width: 260px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  overflow: hidden;
+}
+
+.modal h2 {
+  margin: 0;
+  padding: 15px 0;
+  background-color: #4a4a4a;
+  color: white;
+  font-size: 18px;
+  width: 100%;
+}
+
+.modal p {
+  color: #666;
+  font-size: 14px;
+  margin: 20px 15px;
+}
+
+.modal-separator {
+  height: 1px;
+  background-color: #e0e0e0;
+  margin: 15px 0;
+}
+
+.modal-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  padding-bottom: 20px;
+}
+
+.modal-button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.modal-button-primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.modal-button-primary:hover {
+  background-color: #0056b3;
+}
+
+#modalCancel {
+  background-color: #f8f9fa;
+  color: #333;
+}
+
+#modalCancel:hover {
+  background-color: #e2e6ea;
+}
diff --git a/popup.html b/popup.html
index d3e0223..d6830da 100644
--- a/popup.html
+++ b/popup.html
@@ -30,7 +30,8 @@
       <a
         href="https://github.com/sponsors/qcrao"
         target="_blank"
-        id="sponsorLink">
+        id="sponsorLink"
+      >
         <svg
           aria-hidden="true"
           height="16"
@@ -39,15 +40,32 @@
           width="16"
           data-view-component="true"
           class="octicon octicon-heart icon-sponsor mr-1 v-align-middle color-fg-sponsors anim-pulse-in"
-          style="fill: #bc6796; vertical-align: middle">
+          style="fill: #bc6796; vertical-align: middle"
+        >
           <path
-            d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path>
+            d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
+          ></path>
         </svg>
         &nbsp;Sponsor
       </a>
       <p id="copyright"></p>
     </div>
 
+    <div id="customModal" class="modal">
+      <div class="modal-content">
+        <h2>Buy Bulk Archive</h2>
+        <p>One-time payment of $0.99 USD to purchase access.</p>
+        <p>Do you want to continue?</p>
+        <div class="modal-separator"></div> 
+        <div class="modal-buttons">
+          <button id="modalCancel" class="modal-button">Cancel</button>
+          <button id="modalOK" class="modal-button modal-button-primary">
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+
     <script src="popup.js"></script>
   </body>
 </html>
diff --git a/popup.js b/popup.js
index 3049028..57aee50 100644
--- a/popup.js
+++ b/popup.js
@@ -91,26 +91,53 @@ async function handleBulkArchive() {
       }
     });
   } else {
-    if (confirm("一次性付费 0.99 USD，购买权限。是否继续？")) {
-      const payResponse = await fetch(
-        `https://bulk-delete-chatgpt-worker.qcrao.com/pay-bulk-archive?user_id=${encodeURIComponent(
-          userInfo.id
-        )}`,
-        {
-          method: "POST",
+    showModal().then(async (result) => {
+      if (result) {
+        const payResponse = await fetch(
+          `https://bulk-delete-chatgpt-worker.qcrao.com/pay-bulk-archive?user_id=${encodeURIComponent(
+            userInfo.id
+          )}`,
+          { method: "POST" }
+        );
+        const payData = await payResponse.json();
+        console.log("payData", payData);
+        if (payData.paymentUrl) {
+          window.open(payData.paymentUrl, "_blank");
+        } else {
+          alert("Failed to get payment link. Please try again later.");
         }
-      );
-      const payData = await payResponse.json();
-      console.log("payData", payData);
-      if (payData.paymentUrl) {
-        window.open(payData.paymentUrl, "_blank");
-      } else {
-        alert("获取支付链接失败，请稍后再试。");
       }
-    }
+    });
   }
 }
 
+function showModal() {
+  return new Promise((resolve) => {
+    const modal = document.getElementById("customModal");
+    const okButton = document.getElementById("modalOK");
+    const cancelButton = document.getElementById("modalCancel");
+
+    modal.style.display = "block";
+
+    okButton.onclick = () => {
+      modal.style.display = "none";
+      resolve(true);
+    };
+
+    cancelButton.onclick = () => {
+      modal.style.display = "none";
+      resolve(false);
+    };
+
+    window.onclick = (event) => {
+      if (event.target == modal) {
+        modal.style.display = "none";
+        resolve(false);
+      }
+    };
+  });
+}
+
 function getUserInfo() {
   return new Promise((resolve) => {
     chrome.identity.getProfileUserInfo({ accountStatus: "ANY" }, (userInfo) => {