<?php

require_once __DIR__ . '/ds/dbconfig.php';
$db = new mysqli($dbconfig['dbhost'], $dbconfig['dbuser'], $dbconfig['dbpwd'], $dbconfig['dbname'], $dbconfig['dbport']);
$r = $db->query("SELECT v FROM cmy_config WHERE k='index_loading'");
if ($r && $row = $r->fetch_assoc()) {
    if ($row['v'] != '1') {
        header("Location: ./ds");
        exit;
    }
}
$db->close();
?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>正在加载首页</title>
    <style>
    *{margin:0;padding:0;box-sizing:border-box}
    :root{
        --blue-50:#f0f6ff;
        --blue-100:#dbe8ff;
        --blue-300:#7aa7ff;
        --blue-500:#2563eb;
        --blue-600:#1d4ed8;
        --blue-700:#1e40af;
        --ink:#0b1e3f;
    }
    html,body{height:100%}
    body{
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
        color:var(--ink);
        background:#eaf2ff;
        overflow:hidden;
        position:relative;
    }

    /* 动态渐变底色 */
    body::before{
        content:"";
        position:fixed;inset:-20%;
        background:
            radial-gradient(circle at 20% 30%, #c9dcff 0%, transparent 45%),
            radial-gradient(circle at 80% 20%, #a9c6ff 0%, transparent 40%),
            radial-gradient(circle at 70% 85%, #dce9ff 0%, transparent 50%),
            linear-gradient(135deg,#eaf2ff 0%,#ffffff 50%,#dde9ff 100%);
        animation:bgShift 18s ease-in-out infinite alternate;
        z-index:0;
    }
    @keyframes bgShift{
        0%{transform:translate(0,0) scale(1)}
        100%{transform:translate(-2%,-2%) scale(1.05)}
    }

    /* 网格层 */
    body::after{
        content:"";
        position:fixed;inset:0;
        background-image:
            linear-gradient(rgba(37,99,235,0.06) 1px,transparent 1px),
            linear-gradient(90deg,rgba(37,99,235,0.06) 1px,transparent 1px);
        background-size:42px 42px;
        mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 80%);
        -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 40%,transparent 80%);
        animation:gridMove 20s linear infinite;
        z-index:0;
    }
    @keyframes gridMove{
        from{background-position:0 0,0 0}
        to{background-position:42px 42px,42px 42px}
    }

    /* 浮动光斑 */
    .orb{
        position:fixed;
        border-radius:50%;
        filter:blur(60px);
        opacity:.55;
        z-index:0;
        pointer-events:none;
    }
    .orb.o1{width:380px;height:380px;background:#7aa7ff;top:-80px;left:-80px;animation:float1 14s ease-in-out infinite}
    .orb.o2{width:300px;height:300px;background:#4f8bff;bottom:-60px;right:-60px;animation:float2 16s ease-in-out infinite}
    .orb.o3{width:220px;height:220px;background:#bcd2ff;top:50%;left:60%;animation:float3 12s ease-in-out infinite}
    @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
    @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
    @keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.1)}}

    /* 主体 */
    .main{
        position:relative;
        z-index:2;
        width:480px;
        max-width:92%;
        animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes fadeUp{
        from{opacity:0;transform:translateY(28px)}
        to{opacity:1;transform:translateY(0)}
    }

    .card{
        position:relative;
        background:rgba(255,255,255,0.72);
        backdrop-filter:blur(22px) saturate(180%);
        -webkit-backdrop-filter:blur(22px) saturate(180%);
        border:1px solid rgba(255,255,255,0.8);
        border-radius:24px;
        box-shadow:
            0 30px 80px -20px rgba(29,78,216,0.25),
            0 8px 24px -8px rgba(29,78,216,0.12),
            inset 0 1px 0 rgba(255,255,255,.9);
        padding:54px 44px 36px;
        text-align:center;
        overflow:hidden;
    }
    /* 卡片顶部细线高光 */
    .card::before{
        content:"";
        position:absolute;top:0;left:10%;right:10%;height:1px;
        background:linear-gradient(90deg,transparent,rgba(37,99,235,.6),transparent);
    }
    /* 卡片光泽流动 */
    .card::after{
        content:"";
        position:absolute;top:0;left:-60%;width:60%;height:100%;
        background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
        animation:sheen 6s ease-in-out infinite;
        pointer-events:none;
    }
    @keyframes sheen{
        0%{left:-60%}
        60%{left:120%}
        100%{left:120%}
    }

    /* 顶部品牌点 */
    .brand{
        display:inline-flex;align-items:center;gap:8px;
        font-size:12px;letter-spacing:3px;color:var(--blue-600);
        background:rgba(37,99,235,.08);
        padding:6px 14px;border-radius:999px;
        margin-bottom:24px;
        border:1px solid rgba(37,99,235,.15);
    }
    .brand .dot{
        width:6px;height:6px;border-radius:50%;
        background:var(--blue-500);
        box-shadow:0 0 0 0 rgba(37,99,235,.5);
        animation:pulseDot 1.6s ease-out infinite;
    }
    @keyframes pulseDot{
        0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}
        100%{box-shadow:0 0 0 10px rgba(37,99,235,0)}
    }

    /* 图标圆 */
    .icon-circle{
        position:relative;
        width:84px;height:84px;border-radius:50%;
        background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);
        display:flex;align-items:center;justify-content:center;
        margin:0 auto 26px;
        box-shadow:
            0 14px 36px rgba(29,78,216,.45),
            inset 0 1px 0 rgba(255,255,255,.4);
        animation:breathe 3s ease-in-out infinite;
    }
    .icon-circle::before,.icon-circle::after{
        content:"";position:absolute;inset:-6px;border-radius:50%;
        border:1px solid rgba(37,99,235,.35);
        animation:ring 2.4s ease-out infinite;
    }
    .icon-circle::after{animation-delay:1.2s}
    @keyframes ring{
        0%{transform:scale(.9);opacity:.8}
        100%{transform:scale(1.5);opacity:0}
    }
    @keyframes breathe{
        0%,100%{transform:scale(1)}
        50%{transform:scale(1.04)}
    }
    .icon-circle svg{width:38px;height:38px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}

    .card h2{
        font-size:22px;color:var(--ink);
        margin-bottom:10px;font-weight:600;letter-spacing:.5px;
    }
    .card .tip{
        font-size:13.5px;color:#5a6c8a;margin-bottom:6px;line-height:1.7;
    }

    .countdown-text{
        font-size:13px;color:#5a6c8a;
        margin:18px 0 22px;display:flex;align-items:center;justify-content:center;gap:8px;
    }
    .countdown-text span{
        display:inline-flex;align-items:center;justify-content:center;
        background:linear-gradient(135deg,#3b82f6,#1d4ed8);
        color:#fff;min-width:30px;height:30px;padding:0 8px;
        border-radius:9px;font-size:15px;font-weight:700;
        box-shadow:0 6px 14px rgba(29,78,216,.35);
    }

    /* 进度条 */
    .progress-bar{
        position:relative;
        width:100%;height:6px;
        background:rgba(37,99,235,.1);
        border-radius:999px;margin-bottom:30px;overflow:hidden;
    }
    .progress-bar .fill{
        position:relative;height:100%;
        background:linear-gradient(90deg,#60a5fa,#2563eb,#1d4ed8);
        border-radius:999px;width:0%;
        transition:width 1s linear;
        box-shadow:0 0 12px rgba(37,99,235,.6);
    }
    .progress-bar .fill::after{
        content:"";position:absolute;inset:0;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
        animation:flow 1.6s linear infinite;
    }
    @keyframes flow{
        from{transform:translateX(-100%)}
        to{transform:translateX(100%)}
    }

    /* 按钮 */
    .btn-enter{
        position:relative;
        display:inline-flex;align-items:center;gap:10px;
        padding:14px 44px;font-size:15px;font-weight:600;
        color:#fff;text-decoration:none;letter-spacing:1.5px;
        background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
        border:none;border-radius:999px;cursor:pointer;
        transition:transform .25s ease,box-shadow .25s ease;
        box-shadow:
            0 10px 24px rgba(29,78,216,.4),
            inset 0 1px 0 rgba(255,255,255,.3);
        overflow:hidden;
    }
    .btn-enter::before{
        content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
        background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
        transition:left .6s ease;
    }
    .btn-enter:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(29,78,216,.5)}
    .btn-enter:hover::before{left:120%}
    .btn-enter:active{transform:translateY(0)}
    .btn-enter svg{width:16px;height:16px;fill:#fff;transition:transform .25s ease}
    .btn-enter:hover svg{transform:translateX(4px)}

    .footer-icp{
        margin-top:26px;font-size:12px;color:#8a99b5;letter-spacing:.3px;
    }

    @media (max-width:520px){
        .card{padding:44px 26px 30px}
        .card h2{font-size:19px}
    }
    </style>
</head>
<body>
    <div class="orb o1"></div>
    <div class="orb o2"></div>
    <div class="orb o3"></div>

    <div class="main">
        <div class="card">
            <div class="brand"><span class="dot"></span>SYSTEM READY</div>

            <div class="icon-circle">
                <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
            </div>

            <h2>页面加载成功</h2>
            <p class="tip">如果没有自动跳转，请手动访问 域名/Ds</p>

            <p class="countdown-text"><span id="sec">3</span><em style="font-style:normal">秒后自动进入</em></p>

            <div class="progress-bar"><div class="fill" id="progressFill"></div></div>

            <a href="./ds" class="btn-enter" id="access">
                立即进入网站
                <svg viewBox="0 0 24 24"><path d="M13 5l7 7-7 7-1.41-1.41L16.17 13H4v-2h12.17l-4.58-4.59z"/></svg>
            </a>

            <div class="footer-icp">备案ICP：京ICP备10046444号-2</div>
        </div>
    </div>

    <script>
    var seconds = 3;
    var secEl = document.getElementById('sec');
    var fillEl = document.getElementById('progressFill');
    setTimeout(function(){ fillEl.style.width = '20%'; }, 50);

    var timer = setInterval(function(){
        seconds--;
        secEl.textContent = seconds;
        fillEl.style.width = ((4 - seconds) * 25 + 25) + '%';
        if(seconds <= 0){
            clearInterval(timer);
            fillEl.style.width = '100%';
            window.location.href = './ds';
        }
    }, 1000);
    </script>
</body>
</html>
