AI/middle.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

        <style>
            :root {
                --bg1: #eaf6ff;
                --card-bg: rgba(255, 255, 255, 0.85);
                --green: #1ac167;
                --muted: #6b7280;
                --shadow: 0 18px 50px rgba(16, 64, 92, 0.08);
                font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
            }

            * {
                box-sizing: border-box
            }

            html,
            body {
                height: 100%;
                margin: 0
            }

            body {
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, #f3fbff 0%, #e9f5ff 60%);
                padding: 28px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }


            .wrap {
                width: 100%;
                max-width: 560px;
                background: var(--card-bg);
                border-radius: 14px;
                padding: 56px 48px;
                box-shadow: var(--shadow);
                text-align: center
            }

            .logo {
                width: 92px;
                height: 92px;
                border-radius: 18px;
                overflow: hidden;
                margin: 0 auto 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.6));
                box-shadow: 0 8px 20px rgba(12, 75, 40, 0.06);
            }

            .logo img {
                width: 72px;
                height: 72px;
                object-fit: contain;
                display: block
            }

            h1 {
                margin: 6px 0 24px;
                font-size: 22px;
                color: #0f1724;
                font-weight: 600
            }


            .agree {
                display: flex;
                align-items: center;
                gap: 12px;
                justify-content: flex-start;
                margin: 22px auto 28px;
                max-width: 420px;
                color: var(--muted);
                font-size: 14px
            }

            .agree input {
                width: 18px;
                height: 18px
            }

            .agree a {
                color: #0b84b5;
                text-decoration: none
            }


            .btn {
                display: inline-block;
                padding: 14px 48px;
                border-radius: 40px;
                background: linear-gradient(90deg, var(--green), #12b06c);
                color: white;
                font-weight: 700;
                border: 0;
                cursor: pointer;
                font-size: 16px;
                box-shadow: 0 12px 30px rgba(26, 193, 103, 0.18);
                transition: transform .12s ease, opacity .12s ease;
            }

            .btn:active {
                transform: translateY(1px)
            }

            .btn[disabled] {
                opacity: 0.6;
                cursor: not-allowed;
                box-shadow: none
            }


            .subtle {
                font-size: 13px;
                color: var(--muted);
                margin-top: 18px
            }


            @media (max-width:520px) {
                .wrap {
                    padding: 36px 20px
                }

                .agree {
                    justify-content: center
                }
            }
        </style>
    </head>

    <body>
        <!-- <div class="wrap" role="main" aria-labelledby="title">
            <div class="logo" aria-hidden>
                <img src="./img/logo.png" alt="飒沓 logo">
            </div>


            <h1 id="title">欢迎来到飒沓</h1>


            <div style="height:8px"></div> -->


        <!-- <label class="agree" for="agreeChk">
                <input type="checkbox" id="agreeChk" />
                <div style="line-height:1.35">已阅读并同意
                    <a href="#" onclick="return false">服务协议</a>、
                    <a href="#" onclick="return false">隐私政策</a>

                </div>
            </label> -->


        <!-- <div>
                <button id="loginBtn" class="btn" onclick="handlelogin()">授权登录</button>
            </div> -->


        <!-- <div class="subtle">使用微信扫码或微信内授权登录。为保障账号安全，请勿在不信任的设备上授权。</div> -->
        <!-- </div> -->
        <script>
            // 开启 vConsole 调试面板
            var vConsole = new VConsole();
            // wx364b8ebf17fe45fe  wx0eeb7556d60121db
            console.log("✅ vConsole 已经启动");
            const url = encodeURIComponent("https://ai.satabot.com?userid=6353rf")
            handlelogin()
            function handlelogin() {
                const APP_ID = 'wxa957108dae7d9048';
                const REDIRECT_URI = encodeURIComponent("https://ai.satabot.com");
                const STATE = Math.random().toString(36).substring(2, 12);
                const SCOPE = 'snsapi_userinfo';
                // const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${APP_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&state=${STATE}#wechat_redirect`;
                // window.location.href = authUrl; // 跳转后页面刷新，后续代码不执行
                window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=${SCOPE}&state=${STATE}&connect_redirect=1#wechat_redirect`
            }
        </script>

        <script>

        </script>
    </body>

</html>