From d2398014ea902938fa4d6352597ac6c1c6dd9466 Mon Sep 17 00:00:00 2001
From: dave <dave@yaotakeji.com>
Date: Sat, 9 May 2026 18:05:27 +0800
Subject: [PATCH] Add Discord invite card

---
 docs/index.html | 138 ++++++++++++++++++++++++++++--------------------
 1 file changed, 81 insertions(+), 57 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 458b218..07e5d67 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -245,30 +245,6 @@
         padding: 14px 16px 16px;
       }
 
-      .dropzone {
-        display: grid;
-        min-height: 128px;
-        place-items: center;
-        margin-bottom: 12px;
-        border: 1px dashed var(--line-strong);
-        border-radius: var(--radius);
-        background: var(--surface-soft);
-        color: var(--muted);
-        text-align: center;
-      }
-
-      .dropzone.is-dragover {
-        border-color: var(--accent);
-        background: var(--accent-soft);
-        color: var(--accent);
-      }
-
-      .dropzone strong {
-        display: block;
-        margin-bottom: 4px;
-        color: var(--text);
-      }
-
       .session-guide {
         margin: 0 0 12px;
         padding: 13px 14px;
@@ -306,6 +282,71 @@
         font-weight: 700;
       }
 
+      .discord-card {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 12px 14px;
+        align-items: start;
+        margin-bottom: 12px;
+        padding: 14px 14px 52px;
+        border: 1px solid rgba(88, 101, 242, 0.28);
+        border-radius: var(--radius);
+        background: #f3f5ff;
+        color: #243064;
+        text-decoration: none;
+      }
+
+      .discord-card:hover {
+        border-color: rgba(88, 101, 242, 0.5);
+        background: #eef1ff;
+      }
+
+      .discord-icon {
+        display: grid;
+        width: 44px;
+        height: 44px;
+        place-items: center;
+        border-radius: var(--radius);
+        background: #5865f2;
+        color: #fff;
+      }
+
+      .discord-icon svg {
+        width: 27px;
+        height: 27px;
+        fill: currentColor;
+      }
+
+      .discord-copy strong {
+        display: block;
+        margin-bottom: 4px;
+        color: #1f2a62;
+        font-size: 0.98rem;
+        line-height: 1.35;
+      }
+
+      .discord-copy span {
+        display: block;
+        color: #46517f;
+        font-size: 0.88rem;
+        line-height: 1.45;
+      }
+
+      .discord-action {
+        position: absolute;
+        right: 14px;
+        bottom: 14px;
+        min-height: 32px;
+        padding: 6px 12px;
+        border-radius: 6px;
+        background: #5865f2;
+        color: #fff;
+        font-weight: 800;
+        white-space: nowrap;
+        box-shadow: 0 8px 18px rgba(88, 101, 242, 0.22);
+      }
+
       .input-actions {
         display: flex;
         flex-wrap: wrap;
@@ -530,6 +571,10 @@
           grid-template-columns: 1fr;
         }
 
+        .discord-card {
+          grid-template-columns: auto minmax(0, 1fr);
+        }
+
         .col-expiry,
         .col-type,
         td:nth-child(3),
@@ -606,12 +651,18 @@
               </p>
               <p class="session-warning">这段 JSON 包含 accessToken 和 sessionToken，等同敏感登录凭证，不要发给别人。</p>
             </div>
-            <div class="dropzone" id="dropzone" tabindex="0" role="button">
-              <div>
-                <strong>拖入 JSON 文件</strong>
-                <span>也可以点击选择文件</span>
-              </div>
-            </div>
+            <a class="discord-card" href="https://discord.gg/GFmHY2TZNy" target="_blank" rel="noreferrer">
+              <span class="discord-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24">
+                  <path d="M20.32 4.37A19.8 19.8 0 0 0 15.36 2.83a13.8 13.8 0 0 0-.64 1.31 18.4 18.4 0 0 0-5.44 0 13.8 13.8 0 0 0-.65-1.31 19.7 19.7 0 0 0-4.96 1.54C.54 9.04-.31 13.6.1 18.1a19.9 19.9 0 0 0 6.08 3.08c.49-.67.93-1.38 1.3-2.13a12.8 12.8 0 0 1-2.05-.98c.17-.13.34-.26.5-.39a14.2 14.2 0 0 0 12.14 0c.17.14.33.27.5.39-.65.39-1.34.72-2.06.99.38.74.81 1.45 1.3 2.12a19.9 19.9 0 0 0 6.09-3.08c.48-5.22-.82-9.74-3.58-13.73ZM8.02 15.33c-1.19 0-2.16-1.08-2.16-2.41 0-1.33.95-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.41-2.16 2.41Zm7.96 0c-1.19 0-2.16-1.08-2.16-2.41 0-1.33.95-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.41-2.16 2.41Z" />
+                </svg>
+              </span>
+              <span class="discord-copy">
+                <strong>Discord频道每日签到领取免费plus账号</strong>
+                <span>本工具主要针对 Plus 账号适用，Free 账号即使转换了也没有权限调用 GPT 模型。Plus 账号可以在 Discord 频道每日签到领取激活，然后配合本工具导入 CPA or Sub2API 使用。</span>
+              </span>
+              <span class="discord-action">加入频道</span>
+            </a>
             <input class="hidden" id="file-input" type="file" accept=".json,application/json" multiple />
             <div class="input-actions">
               <button class="button button-secondary" id="pick-files" type="button">选择文件</button>
@@ -704,7 +755,6 @@
           copyOutput: document.querySelector("#copy-output"),
           cpaNotice: document.querySelector("#cpa-notice"),
           downloadOutput: document.querySelector("#download-output"),
-          dropzone: document.querySelector("#dropzone"),
           fileInput: document.querySelector("#file-input"),
           formatButtons: Array.from(document.querySelectorAll("[data-format]")),
           input: document.querySelector("#session-input"),
@@ -1425,7 +1475,6 @@
         elements.copyOutput.addEventListener("click", copyOutput);
         elements.downloadOutput.addEventListener("click", downloadOutput);
         elements.pickFiles.addEventListener("click", () => elements.fileInput.click());
-        elements.dropzone.addEventListener("click", () => elements.fileInput.click());
         elements.fileInput.addEventListener("change", (event) => {
           readFiles(event.target.files);
           event.target.value = "";
@@ -1441,31 +1490,6 @@
           scheduleConvert();
         });
 
-        ["dragenter", "dragover"].forEach((eventName) => {
-          elements.dropzone.addEventListener(eventName, (event) => {
-            event.preventDefault();
-            elements.dropzone.classList.add("is-dragover");
-          });
-        });
-
-        ["dragleave", "drop"].forEach((eventName) => {
-          elements.dropzone.addEventListener(eventName, (event) => {
-            event.preventDefault();
-            elements.dropzone.classList.remove("is-dragover");
-          });
-        });
-
-        elements.dropzone.addEventListener("drop", (event) => {
-          readFiles(event.dataTransfer.files);
-        });
-
-        elements.dropzone.addEventListener("keydown", (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            elements.fileInput.click();
-          }
-        });
-
         updateOutput();
       })();
     </script>