wyoj-raw/app/controllers/a.txt

<!-- 黑色日期卡片 -->
<div class="mb-4 wyoj-date-card" id="wyoj-date-card"
     style="position:relative;overflow:hidden;background:#000;color:#fff;padding:2rem 1.5rem;border-radius:0;text-shadow:0 1px 3px rgba(0,0,0,0.75);">

    <!-- 随机方格背景层 -->
    <div id="wyoj-date-grid"
         style="position:absolute;top:0;left:0;right:0;bottom:0;display:grid;z-index:0;pointer-events:none;"></div>

    <!-- 内容层 -->
    <div style="position:relative;z-index:1;">
        <div class="d-flex justify-content-center align-items-center">
            <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
                <?= $monthText ?>
            </div>
            <div class="mx-4" style="font-size:5rem;font-weight:900;line-height:1;">
                <?= $dayNum ?>
            </div>
            <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
                <?= $weekText ?>
            </div>
        </div>
        <div class="text-center mt-4" style="font-size:1rem;letter-spacing:0.05em;">
            <?php if ($daysLeft > 0): ?>
                距 <strong>NOIP2026</strong> 还有 <strong><?= $daysLeft ?></strong> 天
            <?php elseif ($daysLeft === 0): ?>
                <strong>NOIP2026</strong> 就是今天！
            <?php else: ?>
                <strong>NOIP2026</strong> 已结束
            <?php endif; ?>
            <div class="mt-2" style="font-size:0.9rem;opacity:0.85;">
                <strong>CSP-J/S 2026</strong> 第一轮 9 月 19 日 · 第二轮 10 月 31 日
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    var card = document.getElementById('wyoj-date-card');
    var grid = document.getElementById('wyoj-date-grid');
    if (!card || !grid) return;

    // ===== 可调参数 =====
    var COLORS = ['#0a0a0a', '#1f1f1f', '#333333', '#4a4a4a', '#666666']; // 5 档灰→黑
    var CELL   = 22;    // 每个小方格的边长（px）
    var P      = 0.08;  // 每格每秒变色的概率（0~1），越大越跳
    // ====================

    var cells = [];
    var lastCols = 0, lastRows = 0;

    function pickColor() {
        return COLORS[Math.floor(Math.random() * COLORS.length)];
    }

    function build(force) {
        var w = card.clientWidth;
        var h = card.clientHeight;
        var cols = Math.max(1, Math.ceil(w / CELL));
        var rows = Math.max(1, Math.ceil(h / CELL));
        if (!force && cols === lastCols && rows === lastRows) return;
        lastCols = cols;
        lastRows = rows;

        grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
        grid.style.gridTemplateRows    = 'repeat(' + rows + ', 1fr)';
        grid.innerHTML = '';
        cells = [];

        for (var i = 0; i < cols * rows; i++) {
            var d = document.createElement('div');
            d.style.backgroundColor = pickColor();
            // 每格单独的过渡时长，让变化错开，不会整片一起闪
            d.style.transition = 'background-color ' + (0.5 + Math.random() * 0.5).toFixed(2) + 's ease';
            grid.appendChild(d);
            cells.push(d);
        }
    }

    build(true);

    // 尺寸变化时重建（只在行列数变化时真的重建，避免无谓重置）
    if (window.ResizeObserver) {
        new ResizeObserver(function () { build(false); }).observe(card);
    } else {
        window.addEventListener('resize', function () { build(false); });
    }

    // 每秒给每格一个 p 的变色机会
    setInterval(function () {
        for (var i = 0; i < cells.length; i++) {
            if (Math.random() < P) {
                cells[i].style.backgroundColor = pickColor();
            }
        }
    }, 1000);
})();
</script>