From 32caffc3ec621caf8e75483094fd93a10139871b Mon Sep 17 00:00:00 2001
From: Baoshuo <i@baoshuo.ren>
Date: Fri, 23 Sep 2022 21:00:17 +0800
Subject: [PATCH] refactor: index with bs5

---
 web/app/controllers/index.php | 103 +++++++++++----
 web/app/libs/uoj-html-lib.php |  13 +-
 web/app/views/main-nav.php    | 236 ++++++++++++++++++++++++++++++----
 web/app/views/page-footer.php |  57 +++++---
 web/app/views/page-header.php |  61 +++++----
 web/css/uoj-bs5.css           |   4 +
 6 files changed, 381 insertions(+), 93 deletions(-)

diff --git a/web/app/controllers/index.php b/web/app/controllers/index.php
index 3e3cf52..1431d76 100644
--- a/web/app/controllers/index.php
+++ b/web/app/controllers/index.php
@@ -2,50 +2,79 @@
 	$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 5");
 	$countdowns = DB::selectAll("select * from countdowns order by endtime asc");
 	$friend_links = DB::selectAll("select * from friend_links order by level desc, id asc");
+
+	$REQUIRE_LIB['bootstrap5'] = '';
 	?>
 <?php echoUOJPageHeader(UOJConfig::$data['profile']['oj-name-short']) ?>
 <div class="row">
 	<div class="col-sm-12 col-md-9">
 		<div class="card card-default">
 			<div class="card-body">
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+					<h4 class="card-title">
+						<?= UOJLocale::get('announcements') ?>
+					</h4>
+				<?php endif ?>
 				<table class="table table-sm">
 					<thead>
 						<tr>
-							<th style="width:60%"><?= UOJLocale::get('announcements') ?></th>
+							<th style="width:60%">
+								<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
+									<?= UOJLocale::get('announcements') ?>
+								<?php endif ?>
+							</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 <= 5; $i++): ?>
-						<tr><td colspan="233">&nbsp;</td></tr>
-					<?php endfor ?>
-						<tr><td class="text-right" colspan="233"><a href="/announcements"><?= UOJLocale::get('all the announcements') ?></a></td></tr>
+						<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'] ?>"
+										<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+										class="text-decoration-none"
+										<?php endif ?>
+										><?= $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 <= 5; $i++): ?>
+							<tr><td colspan="233">&nbsp;</td></tr>
+						<?php endfor ?>
+						<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<tr><td class="text-right" colspan="233"><a href="/announcements"><?= UOJLocale::get('all the announcements') ?></a></td></tr>
+						<?php endif ?>
 					</tbody>
 				</table>
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+					<div class="text-end">
+						<a class="text-decoration-none" href="/announcements"><?= UOJLocale::get('all the announcements') ?></a>
+					</div>
+				<?php endif ?>
 			</div>
 		</div>
 		<?php if (Auth::check() && isNormalUser($myUser)): ?>
 			<div class="mt-4">
-				<h3><?= UOJLocale::get('top solver') ?></h3>
+				<h4><?= UOJLocale::get('top solver') ?></h4>
 				<?php echoRanklist(array('echo_full' => true, 'top10' => true, 'by_accepted' => true)) ?>
 				<div class="text-center">
-					<a href="/solverlist"><?= UOJLocale::get('view all') ?></a>
+					<a href="/solverlist"
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+						class="text-decoration-none"
+						<?php endif ?>
+						><?= UOJLocale::get('view all') ?></a>
 				</div>
 			</div>
 		<?php else: ?>
@@ -61,9 +90,16 @@
 			<img class="media-object img-thumbnail" src="/images/logo.png" alt="Logo" />
 		</div>
 		<div class="card card-default mt-4">
+			<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+			<div class="card-header">
+				<b>倒计时</b>
+			</div>
+			<?php endif ?>
 			<div class="card-body">
-				<h3 class="card-title" style="font-size: 1.25rem">倒计时</h3>
-				<ul class="pl-4 mb-0">
+				<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
+					<h4 class="card-title" style="font-size: 1.25rem">倒计时</h4>
+				<?php endif ?>
+				<ul class="list-unstyled mb-0">
 					<?php foreach ($countdowns as $countdown): ?>
 						<?php
 							$enddate = strtotime($countdown['endtime']);
@@ -79,18 +115,31 @@
 						</li>
 					<?php endforeach ?>
 				</ul>
+				<?php if (count($countdowns) == 0): ?>
+					<div class="text-center">（无）</div>
+				<?php endif ?>
 			</div>
 		</div>
 		<div class="card card-default mt-4">
