Orienteering
/
mobile_h5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!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>月度排行榜 - Sporty Edition</title>
    <link href="./css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --sport-bg: #0f0f0f;
            --sport-card: #1a1a1a;
            --sport-accent: #ccff00; /* Neon Green */
            --sport-text: #ffffff;
            --sport-dim: #444;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
            -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 上，并被其圆角裁剪 */
        .card-container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(255, 255, 255, 0.03) 10px,
                rgba(255, 255, 255, 0.03) 20px
            );
            z-index: -1; /* 确保在卡片内容下方 */
        }
        /* 动态背景线 */
        body::before { display: none; } /* 移除 body 上的伪元素 */


        .card-container {
            width: 100%; /* 填充整个视口 */
            height: 100%; /* 填充整个视口 */
            background: var(--sport-card); /* 卡片的主背景 */
            border-radius: 16px; /* 卡片的圆角 */
            position: relative;
            z-index: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            border: 1px solid #333;
            transition: transform 0.1s;
        }

        .card-container:active {
            transform: scale(0.98);
        }

        /* 装饰性斜切块 */
        .deco-slash {
            position: absolute;
            top: -50px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: var(--sport-accent);
            transform: rotate(45deg);
            opacity: 0.1;
            pointer-events: none;
            z-index: 0; /* 放置在内容层下方，避免覆盖圆角 */
        }

        .content-layer {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            padding-bottom: 40px; /* 增加底部填充，确保奖杯在内 */
        }

        .year-tag {
            font-size: 6vmin;
            color: #888;
            font-weight: 700;
            letter-spacing: 4px;
            font-style: italic;
            margin-bottom: 10px;
        }

        .month-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .month-num {
            font-size: 35vmin; /* 缩小月份字体 */
            font-weight: 900;
            line-height: 0.8;
            color: transparent;
            -webkit-text-stroke: 2px var(--sport-text);
            font-style: italic;
            transform: skewX(-10deg);
            position: relative;
            z-index: 2;
        }
        
        /* 月份背后的实心字，营造重影效果 */
        .month-num::after {
            content: attr(data-month);
            position: absolute;
            left: 10px;
            top: 10px;
            color: var(--sport-accent);
            -webkit-text-stroke: 0;
            z-index: -1;
            opacity: 0.6;
        }

        .label-tag {
            margin-top: 30px; /* 稍微上移标签 */
            background: var(--sport-accent);
            color: #000;
            font-weight: 900;
            padding: 8px 24px;
            font-size: 5vmin;
            text-transform: uppercase;
            transform: skewX(-15deg);
            box-shadow: 0 0 15px rgba(204, 255, 0, 0.4);
        }
        
        .label-tag span {
            display: block;
            transform: skewX(15deg); /* 反向纠正文字 */
        }

        .trophy-icon {
            margin-top: 30px; /* 调整上边距 */
            font-size: 10vmin;
            color: #fff;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

    </style>
</head>
<body>

    <div class="card-container" onclick="redirectToDetail()">
        <div class="deco-slash"></div>
        <div class="content-layer">
            <div class="year-tag">2025 赛季</div>
            <div class="month-wrapper">
                <div class="month-num" data-month="12">12</div>
            </div>
            <div class="label-tag"><span>挑战赛</span></div>
            <div class="trophy-icon">
                <i class="fa-solid fa-trophy"></i>
            </div>
        </div>
    </div>

    <script src="./bridge.js"></script>
    <script>
        // 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');
            let detailUrl = 'detail.html';

            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>