SOURCE

<!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: system-ui, sans-serif; }
        body { background:#F0F4E9; color:#2D3A2A; max-width:480px; margin:0 auto; overflow-x:hidden; }
        /* 硬币粒子 */
        .coin {
            position: fixed;
            width:12px; height:12px; border-radius:50%;
            background:#E8A87C; opacity:0.7; pointer-events:none; z-index:99;
            animation: fall 1.5s ease-in forwards;
        }
        @keyframes fall {
            0% { transform: translateY(0); opacity:1; }
            100% { transform: translateY(300px); opacity:0; }
        }
        section { padding:60px 24px; position:relative; }
        /* 封面 */
        .cover {
            min-height:90vh; display:flex; flex-direction:column;
            justify-content:center; align-items:center; text-align:center;
        }
        .warn-tri {
            width:52px; height:48px; background:#F2C94C;
            clip-path:polygon(50% 0,100% 100%,0 100%); position:relative; margin-bottom:24px;
        }
        .warn-tri::after {
            content:"!"; position:absolute; top:14px; left:50%; transform:translateX(-50%);
            font-weight:900; font-size:24px;
        }
        .cover h1 { font-size:38px; font-weight:900; letter-spacing:2px; margin-bottom:12px; line-height:1.4; }
        .cover .sub { color:#7BA05B; font-size:18px; margin-bottom:60px; }
        .money-bag {
            width:80px; height:90px; background:#C48B5A; border-radius:40px 40px 45px 45px;
            margin:24px auto; cursor:pointer; transition: transform 0.2s;
            position:relative;
        }
        .money-bag::before {
            content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
            width:30px; height:20px; background:#9A6B42; border-radius:4px;
        }
        .money-bag:hover { transform: scale(1.1); }
        .scroll-hint { color:#88907F; font-size:14px; animation: bounce 2s infinite; }
        @keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
        .sec-title {
            font-size:24px; font-weight:700; border-left:4px solid #7BA05B;
            padding-left:12px; margin-bottom:20px;
        }
        .card {
            background:#FAF8F0; border-radius:16px; padding:24px;
            box-shadow:0 4px 12px rgba(123,160,91,0.1);
        }
        .quiz-opt {
            padding:14px; background:#fff; border:1px solid #E2E8D5; border-radius:10px;
            margin:10px 0; cursor:pointer; transition:all 0.2s; font-size:15px;
        }
        .quiz-opt:hover { border-color:#7BA05B; transform:translateX(4px); }
        .quiz-result {
            margin-top:16px; padding:16px; background:#E8F0DD; border-radius:10px;
            display:none; font-size:15px; line-height:1.8;
        }
        /* 柱状图 */
        .bar-item { margin:24px 0; cursor:pointer; }
        .bar-label { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
        .bar-track { width:100%; height:24px; background:#E2E8D5; border-radius:12px; overflow:hidden; }
        .bar-fill {
            height:100%; background:#7BA05B; border-radius:12px; width:0;
            transition:width 1.2s ease;
        }
        .bar-tip {
            font-size:13px; color:#66705E; margin-top:8px; display:none;
            padding-left:8px; border-left:2px solid #E8A87C;
        }
        /* 3D翻牌 */
        .flip-grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:24px; }
        .flip-card { height:200px; perspective:1000px; cursor:pointer; }
        .flip-inner {
            position:relative; width:100%; height:100%;
            transition:transform 0.6s; transform-style:preserve-3d;
        }
        .flip-card.flipped .flip-inner { transform:rotateY(180deg); }
        .flip-front, .flip-back {
            position:absolute; width:100%; height:100%; backface-visibility:hidden;
            border-radius:16px; display:flex; flex-direction:column;
            justify-content:center; align-items:center; padding:20px; text-align:center;
        }
        .flip-front { background:#7BA05B; color:#fff; font-size:20px; font-weight:700; }
        .flip-back { background:#FAF8F0; transform:rotateY(180deg); }
        .big-percent { font-size:32px; font-weight:900; color:#E8A87C; margin:10px 0; }
        /* 计算器模块 */
        .calc-box { background:#FAF8F0; border-radius:16px; padding:24px; margin-top:20px; }
        .calc-input {
            width:100%; padding:12px; border:1px solid #E2E8D5; border-radius:10px;
            font-size:16px; margin:8px 0 16px; background:#fff;
        }
        .calc-btn {
            width:100%; padding:14px; background:#7BA05B; color:#fff; border:none;
            border-radius:24px; font-size:16px; font-weight:500; cursor:pointer;
        }
        .calc-result {
            margin-top:16px; padding:16px; background:#E8F0DD; border-radius:10px;
            display:none; line-height:2;
        }
        .calc-result strong { color:#E8A87C; font-size:22px; }
        /* 打卡清单 */
        .check-item {
            display:flex; align-items:center; padding:16px; background:#FAF8F0;
            border-radius:12px; margin:10px 0; cursor:pointer;
        }
        .check-item input { width:20px; height:20px; margin-right:12px; accent-color:#7BA05B; }
        .progress-track {
            width:100%; height:8px; background:#E2E8D5; border-radius:4px; margin-top:20px; overflow:hidden;
        }
        .progress-fill { height:100%; width:0; background:#7BA05B; transition:width 0.5s; }
        /* 投票 */
        .vote-row {
            padding:16px; background:#FAF8F0; border-radius:12px; margin:10px 0;
            cursor:pointer; position:relative; overflow:hidden; border:1px solid #E2E8D5;
        }
        .vote-bar {
            position:absolute; left:0; top:0; height:100%; background:rgba(123,160,91,0.2);
            width:0; transition:width 0.8s ease; z-index:0;
        }
        .vote-text { position:relative; z-index:1; font-size:15px; }
        .vote-pct {
            position:absolute; right:16px; top:50%; transform:translateY(-50%);
            font-weight:700; color:#7BA05B; z-index:1;
        }
        /* 宣言生成 */
        .gen-btn {
            width:100%; padding:16px; background:#E8A87C; color:#fff; border:none;
            border-radius:24px; font-size:16px; font-weight:600; cursor:pointer; margin-top:20px;
        }
        .declare-card {
            margin-top:20px; padding:32px; background:#fff; border-radius:16px;
            text-align:center; line-height:2; display:none;
            box-shadow:0 6px 16px rgba(0,0,0,0.08);
        }
        /* 留言 */
        .comment-input {
            width:100%; min-height:80px; border:1px solid #E2E8D5; border-radius:12px;
            padding:12px; font-size:16px; resize:none; margin:12px 0; background:#FAF8F0;
        }
        .submit-btn {
            width:100%; padding:14px; background:#7BA05B; color:#fff; border:none;
            border-radius:24px; font-size:16px; cursor:pointer;
        }
        .comment-item {
            background:#FAF8F0; padding:12px; border-radius:10px; margin:8px 0; font-size:14px;
        }
        .ending { text-align:center; padding:80px 24px; line-height:2; }
        .divider { height:1px; background:#E2E8D5; margin:0 24px; }
    </style>
</head>
<body>
    <!-- 封面 -->
    <section class="cover">
        <div class="warn-tri"></div>
        <h1>#校园生活费流向与隐形消费#</h1>
        <div class="sub">抓住悄悄偷走生活费的预算小偷</div>
        <div class="money-bag" id="moneyBag"></div>
        <p style="font-size:13px;color:#88907F;">点一下钱袋试试</p>
        <div class="scroll-hint" style="margin-top:60px;">↓ 下滑开始互动体验</div>
    </section>
    <div class="divider"></div>
    <!-- 小测试 -->
    <section>
        <h2 class="sec-title">你被预算小偷盯上了吗？</h2>
        <div class="card">
            <p style="margin-bottom:16px;">根据你的日常消费选答案，看看中招等级</p>
            <div class="quiz-opt" data-score="1">经常顺手买奶茶咖啡</div>
            <div class="quiz-opt" data-score="1">为了凑满减买很多不需要的东西</div>
            <div class="quiz-opt" data-score="1">经常忘了关APP自动续费</div>
            <div class="quiz-opt" data-score="0">基本没有这类零散消费</div>
            <div class="quiz-result" id="quizResult"></div>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 数据柱状图 -->
    <section>
        <h2 class="sec-title">大学生生活费流向调研</h2>
        <p style="font-size:14px;color:#66705E;margin-bottom:20px;">基于163份校园调研，点击柱条看隐藏细节</p>
        <div class="bar-item" data-tip="三餐加起来，几乎占掉每月生活费的大头。">
            <div class="bar-label"><span>餐饮</span><span>75%</span></div>
            <div class="bar-track"><div class="bar-fill" data-width="75%"></div></div>
            <div class="bar-tip"></div>
        </div>
        <div class="bar-item" data-tip="服饰、日用品、网购商品，购物是占比很高的日常开销。">
            <div class="bar-label"><span>购物</span><span>69.51%</span></div>
            <div class="bar-track"><div class="bar-fill" data-width="69.51%"></div></div>
            <div class="bar-tip"></div>
        </div>
        <div class="bar-item" data-tip="聚餐、出去玩、社交娱乐支出，不知不觉消耗大量生活费。">
            <div class="bar-label"><span>社交娱乐</span><span>54.88%</span></div>
            <div class="bar-track"><div class="bar-fill" data-width="54.88%"></div></div>
            <div class="bar-tip"></div>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 翻牌刺客 -->
    <section>
        <h2 class="sec-title">藏在日常里的隐形消费刺客</h2>
        <div class="flip-grid">
            <div class="flip-card">
                <div class="flip-inner">
                    <div class="flip-front">刺客1</div>
                    <div class="flip-back">奶茶咖啡碎片化饮品<div class="big-percent">50%</div>一杯十几块，天天喝，一个月近五百块。</div>
                </div>
            </div>
            <div class="flip-card">
                <div class="flip-inner">
                    <div class="flip-front">刺客2</div>
                    <div class="flip-back">外卖配送费<div class="big-percent">48.78%</div>配送费、打包费、凑单，比饭钱还贵。</div>
                </div>
            </div>
            <div class="flip-card">
                <div class="flip-inner">
                    <div class="flip-front">刺客3</div>
                    <div class="flip-back">会员自动续费<div class="big-percent">43.29%</div>忘了取消的会员，每个月悄悄扣钱。</div>
                </div>
            </div>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 强互动计算器 -->
    <section>
        <h2 class="sec-title">算一算：你每个月喝掉多少生活费？</h2>
        <div class="calc-box">
            <p style="font-size:14px;margin-bottom:8px;">一杯奶茶多少钱？</p>
            <input type="number" class="calc-input" id="priceInput" placeholder="比如 15">
            <p style="font-size:14px;margin-bottom:8px;">一周喝几杯？</p>
            <input type="number" class="calc-input" id="weekInput" placeholder="比如 3">
            <button class="calc-btn" id="calcBtn">算一算我花了多少</button>
            <div class="calc-result" id="calcResult"></div>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 打卡清单 -->
    <section>
        <h2 class="sec-title">理性消费打卡</h2>
        <p style="font-size:14px;color:#66705E;margin-bottom:20px;">勾选你打算做到的事</p>
        <label class="check-item"><input type="checkbox" class="check-opt"><span>区分刚需和欲望，不跟风种草</span></label>
        <label class="check-item"><input type="checkbox" class="check-opt"><span>坚持记账，揪出隐形开销</span></label>
        <label class="check-item"><input type="checkbox" class="check-opt"><span>关掉所有闲置自动续费</span></label>
        <label class="check-item"><input type="checkbox" class="check-opt"><span>提前做每月预算，不透支</span></label>
        <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
    </section>
    <div class="divider"></div>
    <!-- 投票 -->
    <section>
        <h2 class="sec-title">你最先想改掉哪个消费习惯？</h2>
        <p style="font-size:14px;color:#66705E;margin-bottom:20px;">点击看大家的选择占比</p>
        <div class="vote-row" data-count="12">
            <div class="vote-bar"></div>
            <span class="vote-text">戒掉频繁奶茶咖啡</span>
            <span class="vote-pct"></span>
        </div>
        <div class="vote-row" data-count="9">
            <div class="vote-bar"></div>
            <span class="vote-text">不再为满减冲动下单</span>
            <span class="vote-pct"></span>
        </div>
        <div class="vote-row" data-count="15">
            <div class="vote-bar"></div>
            <span class="vote-text">清理所有自动续费会员</span>
            <span class="vote-pct"></span>
        </div>
        <div class="vote-row" data-count="7">
            <div class="vote-bar"></div>
            <span class="vote-text">坚持日常记账</span>
            <span class="vote-pct"></span>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 生成宣言 -->
    <section>
        <h2 class="sec-title">生成你的理性消费宣言</h2>
        <button class="gen-btn" id="genBtn">点击生成我的宣言</button>
        <div class="declare-card" id="declareCard">
            <p style="font-size:18px; font-weight:700;">我的理性消费宣言</p>
            <p id="declareText" style="margin-top:16px;">每一笔钱都花在真正让我开心的事上，不被隐形消费偷走生活费。</p>
            <p style="font-size:12px; color:#99A090; margin-top:20px;">截图保存，发给自己立个flag</p>
        </div>
    </section>
    <div class="divider"></div>
    <!-- 留言 -->
    <section>
        <h2 class="sec-title">留言分享</h2>
        <p style="font-size:14px;color:#66705E;margin-bottom:12px;">你的省钱小妙招</p>
        <textarea class="comment-input" id="commentInput" placeholder="写下你的感受..."></textarea>
        <button class="submit-btn" id="submitBtn">发布留言</button>
        <div class="comment-list" id="commentList"></div>
    </section>
    <section class="ending">
        <p>在有限的生活费里，<br>过松弛、不将就的校园生活。</p>
        <p style="margin-top:30px;font-size:12px;color:#99A090;">《校园生活费流向与隐形消费》融合新闻课程作业 · 163份问卷调研</p>
    </section>
    <script>
        // 钱袋彩蛋：点了掉硬币
        document.getElementById('moneyBag').addEventListener('click', (e) => {
            for(let i=0; i<15; i++){
                const c = document.createElement('div');
                c.className = 'coin';
                c.style.left = (e.clientX + (Math.random()-0.5)*80) + 'px';
                c.style.top = e.clientY + 'px';
                document.body.appendChild(c);
                setTimeout(()=>c.remove(), 1500);
            }
        });
        // 滚动柱状图动画
        window.addEventListener('scroll', () => {
            document.querySelectorAll('.bar-fill').forEach(bar => {
                const rect = bar.getBoundingClientRect();
                if(rect.top < window.innerHeight * 0.8) bar.style.width = bar.dataset.width;
            });
        });
        // 柱状图点击提示
        document.querySelectorAll('.bar-item').forEach(item => {
            item.addEventListener('click', () => {
                const tip = item.querySelector('.bar-tip');
                tip.style.display = tip.style.display === 'block' ? 'none' : 'block';
            });
        });
        // 小测试
        let quizScore = 0;
        document.querySelectorAll('.quiz-opt').forEach(opt => {
            opt.addEventListener('click', () => {
                quizScore += parseInt(opt.dataset.score);
                const res = document.getElementById('quizResult');
                let text = '';
                if(quizScore >=3) text = '高危：你已经被预算小偷偷走了不少钱！马上往下看，找出钱都去哪了。';
                else if(quizScore >=1) text = '中等：你偶尔会被隐形消费盯上，现在开始留意还不晚。';
                else text = '太棒了！你的消费习惯非常自律，继续保持。';
                res.innerText = text;
                res.style.display = 'block';
            });
        });
        // 翻牌
        document.querySelectorAll('.flip-card').forEach(card => {
            card.addEventListener('click', () => card.classList.toggle('flipped'));
        });
        // 奶茶计算器
        document.getElementById('calcBtn').addEventListener('click', () => {
            const price = parseFloat(document.getElementById('priceInput').value);
            const week = parseFloat(document.getElementById('weekInput').value);
            const res = document.getElementById('calcResult');
            if(!price || !week || price<0 || week<0){
                res.innerHTML = '请输入有效数字哦';
                res.style.display = 'block';
                return;
            }
            const month = price * week * 4;
            const year = month *12;
            res.innerHTML = `每月花掉：<strong>¥${month.toFixed(0)}</strong><br>一年花掉：<strong>¥${year.toFixed(0)}</strong><br>这还只是奶茶这一项的开销！`;
            res.style.display = 'block';
        });
        // 打卡进度
        document.querySelectorAll('.check-opt').forEach(item => {
            item.addEventListener('change', () => {
                const checked = document.querySelectorAll('.check-opt:checked').length;
                document.getElementById('progressFill').style.width = (checked/4)*100 + '%';
            });
        });
        // 投票
        let voted = false;
        document.querySelectorAll('.vote-row').forEach(row => {
            row.addEventListener('click', () => {
                if(voted) return;
                voted = true;
                let total =0;
                document.querySelectorAll('.vote-row').forEach(r => total += parseInt(r.dataset.count));
                total +=1;
                row.dataset.count = parseInt(row.dataset.count)+1;
                document.querySelectorAll('.vote-row').forEach(r => {
                    const pct = Math.round((parseInt(r.dataset.count)/total)*100);
                    r.querySelector('.vote-bar').style.width = pct+'%';
                    r.querySelector('.vote-pct').innerText = pct+'%';
                });
            });
        });
        // 生成宣言
        const declareTexts = [
            "每一笔钱都花在真正让我开心的事上，不被隐形消费偷走生活费。",
            "喝奶茶可以，但要知道自己每个月到底花了多少，不稀里糊涂月光。",
            "关掉没用的自动续费，把钱留给更值得的地方。",
            "不跟风凑满减，不需要的东西再便宜也不买。"
        ];
        document.getElementById('genBtn').addEventListener('click', () => {
            const card = document.getElementById('declareCard');
            document.getElementById('declareText').innerText = declareTexts[Math.floor(Math.random()*declareTexts.length)];
            card.style.display = 'block';
        });
        // 留言
        document.getElementById('submitBtn').addEventListener('click', () => {
            const input = document.getElementById('commentInput');
            const text = input.value.trim();
            if(!text) return;
            const item = document.createElement('div');
            item.className = 'comment-item';
            item.innerText = '同学：' + text;
            document.getElementById('commentList').prepend(item);
            input.value = '';
        });
    </script>
</body>
</html>