+			<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+				<div class="card-header">
+					<b>友情链接</b>
+				</div>
+			<?php endif ?>
 			<div class="card-body">
-				<h3 class="card-title" style="font-size: 1.25rem">友情链接</h3>
-				<ul class="pl-4 mb-0">
+				<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
+				<h4 class="card-title" style="font-size: 1.25rem">友情链接</h4>
+				<?php endif ?>
+				<ul class="list-unstyled mb-0">
 					<?php foreach ($friend_links as $friend_link): ?>
 						<li>
 							<a href="<?= $friend_link['url'] ?>" target="_blank"><?= $friend_link['title'] ?></a>
 						</li>
 					<?php endforeach ?>
 				</ul>
+				<?php if (count($friend_links) == 0): ?>
+					<div class="text-center">（无）</div>
+				<?php endif ?>
 			</div>
 		</div>
 	</div>
diff --git a/web/app/libs/uoj-html-lib.php b/web/app/libs/uoj-html-lib.php
index 9f9d791..fc06999 100644
--- a/web/app/libs/uoj-html-lib.php
+++ b/web/app/libs/uoj-html-lib.php
@@ -156,6 +156,8 @@ function getLongTablePageUri($page) {
 }
 
 function echoLongTable($col_names, $table_name, $cond, $tail, $header_row, $print_row, $config) {
+	global $REQUIRE_LIB;
+
 	$pag_config = $config;
 	$pag_config['col_names'] = $col_names;
 	$pag_config['table_name'] = $table_name;
@@ -164,7 +166,11 @@ function echoLongTable($col_names, $table_name, $cond, $tail, $header_row, $prin
 	$pag = new Paginator($pag_config);
 
 	$div_classes = isset($config['div_classes']) ? $config['div_classes'] : array('table-responsive');
-	$table_classes = isset($config['table_classes']) ? $config['table_classes'] : array('table', 'table-bordered', 'table-hover', 'table-striped', 'table-text-center');
+	$table_classes = isset($config['table_classes'])
+		? $config['table_classes']
+		: isset($REQUIRE_LIB['bootstrap5'])
+			? array('table', 'table-bordered', 'table-striped', 'text-center')
+			: array('table', 'table-bordered', 'table-hover', 'table-striped', 'table-text-center');
 	
 	if (isset($config['head_pagination']) && $config['head_pagination']) {
 		echo $pag->pagination();
@@ -967,10 +973,15 @@ function echoUOJPageHeader($page_title, $extra_config = array()) {
 	uojIncludeView('page-header', $config);
 }
 function echoUOJPageFooter($config = array()) {
+	global $REQUIRE_LIB;
+	$config['REQUIRE_LIB'] = $REQUIRE_LIB;
+
 	uojIncludeView('page-footer', $config);
 }
 
 function echoRanklist($config = array()) {
+	global $REQUIRE_LIB;
+
 	$header_row = '';
 	$header_row .= '<tr>';
 	$header_row .= '<th style="width: 5em;">#</th>';
diff --git a/web/app/views/main-nav.php b/web/app/views/main-nav.php
index c51f7fa..ee105d3 100644
--- a/web/app/views/main-nav.php
+++ b/web/app/views/main-nav.php
@@ -1,29 +1,216 @@
+<?php
+	if (isset($REQUIRE_LIB['bootstrap5'])) {
+		$new_user_msg_num = DB::selectCount("select count(*) from user_msg where receiver = '".Auth::id()."' and read_time is null");
+		$new_system_msg_num = DB::selectCount("select count(*) from user_system_msg where receiver = '".Auth::id()."' and read_time is null");
+		$new_msg_tot = $new_user_msg_num + $new_system_msg_num;
+	}
+	?>
+
 <div class="navbar navbar-light navbar-expand-md bg-light mb-4" role="navigation">
-	<a class="navbar-brand" href="<?= HTML::url('/') ?>"><?= UOJConfig::$data['profile']['oj-name-short'] ?></a>
-	<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-		<span class="navbar-toggler-icon"></span>
-	</button>
-	<div class="collapse navbar-collapse" id="navbarSupportedContent">
-		<ul class="nav navbar-nav mr-auto">
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/contests') ?>"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('contests') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/problems') ?>"><span class="glyphicon glyphicon-th-list"></span> <?= UOJLocale::get('problems') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/groups') ?>"><span class="glyphicon glyphicon-education"></span> <?= UOJLocale::get('groups') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/problem_lists') ?>"><span class="glyphicon glyphicon-list-alt"></span> <?= UOJLocale::get('problems lists') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/submissions') ?>"><span class="glyphicon glyphicon-tasks"></span> <?= UOJLocale::get('submissions') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/hacks') ?>"><span class="glyphicon glyphicon-flag"></span> <?= UOJLocale::get('hacks') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::blog_list_url() ?>"><span class="glyphicon glyphicon-edit"></span> <?= UOJLocale::get('blogs') ?></a></li>
-			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/faq') ?>"><span class="glyphicon glyphicon-info-sign"></span> <?= UOJLocale::get('help') ?></a></li>
-		</ul>
-		<form id="form-search-problem" class="form-inline my-2 my-lg-0" method="get">
-			 <div class="input-group">
-				<input type="text" class="form-control" name="search" id="input-search" placeholder="<?= UOJLocale::get('search')?>" />  
-				<div class="input-group-append">
-					<button type="submit" class="btn btn-search btn-outline-primary" id="submit-search"><span class="glyphicon glyphicon-search"></span></button>
-				</div>
-			</div>
-		</form>
-	</div><!--/.nav-collapse -->
+	<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+	<div class="container">
+	<?php endif ?>
+		<a class="navbar-brand" href="<?= HTML::url('/') ?>">
+			<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+				<img src="<?= HTML::url('/images/logo_small.png') ?>" alt="Logo" width="24" height="24" class="d-inline-block align-text-top"/>
+			<?php endif ?>
+			<?= UOJConfig::$data['profile']['oj-name-short'] ?>
+		</a>
+
+		<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+		<?php else: ?>
+		<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+		<?php endif ?>
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<div class="collapse navbar-collapse" id="navbarSupportedContent">
+			<ul class="nav navbar-nav mr-auto">
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/contests') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-bar-chart-line-fill"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-stats"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('contests') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/problems') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-list-task"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-th-list"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('problems') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/groups') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-people-fill"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-education"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('groups') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/problem_lists') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-card-list"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-list-alt"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('problems lists') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/submissions') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-pie-chart-fill"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-tasks"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('submissions') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/hacks') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-flag-fill"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-flag"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('hacks') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::blog_list_url() ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-pencil-square"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-edit"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('blogs') ?>
+					</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/faq') ?>">
+						<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+							<i class="bi bi-question-circle-fill"></i>
+						<?php else: ?>
+							<span class="glyphicon glyphicon-info-sign"></span>
+						<?php endif ?>
+						<?= UOJLocale::get('help') ?>
+					</a>
+				</li>
+			</ul>
+			<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+			<hr class="d-lg-none text-white-50">
+			<ul class="nav navbar-nav ms-md-auto">
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+						<i class="bi bi-translate"></i>
+						<?= UOJLocale::get('_common_name') ?>
+					</a>
+					<ul class="dropdown-menu">
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'zh-cn'))) ?>">
+								中文
+							</a>
+						</li>
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'en'))) ?>">
+								English
+							</a>
+						</li>
+					</ul>
+				</li>
+				<?php if (Auth::check()): ?>
+				<li class="nav-item dropdown">
+					<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+						<i class="bi bi-person-fill"></i>
+						<span class="position-relative">
+							<?= Auth::id() ?>
+							<?php if ($new_msg_tot): ?>
+							<span class="badge bg-danger rounded-pill">
+								<?= $new_msg_tot > 99 ? "99+" : $new_msg_tot ?>
+							</span>
+							<?php endif ?>
+						</span>
+					</a>
+					<ul class="dropdown-menu">
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url('/user/profile/' . Auth::id()) ?>">
+								<?= UOJLocale::get('my profile') ?>
+							</a>
+						</li>
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url('/user/msg') ?>">
+								<?= UOJLocale::get('private message') ?>
+								<?php if ($new_user_msg_num): ?>
+								<span class="badge bg-danger rounded-pill">
+									<?= $new_user_msg_num > 99 ? "99+" : $new_user_msg_num ?>
+								</span>
+								<?php endif ?>
+							</a>
+						</li>
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url('/user/system-msg') ?>">
+								<?= UOJLocale::get('system message') ?>
+								<?php if ($new_system_msg_num): ?>
+								<span class="badge bg-danger rounded-pill">
+									<?= $new_system_msg_num > 99 ? "99+" : $new_system_msg_num ?>
+								</span>
+								<?php endif ?>
+							</a>
+						</li>
+						<?php if (isSuperUser(Auth::user())): ?>
+							<li>
+								<a class="dropdown-item" href="<?= HTML::url('/super-manage') ?>">
+									<?= UOJLocale::get('system manage') ?>
+								</a>
+							</li>
+						<?php endif ?>
+						<li>
+							<hr class="dropdown-divider">
+						</li>
+						<li>
+							<a class="dropdown-item" href="<?= HTML::url('/logout?_token=' . crsf_token()) ?>">
+								<?= UOJLocale::get('logout') ?>
+							</a>
+						</li>
+					</ul>
+				</li>
+				<?php else: ?>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/login') ?>">
+						<i class="bi bi-box-arrow-in-right"></i>
+						<?= UOJLocale::get('login') ?>
+					</a>
+				</li>
+				<?php if (!DB::selectCount("SELECT COUNT(*) FROM user_info")): ?>
+				<li class="nav-item">
+					<a class="nav-link" href="<?= HTML::url('/register') ?>">
+						<i class="bi bi-person-plus-fill"></i>
+						<?= UOJLocale::get('register') ?>
+					</a>
+				</li>
+				<?php endif ?>
+				<?php endif ?>
+			</ul>
+			<?php endif ?>
+		</div>
+	
+	<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+	</div>
+	<?php endif ?>
 </div>
