Orienteering
/
mobile_h5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!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: 'Varela Round', '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;
        }

        /* 容器：卡片主体 */
        .card-container {
            width: 100%;
            height: 100%;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            /* 背景图：本地图片 */
            background: url('./bgkt.jpg') center/cover no-repeat;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            border: 6px solid #fff;
        }

        /* 遮罩层：大幅减弱白色渐变，让蓝天绿地更明显 */
        .card-container::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /* 顶部完全透明，只在最底部加一点点淡淡的白光 */
            background: linear-gradient(to bottom, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0) 50%, 
                rgba(255,255,255,0.4) 100%);
            z-index: 1;
            pointer-events: none; /* 让点击穿透 */
        }

        .card-container:active {
            transform: scale(0.96) rotate(-1deg);
            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

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

        /* 年份标签 */
        .year-tag {
            margin-top: 15%; 
            font-size: 6vmin;
            font-weight: 800;
            color: #fff;
            background: #FF9F43;
            padding: 1vmin 4vmin;
            border-radius: 50px;
            box-shadow: 0 4px 0 #F368E0;
            text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
            transform: rotate(-2deg);
        }

        /* 月份数字 */
        .month-num {
            font-size: 35vmin; 
            font-weight: 900;
            line-height: 1;
            margin-top: 2%;
            
            /* 字体渐变 */
            background: linear-gradient(180deg, #FF6B6B 0%, #FF9F43 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            
            /* 增强投影，确保在背景图上清晰可见 */
            filter: drop-shadow(0 4px 0px rgba(255,255,255,1)) drop-shadow(0 5px 15px rgba(0,0,0,0.2));
        }

        /* 奖杯图标 */
        .trophy-icon {
            margin-top: 5%; 
            width: 18vmin; 
            height: 18vmin;
            background: #fff;
            border-radius: 50%;
            border: 4px solid #FFD93D;
            box-shadow: 0 5px 15px rgba(255, 217, 61, 0.5);
            display: flex; justify-content: center; align-items: center;
            animation: bounce 2s infinite ease-in-out;
        }

        .trophy-icon i {
            font-size: 9vmin; 
            color: #FFD93D; 
            -webkit-text-stroke: 2px #F39C12;
            filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.1));
        }

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

        /* 底部文字按钮 */
        .action-text {
            margin-top: 20px; 
            color: #576574; 
            font-weight: 800; 
            font-size: 4.5vmin; 
            letter-spacing: 1px;
            /* 加个半透明白色背景，防止背景太花看不清字 */
            background: rgba(255, 255, 255, 0.85);
            padding: 8px 20px;
            border-radius: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            backdrop-filter: blur(2px);
        }

        /* 装饰：漂浮的云朵 */
        .cloud {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            z-index: 1;
            opacity: 0.95; /* 更不透明，像棉花糖 */
            box-shadow: 0 8px 5px rgba(0,0,0,0.05);
        }
        
        .c1 { 
            width: 80px; height: 80px; top: 10%; left: 5%; 
            box-shadow: 30px 10px 0 #fff, -25px 15px 0 #fff; 
            animation: floatCloudBig 6s infinite ease-in-out alternate;
        }
        
        .c2 { 
            width: 60px; height: 60px; top: 20%; right: 10%; 
            box-shadow: 20px 8px 0 #fff, -15px 10px 0 #fff; 
            animation: floatCloudSmall 5s infinite ease-in-out alternate-reverse; 
        }

        @keyframes floatCloudBig {
            from { transform: translate(0, 0) scale(1); }
            to { transform: translate(50px, 15px) scale(1.1); } 
        }

        @keyframes floatCloudSmall {
            from { transform: translate(0, 0); }
            to { transform: translate(-40px, 20px); }
        }

    </style>
</head>
<body>

    <div class="card-container" onclick="redirectToDetail()">
        <!-- 装饰背景云 -->
        <div class="cloud c1"></div>
        <div class="cloud c2"></div>

        <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-star"></i>
            </div>
            <div class="action-text">点击开启冒险</div>
        </div>
    </div>

    <script src="./bridge.js"></script>
    <script>
        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);
        }

        const env = (getQueryParam('env') || '').toLowerCase();
        Logger.init(env === 'mock');

        function getTargetDetail() {
            if (Math.random() < 0.3) return 'detail.html';
            const now = new Date();
            const month = now.getMonth() + 1;
            const date = now.getDate();
            if (month === 12 && date >= 18) return 'detail-christmas.html';
            if (month === 1 && date <= 7) return 'detail-newyear.html';
            if (month >= 3 && month <= 5) return 'detail-windy.html';
            if (month >= 6 && month <= 8) return 'detail-rain.html';
            if (month >= 9 && month <= 11) return 'detail-cloud.html';
            return Math.random() < 0.6 ? 'detail-snow.html' : 'detail-sun.html';
        }

        function redirectToDetail() {
            const token = getQueryParam('token');
            const id = getQueryParam('id');
            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>