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");
$topusers = DB::selectAll("select username, rating, qq, motto from user_info order by rating desc, username asc limit 12;");
$topblogs = DB::selectAll("select id from blogs order by zan desc limit 10;");
$songs_data = htmlspecialchars(json_encode(DB::selectAll("select * from songs;")), ENT_QUOTES, 'UTF-8');

$submdata = DB::selectAll("select yearweek(submit_time, 1) as weeknr, date(submit_time - interval weekday(submit_time) day) as weekst, count(*) as cnt from submissions group by weeknr, weekst order by weekst;");
$submjson = htmlspecialchars(json_encode($submdata), ENT_QUOTES, 'UTF-8');
requireLib('flot');
?>
<?php echoUOJPageHeader(UOJConfig::$data['profile']['oj-name-short']) ?>
<div id="songs-data" data-songs='<?php echo $songs_data; ?>'></div>
<div class="row shadow my-4 wyoj-topcard">
	<div class="card-body">
		<div class="row">
<!--			<div class="col-xs-6 col-sm-4 col-md-3">
				<img class="media-object img-thumbnail" src="/images/logo.png" alt="Logo" />
			</div>-->
			<div class="col-sm-12 col-md-9">
				<table class="table table-sm">
<!--					<thead>
						<tr>
							<th style="width:60%"><?= UOJLocale::get('announcements') ?></th>
							<th style="width:20%"></th>
							<th style="width:20%"></th>
						</tr>
					</thead>-->
				  	<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>

<!--
<div class="row shadow my-4 wyoj-topcard" id="recommender-zone">
	<div class="col-12 p-4">
		<h3>服务器信息</h3>
		<div id="submissions-data" data-submissions_data='<?= $submjson ?>'></div>
		<div style="position: relative; width: 100%; padding-top: 20%;">
			<div id="submissions-plot" class="w-100 h-100" style="position: absolute; top: 0; left: 0;"></div>
		</div>
		<div style="position: relative; width: 100%; padding-top: 20%;">
			<div id="storage-plot" class="w-100 h-100" style="position: absolute; top: 0; left: 0;"></div>
		</div>
	</div>
</div>
-->

<div class="row shadow my-4 wyoj-topcard">
	<div class="col-12 p-4">
		<h3>博客广场</h3>
	</div>

	<?php 
		foreach ($topblogs as $id) echo echoBlogCard(queryBlog($id['id']));
	?>
</div>

<div class="row shadow my-4 wyoj-topcard">
	<div class="col-12 p-4">
		<h3>比赛排行榜</h3>
	</div>
	<?php foreach($topusers as $user): ?>
		<div class="col-md-3 mb-4">
			<div class="card h-100 p-3 text-center">
				<img class="uoj-avatar mx-auto mb-2" src=<?= "https://q.qlogo.cn/g?b=qq&nk=" . $user['qq'] . "&s=100" ?> alt="...">
				<span class="mb-2"><?= getUserLink($user['username']) ?></span>
				<span class="text-center text-bottom"><?= $user['motto'] ?></span>
			</div>
		</div>
	<?php endforeach ?>
</div>
<script>
(function() {
    const submissions_data_raw = JSON.parse(document.getElementById('submissions-data').dataset.submissions_data);
    const submissions_data = submissions_data_raw.map(x => [Number(new Date(x['weekst'])), Number(x['cnt'])]);
    console.log(submissions_data);

    var dataset = [
        {
            label: "提交数",
            data: submissions_data,
            yaxis: 1,
            lines: { show: true },
            points: { show: true }
        },
    ];

    var options1 = {
        yaxes: [
            {
                position: "left",
                min: 0,
                max: 10000,
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12
            },
            {
                position: "right",
                min: 0,
                max: 10000,
                tickDecimals: 0,
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12
            }
	],
        xais: {
            mode: 'time',
            timeformat: "%Y-%m-%d",
	    minTickSize: [1, 'day']
        },
        grid: {
            hoverable: true,
        },
        legend: {
            position: "ne"
        }
    };
    $.plot($("#submissions-plot"), dataset, options1);
}) ();
</script>


<?php echoUOJPageFooter() ?>