2026年冠亚军登记

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background: linear-gradient(160deg, #081428, #102b4f);
            color: #fff;
            padding: 30px 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 420px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom:24px;
        }
        .header h1{
            color:#ffd770;
            font-size:26px;
            margin-bottom:8px;
        }
        .header p{
            color:#b4c8e6;
            font-size:14px;
        }
        .card{
            background:rgba(255,255,255,0.08);
            border-radius:18px;
            padding:24px;
            border:1px solid rgba(255,215,112,0.25);
            margin-bottom:20px;
        }
        .input-box{
            margin-bottom:20px;
        }
        .input-box input{
            width:100%;
            padding:12px 16px;
            border-radius:10px;
            border:none;
            font-size:16px;
            outline:none;
        }
        .draw-btn{
            width:100%;
            padding:16px;
            border-radius:12px;
            border:none;
            font-size:18px;
            font-weight:bold;
            background:linear-gradient(90deg,#d4a040,#ffd770);
            color:#081428;
            cursor:pointer;
            transition:0.3s;
        }
        .draw-btn:disabled{
            background:#666;
            cursor:not-allowed;
            color:#ccc;
        }
        .score-area{
            text-align:center;
            padding:20px 0;
            font-size:22px;
            color:#ffd770;
            display:none;
        }
        .rank-title{
            color:#ffd770;
            font-size:18px;
            margin-bottom:12px;
        }
        .rank-item{
            display:flex;
            justify-content:space-between;
            padding:10px 0;
            border-bottom:1px solid rgba(255,255,255,0.1);
        }
        .rule{
            font-size:13px;
            color:#b4c8e6;
            line-height:1.7;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>鲸粤会 · 文脉一掷</h1>
            <p>布噜鲸遨游五大神域，抽取你的文脉分值｜每日0点重置</p >
        </div>

        <div class="card">
            <div class="input-box">
                <input id="nickInput" placeholder="输入你的藏友昵称" />
            </div>
            <button class="draw-btn" id="drawBtn">点击抽取文脉分值</button>
            <div class="score-area" id="scoreBox">
                <div id="scoreText"></div>
                <div id="rankDesc" style="font-size:16px;margin-top:8px;color:#fff;"></div>
            </div>
            <div style="margin-top:16px;text-align:center;color:#ff9e9e;font-size:14px" id="coolTip"></div>
        </div>

        <div class="card">
            <div class="rank-title">🏆 今日排行榜 TOP10</div>
            <div id="rankList"></div>
        </div>

        <div class="card">
            <div class="rank-title">📜活动规则</div>
            <div class="rule">
                1.仅限鲸粤会社区藏友参与，<b>每日0点重置，每人每天仅可抽取1次</b><br>
                2.点击按钮随机获得10–999文脉分值，分值完全随机<br>
                3.每日24点结算榜单，当日分数第一名获得专属奖励兑换码<br>
                4.兑换码可兑换鲸粤会文创周边 / IP相关权益<br>
                5.禁止多号刷分，一经发现取消参赛资格
            </div>
        </div>
    </div>

    <script>
        const nickInput = document.getElementById('nickInput');
        const drawBtn = document.getElementById('drawBtn');
        const scoreBox = document.getElementById('scoreBox');
        const scoreText = document.getElementById('scoreText');
        const rankDesc = document.getElementById('rankDesc');
        const coolTip = document.getElementById('coolTip');
        const rankList = document.getElementById('rankList');

        //段位文案
        const levelText = [
            {min:10,max:200,text:"浅识文脉"},
            {min:201,max:500,text:"渐入山海"},
            {min:501,max:800,text:"遨游粤海"},
            {min:801,max:999,text:"文脉传承"}
        ]

        //获取今天日期，判断是否是同一天
        function getTodayStr(){
            const d = new Date();
            return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
        }
        function getLocalData(){
            const raw = localStorage.getItem("wenMaiGame");
            return raw ? JSON.parse(raw) : {today:getTodayStr(),users:[],history:[]}
        }
        function saveData(data){
            localStorage.setItem("wenMaiGame",JSON.stringify(data))
        }

        function refreshUI(){
            const data = getLocalData();
            //如果日期变了，清空今日榜单
            if(data.today !== getTodayStr()){
                data.history.push({date:data.today,winner:data.users[0]||null})
                data.today = getTodayStr();
                data.users = [];
                saveData(data);
            }
            //检查当前用户今天是否抽过
            const nick = nickInput.value.trim();
            let userToday = null;
            if(nick){
                userToday = data.users.find(u=>u.nick === nick)
            }
            if(userToday){
                drawBtn.disabled = true;
                coolTip.innerText = "✅今日已抽取，请明日0点再来";
            }else{
                drawBtn.disabled = false;
                coolTip.innerText = "";
            }
            renderRank(data.users);
        }

        function renderRank(list){
            rankList.innerHTML = "";
            const sortList = [...list].sort((a,b)=>b.score - a.score).slice(0,10);
            sortList.forEach((item,idx)=>{
                const div = document.createElement("div");
                div.className = "rank-item";
                div.innerHTML = `<span>${idx+1}. ${item.nick}</span><span>${item.score}分</span>`
                rankList.appendChild(div)
            })
        }

        drawBtn.onclick = function(){
            const nick = nickInput.value.trim();
            if(!nick){
                alert("请输入藏友昵称！");
                return;
            }
            const data = getLocalData();
            const exist = data.users.find(u=>u.nick === nick);
            if(exist){
                alert("今日已经抽取过了，明天0点重置！")
                return;
            }
            //随机分数
            const score = Math.floor(Math.random() * 990)+10;
            //匹配段位
            let desc = "";
            for(let l of levelText){
                if(score >= l.min && score <= l.max) desc = l.text;
            }
            scoreBox.style.display = "block";
            scoreText.innerText = `本次文脉分值：${score}`;
            rankDesc.innerText = `段位：${desc}`;
            data.users.push({nick,score});
            saveData(data);
            refreshUI();
        }
        nickInput.oninput = refreshUI;
        refreshUI();
    </script>
</body>
</html>