zz.html

<!doctypehtml>
    <html lang=zh-CN>
    <meta charset=UTF-8>
    <meta content="width=device-width,initial-scale=1" name=viewport>
    <meta content="怸歪小站打赏页面，理性浪漫主义分享 | cycy.fun" name=description>
    <meta content=#f6f7f8 name=theme-color id=themeColorMeta>
    <link href=https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico rel=icon type=image/x-icon>
    <title>「怸歪小站」打赏页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        html {
            color-scheme: light;
            -webkit-font-smoothing: antialiased
        }

        html.dark {
            color-scheme: dark
        }

        body {
            min-width: 320px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f6f7f8;
            transition: background-color .3s ease;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            padding: 60px 0
        }

        html.dark body {
            background-color: #1e2020
        }

        .theme-btn {
            position: fixed;
            top: 24px;
            right: 24px;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
            cursor: pointer;
            transition: background .3s, color .3s;
            color: #000;
            outline: transparent solid 2px;
            z-index: 100
        }

        .theme-btn:focus-visible {
            outline-color: #409eff
        }

        html.dark .theme-btn {
            background: #303134;
            color: #fff
        }

        .dark-icon,
        .light-icon {
            display: none
        }

        html.dark .light-icon {
            display: block
        }

        html:not(.dark) .dark-icon {
            display: block
        }

        .card {
            width: 100%;
            max-width: 380px;
            margin: 0 16px;
            padding: 32px 24px;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
            transition: background .3s, box-shadow .3s
        }

        html.dark .card {
            background: #000;
            box-shadow: 0 10px 40px rgba(0, 0, 0, .35)
        }

        .donation-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 28px
        }

        .donation-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border-radius: 14px;
            background: #f7f7f7;
            cursor: pointer
        }

        html.dark .donation-item {
            background: #303134
        }

        .qrcode-wrap {
            width: 100%;
            max-width: 140px;
            overflow: hidden;
            border-radius: 12px
        }

        .qrcode {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 12px;
            object-fit: cover;
            display: block;
            filter: blur(8px);
            opacity: .35;
            transition: all .3s ease
        }

        .donation-item:hover .qrcode {
            filter: blur(0px);
            opacity: 1;
            transform: scale(1.03)
        }

        .donation-label {
            font-size: 13px;
            color: rgba(0, 0, 0, .55);
            text-align: center
        }

        html.dark .donation-label {
            color: rgba(255, 255, 255, .55)
        }

        .info-bar {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-radius: 10px;
            background: #f7f7f7
        }

        html.dark .info-bar {
            background: #303134
        }

        .avatar {
            width: 48px;
            height: 48px;
            margin: 0 16px;
            border-radius: 999px;
            object-fit: cover
        }

        .info-text {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .name {
            font-weight: 600;
            color: #000;
            font-size: 15px
        }

        html.dark .name {
            color: #fff
        }

        .desc {
            font-size: 12px;
            color: rgba(0, 0, 0, .5)
        }

        html.dark .desc {
            color: rgba(255, 255, 255, .5)
        }

        .desc a:hover {
            text-decoration: underline
        }

        .img-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .85);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: opacity .25s ease, visibility .25s ease
        }

        .img-modal.show {
            opacity: 1;
            visibility: visible
        }

        .modal-close {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: none;
            background: rgba(255, 255, 255, .2);
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            backdrop-filter: blur(6px);
            transition: background .2s
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, .35)
        }

        .modal-img {
            max-width: min(90vw, 520px);
            max-height: min(90vh, 520px);
            border-radius: 16px;
            object-fit: contain;
            transform: scale(.9);
            transition: transform .25s ease
        }

        .img-modal.show .modal-img {
            transform: scale(1)
        }
    </style><button class=theme-btn id=themeToggle><span class=light-icon>🌙</span> <span class=dark-icon>☀️</span></button>
    <div class=card>
        <div class=donation-grid>
            <div class=donation-item>
                <div class=qrcode-wrap><img alt=微信打赏二维码 class=qrcode onerror='this.src="data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%221.2%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/><path d=%22M3 3l18 18%22/></svg>"' src=img/wxsk.webp data-src=img/wxsk.webp></div>
                <div class=donation-label>微信打赏</div>
            </div>
            <div class=donation-item>
                <div class=qrcode-wrap><img alt=支付宝打赏二维码 class=qrcode onerror='this.src="data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%221.2%22><rect x=%223%22 y=%223%22 width=%2218%22 height=%2218%22 rx=%222%22/><path d=%22M3 3l18 18%22/></svg>"' src=img/zfbsk.webp data-src=img/zfbsk.webp></div>
                <div class=donation-label>支付宝打赏</div>
            </div>
        </div>
        <div class=info-bar><img alt=头像 class=avatar onerror='this.src="data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%221.2%22><circle cx=%2212%22 cy=%228%22 r=%224%22/><path d=%22M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%22/></svg>"' src=img/avatar.webp>
            <div class=info-text>
                <div class=name>怸歪小站</div>
                <div class=desc><a href="https://cycy.fun" target="_blank" style="color: inherit; text-decoration: none;">👆进入cycy.fun</a> | <a href="https://347777.xyz" target="_blank" style="color: inherit; text-decoration: none;">👆进入347777.xyz</a></div>
            </div>
        </div>
    </div>
    <div class=img-modal id=imgModal><button class=modal-close id=modalClose>×</button> <img alt=大图预览 class=modal-img id=modalImg></div>
    <script>
        const html = document.documentElement,
            themeColorMeta = document.getElementById("themeColorMeta"),
            lightColor = "#f6f7f8",
            darkColor = "#1e2020";

        function applyTheme(e) {
            "dark" === e ? (html.classList.add("dark"), themeColorMeta.setAttribute("content", darkColor)) : (html.classList.remove("dark"), themeColorMeta.setAttribute("content", lightColor))
        }
        const savedTheme = localStorage.getItem("theme");
        "dark" === savedTheme || !savedTheme && window.matchMedia("(prefers-color-scheme: dark)").matches ? applyTheme("dark") : applyTheme("light");
        const toggleBtn = document.getElementById("themeToggle");
        toggleBtn.addEventListener("click", () => {
            var e = html.classList.contains("dark") ? "light" : "dark";
            applyTheme(e), localStorage.setItem("theme", e)
        }), window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
            localStorage.getItem("theme") || applyTheme(e.matches ? "dark" : "light")
        });
        const imgModal = document.getElementById("imgModal"),
            modalImg = document.getElementById("modalImg"),
            modalClose = document.getElementById("modalClose"),
            qrImages = document.querySelectorAll(".qrcode");

        function closeModal() {
            imgModal.classList.remove("show"), document.body.style.overflow = ""
        }
        qrImages.forEach(e => {
            e.addEventListener("click", () => {
                modalImg.src = e.dataset.src, imgModal.classList.add("show"), document.body.style.overflow = "hidden"
            })
        }), modalClose.addEventListener("click", closeModal), imgModal.addEventListener("click", e => {
            e.target === imgModal && closeModal()
        }), document.addEventListener("keydown", e => {
            "Escape" === e.key && imgModal.classList.contains("show") && closeModal()
        })
    </script>