Orienteering
/
mobile_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>月度排行榜</title>
    <link href="./css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --hud-bg: #050a14;
            --hud-cyan: #00f3ff;
            --hud-cyan-dim: rgba(0, 243, 255, 0.2);
            --hud-white: #e0f7fa;
            --hud-alert: #ff003c;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            /* 科技感等宽字体 */
            font-family: 'Courier New', Courier, monospace;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 主容器：科幻终端 */
        .card-container {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: var(--hud-bg);
            border-radius: 20px; /* 保持圆角 */
            overflow: hidden;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid var(--hud-cyan-dim);
            box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
        }

        /* 背景网格系统 */
        .grid-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(var(--hud-cyan-dim) 1px, transparent 1px),
                linear-gradient(90deg, var(--hud-cyan-dim) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.3;
            z-index: 0;
        }

        /* 扫描线动画 */
        .scan-line {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 5px;
            background: var(--hud-cyan);
            box-shadow: 0 0 10px var(--hud-cyan);
            opacity: 0.5;
            animation: scan 4s infinite linear;
            z-index: 1;
        }

        /* 装饰角标 - 模拟HUD边角 */
        .hud-corner {
            position: absolute;
            width: 20px; height: 20px;
            border: 2px solid var(--hud-cyan);
            z-index: 2;
        }
        .tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
        .tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
        .bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
        .br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

        /* 顶部系统状态 */
        .sys-status {
            margin-top: 15%;
            font-size: 3vmin;
            color: var(--hud-cyan);
            letter-spacing: 2px;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .status-dot {
            width: 8px; height: 8px;
            background: var(--hud-alert);
            border-radius: 50%;
            animation: blink 1s infinite;
        }

        /* 年份数据条 */
        .year-bar {
            margin-top: 2vmin;
            background: var(--hud-cyan-dim);
            border: 1px solid var(--hud-cyan);
            padding: 0.5vmin 3vmin;
            color: var(--hud-white);
            font-size: 4vmin;
            font-weight: bold;
            z-index: 2;
            /* 切角效果 */
            clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%, 0% 40%);
        }

        /* 核心月份区：数据核心 */
        .core-display {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
            width: 100%;
        }

        /* 旋转的数据环 */
        .data-ring {
            position: absolute;
            width: 60vmin; height: 60vmin;
            border: 2px dashed var(--hud-cyan-dim);
            border-radius: 50%;
            animation: rotate 20s infinite linear;
        }
        
        .data-ring::before {
            content: ''; position: absolute;
            top: -5px; left: 50%; transform: translateX(-50%);
            width: 10px; height: 10px; background: var(--hud-cyan);
            box-shadow: 0 0 10px var(--hud-cyan);
        }

        .month-val {
            font-size: 35vmin;
            color: var(--hud-white);
            text-shadow: 0 0 10px var(--hud-cyan), 0 0 20px var(--hud-cyan);
            font-weight: bold;
            line-height: 1;
            position: relative;
        }

        /* 故障效果的装饰字 */
        .month-val::after {
            content: attr(data-text); /* 动态读取属性 */
            position: absolute; left: 2px; top: 0;
            color: var(--hud-alert);
            opacity: 0.5;
            z-index: -1;
            animation: glitch 3s infinite;
            mix-blend-mode: screen;
        }

        .month-label {
            margin-top: 2vmin;
            font-size: 5vmin;
            color: var(--hud-cyan);
            text-transform: uppercase;
            letter-spacing: 1vmin;
            background: linear-gradient(90deg, transparent, var(--hud-cyan-dim), transparent);
            padding: 0 2vmin;
        }

        /* 底部操作区 */
        .action-zone {
            margin-bottom: 15%;
            z-index: 2;
            width: 70%;
            height: 12vmin;
            border: 1px solid var(--hud-cyan);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 5vmin;
            background: rgba(0,0,0,0.5);
            position: relative;
            transition: all 0.2s;
        }

        .action-zone::before {
            content: '';
            position: absolute;
            bottom: 0; right: 0;
            width: 15px; height: 15px;
            background: linear-gradient(135deg, transparent 50%, var(--hud-cyan) 50%);
        }

        .action-text {
            color: var(--hud-white);
            font-size: 4vmin;
            letter-spacing: 2px;
        }

        .action-icon {
            color: var(--hud-cyan);
            font-size: 5vmin;
            animation: pulse 2s infinite;
        }

        /* 交互：按下效果 */
        .card-container:active .action-zone {
            background: var(--hud-cyan-dim);
            box-shadow: 0 0 15px var(--hud-cyan);
        }

        /* 动画库 */
        @keyframes scan {
            0% { transform: translateY(-100%); opacity: 0; }
            50% { opacity: 0.5; }
            100% { transform: translateY(800px); opacity: 0; }
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); text-shadow: 0 0 5px var(--hud-cyan); }
            50% { transform: scale(1.2); text-shadow: 0 0 15px var(--hud-cyan); }
        }

        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
            100% { transform: translate(0); }
        }

    </style>
