Still, UI Update

app/controllers/a.txt

@@ -0,0 +1,98 @@
+<!-- 黑色日期卡片 -->
+<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>

app/controllers/index.php

@@ -3,7 +3,8 @@ $blogs = DB::selectAll("select blogs.id, title, poster, post_time from important
 $activateusers = DB::selectAll("select submitter, count(*) as cnt from submissions where datediff(now(), submit_time) <= 30 group by submitter order by cnt desc limit 12;");
 $topusers = DB::selectAll("select u.username, u.rating, u.rating_rd, u.rating_vol, u.motto, u.qq, count(*) cnt from user_info u inner join contests_registrants c on u.username = c.username inner join contests s on s.id = c.contest_id where datediff(now(), s.start_time) <= 180 group by c.username having cnt >= 3 order by rating desc, username asc limit 12;");
 $hotusers = DB::selectAll("select username, rating, rating_rd, rating_vol, qq, motto from user_info order by rating_vol desc, username asc limit 12;");
-$topblogs = DB::selectAll("select id from blogs order by zan desc limit 20;");
+$topblogs = DB::selectAll("select id from blogs where is_hidden = false and zan >= 10 order by zan desc limit 10;");
+$recentblogs = DB::selectAll("select id from blogs where is_hidden = false and zan < 10 order by post_time desc limit 10;");
 $songs_data = htmlspecialchars(json_encode(DB::selectAll("select * from songs;")), ENT_QUOTES, 'UTF-8');
 
 // 最近比赛：未结束的按开始时间升序取，不足 5 场时补最近结束的
@@ -232,53 +233,127 @@ $csp2daysLeft  = max(0, (int)floor(($csp2Ts - $todayMidnight) / 86400));
 <div class="row my-4">
     <!-- ============ 左列：日程 + 博客 ============ -->
     <div class="col-12 col-lg-9">
+	<!-- 黑色日期卡片 -->
+	<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 class="mb-4"
-             style="background:#000;color:#fff;padding:2rem 1.5rem;border-radius:0;">
-            <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:600;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; ?>
-		<br/>
-                <?php if ($csp1daysLeft > 0): ?>
-                    距 <strong>CSP-J/S 2026 第一轮</strong> 还有 <strong><?= $csp1daysLeft ?></strong> 天
-                <?php elseif ($csp1daysLeft === 0): ?>
-                    <strong>CSP-J/S 2026 第一轮</strong> 就是今天
-                <?php else: ?>
-                    <strong>CSP-J/S 2026 第一轮</strong> 已结束
-                <?php endif; ?>
-		<br/>
-                <?php if ($csp2daysLeft > 0): ?>
-                    距 <strong>CSP-J/S 2026 第二轮</strong> 还有 <strong><?= $csp2daysLeft ?></strong> 天
-                <?php elseif ($csp2daysLeft === 0): ?>
-                    <strong>CSP-J/S 2026 第二轮</strong> 就是今天！
-                <?php else: ?>
-                    <strong>CSP-J/S 2026 第二轮</strong> 已结束
-                <?php endif; ?>
+	    <!-- 随机方格背景层 -->
+	    <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:600;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; ?>
+			<br/>
+	                <?php if ($csp1daysLeft > 0): ?>
+	                    距 <strong>CSP-J/S 2026 第一轮</strong> 还有 <strong><?= $csp1daysLeft ?></strong> 天
+	               <?php elseif ($csp1daysLeft === 0): ?>
+	                    <strong>CSP-J/S 2026 第一轮</strong> 就是今天
+	                <?php else: ?>
+	                    <strong>CSP-J/S 2026 第一轮</strong> 已结束
+	                <?php endif; ?>
+			<br/>
+	                <?php if ($csp2daysLeft > 0): ?>
+	                    距 <strong>CSP-J/S 2026 第二轮</strong> 还有 <strong><?= $csp2daysLeft ?></strong> 天
+	                <?php elseif ($csp2daysLeft === 0): ?>
+	                    <strong>CSP-J/S 2026 第二轮</strong> 就是今天！
+	                <?php else: ?>
+	                    <strong>CSP-J/S 2026 第二轮</strong> 已结束
+	                <?php endif; ?>
+		    </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 = ['#000000', '#0c0c0c', '#181818', '#242424', '#303030']; // 5 档灰→黑
+	    var CELL   = 22;    // 每个小方格的边长（px）
+	    var P      = 0.3;  // 每格每秒变色的概率（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();
+	            }
+	        }
+	    }, 1500);
+	})();
+	</script>
+
 
         <!-- 博客列表 -->
         <div class="row">
+            <?php foreach ($recentblogs as $blog): ?>
+                <?= echoBlogCard(queryBlog($blog['id'])) ?>
+            <?php endforeach ?>
             <?php foreach ($topblogs as $blog): ?>
                 <?= echoBlogCard(queryBlog($blog['id'])) ?>
             <?php endforeach ?>
+
         </div>
 
     </div>
@@ -385,3 +460,4 @@ $csp2daysLeft  = max(0, (int)floor(($csp2Ts - $todayMidnight) / 86400));
 </style>
 
 <?php echoUOJPageFooter() ?>
+