wyoj-raw/app/controllers/index.php

<?php
$blogs = DB::selectAll("select blogs.id, title, poster, post_time from important_blogs, blogs where is_hidden = 0 and important_blogs.blog_id = blogs.id order by level desc, important_blogs.blog_id desc limit 8");
$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 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 场时补最近结束的
$recent_contests = array();
$result = DB::selectAll("select * from contests where status != 'finished' order by start_time asc, id asc limit 5");
foreach ($result as $contest) {
	genMoreContestInfo($contest);
	$recent_contests[] = $contest;
}
if (count($recent_contests) < 5) {
	$need = 5 - count($recent_contests);
	$result = DB::selectAll("select * from contests where status = 'finished' order by start_time desc, id desc limit $need");
	foreach ($result as $contest) {
		genMoreContestInfo($contest);
		$recent_contests[] = $contest;
	}
}
?>
<?php echoUOJPageHeader(UOJConfig::$data['profile']['oj-name-short']) ?>
<div id="songs-data" data-songs='<?php echo $songs_data; ?>'></div>

<div class="row my-4 wyoj-topcard">
	<div class="card-body">
		<div class="row">
			<div class="col-sm-12 col-md-9">
				<table class="table table-sm">
				  	<tbody>
					<?php $now_cnt = 0; ?>
					<?php foreach ($blogs as $blog): ?>
						<?php
							$now_cnt++;
							$new_tag = '';
							if ((time() - strtotime($blog['post_time'])) / 3600 / 24 <= 7) {
								$new_tag = '<sup style="color:red">&nbsp;new</sup>';
							}
						?>
						<tr>
							<td><a href="/blogs/<?= $blog['id'] ?>"><?= $blog['title'] ?></a><?= $new_tag ?></td>
							<td>by <?= getUserLink($blog['poster']) ?></td>
							<td><small><?= $blog['post_time'] ?></small></td>
						</tr>
					<?php endforeach ?>
					<?php for ($i = $now_cnt + 1; $i <= 8; $i++): ?>
						<tr><td colspan="233">&nbsp;</td></tr>
					<?php endfor ?>
						<tr><td class="text-right" colspan="233">
							<span>本歌曲由 </span><span id="recommender"></span><span> 推荐</span>
						</td></tr>
						<tr><td class="text-right" colspan="233">
							<a href="https://git.ryp.org.cn/wyoj/" class="text-info font-weight-bold">WyOJ 以及所有相关项目均为自由软件。</a>
							<a href="/announcements"><?= UOJLocale::get('all the announcements') ?></a>
						</td></tr>
						<tr>
							<td class="text-right" colspan="233">
								<span class="text-danger font-weight-bold">声明：本网站属个人非经营性网站，仅用于学习交流，无任何盈利目的，与任何组织无关</span>
								<a href="/certs-manage/songs">我要推歌</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3">
	<div class="card" style="max-width:300px; width:100%; border-radius:0; ">
        <div class="image-frame" style="aspect-ratio:1/1; position:relative;">
            <img id="photo" src="" alt="" style="width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; -webkit-tap-highlight-color:transparent;">
        </div>
        <div class="intro" style="padding:1.6rem 1.8rem 1.2rem; text-align:center; background:#ffffff;">
            <p id="name" style="font-size:1.0rem; font-weight:800; letter-spacing:1px; margin-bottom:0.5rem; line-height:1.2; margin-block:0;"></p>
            <p id="amb" style="font-size:0.7rem; font-weight:400; color:#4f5d69; margin-bottom:0.25rem; line-height:1.5; border-top:1px dashed #cdd9e3; padding-top:0.8rem; white-space:pre-wrap; margin-block:0;"></p>
            <p id="writer" style="font-size:0.7rem; font-weight:400; color:#4f5d69; margin-bottom:0.25rem; line-height:1.5; white-space:pre-wrap; margin-block:0;"></p>
        </div>
        <div class="button-wrapper" style="padding:0.2rem 1.8rem 2rem 1.8rem; background:#ffffff;">
            <style>
                #randomBtn{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.6rem;
                    width: 100%;
                    background: #1f2f3b;
                    color: white;
                    padding: 0.7rem 0;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    letter-spacing: 0.5px;
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    backdrop-filter: blur(4px);
                    font-family: inherit;
                    line-height: 1;
                }
            </style>
            <button id="randomBtn">换一首</button>
        </div>
    </div>
    <script>
        (function() {
            let dataDiv = document.getElementById('songs-data');
	    let library = JSON.parse(dataDiv.dataset.songs);

            const photoImg = document.getElementById('photo');
            const nameEl = document.getElementById('name');
            const ambEl = document.getElementById('amb');
            const writerEl = document.getElementById('writer');
            const randomBtn = document.getElementById('randomBtn');
            const recommenderEl = document.getElementById('recommender');

            let lastIndex = -1;
            let currentMusicLink = library[0].musiclink; 

            photoImg.addEventListener('mousedown', function(e) {
                this.style.opacity = '0.8';
            });
            photoImg.addEventListener('mouseup', function(e) {
                this.style.opacity = '';
            });
            photoImg.addEventListener('mouseleave', function(e) {
                this.style.opacity = '';
            });
            photoImg.addEventListener('touchstart', function(e) {
                this.style.opacity = '0.8';
            });
            photoImg.addEventListener('touchend', function(e) {
                this.style.opacity = '';
            });
            photoImg.addEventListener('touchcancel', function(e) {
                this.style.opacity = '';
            });
            function setBtnActive() {
                randomBtn.style.background = '#17242e';
                randomBtn.style.transform = 'scale(0.98)';
                randomBtn.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
            }
            function setBtnNormal() {
                randomBtn.style.background = '#1f2f3b';
                randomBtn.style.transform = 'scale(1)';
                randomBtn.style.boxShadow = 'none';
            }
            randomBtn.addEventListener('mousedown', setBtnActive);
            randomBtn.addEventListener('mouseup', setBtnNormal);
            randomBtn.addEventListener('mouseleave', setBtnNormal);
            randomBtn.addEventListener('touchstart', setBtnActive);
            randomBtn.addEventListener('touchend', setBtnNormal);
            randomBtn.addEventListener('touchcancel', setBtnNormal);

            photoImg.addEventListener('click', function() {
                if (currentMusicLink) {
                    window.open(currentMusicLink, '_blank');
                }
            });
	    function randmusic() {
	        let randid = lastIndex;
	        while (randid === lastIndex) {
	            randid = Math.floor(Math.random() * library.length);
		}

		if (lastIndex == -1) randid = 3;

		lastIndex = randid;
                const ys = library[randid];
                photoImg.src = ys.cover;
                photoImg.alt = ys.name;
                nameEl.textContent = ys.name;
                ambEl.textContent = ys.album;
		writerEl.textContent = ys.writer;
		recommenderEl.textContent = ys.user;
                currentMusicLink = ys.click;
            }

            randmusic();

            randomBtn.addEventListener('click', function() {
                randmusic();
            });

        })();
    </script>
