smshine/selfgroup
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add shortcuts traner

Browse Source
This commit is contained in:
Shuming Liu
2026-10-28 09:36:55 +08:00
parent 0b2072a05f
commit 784a8e3e4b
12 changed files with 1423 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
shortcut_trainer/static/style.css Normal file
View File

@@ -0,0 +1,61 @@
:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#eef2f7;background:#08111f}
*{box-sizing:border-box} body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#20304f 0,transparent 45rem),#08111f}
.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:rgba(8,17,31,.9);backdrop-filter:blur(12px);border-bottom:1px solid #253349}
body.training{min-height:100vh;color:#fff;background:repeating-linear-gradient(135deg,rgba(255,255,255,.065) 0 56px,transparent 56px 112px),radial-gradient(circle at 82% 0,var(--page-light) 0,transparent 30rem),linear-gradient(155deg,var(--page-color) 0,var(--page-dark) 49%,var(--page-deep) 100%)!important;background-attachment:fixed}
body.training::after{content:attr(data-trainer-page);position:fixed;right:-2vw;bottom:-10vh;z-index:-1;font-size:min(72vh,86vw);font-weight:1000;line-height:.72;color:rgba(255,255,255,.24);text-shadow:0 0 48px rgba(0,0,0,.28);pointer-events:none;user-select:none}
body.training .topbar{background:rgba(0,0,0,.20);border-bottom:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px)}
body.training .brand-mark{box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
body.training .chip{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.28)}
body.training .panel,body.training .modal{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.25);box-shadow:0 20px 54px rgba(0,0,0,.22)}
body.training .command{background:rgba(0,0,0,.25);border:3px solid rgba(255,255,255,.7);box-shadow:0 18px 48px rgba(0,0,0,.24)}
body.training .command h2{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#00c2ff,#7c3aed);color:#fff}
.toolbar{display:flex;gap:10px;align-items:center}.chip{padding:6px 10px;border-radius:99px;background:#182639;border:1px solid #31445f}
.page{max-width:1200px;margin:auto;padding:24px}
.panel,.login-card,.modal{background:rgba(16,28,46,.94);border:1px solid #303f58;border-radius:18px;padding:22px;box-shadow:0 18px 50px #0005}
.title{margin:0 0 6px;font-size:28px}.subtitle{color:#9fb0c8;margin-top:0}
label{display:block;margin:14px 0 6px;font-weight:600}input,select,textarea{width:100%;padding:11px;border-radius:10px;border:1px solid #42536e;background:#0d1a2c;color:#fff;font-size:16px}
button{border:0;border-radius:10px;padding:10px 16px;font-size:15px;font-weight:700;cursor:pointer;background:#2563eb;color:#fff;transition:.2s}
button:hover{transform:translateY(-1px)}.ghost{background:#1f2937}.success{background:#16a34a}.danger{background:#dc2626}.warn{background:#d97706}.full{width:100%}
.notice{min-height:22px;color:#fbbf24}.hint{color:#8fa1b8;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.page-card{position:relative;overflow:hidden;border-radius:16px;padding:18px;min-height:145px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;text-shadow:0 1px 2px #0008;border:2px solid #ffffff45;box-shadow:0 14px 34px #0004}
.page-card::after{content:attr(data-page);position:absolute;right:-14px;bottom:-34px;font-size:104px;font-weight:1000;line-height:1;color:#ffffff28;pointer-events:none}
.page-card .kb{align-self:flex-start;background:#0009;padding:3px 8px;border-radius:7px;font-weight:900}
.page-card h3{margin:8px 0}.page-card p{margin:0;opacity:.9}.page-card button{background:#0008}
.command{border:3px dashed #f59e0b;border-radius:16px;padding:18px;background:#101c2c}.command h2{margin:0;font-size:34px;color:#ffd580}
.task-result{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px;padding:12px 14px;border-radius:12px;background:#16a34a;color:#fff;font-weight:800}
.task-result .rank{font-size:20px}
.help{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.help div{background:#172640;border-radius:10px;padding:10px}.kbd{display:inline-block;min-width:26px;text-align:center;padding:2px 6px;border-radius:5px;background:#2b3a52;font-weight:800}
.teacher-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.accounts-panel{margin-top:18px}.accounts-actions{display:flex;align-items:end}.list{display:grid;gap:8px;max-height:440px;overflow:auto}.row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:#16233a;padding:9px 12px;border-radius:9px}
.dot{width:10px;height:10px;border-radius:50%;background:#64748b}.online .dot{background:#22c55e}.winner{background:#143c28;border:1px solid #22c55e}
.event{padding:8px;border-bottom:1px solid #2b3a52;font-family:ui-monospace,monospace;font-size:13px}
.preset{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-bottom:8px}.score{font-size:22px;font-weight:900;color:#7ef0b0}
.builder{margin-bottom:18px}.builder-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.builder-tip{min-height:38px;margin:10px 0 4px;padding:9px 12px;border-radius:10px;background:#132338;border:1px solid #33465f;color:#b9c9de;font-size:14px}
.expected-preview{margin:14px 0;padding:12px;border-radius:12px;background:#101d30;border:1px solid #354962}.expected-preview small{display:block;margin-bottom:5px;color:#8fa1b8}.expected-preview div{font-weight:800;color:#fff}
.advanced summary{cursor:pointer;color:#9fb0c8;margin-bottom:8px}.preset-panel{margin-top:18px;padding-top:14px;border-top:1px solid #2b3a52}.preset-panel h3{margin:0 0 10px}
.page-main{grid-template-columns:1.15fr .85fr}
.ribbon{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(0,0,0,.16)}
.ribbon-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:rgba(0,0,0,.18)}
.ribbon-tab{position:relative;border-radius:0;padding:18px 10px 14px;background:transparent;color:#fff;box-shadow:none}
.ribbon-tab:hover{transform:none;background:rgba(255,255,255,.08)}
.ribbon-tab.active{background:rgba(255,255,255,.14);box-shadow:inset 0 -3px 0 #fff}
.ribbon-tab.armed{background:#1d4ed8;box-shadow:inset 0 -3px 0 #fbbf24}
.ribbon-tab strong{display:block;font-size:16px}
.ribbon-tab .keytip,.ribbon-cmd .keytip{position:absolute;top:7px;right:8px;min-width:22px;padding:1px 6px;border-radius:4px;background:#f59e0b;color:#111;font-size:12px;font-weight:900}
.ribbon-body{padding:14px;min-height:128px;background:rgba(255,255,255,.04)}
.ribbon-subhint{grid-column:1/-1;margin-bottom:8px;color:#fff;font-weight:700}
.ribbon-panel{display:none;grid-template-columns:1fr 1fr;gap:12px}
.ribbon-panel.active{display:grid;animation:ribbonIn .16s ease}
.ribbon-cmd{position:relative;min-height:78px;display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:18px 14px 12px}
.ribbon.keyboard-on .keytip{box-shadow:0 0 0 3px #fbbf2480}
@keyframes ribbonIn{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
body.training .ribbon-tab{background:rgba(0,0,0,.18)}
body.training .ribbon-tab.active{background:rgba(255,255,255,.18)}
body.training .ribbon-cmd.success{background:#16a34a}
body.training .ribbon-tab.armed{background:#1d4ed8}
body.training .ribbon-cmd.ghost{background:#1f2937}
@media(max-width:800px){.grid,.teacher-grid,.help,.builder-grid,.page-main,.ribbon-tabs,.ribbon-panel{grid-template-columns:1fr}.pages-grid{grid-template-columns:1fr}.command h2{font-size:25px}}