</head>
<body>

    <div class="card-container" onclick="redirectToDetail()">
        <!-- 背景层 -->
        <div class="grid-bg"></div>
        <div class="scan-line"></div>
        
        <!-- 装饰角标 -->
        <div class="hud-corner tl"></div>
        <div class="hud-corner tr"></div>
        <div class="hud-corner bl"></div>
        <div class="hud-corner br"></div>

        <!-- 顶部信息 -->
        <div class="sys-status">
            <div class="status-dot"></div>
            <span>SYSTEM: ONLINE</span>
        </div>
        <div class="year-bar">DATA: 2025</div>

        <!-- 核心视觉 -->
        <div class="core-display">
            <div class="data-ring"></div>
            <div class="month-val">12</div>
            <div class="month-label">月挑战赛</div>
        </div>

        <!-- 底部按钮 -->
        <div class="action-zone">
            <span class="action-text">指令: 显示排行榜</span>
            <i class="fa-solid fa-trophy action-icon"></i>
        </div>
    </div>

    <script src="./bridge.js"></script>
    <script src="./target_logic.js"></script>
    <script>
        // Auto-Update Date
        (function() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            
            const yearEl = document.querySelector('.year-bar');
            const monthEl = document.querySelector('.month-val');
            
            if (yearEl) yearEl.innerText = 'DATA: ' + year;
            if (monthEl) {
                monthEl.innerText = month;
                monthEl.setAttribute('data-text', month); // 更新伪元素内容
            }
        })();

        // Logger Utility
        const Logger = {
            _isDev: false,

            init: function(isDev) {
                this._isDev = isDev;
            },

            log: function() {
                if (this._isDev) {
                    console.log.apply(console, arguments);
                }
            },

            warn: function() {
                if (this._isDev) {
                    console.warn.apply(console, arguments);
                }
            },

            error: function() {
                console.error.apply(console, arguments);
            }
        };

        function getQueryParam(name) {
            const params = new URLSearchParams(window.location.search);
            return params.get(name);
        }

        // Initialize Logger
        const env = (getQueryParam('env') || '').toLowerCase();
        Logger.init(env === 'mock'); // Only log if env=mock


        function redirectToDetail() {
            const token = getQueryParam('token');
            const id = getQueryParam('id');
            
            // Dynamic Target
            let detailUrl = getTargetDetail();

            const queryParams = [];
            if (token) {
                queryParams.push(`token=${encodeURIComponent(token)}`);
            }
            if (id) {
                queryParams.push(`id=${encodeURIComponent(id)}`);
            }

            if (queryParams.length > 0) {
                detailUrl += `?${queryParams.join('&')}`;
            }
            
            detailUrl += (detailUrl.includes('?') ? '&' : '?') + 'full=true';

            Logger.log("Navigating to:", detailUrl);
            
            if (window.Bridge && window.Bridge.appAction) {
                Bridge.appAction(detailUrl);
            } else {
                window.location.href = detailUrl;
            }
        }
    </script>
</body>
</html>