+
+<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
 <script type="text/javascript">
 	var zan_link = '';
 	$('#form-search-problem').submit(function(e) {
@@ -42,3 +229,4 @@
 		location.href = url;
 	});
 </script>
+<?php endif ?>
diff --git a/web/app/views/page-footer.php b/web/app/views/page-footer.php
index 46ccc4d..9cac0a7 100644
--- a/web/app/views/page-footer.php
+++ b/web/app/views/page-footer.php
@@ -5,25 +5,46 @@
 	?>
 			</div>
 			<?php if ($ShowPageFooter): ?>
-			<div class="uoj-footer">
-				<div class="btn-group dropright mb-3">
-					<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
-						<span class="glyphicon glyphicon-globe"></span> <?= UOJLocale::get('_common_name') ?>
-					</button>
-					<div class="dropdown-menu">
-						<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'zh-cn'))) ?>">中文</a>
-						<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'en'))) ?>">English</a>
-					</div>
-				</div>
+				<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+					<footer class="bg-light text-muted pt-3 pb-4" style="font-size: 0.9em">
+						<div class="container d-lg-flex justify-content-lg-between">
+							<p>
+								&copy; <?= date('Y') ?>
+								<a class="text-decoration-none" href="https://github.com/renbaoshuo/S2OJ<?= UOJConfig::$data['profile']['s2oj-version'] == "dev" ? '' : '/tree/' . UOJConfig::$data['profile']['s2oj-version'] ?>">S2OJ</a>
+								(build: <?= UOJConfig::$data['profile']['s2oj-version'] ?>)
+								<?= UOJLocale::get('server time') ?>: <?= UOJTime::$time_now_str ?>
+							</p>
+							<p>
+								Based on
+								<a class="text-decoration-none" href="https://uoj.ac" target="_blank">UOJ</a>,
+								modified by
+								<a class="text-decoration-none" href="https://baoshuo.ren" target="_blank">Baoshuo</a>
+								for
+								<a class="text-decoration-none" href="http://www.sjzez.com">SJZEZ</a>.
+							</p>
+						</div>
+					</footer>
+				<?php else: ?>
+					<div class="uoj-footer">
+						<div class="btn-group dropright mb-3">
+							<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
+								<span class="glyphicon glyphicon-globe"></span> <?= UOJLocale::get('_common_name') ?>
+							</button>
+							<div class="dropdown-menu">
+								<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'zh-cn'))) ?>">中文</a>
+								<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'en'))) ?>">English</a>
+							</div>
+						</div>
 