</div>
		</div>
	</div>
</div>
<?php
// ---- 日期 ----
$todayTs   = time();
$dayNum    = (int)date('j', $todayTs);
$monthNum  = (int)date('n', $todayTs);
$wday      = (int)date('w', $todayTs);
$monthCN   = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
$weekCN    = ['日','一','二','三','四','五','六'];
$monthText = $monthCN[$monthNum - 1] . '月';
$weekText  = '星期' . $weekCN[$wday];

// ---- NOIP 倒计时 ----
$noipTs        = strtotime('2026-11-28');
$todayMidnight = strtotime(date('Y-m-d', $todayTs));
$daysLeft      = (int)floor(($noipTs - $todayMidnight) / 86400);
?>

<?php
$todayTs   = time();
$dayNum    = (int)date('j', $todayTs);
$monthNum  = (int)date('n', $todayTs);
$wday      = (int)date('w', $todayTs);
$monthCN   = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
$weekCN    = ['日','一','二','三','四','五','六'];

$bigMonths = [1,3,5,7,8,10,12];
if ($monthNum == 2) {
	$sizeChar = '平';           // 闰年可改成 '闰'
} elseif (in_array($monthNum, $bigMonths)) {
	$sizeChar = '大';
} else {
	$sizeChar = '小';
}
$monthText = $monthCN[$monthNum - 1] . '月' . $sizeChar;
$weekText  = '星期' . $weekCN[$wday];

