Add Discord invite card

This commit is contained in:
dave
2026-05-09 18:05:27 +08:00
parent 8b628a1a76
commit d2398014ea
+81 -57
View File
@@ -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>