-				<p><?= UOJLocale::get('server time') ?>: <?= UOJTime::$time_now_str ?></p>
-				<p>
-					<a href="https://github.com/renbaoshuo/S2OJ<?= UOJConfig::$data['profile']['s2oj-version'] == "dev" ? '' : '/tree/' . UOJConfig::$data['profile']['s2oj-version'] ?>">S2OJ (build: <?= UOJConfig::$data['profile']['s2oj-version'] ?>)</a>
-					<?php if (UOJConfig::$data['profile']['ICP-license'] != ''): ?>
-						| <a target="_blank" href="https://beian.miit.gov.cn" style="text-decoration:none;"><?= UOJConfig::$data['profile']['ICP-license'] ?></a>
-					<?php endif ?>
-				</p>
-			</div>
+						<p><?= UOJLocale::get('server time') ?>: <?= UOJTime::$time_now_str ?></p>
+						<p>
+							<a href="https://github.com/renbaoshuo/S2OJ<?= UOJConfig::$data['profile']['s2oj-version'] == "dev" ? '' : '/tree/' . UOJConfig::$data['profile']['s2oj-version'] ?>">S2OJ (build: <?= UOJConfig::$data['profile']['s2oj-version'] ?>)</a>
+							<?php if (UOJConfig::$data['profile']['ICP-license'] != ''): ?>
+								| <a target="_blank" href="https://beian.miit.gov.cn" style="text-decoration:none;"><?= UOJConfig::$data['profile']['ICP-license'] ?></a>
+							<?php endif ?>
+						</p>
+					</div>
+				<?php endif ?>
 			<?php endif ?>
 		</div>
 		<!-- /container -->