$todayMidnight = strtotime(date('Y-m-d', $todayTs));
$noipTs        = strtotime('2026-11-28');
$daysLeft      = max(0, (int)floor(($noipTs - $todayMidnight) / 86400));
$csj1Ts        = strtotime('2026-09-19');
$csp1daysLeft  = max(0, (int)floor(($csp1Ts - $todayMidnight) / 86400));
$csp2Ts        = strtotime('2026-10-31');
$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 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>
	<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>

    <!-- ============ 右列：排行榜 ============ -->
    <div class="col-12 col-lg-3">

        <!-- 活跃 -->
        <div class="card shadow-sm border-0 mb-3">
            <div class="card-body p-3">
                <h6 class="font-weight-bold mb-3">活跃排行榜</h6>
                <?php foreach ($activateusers as $username): ?>
                    <?php $user = queryUser($username['submitter']); ?>
                    <div class="d-flex align-items-start border-bottom pb-2 mb-2">
                        <img class="uoj-avatar rounded-circle flex-shrink-0 mr-2"
                             style="width:36px;height:36px;object-fit:cover;"
                             src="https://q.qlogo.cn/g?b=qq&nk=<?= $user['qq'] ?>&s=100" alt="...">
                        <div class="flex-grow-1" style="min-width:0;">
                            <div class="text-truncate font-weight-bold" style="font-size:0.9rem;">
                                <?= getUserLink($user['username']) ?>
                            </div>
                            <div class="text-truncate" style="font-size:0.8rem;font-family:'SimSun','宋体','Songti SC','STSong',serif;">
                                <?= $user['motto'] ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        </div>

        <!-- 比赛 -->
        <div class="card shadow-sm border-0 mb-3">
            <div class="card-body p-3">
                <h6 class="font-weight-bold mb-1">比赛排行榜</h6>
                <div class="mb-3" style="font-size:0.75rem;">
                    <span class="text-muted">180 天内三场及以上</span>
                    <a href="/ranklist" class="ml-1">全部排名</a>
                </div>
                <?php foreach ($topusers as $user): ?>
                    <div class="d-flex align-items-start border-bottom pb-2 mb-2">
                        <img class="uoj-avatar rounded-circle flex-shrink-0 mr-2"
                             style="width:36px;height:36px;object-fit:cover;"
                             src="https://q.qlogo.cn/g?b=qq&nk=<?= $user['qq'] ?>&s=100" alt="...">
                        <div class="flex-grow-1" style="min-width:0;">
                            <div class="d-flex justify-content-between align-items-baseline">
                                <span class="text-truncate font-weight-bold" style="font-size:0.9rem;">
                                    <?= getUserLink($user['username']) ?>
                                </span>
                                <strong class="text-danger ml-1 flex-shrink-0" style="font-size:0.75rem;">
                                    <?= $user['rating'] ?> <small>(±<?= round($user['rating_rd']) * 2 ?>)</small>
                                </strong>
                            </div>
                            <div class="text-truncate" style="font-size:0.8rem;font-family:'SimSun','宋体','Songti SC','STSong',serif;">
                                <?= $user['motto'] ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        </div>

        <!-- 黑马 -->
        <div class="card shadow-sm border-0 mb-3">
            <div class="card-body p-3">
                <h6 class="font-weight-bold mb-3">黑马 / 爆冷榜</h6>
                <?php foreach ($hotusers as $user): ?>
                    <div class="d-flex align-items-start border-bottom pb-2 mb-2">
                        <img class="uoj-avatar rounded-circle flex-shrink-0 mr-2"
                             style="width:36px;height:36px;object-fit:cover;"
                             src="https://q.qlogo.cn/g?b=qq&nk=<?= $user['qq'] ?>&s=100" alt="...">
                        <div class="flex-grow-1" style="min-width:0;">
                            <div class="d-flex justify-content-between align-items-baseline">
                                <span class="text-truncate font-weight-bold" style="font-size:0.9rem;">
                                    <?= getUserLink($user['username']) ?>
                                </span>
                                <strong class="text-danger ml-1 flex-shrink-0" style="font-size:0.75rem;">
                                    Vol <?= round(1000 * $user['rating_vol']) / 1000 ?>
                                </strong>
                            </div>
                            <div class="text-truncate" style="font-size:0.8rem;font-family:'SimSun','宋体','Songti SC','STSong',serif;">
                                <?= $user['motto'] ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach ?>
            </div>
        </div>

    </div>
</div>

<!-- 博客卡片悬停效果 -->
<style>
.wyoj-blog-card {
    transition: box-shadow .2s ease;
}
.wyoj-blog-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}
.wyoj-blog-card .wyoj-blog-title {
    font-size: 1.05rem;
    line-height: 1.5;
}
</style>

<?php echoUOJPageFooter() ?>