感谢几位大佬分享的硅基余额查询的页面，根据自身需要，对一些内容做了简单改动。仅有页面！！！
- 我并不需要复制失效和重复的令牌；
- 有效令牌 = 额度充足 + 低余额，通过复选框来选择是否显示；
- 无效令牌 = 零余额 + 失效
- 复制的内容就是预览的
简单改了下UI，逻辑还没偷完 
你要问我为什么发，要得分的嘛 
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>硅基流动TOKEN余额检测</title>
<link
rel="stylesheet"
href="style.css" />
</head>
<body>
<main>
<h1 class="title">硅基流动TOKEN余额检测</h1>
<!-- 设置区域 -->
<div class="control">
<label for="threshold">
阈值
<input
type="number"
name="settings"
id="threshold"
value="1" />
</label>
<label for="concurrency">
并发
<input
type="number"
name="settings"
id="concurrency"
value="5" />
</label>
<div
class="check_btn"
id="check_btn">
开始检测
</div>
</div>
<!-- token输入框 -->
<textarea
name="tokens"
id="tokens"
cols="1"
rows="10"
placeholder="输入token，每行一个或者逗号连接"></textarea>
<!-- 预览选项 -->
<div class="preview_options">
预览选项：
<label
class="preview_label comma"
for="comma">
<div class="box"></div>
<input
type="checkbox"
name="preview"
id="comma" />
逗号连接
</label>
<label
class="preview_label low_balance"
for="low_balance">
<div class="box"></div>
<input
type="checkbox"
name="preview"
id="low_balance" />
低余额
</label>
<label
class="preview_label show_balance"
for="show_balance">
<div class="box"></div>
<input
type="checkbox"
name="preview"
id="show_balance"
checked />
显示余额
</label>
</div>
<!-- 结果面板 -->
<div class="filter_panel">
<div class="tabs">
<label class="tab valid">
有效账号
<input
name="filter"
type="radio"
checked />
</label>
<label class="tab invalid">
无效账号
<input
name="filter"
type="radio" />
</label>
<label class="tab duplicate">
重复账号
<input
name="filter"
type="radio" />
</label>
</div>
<div class="result">无相关账号</div>
</div>
<!-- 复制按钮 -->
<div class="copy_btn">复制有效账号</div>
</main>
<footer>LINUXDO @思無邪</footer>
</body>
<script src="script.js"></script>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #333;
--secondary: #bbb;
--bg: #f6f5ef;
--green: 3, 192, 120;
--valid: 46, 184, 106;
--low-balance: #f5a623;
--zero-balance: #999;
--invalid: 251, 77, 77;
--duplicate: 190, 73, 237;
}
body {
min-height: 100vh;
background: var(--bg);
padding: 40px 0;
caret-color: rgba(var(--green), 0.8);
font-family: "jetbrins mono", "pingfang sc", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: grid;
-webkit-user-select: none;
user-select: none;
}
main {
justify-self: center;
width: clamp(400px, 96vw, 700px);
height: fit-content;
padding: 60px 40px;
background-color: #fff;
border-radius: 16px;
box-shadow: 0 0 20px -10px var(--secondary);
display: grid;
gap: 20px;
grid-auto-rows: minmax(50px, auto);
align-items: start;
justify-items: center;
color: var(--primary);
z-index: 10;
@media screen and (max-width: 640px) {
padding: 40px 10px;
font-size: 14px;
.control {
margin-top: 20px;
}
}
@media screen and (max-width: 375px) {
padding: 40px 10px;
font-size: 12px;
width: 98%;
.control {
margin-top: 20px;
}
}
}
/* 控制面板 */
.control {
display: flex;
gap: 20px;
width: 100%;
height: 46px;
margin-top: 60px;
label {
display: flex;
gap: 10px;
align-items: center;
}
input {
padding: 10px;
outline: none;
border: 1px solid var(--secondary);
border-radius: 6px;
transition: 0.35s linear;
width: 60px;
&:focus-visible {
border-color: rgba(var(--green), 1);
box-shadow: 0 0 5px -1px rgba(var(--green), 0.5);
}
}
.check_btn {
flex: 1;
background-color: rgba(var(--green), 1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
color: #fff;
cursor: pointer;
}
}
/* 输入框 */
#tokens {
width: 100%;
padding: 20px 30px;
resize: vertical;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
outline: none;
border: 1px solid var(--secondary);
border-radius: 6px;
transition: 0.35s linear;
font-size: 1.2em;
&:focus-visible {
border-color: rgba(var(--green), 1);
box-shadow: 0 0 5px -1px rgba(var(--green), 0.5);
}
&::placeholder {
font-size: 1.2rem;
}
}
/* 预览 */
.preview_options {
width: 100%;
display: flex;
gap: 20px;
align-items: center;
justify-content: start;
.preview_label {
height: 46px;
display: flex;
align-items: center;
cursor: pointer;
.box {
width: 20px;
height: 20px;
border: 1px solid var(--secondary);
margin-right: 10px;
position: relative;
border-radius: 4px;
transition: 0.15s linear;
&::after {
content: "✅";
font-size: 21px;
position: absolute;
top: -6px;
left: -4px;
opacity: 0;
transition: 0.1s linear;
}
}
input {
display: none;
}
&:has(input:checked) {
.box {
border-color: transparent;
&::after {
opacity: 1;
}
}
}
}
}
/* 筛选结果 */
.filter_panel {
--color: var(--valid);
--opacity: 0.35;
width: 100%;
.tabs {
display: flex;
.tab {
text-align: center;
flex: 1;
padding: 10px 0;
border: 1px solid #0000;
background-color: rgba(var(--color), var(--opacity));
color: #fff;
cursor: pointer;
transition: 0.3s linear;
&:not(:last-child) {
border-right: none;
}
&:first-child {
border-top-left-radius: 6px;
}
&:last-child {
border-top-right-radius: 6px;
}
input {
display: none;
}
&:has(input:checked) {
--opacity: 1;
}
&.invalid {
--color: var(--invalid);
}
&.duplicate {
--color: var(--duplicate)
}
}
&:has(.invalid input:checked)~.result {
--border-color: var(--invalid)
}
&:has(.duplicate input:checked)~.result {
--border-color: var(--duplicate)
}
}
.result {
--border-color: var(--valid);
height: fit-content;
padding: 30px;
border: 1px solid rgba(var(--border-color), 0.8);
transition: 0.3s linear;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-user-select: text;
user-select: text;
}
}
/* 复制 */
.copy_btn {
background-color: rgba(var(--valid), 1);
width: 100%;
height: 54px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2em;
letter-spacing: 1px;
cursor: pointer;
}
footer {
width: 100%;
position: fixed;
bottom: 1%;
text-align: center;
color: #888;
}
GJ_BalanceChecker.html.txt (8.1 KB)
+5
蹲个完整的。