diff --git a/web/app/views/page-header.php b/web/app/views/page-header.php
index c216d17..06224e8 100644
--- a/web/app/views/page-header.php
+++ b/web/app/views/page-header.php
@@ -1,24 +1,26 @@
 <?php
-	$new_user_msg_num = DB::selectCount("select count(*) from user_msg where receiver = '".Auth::id()."' and read_time is null");
-	$new_system_msg_num = DB::selectCount("select count(*) from user_system_msg where receiver = '".Auth::id()."' and read_time is null");
-	$new_msg_tot = $new_user_msg_num + $new_system_msg_num;
-		
-	if ($new_user_msg_num == 0) {
-		$new_user_msg_num_html = '';
-	} else {
-		$new_user_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_user_msg_num.'</span>';
+	if (!isset($REQUIRE_LIB['bootstrap5'])) {
+		$new_user_msg_num = DB::selectCount("select count(*) from user_msg where receiver = '".Auth::id()."' and read_time is null");
+		$new_system_msg_num = DB::selectCount("select count(*) from user_system_msg where receiver = '".Auth::id()."' and read_time is null");
+		$new_msg_tot = $new_user_msg_num + $new_system_msg_num;
+			
+		if ($new_user_msg_num == 0) {
+			$new_user_msg_num_html = '';
+		} else {
+			$new_user_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_user_msg_num.'</span>';
+		}
+		if ($new_system_msg_num == 0) {
+			$new_system_msg_num_html = '';
+		} else {
+			$new_system_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_system_msg_num.'</span>';
+		}
+		if ($new_msg_tot == 0) {
+			$new_msg_tot_html = '';
+		} else {
+			$new_msg_tot_html = '<sup><span class="badge badge-pill badge-secondary">'.$new_msg_tot.'</span></sup>';
+		}
 	}
-	if ($new_system_msg_num == 0) {
-		$new_system_msg_num_html = '';
-	} else {
-		$new_system_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_system_msg_num.'</span>';
-	}
-	if ($new_msg_tot == 0) {
-		$new_msg_tot_html = '';
-	} else {
-		$new_msg_tot_html = '<sup><span class="badge badge-pill badge-secondary">'.$new_msg_tot.'</span></sup>';
-	}
-	
+
 	if (!isset($PageMainTitle)) {
 		$PageMainTitle = UOJConfig::$data['profile']['oj-name'];
 	}
@@ -234,9 +236,16 @@
 		});
 		</script>
 	</head>
-	<body role="document">
+	<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+	<body class="d-flex flex-column min-vh-100">
+	<?php else: ?>
+	<body>
+	<?php endif ?>
+		<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
 		<div class="container theme-showcase" role="main">
-			<?php if ($ShowPageHeader): ?>
+		<?php endif ?>
+			<?php if ($ShowPageHeader): ?>	
+			<?php if (!isset($REQUIRE_LIB['bootstrap5'])): ?>
 			<div>
 				<ul class="nav nav-pills float-right" role="tablist">
 				<?php if (Auth::check()): ?>
@@ -270,8 +279,14 @@
 				</h1>
 				<h1 class="d-block d-sm-none"><?= $PageMainTitleOnSmall ?></h1>
 			</div>
-			
-			<?php uojIncludeView($PageNav) ?>
+			<?php endif ?>
+
+			<?php uojIncludeView($PageNav, array('REQUIRE_LIB' => $REQUIRE_LIB)) ?>
 			<?php endif ?>
 			
+			
+		<?php if (isset($REQUIRE_LIB['bootstrap5'])): ?>
+			<div class="uoj-content container flex-fill">
+		<?php else: ?>
 			<div class="uoj-content">
+		<?php endif ?>
diff --git a/web/css/uoj-bs5.css b/web/css/uoj-bs5.css
index e69de29..400afd8 100644
--- a/web/css/uoj-bs5.css
+++ b/web/css/uoj-bs5.css
@@ -0,0 +1,4 @@
+.uoj-username {
+	font-weight: 800;
+	text-decoration: none;
+}