Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', 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;
        }

        /* 容器：100% 充满嵌入框 */
        .card-container {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            /* 背景图 */
            background: url('./card.png') center/cover no-repeat;
        }

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

        .content-layer {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
        }

        /* 1. 年份标签 - 修改：去背景、放大字体、单位改 vmin */
        .year-tag {
            /* 距离顶部约 14% */
            margin-top: 13%; 
            
            /* vmin 单位：确保随容器大小自动缩放 */
            font-size: 8vmin; /* 字体加大 */
            font-weight: 800;
            color: #fff;
            letter-spacing: 2px;
            
            /* 去掉背景和边框 */
            background: none;
            border: none;
            padding: 0;
            
            /* 增加投影以保证清晰度 */
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        /* 2. 月份数字 - 修改：单位改 vmin */
        .month-num {
            /* 字体极大，随容器缩放 */
            font-size: 32vmin; 
            font-weight: 900;
            line-height: 1;
            margin-top: 9%;
            
            /* 金色渐变字 */
            background: linear-gradient(to bottom, #ffffff 20%, #ffd700 60%, #ff9f43 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        /* 3. 奖杯动画图标 - 修改：大幅下移 */
        .trophy-icon {
            /* 修改：往下移动 (从原来的 4% 增加到 15%) */
            margin-top: 13%; 
            
            /* 图标大小也随容器缩放 */
            width: 15vmin; 
            height: 15vmin;
            
            display: flex; justify-content: center; align-items: center;
            animation: trophy-pulse 2s infinite ease-in-out;
        }

        .trophy-icon i {
            /* 图标字体大小随容器缩放 */
            font-size: 10vmin; 
            color: #ffd700; 
            filter: drop-shadow(0 0 5px rgba(253, 203, 110, 0.8));
        }

        @keyframes trophy-pulse {
            0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(253, 203, 110, 0)); }
            50% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(253, 203, 110, 0.6)); }
            100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(253, 203, 110, 0)); }
        }

    </style>
</head>
<body>

    <div class="card-container" onclick="redirectToDetail()">
        <div class="content-layer">
            <div class="year-tag">2025年</div>
            <div class="month-num">12</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 getTargetDetail() {
            // 1. 30% Chance for default
            if (Math.random() < 0.3) {
                return 'detail.html';
            }

            // 2. Date & Season Logic
            const now = new Date();
            const month = now.getMonth() + 1; // 1-12
            const date = now.getDate();

            // Christmas: Dec 18 - Dec 31
            if (month === 12 && date >= 18) {
                return 'detail-christmas.html';
            }
            // New Year: Jan 1 - Jan 7
            if (month === 1 && date <= 7) {
                return 'detail-newyear.html';
            }

            // Seasons
            // Spring (3, 4, 5) -> Windy
            if (month >= 3 && month <= 5) return 'detail-windy.html';
            // Summer (6, 7, 8) -> Rain
            if (month >= 6 && month <= 8) return 'detail-rain.html';
            // Autumn (9, 10, 11) -> Cloud
            if (month >= 9 && month <= 11) return 'detail-cloud.html';
            
            // Winter (Non-holiday Dec, Jan, Feb) -> Mix of Snow and Sun
            // 60% chance for Snow (Snowman), 40% for Winter Sun
            return Math.random() < 0.6 ? 'detail-snow.html' : 'detail-sun.html';
        }

        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>