npm - @aiyiran/myclaw - Versions diffs - 1.1.83 → 1.1.85 - Mend

@aiyiran/myclaw 1.1.83 → 1.1.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/a/2.html ADDED Viewed

@@ -0,0 +1,1531 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>恶龙宝可梦 · 图签系统</title>
+    <style>
+        :root {
+            --bg: #08081a;
+            --bg2: #11112a;
+            --bg3: #181838;
+            --purple: #8b5cf6;
+            --purple2: #6d28d9;
+            --gold: #f59e0b;
+            --gold2: #b45309;
+            --text: #e2e8f0;
+            --muted: #94a3b8;
+            --border: rgba(139, 92, 246, .25);
+            --c-common: #6b7280;
+            --c-rare: #3b82f6;
+            --c-epic: #a855f7;
+            --c-legend: #f59e0b;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box
+        }
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        /* Ambient background */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 0;
+            background:
+                radial-gradient(ellipse 60% 40% at 15% 15%, rgba(109, 40, 217, .18) 0%, transparent 70%),
+                radial-gradient(ellipse 50% 35% at 85% 85%, rgba(245, 158, 11, .12) 0%, transparent 70%),
+                radial-gradient(ellipse 40% 30% at 50% 50%, rgba(139, 92, 246, .06) 0%, transparent 60%);
+        }
+        /* ── HEADER ─────────────────────────────── */
+        header {
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background: rgba(8, 8, 26, .88);
+            border-bottom: 1px solid var(--border);
+            backdrop-filter: blur(14px);
+            -webkit-backdrop-filter: blur(14px);
+            padding: 1.1rem 2rem;
+        }
+        .hdr {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .hdr-title h1 {
+            font-size: 1.7rem;
+            font-weight: 900;
+            letter-spacing: .04em;
+            background: linear-gradient(130deg, var(--purple) 0%, var(--gold) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hdr-title p {
+            font-size: .75rem;
+            color: var(--muted);
+            margin-top: .15rem;
+        }
+        .hdr-stats {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+        }
+        .stat {
+            text-align: center;
+        }
+        .stat-val {
+            font-size: 1.4rem;
+            font-weight: 700;
+            color: var(--gold);
+            line-height: 1;
+        }
+        .stat-lbl {
+            font-size: .65rem;
+            color: var(--muted);
+            text-transform: uppercase;
+            letter-spacing: .1em;
+            margin-top: .2rem;
+        }
+        .progress-wrap {
+            min-width: 160px;
+        }
+        .progress-top {
+            display: flex;
+            justify-content: space-between;
+            font-size: .72rem;
+            color: var(--muted);
+            margin-bottom: .35rem;
+        }
+        .prog-bar {
+            height: 6px;
+            background: rgba(255, 255, 255, .08);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        .prog-fill {
+            height: 100%;
+            border-radius: 3px;
+            background: linear-gradient(90deg, var(--purple), var(--gold));
+            transition: width .6s cubic-bezier(.4, 0, .2, 1);
+        }
+        /* ── CONTROLS ────────────────────────────── */
+        .controls {
+            max-width: 1400px;
+            margin: 1.25rem auto;
+            padding: 0 2rem;
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 1rem;
+            position: relative;
+            z-index: 5;
+        }
+        .filter-col {
+            display: flex;
+            flex-direction: column;
+            gap: .6rem;
+        }
+        .filter-row {
+            display: flex;
+            align-items: center;
+            gap: .4rem;
+            flex-wrap: wrap;
+        }
+        .filter-lbl {
+            font-size: .72rem;
+            color: var(--muted);
+            white-space: nowrap;
+        }
+        .fb {
+            padding: .3rem .8rem;
+            border-radius: 20px;
+            border: 1px solid var(--border);
+            background: rgba(139, 92, 246, .08);
+            color: var(--muted);
+            cursor: pointer;
+            font-size: .78rem;
+            transition: all .18s;
+            white-space: nowrap;
+        }
+        .fb:hover {
+            background: rgba(139, 92, 246, .18);
+            color: var(--text);
+        }
+        .fb.active {
+            background: var(--purple);
+            color: #fff;
+            border-color: var(--purple);
+        }
+        .fb.legend-btn {
+            border-color: rgba(245, 158, 11, .4);
+            color: var(--gold);
+        }
+        .fb.legend-btn.active {
+            background: linear-gradient(135deg, var(--gold2), var(--gold));
+            color: #1a0a00;
+            border-color: var(--gold);
+        }
+        .action-col {
+            display: flex;
+            flex-direction: column;
+            gap: .6rem;
+            align-items: flex-end;
+        }
+        .view-toggle {
+            display: flex;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+        }
+        .vb {
+            padding: .35rem .9rem;
+            border: none;
+            background: transparent;
+            color: var(--muted);
+            cursor: pointer;
+            font-size: .78rem;
+            transition: all .18s;
+        }
+        .vb.active {
+            background: var(--purple);
+            color: #fff;
+        }
+        .draw-btns {
+            display: flex;
+            gap: .6rem;
+        }
+        .dbtn {
+            padding: .6rem 1.4rem;
+            border: none;
+            border-radius: 8px;
+            font-size: .9rem;
+            font-weight: 700;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: all .2s;
+            letter-spacing: .02em;
+        }
+        .dbtn-single {
+            background: linear-gradient(135deg, var(--purple2), var(--purple));
+            color: #fff;
+        }
+        .dbtn-ten {
+            background: linear-gradient(135deg, var(--gold2), var(--gold));
+            color: #1a0a00;
+        }
+        .dbtn:hover {
+            transform: translateY(-2px);
+        }
+        .dbtn-single:hover {
+            box-shadow: 0 6px 24px rgba(109, 40, 217, .5);
+        }
+        .dbtn-ten:hover {
+            box-shadow: 0 6px 24px rgba(245, 158, 11, .5);
+        }
+        .dbtn::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%);
+            transform: translateX(-100%);
+            transition: transform .4s;
+        }
+        .dbtn:hover::before {
+            transform: translateX(100%);
+        }
+        .dbtn-reset {
+            background: rgba(100, 100, 120, .25);
+            border: 1px solid rgba(255, 255, 255, .15);
+            color: var(--muted);
+            font-size: .85rem;
+        }
+        .dbtn-reset:hover {
+            background: rgba(239, 68, 68, .3);
+            border-color: rgba(239, 68, 68, .5);
+            color: #fca5a5;
+            box-shadow: 0 6px 24px rgba(239, 68, 68, .25);
+            transform: translateY(-2px);
+        }
+        #confirm-modal {
+            display: none;
+            position: fixed;
+            inset: 0;
+            z-index: 800;
+            background: rgba(0, 0, 0, .85);
+            align-items: center;
+            justify-content: center;
+        }
+        #confirm-modal.show {
+            display: flex;
+        }
+        .confirm-box {
+            background: var(--bg2);
+            border: 1px solid rgba(239, 68, 68, .5);
+            border-radius: 14px;
+            padding: 2rem 2.5rem;
+            text-align: center;
+            max-width: 340px;
+        }
+        .confirm-box h3 {
+            font-size: 1.1rem;
+            margin-bottom: .6rem;
+            color: #fca5a5;
+        }
+        .confirm-box p {
+            font-size: .82rem;
+            color: var(--muted);
+            line-height: 1.5;
+            margin-bottom: 1.4rem;
+        }
+        .confirm-btns {
+            display: flex;
+            gap: .8rem;
+            justify-content: center;
+        }
+        .cbtn {
+            padding: .55rem 1.6rem;
+            border: none;
+            border-radius: 8px;
+            font-size: .88rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all .2s;
+        }
+        .cbtn-cancel {
+            background: rgba(255, 255, 255, .08);
+            color: var(--text);
+        }
+        .cbtn-cancel:hover {
+            background: rgba(255, 255, 255, .15);
+        }
+        .cbtn-ok {
+            background: rgba(239, 68, 68, .7);
+            color: #fff;
+        }
+        .cbtn-ok:hover {
+            background: rgba(239, 68, 68, .9);
+            box-shadow: 0 4px 16px rgba(239, 68, 68, .4);
+        }
+        /* ── CARD GRID ───────────────────────────── */
+        .grid {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 2rem 4rem;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
+            gap: 1.1rem;
+            position: relative;
+            z-index: 5;
+        }
+        .card-wrap {
+            perspective: 1200px;
+        }
+        .card {
+            position: relative;
+            border-radius: 14px;
+            height: 320px;
+            cursor: pointer;
+            transition: transform .3s ease, filter .3s;
+            transform-style: preserve-3d;
+        }
+        .card:hover {
+            transform: translateY(-8px) rotateX(4deg) scale(1.02);
+        }
+        .card.dim {
+            filter: grayscale(.9) brightness(.3);
+        }
+        .card.dim:hover {
+            filter: grayscale(.6) brightness(.45);
+        }
+        .card-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background: var(--bg3);
+            border-radius: 14px;
+            border: 1px solid rgba(139, 92, 246, .3);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        /* rarity borders / glows */
+        .card[data-rarity="rare"] .card-inner {
+            border-color: rgba(59, 130, 246, .55);
+            box-shadow: 0 0 14px rgba(59, 130, 246, .2);
+        }
+        .card[data-rarity="epic"] .card-inner {
+            border-color: rgba(168, 85, 247, .7);
+            box-shadow: 0 0 20px rgba(168, 85, 247, .3), inset 0 0 20px rgba(168, 85, 247, .05);
+        }
+        .card[data-rarity="legendary"] .card-inner {
+            border-color: rgba(245, 158, 11, .85);
+            box-shadow: 0 0 28px rgba(245, 158, 11, .45), inset 0 0 28px rgba(245, 158, 11, .05);
+            animation: lpulse 2.2s ease-in-out infinite;
+        }
+        @keyframes lpulse {
+            0%,
+            100% {
+                box-shadow: 0 0 28px rgba(245, 158, 11, .45), inset 0 0 28px rgba(245, 158, 11, .05);
+            }
+            50% {
+                box-shadow: 0 0 48px rgba(245, 158, 11, .75), inset 0 0 35px rgba(245, 158, 11, .1);
+            }
+        }
+        /* legendary holo shimmer */
+        .card[data-rarity="legendary"] .card-inner::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            z-index: 20;
+            border-radius: 14px;
+            background: linear-gradient(110deg,
+                    transparent 35%,
+                    rgba(255, 215, 0, .15) 45%,
+                    rgba(255, 255, 255, .25) 50%,
+                    rgba(255, 215, 0, .15) 55%,
+                    transparent 65%);
+            animation: holo 3s linear infinite;
+        }
+        @keyframes holo {
+            0% {
+                transform: translateX(-120%)
+            }
+            100% {
+                transform: translateX(220%)
+            }
+        }
+        /* artwork */
+        .artwork {
+            height: 145px;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3.8rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .artwork-emoji {
+            position: relative;
+            z-index: 2;
+            filter: drop-shadow(0 0 10px rgba(0, 0, 0, .8));
+        }
+        /* type gradients */
+        .tg-fire {
+            background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 40%, #ea580c 100%);
+        }
+        .tg-ice {
+            background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #22d3ee 100%);
+        }
+        .tg-dark {
+            background: linear-gradient(135deg, #1a0a2e 0%, #4c1d95 60%, #3b0764 100%);
+        }
+        .tg-thunder {
+            background: linear-gradient(135deg, #451a03 0%, #b45309 50%, #eab308 100%);
+        }
+        .tg-earth {
+            background: linear-gradient(135deg, #14532d 0%, #15803d 50%, #713f12 100%);
+        }
+        .tg-void {
+            background: linear-gradient(135deg, #000000 0%, #1e1b4b 40%, #4c1d95 70%, #0f0a1e 100%);
+        }
+        /* rarity badge */
+        .rbadge {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            z-index: 10;
+            padding: 2px 7px;
+            border-radius: 10px;
+            font-size: .62rem;
+            font-weight: 800;
+            letter-spacing: .08em;
+        }
+        .rbadge.common {
+            background: rgba(107, 114, 128, .85);
+            color: #d1d5db;
+        }
+        .rbadge.rare {
+            background: rgba(59, 130, 246, .85);
+            color: #bfdbfe;
+        }
+        .rbadge.epic {
+            background: rgba(168, 85, 247, .85);
+            color: #ede9fe;
+        }
+        .rbadge.legendary {
+            background: rgba(245, 158, 11, .95);
+            color: #1a0800;
+        }
+        .new-badge {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            z-index: 10;
+            background: #ef4444;
+            color: #fff;
+            font-size: .58rem;
+            font-weight: 800;
+            padding: 2px 6px;
+            border-radius: 4px;
+            animation: npop .8s ease-in-out 4;
+        }
+        @keyframes npop {
+            0%,
+            100% {
+                transform: scale(1)
+            }
+            50% {
+                transform: scale(1.15)
+            }
+        }
+        .card-body {
+            padding: .7rem .75rem;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: .35rem;
+            overflow: hidden;
+        }
+        .card-name {
+            font-size: .9rem;
+            font-weight: 700;
+            line-height: 1.25;
+        }
+        .tbadge {
+            display: inline-block;
+            padding: 1px 7px;
+            border-radius: 4px;
+            font-size: .62rem;
+            font-weight: 600;
+            border: 1px solid;
+            align-self: flex-start;
+        }
+        .tb-fire {
+            background: rgba(220, 38, 38, .25);
+            color: #fca5a5;
+            border-color: rgba(220, 38, 38, .45);
+        }
+        .tb-ice {
+            background: rgba(14, 165, 233, .25);
+            color: #7dd3fc;
+            border-color: rgba(14, 165, 233, .45);
+        }
+        .tb-dark {
+            background: rgba(168, 85, 247, .25);
+            color: #d8b4fe;
+            border-color: rgba(168, 85, 247, .45);
+        }
+        .tb-thunder {
+            background: rgba(245, 158, 11, .25);
+            color: #fde68a;
+            border-color: rgba(245, 158, 11, .45);
+        }
+        .tb-earth {
+            background: rgba(22, 163, 74, .25);
+            color: #86efac;
+            border-color: rgba(22, 163, 74, .45);
+        }
+        .tb-void {
+            background: rgba(99, 102, 241, .15);
+            color: #a5b4fc;
+            border-color: rgba(99, 102, 241, .45);
+        }
+        .card-desc {
+            font-size: .62rem;
+            color: var(--muted);
+            line-height: 1.4;
+            flex: 1;
+        }
+        .card-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: .25rem;
+            margin-top: auto;
+        }
+        .s {
+            text-align: center;
+            background: rgba(255, 255, 255, .05);
+            border-radius: 4px;
+            padding: .2rem .1rem;
+        }
+        .s-n {
+            font-size: .52rem;
+            color: var(--muted);
+            text-transform: uppercase;
+        }
+        .s-v {
+            font-size: .82rem;
+            font-weight: 700;
+            color: var(--gold);
+        }
+        /* ── DRAW MODAL ──────────────────────────── */
+        .overlay {
+            position: fixed;
+            inset: 0;
+            z-index: 500;
+            background: rgba(0, 0, 0, .92);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity .3s;
+        }
+        .overlay.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .modal {
+            max-width: 960px;
+            width: 94%;
+            padding: 2rem 1.5rem;
+            text-align: center;
+            max-height: 92vh;
+            overflow-y: auto;
+        }
+        .modal-ttl {
+            font-size: 1.6rem;
+            font-weight: 900;
+            text-shadow: 0 0 24px currentColor;
+            margin-bottom: 1.4rem;
+            transition: color .3s;
+        }
+        .draw-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .85rem;
+            justify-content: center;
+            margin-bottom: 1.5rem;
+        }
+        /* flip card in modal */
+        .dc {
+            width: 120px;
+            height: 190px;
+            perspective: 900px;
+            flex-shrink: 0;
+        }
+        .dc-inner {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform .55s cubic-bezier(.4, .2, .2, 1);
+        }
+        .dc-inner.flipped {
+            transform: rotateY(180deg);
+        }
+        .dc-face {
+            position: absolute;
+            inset: 0;
+            border-radius: 10px;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .dc-back {
+            background: linear-gradient(135deg, #1e1b4b, #4c1d95, #1a0a2e);
+            border: 2px solid var(--purple);
+        }
+        .dc-back-ico {
+            font-size: 2.8rem;
+            opacity: .7;
+            animation: spin 5s linear infinite;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg)
+            }
+        }
+        .dc-front {
+            transform: rotateY(180deg);
+            flex-direction: column;
+            padding: .5rem;
+            gap: .3rem;
+            background: var(--bg3);
+        }
+        .dc-art {
+            width: 100%;
+            height: 72px;
+            border-radius: 7px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            flex-shrink: 0;
+        }
+        .dc-name {
+            font-size: .72rem;
+            font-weight: 700;
+            color: var(--text);
+            text-align: center;
+            line-height: 1.2;
+        }
+        .dc-stars {
+            font-size: .65rem;
+            text-align: center;
+        }
+        .dc-dup {
+            font-size: .55rem;
+            color: var(--muted);
+            background: rgba(0, 0, 0, .6);
+            padding: 1px 4px;
+            border-radius: 3px;
+            margin-top: auto;
+        }
+        .close-btn {
+            padding: .7rem 3rem;
+            border: none;
+            border-radius: 8px;
+            background: linear-gradient(135deg, var(--purple2), var(--purple));
+            color: #fff;
+            font-size: .95rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all .2s;
+        }
+        .close-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 24px rgba(109, 40, 217, .5);
+        }
+        /* ── TOAST ───────────────────────────────── */
+        .toast {
+            position: fixed;
+            bottom: 1.75rem;
+            right: 1.75rem;
+            z-index: 600;
+            background: var(--bg2);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: .85rem 1.2rem;
+            max-width: 290px;
+            transform: translateX(130%);
+            transition: transform .3s ease;
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+        .toast-t {
+            font-weight: 700;
+            font-size: .88rem;
+            margin-bottom: .2rem;
+        }
+        .toast-b {
+            font-size: .75rem;
+            color: var(--muted);
+            line-height: 1.4;
+        }
+        /* ── PARTICLES ───────────────────────────── */
+        .ptcl {
+            position: fixed;
+            pointer-events: none;
+            z-index: 700;
+            animation: ptcl-up 1.4s ease-out forwards;
+        }
+        @keyframes ptcl-up {
+            0% {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+            100% {
+                opacity: 0;
+                transform: translateY(-90px) scale(.4) rotate(30deg);
+            }
+        }
+        /* ── EMPTY ───────────────────────────────── */
+        .empty {
+            grid-column: 1/-1;
+            text-align: center;
+            padding: 4rem 1rem;
+            color: var(--muted);
+        }
+        .empty-ico {
+            font-size: 3.5rem;
+            margin-bottom: .75rem;
+        }
+        /* ── SCROLLBAR ───────────────────────────── */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--purple);
+            border-radius: 3px;
+        }
+        /* ── RESPONSIVE ──────────────────────────── */
+        @media(max-width:700px) {
+            header {
+                padding: .85rem 1rem;
+            }
+            .hdr {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .hdr-stats {
+                flex-wrap: wrap;
+                gap: 1rem;
+            }
+            .controls {
+                padding: 0 1rem;
+            }
+            .grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+                padding: 0 1rem 3rem;
+                gap: .85rem;
+            }
+            .card {
+                height: 290px;
+            }
+            .artwork {
+                height: 120px;
+                font-size: 3rem;
+            }
+            .dbtn {
+                padding: .5rem 1rem;
+                font-size: .8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="hdr">
+            <div class="hdr-title">
+                <h1 id="theme-name">🐉 恶龙宝可梦 · 图签系统</h1>
+                <p id="theme-desc">收集传说中的恶龙宝可梦，召唤黑暗力量</p>
+            </div>
+            <div class="hdr-stats">
+                <div class="stat">
+                    <div class="stat-val" id="s-collected">0</div>
+                    <div class="stat-lbl">已收集</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-val" id="s-total">0</div>
+                    <div class="stat-lbl">全部图签</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-val" id="s-draws">0</div>
+                    <div class="stat-lbl">召唤次数</div>
+                </div>
+                <div class="progress-wrap">
+                    <div class="progress-top"><span>收集进度</span><span id="s-pct">0%</span></div>
+                    <div class="prog-bar">
+                        <div class="prog-fill" id="prog-fill" style="width:0%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    <div class="controls">
+        <div class="filter-col">
+            <div class="filter-row">
+                <span class="filter-lbl">稀有度：</span>
+                <button class="fb active" data-f="rarity" data-v="all">全部</button>
+                <button class="fb" data-f="rarity" data-v="common">普通</button>
+                <button class="fb" data-f="rarity" data-v="rare">稀有</button>
+                <button class="fb" data-f="rarity" data-v="epic">史诗</button>
+                <button class="fb legend-btn" data-f="rarity" data-v="legendary">传说</button>
+            </div>
+            <div class="filter-row" id="type-filters">
+                <span class="filter-lbl">属性：</span>
+            </div>
+        </div>
+        <div class="action-col">
+            <div class="view-toggle">
+                <button class="vb active" data-view="all">全部图签</button>
+                <button class="vb" data-view="collected">已收集</button>
+            </div>
+            <div class="draw-btns">
+                <button class="dbtn dbtn-single" id="btn-draw1">✨ 单次召唤</button>
+                <button class="dbtn dbtn-ten" id="btn-draw10">🎰 十连召唤</button>
+                <button class="dbtn dbtn-reset" id="btn-reset">🗑️ 重置图鉴</button>
+            </div>
+        </div>
+    </div>
+    <div class="grid" id="grid"></div>
+    <!-- Draw Modal -->
+    <div class="overlay" id="overlay">
+        <div class="modal">
+            <div class="modal-ttl" id="modal-ttl">✨ 召唤结果</div>
+            <div class="draw-grid" id="draw-grid"></div>
+            <button class="close-btn" id="close-btn">收入图鉴</button>
+        </div>
+    </div>
+    <!-- Toast -->
+    <div class="toast" id="toast">
+        <div class="toast-t" id="toast-t"></div>
+        <div class="toast-b" id="toast-b"></div>
+    </div>
+    <!-- Confirm Reset Modal -->
+    <div id="confirm-modal">
+        <div class="confirm-box">
+            <h3>⚠️ 确认重置图鉴？</h3>
+            <p>这将清空所有已收集的卡牌和召唤记录，<br>操作不可撤销。</p>
+            <div class="confirm-btns">
+                <button class="cbtn cbtn-cancel" id="cfm-cancel">取消</button>
+                <button class="cbtn cbtn-ok" id="cfm-ok">确认重置</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // ================================================================
+        //  THEME CONFIG  ← Edit this object to swap themes entirely
+        // ================================================================
+        const THEME = {
+            themeName: "恶龙宝可梦",
+            themeDescription: "收集传说中的恶龙宝可梦，召唤黑暗力量",
+            // Each type maps to a CSS gradient class (tg-*) and a type-badge class (tb-*)
+            types: [
+                { id: "火焰龙", label: "火焰龙", tgClass: "tg-fire", tbClass: "tb-fire", color: "#ef4444" },
+                { id: "冰霜龙", label: "冰霜龙", tgClass: "tg-ice", tbClass: "tb-ice", color: "#38bdf8" },
+                { id: "暗影龙", label: "暗影龙", tgClass: "tg-dark", tbClass: "tb-dark", color: "#a855f7" },
+                { id: "雷霆龙", label: "雷霆龙", tgClass: "tg-thunder", tbClass: "tb-thunder", color: "#fbbf24" },
+                { id: "大地龙", label: "大地龙", tgClass: "tg-earth", tbClass: "tb-earth", color: "#4ade80" },
+                { id: "虚空龙", label: "虚空龙", tgClass: "tg-void", tbClass: "tb-void", color: "#818cf8" },
+            ],
+            // Weights must sum to 100
+            rarities: [
+                { id: "common", label: "普通", stars: "★", weight: 60, color: "#6b7280" },
+                { id: "rare", label: "稀有", stars: "★★", weight: 25, color: "#3b82f6" },
+                { id: "epic", label: "史诗", stars: "★★★", weight: 12, color: "#a855f7" },
+                { id: "legendary", label: "传说", stars: "★★★★", weight: 3, color: "#f59e0b" },
+            ],
+            cards: [
+                // ── COMMON (8) ────────────────────────────────────────────
+                {
+                    id: 1, name: "影翼幼龙", type: "暗影龙", rarity: "common",
+                    desc: "刚出生的暗影龙，翅膀尚未展开，但已充满邪气。",
+                    stats: { atk: 45, def: 30, spd: 55 }, emoji: "🐉"
+                },
+                {
+                    id: 2, name: "烈焰幼龙", type: "火焰龙", rarity: "common",
+                    desc: "喷出的火焰含腐蚀毒素，能熔化普通金属盔甲。",
+                    stats: { atk: 55, def: 25, spd: 48 }, emoji: "🔥"
+                },
+                {
+                    id: 3, name: "霜翼小龙", type: "冰霜龙", rarity: "common",
+                    desc: "飞翔时四周凝结冰晶，每片雪花都带有诅咒。",
+                    stats: { atk: 40, def: 48, spd: 42 }, emoji: "❄️"
+                },
+                {
+                    id: 4, name: "大地毒蛟", type: "大地龙", rarity: "common",
+                    desc: "以大地腐化之力为食，所到之处寸草不生。",
+                    stats: { atk: 50, def: 52, spd: 22 }, emoji: "🌿"
+                },
+                {
+                    id: 5, name: "暗雷幼龙", type: "雷霆龙", rarity: "common",
+                    desc: "尚未成熟的雷霆龙，雷鸣声中夹杂着黑暗诅咒。",
+                    stats: { atk: 48, def: 28, spd: 60 }, emoji: "⚡"
+                },
+                {
+                    id: 6, name: "虚空幼蛟", type: "虚空龙", rarity: "common",
+                    desc: "从虚空裂缝爬出的小生命，身形模糊如烟雾。",
+                    stats: { atk: 35, def: 35, spd: 62 }, emoji: "🌀"
+                },
+                {
+                    id: 7, name: "腐化地蜥", type: "大地龙", rarity: "common",
+                    desc: "外形似巨蜥，体内流动着大地腐化之力。",
+                    stats: { atk: 52, def: 50, spd: 20 }, emoji: "🦎"
+                },
+                {
+                    id: 8, name: "焰毒蛟龙", type: "火焰龙", rarity: "common",
+                    desc: "火焰与毒液共存的低阶恶龙，毒牙散发橙光。",
+                    stats: { atk: 58, def: 22, spd: 45 }, emoji: "🐍"
+                },
+                // ── RARE (6) ──────────────────────────────────────────────
+                {
+                    id: 9, name: "暗焰恶龙", type: "火焰龙", rarity: "rare",
+                    desc: "被黑暗诅咒的火焰龙，喷出能腐蚀一切的黑火。",
+                    stats: { atk: 78, def: 52, spd: 68 }, emoji: "🐉"
+                },
+                {
+                    id: 10, name: "诅咒冰龙", type: "冰霜龙", rarity: "rare",
+                    desc: "受古老诅咒侵染，冰冻能力能将时间本身冻住。",
+                    stats: { atk: 65, def: 78, spd: 58 }, emoji: "💀"
+                },
+                {
+                    id: 11, name: "骨骸暗龙", type: "暗影龙", rarity: "rare",
+                    desc: "由亡灵与暗影编织而成，骨骼在黑光中闪烁。",
+                    stats: { atk: 72, def: 68, spd: 55 }, emoji: "💀"
+                },
+                {
+                    id: 12, name: "虚空暗噬", type: "虚空龙", rarity: "rare",
+                    desc: "能吞噬光与影的虚空生物，存在令空间扭曲。",
+                    stats: { atk: 80, def: 45, spd: 72 }, emoji: "🕳️"
+                },
+                {
+                    id: 13, name: "雷霆黑龙", type: "雷霆龙", rarity: "rare",
+                    desc: "黑色闪电的化身，每次雷击都携带黑暗侵蚀。",
+                    stats: { atk: 88, def: 42, spd: 78 }, emoji: "⚡"
+                },
+                {
+                    id: 14, name: "碎地巨龙", type: "大地龙", rarity: "rare",
+                    desc: "巨尾横扫大地，地面碎裂如镜，毒气蔓延。",
+                    stats: { atk: 82, def: 72, spd: 35 }, emoji: "🌋"
+                },
+                // ── EPIC (6) ──────────────────────────────────────────────
+                {
+                    id: 15, name: "冰霜恶龙王", type: "冰霜龙", rarity: "epic",
+                    desc: "统治极寒地域的恶龙王，呼出的寒气能将太阳冻住。",
+                    stats: { atk: 108, def: 118, spd: 80 }, emoji: "🐲"
+                },
+                {
+                    id: 16, name: "地狱炎龙", type: "火焰龙", rarity: "epic",
+                    desc: "从地狱深处崛起，身上燃烧着永不熄灭的黑焰。",
+                    stats: { atk: 128, def: 88, spd: 98 }, emoji: "🔥"
+                },
+                {
+                    id: 17, name: "幽冥雷霆龙", type: "雷霆龙", rarity: "epic",
+                    desc: "以灵魂为雷源，每道闪电都能将目标精神击碎。",
+                    stats: { atk: 135, def: 72, spd: 112 }, emoji: "⚡"
+                },
+                {
+                    id: 18, name: "深渊暗龙", type: "暗影龙", rarity: "epic",
+                    desc: "从深渊涌现，身形如黑洞，吸收周围一切光线。",
+                    stats: { atk: 118, def: 100, spd: 90 }, emoji: "🌑"
+                },
+                {
+                    id: 19, name: "地狱守卫龙", type: "大地龙", rarity: "epic",
+                    desc: "看守地狱入口的巨型恶龙，咆哮声能开地狱之门。",
+                    stats: { atk: 120, def: 128, spd: 52 }, emoji: "🦕"
+                },
+                {
+                    id: 20, name: "虚空裂龙", type: "虚空龙", rarity: "epic",
+                    desc: "能撕裂空间维度的恶龙，在多个平面同时存在。",
+                    stats: { atk: 122, def: 90, spd: 115 }, emoji: "🌀"
+                },
+                // ── LEGENDARY (4) ─────────────────────────────────────────
+                {
+                    id: 21, name: "混沌始祖龙", type: "虚空龙", rarity: "legendary",
+                    desc: "创世之初便存在的混沌恶龙，是所有恶龙的始祖，能左右世界的命运。",
+                    stats: { atk: 182, def: 158, spd: 148 }, emoji: "🌌"
+                },
+                {
+                    id: 22, name: "血焰龙皇", type: "火焰龙", rarity: "legendary",
+                    desc: "以战神之血为燃料，焚烧整片大陆的恶龙皇帝，传说其死后化为火山群。",
+                    stats: { atk: 198, def: 138, spd: 162 }, emoji: "👑"
+                },
+                {
+                    id: 23, name: "寒冰暗王", type: "冰霜龙", rarity: "legendary",
+                    desc: "掌控绝对零度与黑暗诅咒的冰龙之王，其怒吼能使时空凝固。",
+                    stats: { atk: 168, def: 178, spd: 150 }, emoji: "❄️"
+                },
+                {
+                    id: 24, name: "龙皇·虚空", type: "虚空龙", rarity: "legendary",
+                    desc: "超越维度的龙皇，以虚空为身，以星辰为食，存在于一切时空之中。",
+                    stats: { atk: 202, def: 182, spd: 175 }, emoji: "✨"
+                },
+            ],
+        };
+        // ================================================================
+        //  STATE
+        // ================================================================
+        const SAVE_KEY = `badge_${THEME.themeName}`;
+        const state = {
+            collected: new Set(),
+            fresh: new Set(),   // newly drawn, cleared on modal close
+            draws: 0,
+            rFilter: 'all',
+            tFilter: 'all',
+            view: 'all',
+        };
+        function load() {
+            try {
+                const d = JSON.parse(localStorage.getItem(SAVE_KEY) || '{}');
+                state.collected = new Set(d.collected || []);
+                state.draws = d.draws || 0;
+            } catch (e) { }
+        }
+        function save() {
+            localStorage.setItem(SAVE_KEY, JSON.stringify({
+                collected: [...state.collected],
+                draws: state.draws,
+            }));
+        }
+        // ================================================================
+        //  HELPERS
+        // ================================================================
+        const rInfo = id => THEME.rarities.find(r => r.id === id);
+        const tInfo = id => THEME.types.find(t => t.id === id);
+        function weightedDraw() {
+            let r = Math.random() * 100;
+            for (const rar of THEME.rarities) { r -= rar.weight; if (r <= 0) return rar.id; }
+            return THEME.rarities[0].id;
+        }
+        function drawOne() {
+            const rarity = weightedDraw();
+            const pool = THEME.cards.filter(c => c.rarity === rarity);
+            return pool[Math.floor(Math.random() * pool.length)];
+        }
+        // ================================================================
+        //  INIT UI SCAFFOLDING
+        // ================================================================
+        function buildTypeFilters() {
+            const row = document.getElementById('type-filters');
+            row.innerHTML = '<span class="filter-lbl">属性：</span>';
+            const all = document.createElement('button');
+            all.className = 'fb active'; all.dataset.f = 'type'; all.dataset.v = 'all';
+            all.textContent = '全部'; row.appendChild(all);
+            THEME.types.forEach(t => {
+                const b = document.createElement('button');
+                b.className = 'fb'; b.dataset.f = 'type'; b.dataset.v = t.id;
+                b.textContent = t.label;
+                b.style.borderColor = t.color + '50';
+                b.style.color = t.color;
+                row.appendChild(b);
+            });
+            row.querySelectorAll('.fb').forEach(b => b.addEventListener('click', handleFilter));
+        }
+        document.getElementById('theme-name').textContent = `🐉 ${THEME.themeName} · 图签系统`;
+        document.getElementById('theme-desc').textContent = THEME.themeDescription;
+        // ================================================================
+        //  RENDER CARD
+        // ================================================================
+        function cardHTML(card) {
+            const got = state.collected.has(card.id);
+            const isNew = state.fresh.has(card.id);
+            const ri = rInfo(card.rarity);
+            const ti = tInfo(card.type);
+            return `
+<div class="card-wrap">
+<div class="card ${got ? '' : 'dim'}" data-rarity="${card.rarity}" data-id="${card.id}">
+  <div class="card-inner">
+    ${isNew ? '<div class="new-badge">NEW</div>' : ''}
+    <div class="rbadge ${card.rarity}" style="color:${ri.color}">${ri.stars} ${ri.label}</div>
+    <div class="artwork ${ti.tgClass}">
+      <span class="artwork-emoji">${got ? card.emoji : '❓'}</span>
+    </div>
+    <div class="card-body">
+      <div class="card-name">${got ? card.name : '???'}</div>
+      <span class="tbadge ${ti.tbClass}">${card.type}</span>
+      ${got ? `
+        <div class="card-desc">${card.desc.slice(0, 48)}${card.desc.length > 48 ? '…' : ''}</div>
+        <div class="card-stats">
+          <div class="s"><div class="s-n">攻击</div><div class="s-v">${card.stats.atk}</div></div>
+          <div class="s"><div class="s-n">防御</div><div class="s-v">${card.stats.def}</div></div>
+          <div class="s"><div class="s-n">速度</div><div class="s-v">${card.stats.spd}</div></div>
+        </div>
+      ` : '<div class="card-desc" style="margin-top:.25rem">尚未发现此图签</div>'}
+    </div>
+  </div>
+</div>
+</div>`;
+        }
+        function filtered() {
+            return THEME.cards.filter(c => {
+                if (state.rFilter !== 'all' && c.rarity !== state.rFilter) return false;
+                if (state.tFilter !== 'all' && c.type !== state.tFilter) return false;
+                if (state.view === 'collected' && !state.collected.has(c.id)) return false;
+                return true;
+            });
+        }
+        function renderGrid() {
+            const grid = document.getElementById('grid');
+            const cards = filtered();
+            if (!cards.length) {
+                grid.innerHTML = `<div class="empty"><div class="empty-ico">🐉</div><p>没有符合条件的图签</p><p style="font-size:.8rem;margin-top:.4rem;color:var(--muted)">试试其他筛选，或继续召唤！</p></div>`;
+                return;
+            }
+            grid.innerHTML = cards.map(cardHTML).join('');
+            // card click → detail toast
+            grid.querySelectorAll('.card').forEach(el => {
+                el.addEventListener('click', () => {
+                    const id = +el.dataset.id;
+                    const card = THEME.cards.find(c => c.id === id);
+                    if (card && state.collected.has(id)) {
+                        toast(`${card.emoji} ${card.name}`,
+                            `${card.desc} | 攻击:${card.stats.atk} 防御:${card.stats.def} 速度:${card.stats.spd}`);
+                    }
+                });
+            });
+        }
+        function updateStats() {
+            const got = state.collected.size;
+            const total = THEME.cards.length;
+            const pct = Math.round(got / total * 100);
+            document.getElementById('s-collected').textContent = got;
+            document.getElementById('s-total').textContent = total;
+            document.getElementById('s-draws').textContent = state.draws;
+            document.getElementById('s-pct').textContent = `${pct}%`;
+            document.getElementById('prog-fill').style.width = `${pct}%`;
+        }
+        // ================================================================
+        //  GACHA
+        // ================================================================
+        function drawCards(n) {
+            const drawn = Array.from({ length: n }, drawOne);
+            state.draws += n;
+            // track new additions
+            const seenThisBatch = new Set();
+            drawn.forEach(c => {
+                const wasNew = !state.collected.has(c.id) && !seenThisBatch.has(c.id);
+                if (wasNew) { state.collected.add(c.id); state.fresh.add(c.id); }
+                seenThisBatch.add(c.id);
+            });
+            save();
+            updateStats();
+            showModal(drawn);
+        }
+        // ================================================================
+        //  MODAL
+        // ================================================================
+        function typeGradClass(typeId) {
+            return tInfo(typeId)?.tgClass || 'tg-void';
+        }
+        function typeBadgeClass(typeId) {
+            return tInfo(typeId)?.tbClass || 'tb-void';
+        }
+        function showModal(cards) {
+            const overlay = document.getElementById('overlay');
+            const dGrid = document.getElementById('draw-grid');
+            const ttl = document.getElementById('modal-ttl');
+            const hasLeg = cards.some(c => c.rarity === 'legendary');
+            const hasEpic = cards.some(c => c.rarity === 'epic');
+            if (hasLeg) { ttl.textContent = '🌟 传说降临！'; ttl.style.color = '#f59e0b'; }
+            else if (hasEpic) { ttl.textContent = '💜 史诗召唤！'; ttl.style.color = '#a855f7'; }
+            else { ttl.textContent = '✨ 召唤结果'; ttl.style.color = '#f59e0b'; }
+            // Track first occurrence in batch for "dup" label
+            const batchFirst = new Map();
+            cards.forEach((c, i) => { if (!batchFirst.has(c.id)) batchFirst.set(c.id, i); });
+            dGrid.innerHTML = cards.map((card, i) => {
+                const ri = rInfo(card.rarity);
+                const isDup = batchFirst.get(card.id) !== i || !state.fresh.has(card.id);
+                return `
+<div class="dc">
+  <div class="dc-inner" id="dci-${i}">
+    <div class="dc-face dc-back"><div class="dc-back-ico">🐉</div></div>
+    <div class="dc-face dc-front" data-rarity="${card.rarity}" style="border:2px solid ${ri.color}">
+      <div class="dc-art ${typeGradClass(card.type)}">${card.emoji}</div>
+      <div class="dc-name">${card.name}</div>
+      <div class="dc-stars" style="color:${ri.color}">${ri.stars}</div>
+      <span class="tbadge ${typeBadgeClass(card.type)}" style="font-size:.55rem">${card.type}</span>
+      ${isDup ? '<div class="dc-dup">重复</div>' : ''}
+    </div>
+  </div>
+</div>`;
+            }).join('');
+            overlay.classList.add('show');
+            const delay = cards.length === 1 ? 300 : 200;
+            cards.forEach((card, i) => {
+                setTimeout(() => {
+                    document.getElementById(`dci-${i}`)?.classList.add('flipped');
+                    if (card.rarity === 'legendary' || card.rarity === 'epic') particles(card.rarity);
+                }, 350 + i * delay);
+            });
+        }
+        document.getElementById('close-btn').addEventListener('click', () => {
+            document.getElementById('overlay').classList.remove('show');
+            state.fresh.clear();
+            renderGrid();
+        });
+        // click outside modal content closes it
+        document.getElementById('overlay').addEventListener('click', e => {
+            if (e.target === document.getElementById('overlay')) {
+                document.getElementById('close-btn').click();
+            }
+        });
+        // ================================================================
+        //  PARTICLES
+        // ================================================================
+        function particles(rarity) {
+            const emojis = rarity === 'legendary'
+                ? ['⭐', '✨', '💫', '🌟', '👑', '🔱']
+                : ['💜', '✨', '🌀', '💎', '⚡'];
+            for (let i = 0; i < 10; i++) {
+                setTimeout(() => {
+                    const el = document.createElement('div');
+                    el.className = 'ptcl';
+                    el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+                    el.style.cssText = `
+        left:${15 + Math.random() * 70}%;
+        top:${20 + Math.random() * 50}%;
+        font-size:${1 + Math.random()}rem;
+        animation-duration:${1 + Math.random() * .8}s;
+      `;
+                    document.body.appendChild(el);
+                    setTimeout(() => el.remove(), 2000);
+                }, i * 80);
+            }
+        }
+        // ================================================================
+        //  FILTERS
+        // ================================================================
+        function handleFilter(e) {
+            const b = e.currentTarget;
+            const f = b.dataset.f, v = b.dataset.v;
+            if (f === 'rarity') { state.rFilter = v; document.querySelectorAll('[data-f="rarity"]').forEach(x => x.classList.remove('active')); }
+            else { state.tFilter = v; document.querySelectorAll('[data-f="type"]').forEach(x => x.classList.remove('active')); }
+            b.classList.add('active');
+            renderGrid();
+        }
+        document.querySelectorAll('[data-f="rarity"]').forEach(b => b.addEventListener('click', handleFilter));
+        document.querySelectorAll('.vb').forEach(b => b.addEventListener('click', () => {
+            state.view = b.dataset.view;
+            document.querySelectorAll('.vb').forEach(x => x.classList.remove('active'));
+            b.classList.add('active');
+            renderGrid();
+        }));
+        // Draw buttons
+        document.getElementById('btn-draw1').addEventListener('click', () => drawCards(1));
+        document.getElementById('btn-draw10').addEventListener('click', () => drawCards(10));
+        // Reset button
+        const cfm = document.getElementById('confirm-modal');
+        document.getElementById('btn-reset').addEventListener('click', () => cfm.classList.add('show'));
+        document.getElementById('cfm-cancel').addEventListener('click', () => cfm.classList.remove('show'));
+        document.getElementById('cfm-ok').addEventListener('click', () => {
+            cfm.classList.remove('show');
+            localStorage.removeItem(SAVE_KEY);
+            state.collected = new Set();
+            state.fresh = new Set();
+            state.draws = 0;
+            state.rFilter = 'all';
+            state.tFilter = 'all';
+            state.view = 'all';
+            // reset filter UI
+            document.querySelectorAll('.fb').forEach(b => b.classList.remove('active'));
+            document.querySelector('[data-f="rarity"][data-v="all"]').classList.add('active');
+            document.querySelector('[data-f="type"][data-v="all"]').classList.add('active');
+            document.querySelectorAll('.vb').forEach(b => b.classList.remove('active'));
+            document.querySelector('[data-view="all"]').classList.add('active');
+            updateStats();
+            renderGrid();
+            toast('🔄 图鉴已重置', '所有收集进度已清空，可以重新开始啦！');
+        });
+        cfm.addEventListener('click', e => { if (e.target === cfm) cfm.classList.remove('show'); });
+        // ================================================================
+        //  TOAST
+        // ================================================================
+        let toastTmr;
+        function toast(title, body) {
+            const el = document.getElementById('toast');
+            document.getElementById('toast-t').textContent = title;
+            document.getElementById('toast-b').textContent = body;
+            el.classList.add('show');
+            clearTimeout(toastTmr);
+            toastTmr = setTimeout(() => el.classList.remove('show'), 3800);
+        }
+        // ================================================================
+        //  BOOT
+        // ================================================================
+        load();
+        buildTypeFilters();
+        updateStats();
+        renderGrid();
+        if (state.draws === 0) {
+            setTimeout(() => toast('🐉 欢迎来到恶龙宝可梦图签系统', '点击「单次召唤」或「十连召唤」开始收集！'), 600);
+        }
+    </script>
+</body>
+</html>