From 03e6e1177765a98b56feb3e7cbcff13c1dab9a8c Mon Sep 17 00:00:00 2001
From: tiger2005 <41613797+tiger2005@users.noreply.github.com>
Date: Wed, 10 Nov 2021 15:00:58 +0800
Subject: [PATCH] [!] Add "Ranks" Function

---
 css/client.css   | 110 +++++++++++++++-
 css/dark.css     |   9 +-
 css/default.css  |   9 +-
 index.html       | 178 ++++++++++++++++----------
 js/client.js     |  53 +++++++-
 js/locale.js     | 171 ++++++++++++++++---------
 js/multi.js      | 320 +++++++++++++++++++++++++++++++++++++++++++++--
 js/submission.js |   2 +-
 package.json     |   2 +-
 9 files changed, 699 insertions(+), 155 deletions(-)

diff --git a/css/client.css b/css/client.css
index 5ad50d0..30d3cea 100644
--- a/css/client.css
+++ b/css/client.css
@@ -235,12 +235,12 @@ body{
 .singleUsernameDisplayer{
 	height: 32px;
 	font-size: 26px;
-	width: 690px;
+	width: 700px;
 	margin-left: 10px;
 }
 .singleRatingDisplayer{
 	font-size: 16px;
-	width: 670px;
+	width: 700px;
 	padding: 5px 10px;
 }
 .singleRatingDisplayer > div:last-child{
@@ -829,16 +829,109 @@ pre{
 	overflow: auto;
 }
 .multiSettingsBar{
-	height: 100px;
+	height: 105px;
 	width: 100%;
 }
 .multiInfoTable{
-	width: 100%;
-	max-height: 100%;
+	border-collapse: collapse;
+	border-spacing: 0;
+	width: calc(100% - 1px);
+	font-size: 16px;
+}
+.multiInfoTbody > tr > td{
+	border: 1px solid grey;
+	user-select: text;
+	padding: 3px;
+	text-align: center;
+}
+.multiTableUser{
+	text-align: left !important;
+	padding-left: 5px !important;
+}
+.multiSmall{
+	display: block;
+	font-size: 13px;
 }
 .multiInfoThead{
 	display: table-header-group;
 }
+.multiFetchTypeSelect > div.chosen{
+	flex: 1 !important;
+}
+.multiFetchTypeSelect > div.chosen .multiTypeChosenList .info{
+	display: inline-block;
+}
+.multiFetchTypeSelect > div{
+	width: 54px !important;
+}
+.multiTypeChosenList{
+	cursor: pointer;
+	position: relative;
+	padding: 10px 9px;
+	width: calc(100% - 18px);
+	height: calc(100% - 20px);
+	display: flex;
+}
+.multiTypeChosenList .info{
+	flex: 1;
+	font-size: 20px;
+	height: 100%;
+	display: none;
+	text-align: center;
+}
+.multiTypeChosenList > i{
+	font-size: 24px;
+	text-align: center;
+	width: 30px;
+}
+.multiPagePrev, .multiPageNext{
+	cursor: pointer;
+	position: relative;
+	transition: 0.2s;
+	margin: 2px;
+	width: 35px;
+	height: 26px;
+	border-radius: 5px;
+	font-size: 20px;
+	display: grid;
+	place-items: center;
+}
+.multiPageSelecter{
+	display: flex;
+	flex-direction: row;
+	font-size: 20px;
+	align-items: center;
+}
+.multiPageSelecter > .number{
+	cursor: pointer;
+	position: relative;
+	transition: 0.2s;
+	margin: 2px;
+	height: 26px;
+	padding: 0px 5px;
+	border-radius: 5px;
+	font-size: 20px;
+	display: grid;
+	place-items: center;
+}
+.multiUnofficialSelecter{
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+	border-radius: 5px;
+	margin-left: 10px;
+}
+.multiUnofficialSelecter > span{
+	cursor: pointer;
+	position: relative;
+	transition: 0.2s;
+	height: 30px;
+	width: 55px;
+	font-size: 20px;
+	font-size: 18px;
+	display: grid;
+	place-items: center;
+}
 
 /* SETTINGS */
 .settingPage{
@@ -981,6 +1074,11 @@ pre{
 [info=reloadLanguages]{
 	cursor: pointer;
 }
+.settingsInfoIcon{
+	display: inline-block;
+	width: 30px;
+	text-align: center;
+}
 
 
 /* SEARCH */
@@ -1048,7 +1146,7 @@ pre{
 	position: relative;
 	transition: 0.2s;
 	margin: 2px;
-	width: 26px;
+	width: 35px;
 	height: 26px;
 	border-radius: 5px;
 	font-size: 20px;
diff --git a/css/dark.css b/css/dark.css
index 8d17853..9577e11 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -126,7 +126,10 @@ body{
 .searchArgumentsItem.chosen{
     background: #777;
 }
-.searchPagesButton:hover{
+.searchPagesButton:hover
+, .multiPagePrev:hover, .multiPageNext:hover
+, .multiPageSelecter > .number:hover, .multiPageSelecter > .number.chosen
+, .multiUnofficialSelecter > span:hover, .multiUnofficialSelecter > span.chosen{
     background: #666;
 }
 .contestInfoCard:hover{
@@ -138,7 +141,9 @@ body{
 .multiSettingsBar{
     background: rgb(46, 51, 56);
 }
-
+.multiOddLine{
+    background: #333;
+}
 
 
 
diff --git a/css/default.css b/css/default.css
index 94a2905..73bb017 100644
--- a/css/default.css
+++ b/css/default.css
@@ -129,7 +129,10 @@ body{
 .searchArgumentsItem.chosen{
     background: #aaa;
 }
-.searchPagesButton:hover{
+.searchPagesButton:hover
+, .multiPagePrev:hover, .multiPageNext:hover
+, .multiPageSelecter > .number:hover, .multiPageSelecter > .number.chosen
+, .multiUnofficialSelecter > span:hover, .multiUnofficialSelecter > span.chosen{
     background: #aaa;
 }
 .contestInfoCard:hover{
@@ -141,6 +144,10 @@ body{
 .multiSettingsBar{
     background: #ccc;
 }
+.multiOddLine{
+    background: #bbb;
+}
+
 
 
 
diff --git a/index.html b/index.html
index b3205fc..ec2ef64 100644
--- a/index.html
+++ b/index.html
@@ -92,7 +92,7 @@
 					</div>
 					<div class="NavBarContent" for="multiContent">
 						<div class="multiNav" style="text-align: center">
-							<i class="fas fa-users"></i><br/>
+							<i class="fas fa-list-ol"></i><br/>
 							<div info="multiNav"></div>
 						</div>
 					</div>
@@ -185,35 +185,18 @@
 							<div class="contentPage">
 								<div class="loadingInterface" style="display: none; opacity: 0"><div><i class="fas fa-spin fa-sync-alt"></i></div></div>
 								<div style="display: flex; flex-direction: column;">
-									<div style="display: flex; flex-direction: row; padding: 0px 15px">
-										<img src="https://userpic.codeforces.org/422/title/50a270ed4a722867.jpg" alt="User Avatar" class="singleUserAvatar" />
+									<div style="display: flex; flex-direction: row; padding-left: 10px">
+										<img alt="User Avatar" class="singleUserAvatar" />
 										<div style="flex: 1">
-											<div class="singleUsernameDisplayer user-legendary">tourist</div>
+											<div class="singleUsernameDisplayer user-legendary"></div>
 											<div class="singleRatingDisplayer">
-												<div class="user-legendary setInlineBlock">Legendary Grandmaster</div>
-												<div class="setInlineBlock"><div class="currRating user-legendary setInlineBlock">1234</div> ( max. <div class="maxRating user-legendary setInlineBlock"> 5678</div> )</div>
+												<div class="user-legendary setInlineBlock"></div>
+												<div class="setInlineBlock"><div class="currRating user-legendary setInlineBlock"></div> ( max. <div class="maxRating user-legendary setInlineBlock"> </div> )</div>
 											</div>
 											<div class="singleContestInfoDisplayer">
 												<div class="singleContestTags">
-													<div class="singleContestTag primaryColor">
-														<i class="fas fa-calendar"></i>
-														#1234
-													</div>
-													<div class="singleContestTag warningColor">
-														<i class="fas fa-clock"></i>
-														2h30min
-													</div>
-													<div class="singleContestTag successColor">
-														<i class="fas fa-book"></i>
-														Div 1
-													</div>
-													<div class="singleContestTag dangerColor">
-														<i class="fas fa-user-secret"></i>
-														Virtual
-													</div>
 												</div>
 												<div class="singleContestName">
-													Codeforces Round 1234 (Div. 1)
 												</div>
 											</div>
 											<div class="singleContestProgress">
@@ -237,8 +220,8 @@
 
 												</div>
 												<div class="singleContestProgressRatingChangesDisplayer">
-													<span>Running</span>
-													<span>1234 +123 <i class="fas fa-angle-double-right"></i> 1234</span>
+													<span></span>
+													<span></span>
 												</div>
 												<div class="singleContestMoreOption">
 													<div class="forceLoadStandings"><i class='fas fas fa-list-ol'></i> <span info='forceLoadStandings'></span></div>
@@ -349,7 +332,7 @@
 					<div class="contentWrapper multiContent">
 						<div class="contentRowInfo"><div class="contentPage">
 							<div style="width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden">
-								<div class="multiInfoDisplayer">
+								<div class="multiInfoDisplayer" style="width: 100%; height: 100%; position: relative;">
 									<table class="multiInfoTable">
 										<thead class="multiInfoThead">
 											
@@ -358,9 +341,98 @@
 											
 										</tbody>
 									</table>
+									<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: grid; place-items: center; z-index: 999; text-align: center; background: inherit;" class="multiMask">
+										<div>
+											<i class='fas fa-exclamation-triangle fa-4x'></i>
+											<div class="popTip"><span info='multiNoUsers'></span></div>
+										</div>
+									</div>
 								</div>
 								<div class="multiSettingsBar">
-									
+									<div class="multiSettingsUpperContent" style="padding: 3px 5px; display: flex; width: calc(100% - 10px)">
+										<div style="display: flex; width: 100%; flex-direction: row; align-items: center; padding-top: 5px">
+											<div style="text-align: left; flex: 1; padding-left: 5px; display: flex; flex-direction: row;">
+												<div class="multiPageSelecter">
+													<i class="fas fa-list-ol" style="padding-right: 10px"></i>
+													<span class="number">20</span>
+													<span class="number chosen">50</span>
+													<span class="number">100</span>
+													<span class="number">200</span>
+												</div>
+												<div class="multiUnofficialSelecter">
+													<span class="chosen"><i class="fas fa-user"></i></span>
+													<span><i class="fas fa-users"></i></span>
+												</div>
+											</div>
+											<div style="text-align: center; width: 250px; display: flex; flex-direction: row;">
+												<div style="flex: 1"></div>
+												<div class="multiPagePrev">
+													<i class="fas fa-angle-left"></i>
+												</div>
+												<div class="multiPageIndex" style="font-size: 20px; display: grid; place-items: center; padding-left: 10px; padding-right: 10px; width: 120px;">
+													<span class="multiPageIndexNumber" style="cursor: pointer" onclick="multiPageIndexClick()">
+														1
+													</span>
+												</div>
+												<div class="multiPageNext">
+													<i class="fas fa-angle-right"></i>
+												</div>
+												<div style="flex: 1"></div>
+											</div>
+											<div style="text-align: right; flex: 1;">
+												<div class="multiStatusBar" style="font-size: 18px; padding-right: 5px; color: grey">
+													<span info="multiStatus"></span>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div class="multiSettingsLowerContent" style="padding: 3px 5px; display: flex; width: calc(100% - 10px)">
+										<div class="multiFetchTypeSelect" style="width: 270px; display: flex">
+											<div class="chosen">
+												<div style="width: calc(100% - 6px); height: calc(100% - 6px); padding: 3px 3px; position: relative;">
+													<div class="multiTypeChosenList warningColor" style="border-radius: 5px">
+														<i class="fas fa-globe"></i>
+														<div class="info" info="multiOverall"></div>
+													</div>
+												</div>
+											</div>
+											<div>
+												<div style="width: calc(100% - 6px); height: calc(100% - 6px); padding: 3px 3px; position: relative;">
+													<div class="multiTypeChosenList dangerColor" style="border-radius: 5px">
+														<i class="fas fa-heart"></i>
+														<div class="info" info="multiFriend"></div>
+													</div>
+												</div>
+											</div>
+											<div>
+												<div style="width: calc(100% - 6px); height: calc(100% - 6px); padding: 3px 3px; position: relative;">
+													<div class="multiTypeChosenList successColor" style="border-radius: 5px">
+														<i class="fas fa-house-user"></i>
+														<div class="info" info="multiRoom"></div>
+													</div>
+												</div>
+											</div>
+										</div>
+										<div class="multiContestSelect" style="width: 150px; margin-left: 3px;">
+											<div class="bigInputArea">
+												<input class="multiContestIdInput" info="multiContestIdInput" type="text" style="text-align: center">
+												<i class="fa fa-calendar"></i>
+											</div>
+										</div>
+										<div class="multiFetchInfoSelect" style="flex: 1; margin-left: 6px">
+											<div class="bigInputArea">
+												<input class="multiContestInfoInput" info="multiContestInfoInput0" type="text">
+												<i class="fa fa-circle-info"></i>
+											</div>
+										</div>
+										<div class="multiClicker" style="width: 54px">
+											<div style="padding: 3px; width: calc(100% - 6px); height: calc(100% - 6px); position: relative;">
+												<div class="primaryColor multiClickToFetch" style="border-radius: 5px; height: 100%;width: 100%; display: grid; place-items: center; cursor: pointer">
+													<i class="fas fa-paper-plane" style="font-size: 20px;"></i>
+												</div>
+											</div>
+										</div>
+									</div>
 								</div>
 							</div></div>
 						</div>
@@ -450,37 +522,6 @@
 									</div>
 								</div>
 							</div>
-							<div class="contentPage">
-								<div class="contestSecondPageInfo">
-									<div class="contestInfoCard">
-										<div class="contestCardRealInfo">
-											<div class="contestCardNameContainer">
-												<div class="contestCardName">Codeforces Round balabalabalabalabalabalabalabalabalabala</div>
-												<div class="contestCardTags">
-													<span class="contestCardTag">#1234</span>
-													<span class="contestCardTag">Div. 1</span>
-												</div>
-											</div>
-											<div class="contestPassedCount">
-												<span class="contestCardPassedCount green">6</span>
-												<div class="contestCardOverall"><div class="contestCardUACCount red">123</div><div class="contestCardOverallCount">/10</div></div>
-											</div>
-										</div>
-										<div class="contestCardTime">
-											<span class="contestCardTimeSE"></span>
-											<span class="contestCardTimeRunningType">
-												<span class="red"><span class="fas fa-running"></span> Running</span>
-											</span>
-										</div>
-									</div>
-									<div style="flex: 1; width: 100%">
-
-									</div>
-									<div class="contestSecondPageProgress">
-
-									</div>
-								</div>
-							</div>
 						</div>
 					</div>
 					<div class="contentWrapper questionContent">
@@ -498,7 +539,7 @@
 							<div class="contentPage">
 								<div class="settingPage"> <div style="margin: 20px 0px">
 									<div class="settingsHeader" info="settingsAccount"></div>
-									<div class="settingsSelectInfoAddition" style="position: relative"><span class="settingsLoginType"></span><span info="redirectVerification" style="float: right; cursor: pointer" onclick="openCodeforcesPage()"></span></div>
+									<div class="settingsSelectInfoAddition" style="position: relative; height: 20px"><span class="settingsLoginType"></span><span info="redirectVerification" style="float: right; cursor: pointer" onclick="openCodeforcesPage()"></span></div>
 									<div class="settingsUI settingsInput" for="accountHandleOrEmail">
 										<div class="settingsInputInfo">
 											<div class="settingsInputInfoMain">Radio Name</div>
@@ -837,14 +878,6 @@
 		</div>
 	</body>
 	<footer>
-		<script src="./js/langs.js"></script>
-		<script src="./js/locale.js"></script>
-		<script src="./js/settings.js"></script>
-		<script src="./js/authorize.js"></script>
-		<script src="./js/submission.js"></script>
-		<script src="./js/client.js"></script>
-		<script src="./js/problem.js"></script>
-		<script src="./js/contest.js"></script>
 		<script>
 			if(!RunInNwjs){
 				if(!DarkMode)
@@ -895,6 +928,17 @@
 				window.matchMedia('(prefers-color-scheme: dark)').addListener(listeners.dark)
 				window.matchMedia('(prefers-color-scheme: light)').addListener(listeners.light)
 			}
+		</script>
+		<script src="./js/langs.js"></script>
+		<script src="./js/locale.js"></script>
+		<script src="./js/settings.js"></script>
+		<script src="./js/authorize.js"></script>
+		<script src="./js/submission.js"></script>
+		<script src="./js/client.js"></script>
+		<script src="./js/problem.js"></script>
+		<script src="./js/contest.js"></script>
+		<script src="./js/multi.js"></script>
+		<script>
 			$(".NavBarContent").click(function(){
 				$(".contentWrapperChosen").removeClass("contentWrapperChosen");
 				$('.' + $(this).attr("for")).addClass("contentWrapperChosen");
diff --git a/js/client.js b/js/client.js
index 0568bcb..b3a3e6a 100644
--- a/js/client.js
+++ b/js/client.js
@@ -684,6 +684,7 @@ function getSingleRatingChanges(currSingleLastTimeUpdate, un, ci){
 	}, 0)
 }
 var bigIsComing = [null, null, null, null, null, null, null];
+var singleSavedUserInfo = "";
 function getAllSingleContestantInfo(currSingleLastTimeUpdate, un, ci, success, error, S, E, loadStandings){
 	var s = 0, e = 0, c = 4;
 	var Q = 0;
@@ -691,11 +692,24 @@ function getAllSingleContestantInfo(currSingleLastTimeUpdate, un, ci, success, e
 		if(currSingleLastTimeUpdate != singleLastTimeUpdate)	return;
 		singleLoadType = 1;
 		reloadSingleMemoryUsed();
+		if(id == 2 && singleSavedUserInfo != ""){
+			var j = JSON.parse(singleSavedUserInfo);
+			for(var i=0; i<q.length; i++)
+				j = j[q[i]];
+			success[id](un, ci, j, Q);
+			if(id <= 3){
+				++s;
+				if(s + e == c)	(s == c) ? S() : E();
+			}
+			return;
+		}
 		bigIsComing[id] = $.ajax({
 			url: u,
 			type: "GET",
 			timeout : id == 5 ? settings.largeTimeLimit : settings.smallTimeLimit,
 			success: function(json){
+				if(id == 2)
+					singleSavedUserInfo = JSON.stringify(json);
 				singleLoadType = 4;
 				reloadSingleMemoryUsed();
 				for(var i=0; i<q.length; i++)
@@ -988,7 +1002,12 @@ function singleContestantSyncOfficialSettings(un, ci, json, p){
 		$(".singleContestTags").append(unk);
 	}
 	if(json.rows.length > 0 && json.rows[0].party.teamName != undefined){
-		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}</div>`);
+		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}${json.rows[0].party.teamId == -1 ? "" : " #" + json.rows[0].party.teamId}</div>`);
+		unk.attr("title", json.rows[0].party.teamName);
+		$(".singleContestTags").append(unk);
+	}
+	if(json.rows.length > 0 && json.rows[0].party.room != undefined){
+		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-house-user"></i>${localize("tagRoom")} #${json.rows[0].party.room}</div>`);
 		$(".singleContestTags").append(unk);
 	}
 	if(contestNewWinLoaded)
@@ -1052,6 +1071,7 @@ function singleContestantSyncUnofficialSettings(un, ci, json, p){
 	singleContestUnrated = "Unranked";
 	inContes = false;
 	var inTeam = false;
+	var roomId = -1, teamId = -1, teamName;
 	for(var i=0; i<json.rows.length; i++)
 		if(json.rows[i].party.participantType == "CONTESTANT"){
 			contestProblemResult = json.rows[i].problemResults;
@@ -1065,6 +1085,12 @@ function singleContestantSyncUnofficialSettings(un, ci, json, p){
 			flushsingleProblemlistBottom(json.rows[i]);
 			flushsingleProblemlistDisplayGrid(json.rows[i].problemResults, json.problems);
 			inTeam |= (json.rows[i].party.teamName != undefined);
+			if(json.rows[i].party.teamName != undefined)
+				teamName = json.rows[i].party.teamName;
+			if(json.rows[i].party.teamId != undefined)
+				teamId = json.rows[i].party.teamId;
+			if(json.rows[i].party.room != undefined)
+				roomId = json.rows[i].party.room;
 		}
 		else if(json.rows[i].party.participantType == "OUT_OF_COMPETITION"){
 			contestProblemResult = json.rows[i].problemResults;
@@ -1078,6 +1104,12 @@ function singleContestantSyncUnofficialSettings(un, ci, json, p){
 			flushsingleProblemlistBottom(json.rows[i]);
 			flushsingleProblemlistDisplayGrid(json.rows[i].problemResults, json.problems);
 			inTeam |= (json.rows[i].party.teamName != undefined);
+			if(json.rows[i].party.teamName != undefined)
+				teamName = json.rows[i].party.teamName;
+			if(json.rows[i].party.teamId != undefined)
+				teamId = json.rows[i].party.teamId;
+			if(json.rows[i].party.room != undefined)
+				roomId = json.rows[i].party.room;
 		}
 	if(!inContest){
 		flushsingleProblemlistDisplayList(contestSubmissionList, [], contestJsonProblems);
@@ -1089,8 +1121,14 @@ function singleContestantSyncUnofficialSettings(un, ci, json, p){
 		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-user-secret"></i>${localize("tag"+singleContestUnrated)}</div>`);
 		$(".singleContestTags").append(unk);
 	}
+	teamId = Number(teamId);
 	if(inContest && inTeam){
-		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}</div>`);
+		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}${teamId == -1 ? "" : ` #` + teamId}</div>`);
+		unk.attr("title", teamName);
+		$(".singleContestTags").append(unk);
+	}
+	if(roomId != -1){
+		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-house-user"></i>${localize("tagRoom")} #${roomId}</div>`);
 		$(".singleContestTags").append(unk);
 	}
 	if(contestNewWinLoaded)
@@ -1163,6 +1201,7 @@ function singleVirtualSyncUnofficialSettings(un, ci, json, p){
 	singleContestUnrated = "Virtual";
 	inContest = false;
 	var inTeam = false;
+	var teamName = -1, teamId = -1;
 	for(var i=0; i<json.rows.length; i++){
 		if(json.rows[i].party.participantType == "VIRTUAL" && json.rows[i].party.startTimeSeconds * 1000 == virtualProvidedStartTime.getTime()){
 			contestProblemResult = json.rows[i].problemResults;
@@ -1178,6 +1217,10 @@ function singleVirtualSyncUnofficialSettings(un, ci, json, p){
 			flushsingleProblemlistBottom(json.rows[i]);
 			flushsingleProblemlistDisplayGrid(json.rows[i].problemResults, json.problems);
 			inTeam |= (json.rows[i].party.teamName != undefined);
+			if(json.rows[i].party.teamName != undefined)
+				teamName = json.rows[i].party.teamName;
+			if(json.rows[i].party.teamId != undefined)
+				teamId = json.rows[i].party.teamId;
 		}
 	}
 	if(!inContest){
@@ -1198,8 +1241,10 @@ function singleVirtualSyncUnofficialSettings(un, ci, json, p){
 		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-user-secret"></i>${localize("tag"+singleContestUnrated)}</div>`);
 		$(".singleContestTags").append(unk);
 	}
+	teamId = Number(teamId);
 	if(inContest && inTeam){
-		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}</div>`);
+		var unk = $(`<div class="singleContestTag dangerColor"><i class="fas fa-users"></i>${localize("tagTeam")}${teamId == -1 ? "" : ` #` + teamId}</div>`);
+		unk.attr("title", teamName)
 		$(".singleContestTags").append(unk);
 	}
 	if(contestNewWinLoaded)
@@ -1488,6 +1533,7 @@ function singleContestantMainTrack(currSingleLastTimeUpdate, un, ci){
 	contestSubmissionList = [];
 	singleAnnouncementLength = -1;
 	inContest = false;
+	singleSavedUserInfo = "";
 	setTimeout(function(){
 		$(".singleContent > div > div > .loadingInterface > div > i").css("opacity", 0);
 		$(".singleContent > div > div > .loadingInterface > div > .popTip").addClass("closed").css("max-height", 0);
@@ -1548,6 +1594,7 @@ function singleVirtualMainTrack(currSingleLastTimeUpdate, un, ci, tm){
 	contestSubmissionList = [];
 	inContest = false;
 	contestRealEndTime = contestRealEndTime = new Date(0);
+	singleSavedUserInfo = "";
 	setTimeout(function(){
 		$(".singleContent > div > div > .loadingInterface > div > i").css("opacity", 0);
 		$(".singleContent > div > div > .loadingInterface > div > .popTip").addClass("closed").css("max-height", 0);
diff --git a/js/locale.js b/js/locale.js
index db1406c..9a96935 100644
--- a/js/locale.js
+++ b/js/locale.js
@@ -2,11 +2,11 @@ var lang_en = {
 	general: {
 		title: "Codeforces Contest Helper v2.0",
 		singleNav: "Single",
-		multiNav: "Multi",
+		multiNav: "Ranks",
 		contestNav: "Contest",
 		questionNav: "Problem",
 		infoNav: "Profile",
-		settingNav: "Settings",
+		settingNav: "Setting",
 		singleTitle: "<i class='fas fa-calendar'></i> Select Contest Type",
 		singleDivider: "OR",
 		singleContestantPointer: "Contestant",
@@ -37,6 +37,7 @@ var lang_en = {
 		tagContestant: "Contestant",
 		tagUnrated: "Unrated",
 		tagVirtual: "Virtual",
+		tagRoom: "Room",
 		Unrated: "Unrated",
 		System: "System",
 		Light: "Light",
@@ -92,6 +93,24 @@ var lang_en = {
 		contestPageRunning: "Running",
 		tagTeam: "In group",
 		redirectVerification: "<i class='fas fa-link'></i> Verify Redirection",
+		multiOverall: "All",
+		multiFriend: "Friend",
+		multiRoom: "Room",
+		usersPerPage: "Users per Page",
+		multiStatus: "Status",
+		pageIdError: "Page ID Error!",
+		ok: "OK",
+		multiContestIdError: "Contest ID Error!",
+		multiUsernameError: "Username Error!",
+		multiRoomError: "Room ID Error!",
+		fetchError: "Fetch Error!",
+		multiLoading: "Loading...",
+		multiLoadingFriends: "Loading Friend List...",
+		multiFriendsOk: "Reload Friend List",
+		multiFriendsError: "Load Friends Error!",
+		multiApiError: "API Key Required!",
+		multiNoUsers: "Empty List",
+		multiUser: "User",
 	},
 	input: {
 		singleContestantUsername: "Username",
@@ -102,6 +121,10 @@ var lang_en = {
 		search: "Search",
 		problemId: "Problem ID",
 		contestId: "Contest ID",
+		multiContestIdInput: "ID",
+		multiContestInfoInput0: "Usernames，splitted by ;",
+		multiContestInfoInput1: "Blank",
+		multiContestInfoInput2: "Room ID",
 	},
 	error: {
 		errorUsernameError: "Username Error",
@@ -137,117 +160,117 @@ var lang_en = {
 	},
 	settings: {
 		fontFamily: [
-			"<span class='fas fa-font'></span> Font Family",
+			"<span class='settingsInfoIcon fas fa-font'></span> Font Family",
 			"Use commas(,) to split font name. Monospace font can make a better view."
 		],
 		editorFontFamily: [
-			"<span class='fas fa-code'></span> Code Block Font Family",
+			"<span class='settingsInfoIcon fas fa-code'></span> Code Block Font Family",
 			"Set font family for code blocks."
 		],
 		editorFontSize: [
-			"<span class='fas fa-text-width'></span> Code Block Font Size",
+			"<span class='settingsInfoIcon fas fa-text-width'></span> Code Block Font Size",
 			"Set font size for code blocks."
 		],
 		statementFontFamily: [
-			"<span class='fas fa-clipboard-list'></span> Statement Font Family",
+			"<span class='settingsInfoIcon fas fa-clipboard-list'></span> Statement Font Family",
 			"Set font family for problem statements."
 		],
 		timeLimit: [
-			"<span class='fas fa-stopwatch'></span> Load Time Limit",
+			"<span class='settingsInfoIcon fas fa-stopwatch'></span> Load Time Limit",
 			"Time limits while fetching information. Big time limit will be used to limit standings and rating changes loader."
 		],
 		reloadTime: [
-			"<span class='fas fa-hourglass-half'></span> Information Load Time",
+			"<span class='settingsInfoIcon fas fa-hourglass-half'></span> Information Load Time",
 			"Load time between updates during the contest."
 		],
 		smallReloadTime: [
-			"<span class='fas fa-sync-alt'></span> Small Reload Time",
+			"<span class='settingsInfoIcon fas fa-sync-alt'></span> Small Reload Time",
 			"Reload time when some of the informations are not be able to be loaded."
 		],
 		mainURL: [
-			"<span class='fas fa-link'></span> Main URL",
+			"<span class='settingsInfoIcon fas fa-link'></span> Main URL",
 			"URL used while opening Codeforces links."
 		],
 		predictorURL: [
-			"<span class='fas fa-search'></span> Predictor URL",
+			"<span class='settingsInfoIcon fas fa-search'></span> Predictor URL",
 			"Address to get predicted rating changes."
 		],
 		openStandings: [
-			"<span class='fas fa-list-ol'></span> Open Standings",
+			"<span class='settingsInfoIcon fas fa-list-ol'></span> Open Standings",
 			"Select when to load the standings and hacks of a contest. <span class='red'>The data can be really large, so think twice.</span>"
 		],
 		standingsLoadingGap: [
-			"<span class='fas fa-stopwatch'></span> Standings Loading Gap",
+			"<span class='settingsInfoIcon fas fa-stopwatch'></span> Standings Loading Gap",
 			"Load time between standings updates."
 		],
 		openRankPredict: [
-			"<span class='fas fa-calculator'></span> Open Rank Calculator",
+			"<span class='settingsInfoIcon fas fa-calculator'></span> Open Rank Calculator",
 			"Select when to enable history rank calculator. <span class='red'>Standings Required.</span>"
 		],
 		problemSubmissionDirection: [
-			"<span class='fas fa-server'></span> Submission Order",
+			"<span class='settingsInfoIcon fas fa-server'></span> Submission Order",
 			"Order option of submissions for each problem."
 		],
 		problemEventDirection: [
-			"<span class='fas fa-book'></span> Event Order",
+			"<span class='settingsInfoIcon fas fa-book'></span> Event Order",
 			"Order option of events for the contest."
 		],
 		language: [
-			"<span class='fas fa-language'></span> Language",
+			"<span class='settingsInfoIcon fas fa-language'></span> Language",
 			"The language can be loaded without rebooting."
 		],
 		styleSelection: [
-			"<span class='fas fa-paint-roller'></span> Style",
+			"<span class='settingsInfoIcon fas fa-paint-roller'></span> Style",
 			"Select favourite style."
 		],
 		virtualFilter: [
-			"<span class='fas fa-filter'></span> Open Virtual Filter",
+			"<span class='settingsInfoIcon fas fa-filter'></span> Open Virtual Filter",
 			"Choose how history rank calculator deal with virtual information. Open this to remove them."
 		],
 		codeforcesApiUrl: [
-			"<span class='fas fa-exchange-alt'></span> Codeforces API URL", 
+			"<span class='settingsInfoIcon fas fa-exchange-alt'></span> Codeforces API URL", 
 			"Set the address of Codeforces APIs."
 		],
 		showProblemStatus: [
-			"<span class='fas fa-question-circle'></span> Show Problem Status Bar",
+			"<span class='settingsInfoIcon fas fa-question-circle'></span> Show Problem Status Bar",
 			"View problem status percentage under Problem mode. <span class='red'>Standings Required.</span>"
 		],
 		accountHandleOrEmail: [
-			"<span class='fas fa-user'></span> Handle or Email", ""
+			"<span class='settingsInfoIcon fas fa-user'></span> Handle or Email", ""
 		],
 		accountPassword: [
-			"<span class='fas fa-key'></span> Password", ""
+			"<span class='settingsInfoIcon fas fa-key'></span> Password", ""
 		],
 		openProblems: [
-			"<span class='fas fa-tasks'></span> Open Problems",
+			"<span class='settingsInfoIcon fas fa-tasks'></span> Open Problems",
 			`Open problems if the contest is not ended.`
 		],
 		transformPort: [
-			"<span class='fas fa-location-arrow'></span> Transform Port",
+			"<span class='settingsInfoIcon fas fa-location-arrow'></span> Transform Port",
 			"Set the ports while communicating to editors. Use commas(,) to split each port."
 		],
 		statementFontSize: [
-			"<span class='fas fa-text-width'></span> Statement Font Size",
+			"<span class='settingsInfoIcon fas fa-text-width'></span> Statement Font Size",
 			"Set font size for statements."
 		],
 		statementDefaultLanguage: [
-			"<span class='fas fa-cloud-upload-alt'></span> Submit Default Language",
+			"<span class='settingsInfoIcon fas fa-cloud-upload-alt'></span> Submit Default Language",
 			"Set default language while submitting."
 		],
 		openNotification: [
-			"<span class='fas fa-bell'></span> Open Notification",
+			"<span class='settingsInfoIcon fas fa-bell'></span> Open Notification",
 			"Choose if notifications of hacks, contest notifications or submission results should be sent."
 		],
 		useApiKeys: [
-			"<span class='fas fa-user-secret'></span> Use API Keys",
+			"<span class='settingsInfoIcon fas fa-user-secret'></span> Use API Keys",
 			"Enable to authorize APIs to fetch private informations. You can go to /settings/api to generate API keys. <span class='red'>We will not use your keys for other purposes.</span>"
 		],
 		apiKey: [
-			"<span class='fas fa-key'></span> API Key",
+			"<span class='settingsInfoIcon fas fa-key'></span> API Key",
 			"Your API key."
 		],
 		apiSecret: [
-			"<span class='fas fa-mask'></span> API Secret",
+			"<span class='settingsInfoIcon fas fa-mask'></span> API Secret",
 			"Your API secret."
 		]
 	}
@@ -256,7 +279,7 @@ var lang_zh = {
 	general: {
 		title: "Codeforces Contest Helper v2.0",
 		singleNav: "个人",
-		multiNav: "多人",
+		multiNav: "榜单",
 		contestNav: "比赛",
 		questionNav: "题目",
 		infoNav: "简介",
@@ -291,6 +314,7 @@ var lang_zh = {
 		tagContestant: "参赛者",
 		tagUnrated: "不计 Rating",
 		tagVirtual: "虚拟赛",
+		tagRoom: "房间",
 		Unrated: "Unrated",
 		System: "跟随系统",
 		Light: "亮色",
@@ -347,6 +371,23 @@ var lang_zh = {
 		contestPageRunning: "进行中",
 		tagTeam: "组队",
 		redirectVerification: "<i class='fas fa-link'></i> 重定向验证",
+		multiOverall: "所有",
+		multiFriend: "好友",
+		multiRoom: "房间",
+		multiStatus: "状态",
+		pageIdError: "页码错误！",
+		ok: "成功",
+		multiContestIdError: "比赛 ID 错误！",
+		multiUsernameError: "用户列表错误！",
+		multiRoomError: "房间 ID 错误！",
+		fetchError: "获取失败！",
+		multiLoading: "加载中...",
+		multiLoadingFriends: "加载好友列表中...",
+		multiFriendsOk: "成功加载好友列表",
+		multiFriendsError: "加载好友列表失败！",
+		multiApiError: "API Key 未配置！",
+		multiNoUsers: "列表为空",
+		multiUser: "用户",
 	},
 	input: {
 		singleContestantUsername: "用户名",
@@ -357,6 +398,12 @@ var lang_zh = {
 		search: "搜索",
 		problemId: "题目 ID",
 		contestId: "比赛 ID",
+		multiContestIdInput: "ID",
+		multiContestInfoInput0: "用户名，用 ; 分割",
+		multiContestInfoInput1: "空",
+		multiContestInfoInput2: "房间 ID",
+		usersPerPage: "每页用户数",
+		multiStatus: "状态",
 	},
 	error: {
 		errorUsernameError: "用户名错误",
@@ -393,117 +440,117 @@ var lang_zh = {
 	},
 	settings: {
 		fontFamily: [
-			"<span class='fas fa-font'></span> 字体",
-			"使用逗号进行字体名字分割。使用等宽字体会打开更好的效果。"
+			"<span class='settingsInfoIcon fas fa-font'></span> 字体",
+			"使用逗号进行字体名字分割。使用等宽字体会带来更好的效果。"
 		],
 		editorFontFamily: [
-			"<span class='fas fa-code'></span> 代码块字体",
+			"<span class='settingsInfoIcon fas fa-code'></span> 代码块字体",
 			"为代码块设置字体。"
 		],
 		editorFontSize: [
-			"<span class='fas fa-text-width'></span> 代码块字体大小",
+			"<span class='settingsInfoIcon fas fa-text-width'></span> 代码块字体大小",
 			"为代码块设置字体大小。"
 		],
 		statementFontFamily: [
-			"<span class='fas fa-clipboard-list'></span> 题目信息字体",
+			"<span class='settingsInfoIcon fas fa-clipboard-list'></span> 题目信息字体",
 			"为题目信息设置字体。"
 		],
 		timeLimit: [
-			"<span class='fas fa-stopwatch'></span> 加载时间限制",
+			"<span class='settingsInfoIcon fas fa-stopwatch'></span> 加载时间限制",
 			"加载信息时的时间限制。大时间限制将用于比赛排行榜和 Rating 变化量。"
 		],
 		reloadTime: [
-			"<span class='fas fa-hourglass-half'></span> 信息获取间隔",
+			"<span class='settingsInfoIcon fas fa-hourglass-half'></span> 信息获取间隔",
 			"比赛时获取必要信息的时间间隔。"
 		],
 		smallReloadTime: [
-			"<span class='fas fa-sync-alt'></span> 重新加载时间",
+			"<span class='settingsInfoIcon fas fa-sync-alt'></span> 重新加载时间",
 			"在重要信息没有加载成功后的等待时间。"
 		],
 		mainURL: [
-			"<span class='fas fa-link'></span> 主页地址",
+			"<span class='settingsInfoIcon fas fa-link'></span> 主页地址",
 			"打开 Codeforces 链接使用的主页地址。"
 		],
 		predictorURL: [
-			"<span class='fas fa-search'></span> 预测器地址",
+			"<span class='settingsInfoIcon fas fa-search'></span> 预测器地址",
 			"获取比赛 Rating 变化的地址。"
 		],
 		openStandings: [
-			"<span class='fas fa-list-ol'></span> 打开排行榜获取",
+			"<span class='settingsInfoIcon fas fa-list-ol'></span> 打开排行榜获取",
 			"选择何时进行排行榜和 hack 的获取。<span class='red'>因为获取的信息量会很大，所以三思而后行。</span>"
 		],
 		standingsLoadingGap: [
-			"<span class='fas fa-stopwatch'></span> 排行榜获取间隔",
+			"<span class='settingsInfoIcon fas fa-stopwatch'></span> 排行榜获取间隔",
 			"比赛时获取排行榜的时间间隔。"
 		],
 		openRankPredict: [
-			"<span class='fas fa-calculator'></span> 打开历史排名计算器",
+			"<span class='settingsInfoIcon fas fa-calculator'></span> 打开历史排名计算器",
 			"选择何时打开历史排名计算器。<span class='red'>需要排行榜信息。</span>"
 		],
 		problemSubmissionDirection: [
-			"<span class='fas fa-server'></span> 评测记录顺序",
+			"<span class='settingsInfoIcon fas fa-server'></span> 评测记录顺序",
 			"每一道题目的评测记录显示顺序。"
 		],
 		problemEventDirection: [
-			"<span class='fas fa-book'></span> 事件顺序",
+			"<span class='settingsInfoIcon fas fa-book'></span> 事件顺序",
 			"比赛的时间显示顺序。"
 		],
 		language: [
-			"<span class='fas fa-language'></span> 语言",
+			"<span class='settingsInfoIcon fas fa-language'></span> 语言",
 			"语言无需重启即可更换。"
 		],
 		styleSelection: [
-			"<span class='fas fa-paint-roller'></span> 样式",
+			"<span class='settingsInfoIcon fas fa-paint-roller'></span> 样式",
 			"选择你喜欢的样式。"
 		],
 		virtualFilter: [
-			"<span class='fas fa-filter'></span> 打开虚拟赛过滤",
+			"<span class='settingsInfoIcon fas fa-filter'></span> 打开虚拟赛过滤",
 			"选择历史排名计算器如何处理虚拟赛数据。打开此设置以去除它们。"
 		],
 		codeforcesApiUrl: [
-			"<span class='fas fa-exchange-alt'></span> Codeforces API 地址", 
+			"<span class='settingsInfoIcon fas fa-exchange-alt'></span> Codeforces API 地址", 
 			"设置获取 Codeforces API 的地址。"
 		],
 		showProblemStatus: [
-			"<span class='fas fa-question-circle'></span> 显示题目状态",
+			"<span class='settingsInfoIcon fas fa-question-circle'></span> 显示题目状态",
 			"在题目状态中显示每道题的状态比例。<span class='red'>需要排行榜信息。</span>"
 		],
 		accountHandleOrEmail: [
-			"<span class='fas fa-user'></span> 用户名或邮箱", ""
+			"<span class='settingsInfoIcon fas fa-user'></span> 用户名或邮箱", ""
 		],
 		accountPassword: [
-			"<span class='fas fa-key'></span> 密码", ""
+			"<span class='settingsInfoIcon fas fa-key'></span> 密码", ""
 		],
 		openProblems: [
-			"<span class='fas fa-tasks'></span> 打开 Problems",
+			"<span class='settingsInfoIcon fas fa-tasks'></span> 打开 Problems",
 			`在比赛没有结束的时候打开 Problems 页面。`
 		],
 		transformPort: [
-			"<span class='fas fa-location-arrow'></span> 交流端口",
+			"<span class='settingsInfoIcon fas fa-location-arrow'></span> 交流端口",
 			"设置和代码编辑器交流的端口，用逗号分割。"
 		],
 		statementFontSize: [
-			"<span class='fas fa-text-width'></span> 题面字体大小",
+			"<span class='settingsInfoIcon fas fa-text-width'></span> 题面字体大小",
 			"为题面设置字体大小。"
 		],
 		statementDefaultLanguage: [
-			"<span class='fas fa-cloud-upload-alt'></span> 默认提交语言",
+			"<span class='settingsInfoIcon fas fa-cloud-upload-alt'></span> 默认提交语言",
 			"设置提交时的默认语言。"
 		],
 		openNotification: [
-			"<span class='fas fa-bell'></span> 开启提醒",
+			"<span class='settingsInfoIcon fas fa-bell'></span> 开启提醒",
 			"选择是否发送包含 hack，比赛通知或者提交结果的提醒。"
 		],
 		useApiKeys: [
-			"<span class='fas fa-user-secret'></span> 使用 API Keys",
+			"<span class='settingsInfoIcon fas fa-user-secret'></span> 使用 API Keys",
 			"开启后可以给 API 授权以加载私人内容。你可以前往 /settings/api 生成 API Keys。<span class='red'>我们保证不会将其用于其他用途。</span>"
 		],
 		apiKey: [
-			"<span class='fas fa-key'></span> API Key",
+			"<span class='settingsInfoIcon fas fa-key'></span> API Key",
 			"你的 API key."
 		],
 		apiSecret: [
-			"<span class='fas fa-mask'></span> API Secret",
+			"<span class='settingsInfoIcon fas fa-mask'></span> API Secret",
 			"你的 API secret."
 		]
 	}
diff --git a/js/multi.js b/js/multi.js
index 547d662..7d0b0c4 100644
--- a/js/multi.js
+++ b/js/multi.js
@@ -1,9 +1,11 @@
-function loadMultiList(cid, users, room, showUnofficial, S, E){
+function loadMultiList(cid, users, room, showUnofficial, from, count, S, E){
 	var data = {};
+	data.from = from;
+	data.count = count;
 	data.contestId = cid;
 	if(users != undefined && users.length != 0)
-		data.handles = users.join(",");
-	if(room != undefined)
+		data.handles = users.join(";");
+	if(room != 0)
 		data.room = room;
 	data.showUnofficial = showUnofficial;
 	$.ajax({
@@ -17,17 +19,311 @@ function loadMultiList(cid, users, room, showUnofficial, S, E){
 		},
 		error: function(){
 			E();
+		}
+	})
+}
+function loadUserColors(users, S, E){
+	$.ajax({
+		url: generateAuthorizeURL(settings.codeforcesApiUrl + '/user.info', {handles: users.join(";")}),
+		timeout: settings.largeTimeLimit,
+		success: function(json){
+			if(json.status != "OK")
+				E();
+			else{
+				var ret = {};
+				for(var i=0; i<json.result.length; i++){
+					var q = json.result[i];
+					ret[q.handle] = ratingToClass(Number(q.rating));
+				}
+				S(ret);
+			}
+		},
+		error: function(){
+			E();
+		}
+	})
+}
+function loadFriendList(S, E){
+	$.ajax({
+		url: generateAuthorizeURL(settings.codeforcesApiUrl + '/user.friends', {}),
+		timeout: settings.largeTimeLimit,
+		success: function(json){
+			if(json.status != "OK")
+				E();
+			else
+				S(json.result);
 		},
-		xhr: function() {
-			var xhr = new XMLHttpRequest();
-			var q = 0;
-			singleLoadType = 1; reloadSingleMemoryUsed();
-			xhr.addEventListener('progress', function (e) {
-				 // (e.loaded - q);
-				 q = e.loaded;
-			});
-			return xhr;
+		error: function(){
+			E();
+		}
+	})
+}
+
+var multiPlaceholders = ["", "", ""];
+$(".multiFetchTypeSelect > div").click(function(){
+	var t = $(".multiFetchTypeSelect > div.chosen");
+	var i = $(".multiFetchTypeSelect > div").index(t);
+	multiPlaceholders[i] = $(".multiContestInfoInput").val();
+	$(".multiFetchTypeSelect > div").removeClass("chosen");
+	$(this).addClass("chosen");
+	var idx = $(".multiFetchTypeSelect > div").index(this);
+	$(".multiContestInfoInput").attr("info", "multiContestInfoInput" + idx);
+	$(".multiContestInfoInput").attr("placeholder", languageOption.input["multiContestInfoInput" + idx]);
+	$(".multiContestInfoInput").removeAttr("disabled");
+	if(idx == 1){
+		$(".multiContestInfoInput").attr("disabled", "true");
+		if(i == 1){
+			if(!settings.useApiKeys){
+				flushMultiStatusBar(localize("multiApiError"), true);
+			}
+			else{
+				flushMultiStatusBar(localize("multiLoadingFriends"), false);
+				loadFriendList(function(data){
+					flushMultiStatusBar(localize("multiFriendsOk"), false);
+					var l = data.join(";");
+					multiPlaceholders[1] = l;
+					var _t = $(".multiFetchTypeSelect > div.chosen");
+					var _i = $(".multiFetchTypeSelect > div").index(_t);
+					if(_i == 1)
+						$(".multiContestInfoInput").val(l);
+				}, function(){
+					flushMultiStatusBar(localize("multiFriendsError"), true);
+				})
+			}
+		}
+	}
+	$(".multiContestInfoInput").val(multiPlaceholders[idx]);
+});
+
+var multiCurrentPage = 1;
+
+function flushMultiStatusBar(info, error){
+	if(error)
+		$(".multiStatusBar").html("<span class='red'>" + info + "</span>");
+	else
+		$(".multiStatusBar").html(info);
+}
+function getMultiHack(x, y){
+	if(x == 0 && y == 0)
+		return "";
+	if(x == 0)
+		return `<span class='red'>-${y}</span>`;
+	if(y == 0)
+		return `<span class='green'>+${x}</span>`;
+	return `<span class='green'>+${x}</span> : <span class='red'>-${y}</span>`;
+}
+
+function multiRenderList(data){
+	if(data.rows.length == 0){
+		flushMultiStatusBar(localize("ok"), false);
+		$(".multiMask").css("display", "grid");
+		$(".multiInfoTable").css("display", "none");
+		return;
+	}
+	var userList = [];
+	for(var i=0; i<data.rows.length; i++){
+		var q = data.rows[i].party.members;
+		for(var j=0; j<q.length; j++)
+			userList.push(q[j].handle);
+	}
+	loadUserColors(userList, function(colors){
+		function calcUserBlock(un){
+			return `<div style="display: inline-block" class="${colors[un]}">${un}</div>`;
+		}
+		function getVirtualTag(u){
+			var len = Math.floor((new Date()).getTime() / 1000) - u;
+			if(len < data.contest.durationSeconds)
+				return getTimeLength(len * 1000);
+			return '#';
+		}
+		flushMultiStatusBar(localize("ok"), false);
+		$(".multiMask").css("display", "none");
+		$(".multiInfoTable").css("display", "table");
+		var hd = $(".multiInfoThead");
+		hd.html("");
+		var p = `<th>#</th><th>${localize("multiUser")}</th>`;
+		if(data.contest.type == "IOI")
+			p += `<th style='width: 2em'>=</th>`;
+		else if(data.contest.type == "ICPC")
+			p += `<th style='width: 2em'>=</th><th style='width: 4em'>&</th><th style='width: 5em'>*</th>`;
+		else
+			p += `<th style='width: 2em'>=</th><th style='width: 5em'>*</th>`;
+		for(var i=0; i<data.problems.length; i++)
+			p += `<th style='width: 4em'>${data.problems[i].index}${data.contest.type == "CF" ? `<span class='multiSmall'>${data.problems[i].points}</span>` : ""}`
+		hd.append("<tr>" + p + "</th>");
+		var bd = $(".multiInfoTbody");
+		bd.html("");
+		for(var t=0; t<data.rows.length; t++){
+			var user = data.rows[t];
+			var uList = "";
+			if(user.party.teamName != undefined)
+				uList = `<span style='color: grey; font-size: 14px'>${user.party.teamName}</span>: `;
+			var l = [];
+			for(var i=0; i<user.party.members.length; i++)
+				l.push(calcUserBlock(user.party.members[i].handle));
+			uList += l.join(", ");
+			var q = `<td>${user.party.participantType == "PRACTICE" ? "" : user.rank}</td><td class="multiTableUser">${user.party.ghost ? "<i class='fas fa-ghost'></i>" : ""}${(user.party.participantType == "PRACTICE" || user.party.participantType == "OUT_OF_COMPETITION") ? "* " : ""}${uList}${user.party.participantType == "VIRTUAL" ? `<sup>${getVirtualTag(user.party.startTimeSeconds)}</sup>` : ""}</td>`;
+			if(data.contest.type == "IOI")
+				q += `<td>${user.pointsInfo != undefined ? user.pointsInfo : user.points}</td>`;
+			else if(data.contest.type == "ICPC")
+				q += `<td>${user.points}</td><td>${user.party.participantType == "PRACTICE" ? "" : user.penalty}</td><td>${getMultiHack(user.successfulHackCount, user.unsuccessfulHackCount)}</td>`;
+			else
+				q += `<td>${user.points}</td><td>${getMultiHack(user.successfulHackCount, user.unsuccessfulHackCount)}</td>`;
+			for(var i=0; i<data.problems.length; i++){
+				var r = user.problemResults[i];
+				var s = "";
+				if(r.pointsInfo != undefined){
+					s = r.pointsInfo;
+					if(r.bestSubmissionTimeSeconds != undefined)
+						s += `<span class='multiSmall'>${getTimeLength(Number(r.bestSubmissionTimeSeconds))}</span>`;
+				}
+				else if(r.points == 0){
+					if(r.rejectedAttemptCount != 0)
+						s = '<span class="red">-' + r.rejectedAttemptCount + "</span>";
+				}
+				else if(data.contest.type == "ICPC")
+					s = `<span class='green' style="font-weight: bold">+${r.rejectedAttemptCount == 0 ? "" : r.rejectedAttemptCount}</span>${user.party.participantType == "PRACTICE" ? "" : `<span class='multiSmall'>${getTimeLength(Number(r.bestSubmissionTimeSeconds * 1000))}</span>`}`;
+				else
+					s = `<span class='green' style="font-weight: bold" title="[+${r.rejectedAttemptCount == 0 ? "" : r.rejectedAttemptCount}]">${r.points}</span>${user.party.participantType == "PRACTICE" ? "" : `<span class='multiSmall'>${getTimeLength(Number(r.bestSubmissionTimeSeconds * 1000))}</span>`}`;
+				q += `<td>${s}</td>`;
+			}
+			bd.append(`<tr class="${t % 2 == 1 ? "multiOddLine" : ""}">${q}</tr>`);
+		}
+	}, function(){
+		flushMultiStatusBar(localize("fetchError"), true);
+	})
+
+}
+
+function fetchStandingsMainTrack(){
+	flushMultiStatusBar(localize("multiLoading"), false);
+	var cid = Number($(".multiContestIdInput").val());
+	var t = $(".multiFetchTypeSelect > div.chosen");
+	var idx = $(".multiFetchTypeSelect > div").index(t);
+	var v = $(".multiContestInfoInput").val();
+	t = $(".multiUnofficialSelecter > span.chosen");
+	var sof = $(".multiUnofficialSelecter > span").index(t) == 1;
+	var pg = Number($(".multiPageSelecter > .number.chosen").html());
+	var l = (multiCurrentPage - 1) * pg + 1;
+	var uList = [];
+	var room = 0;
+	if(idx == 0){
+		var u = v.split(";");
+		var uList = [];
+		for(var i=0; i<u.length; i++)
+			if($.trim(u[i]) != "")
+				uList.push($.trim(u[i]));
+	}
+	else if(idx == 1){
+		var u = v.split(";");
+		var uList = [];
+		for(var i=0; i<u.length; i++)
+			if($.trim(u[i]) != "")
+				uList.push($.trim(u[i]));
+		if(currentLoginHandle != "")
+			uList.push(currentLoginHandle);
+	}
+	else{
+		room = Number(v);
+	}
+	loadMultiList(cid, uList, room, sof, l, pg, function(data){
+		multiRenderList(data);
+	}, function(){
+		flushMultiStatusBar(localize("fetchError"), true);
+	})
+}
+
+function multiBeforeStart(){
+	var cid = $(".multiContestIdInput").val();
+	if(!queryNumber.test(cid)){
+		flushMultiStatusBar(localize("multiContestIdError"), true);
+		return;
+	}
+	var t = $(".multiFetchTypeSelect > div.chosen");
+	var idx = $(".multiFetchTypeSelect > div").index(t);
+	var v = $(".multiContestInfoInput").val();
+	if(idx == 0){
+		var u = v.split(";");
+		var uList = [];
+		for(var i=0; i<u.length; i++)
+			if($.trim(u[i]) != "")
+				uList.push($.trim(u[i]));
+		var chk = true;
+		for(var i=0; i<uList.length; i++)
+			chk &= (uList[i].length >= 3 && uList[i].length <= 24 && queryUsrename.test(uList[i]));
+		if(!chk){
+			flushMultiStatusBar(localize("multiUsernameError"), true);
+			return;
+		}
+	}
+	else if(idx == 1){
+		;
+	}
+	else{
+		if(!queryNumber.test(v) || Number(v) == 0){
+			flushMultiStatusBar(localize("multiRoomError"), true);
+			return;
+		}
+	}
+	fetchStandingsMainTrack();
+}
+function multiPageIndexClick(){
+	var inp = $(`<input info="newPage" style="width: 100%; height: 100%; font-size: 18px; background: inherit; border: 0px; border-bottom: 1px solid grey; color: inherit; outline: 0; font-family: var(--font-family); text-align: center"></input>`);
+	function check(){
+		var val = inp.val();
+		if(!queryNumber.test(val) || Number(val) <= 0 || Number(val) > 99999){
+			inp.remove();
+			$(".multiPageIndex").append(`<span class="multiPageIndexNumber" style="cursor: pointer" onclick="multiPageIndexClick()">${multiCurrentPage}</span>`);
+			flushMultiStatusBar(localize("pageIdError"), true);
+			return;
 		}
+		flushMultiStatusBar(localize("ok"), false);
+		multiCurrentPage = Number(val);
+		inp.remove();
+		multiBeforeStart();
+		$(".multiPageIndex").append(`<span class="multiPageIndexNumber" style="cursor: pointer" onclick="multiPageIndexClick()">${multiCurrentPage}</span>`);
+	}
+	inp.bind('keydown',function(event){
+	    if(event.keyCode == "13"){
+	    	check();
+	    }
+	});
+	inp.on('blur', function(){
+		check();
 	})
+	$(".multiPageIndex span").remove();
+	$(".multiPageIndex").append(inp);
+	inp.focus();
 }
+$(".multiClickToFetch").click(function(){
+	multiCurrentPage = 1;
+	$(".multiPageIndexNumber").html(multiCurrentPage);
+	multiBeforeStart();
+})
 
+$(".multiPageSelecter > .number").click(function(){
+	$(".multiPageSelecter > .number.chosen").removeClass("chosen");
+	$(this).addClass("chosen");
+	multiCurrentPage = 1;
+	$(".multiPageIndexNumber").html(multiCurrentPage);
+	multiBeforeStart();
+})
+$(".multiUnofficialSelecter > span").click(function(){
+	$(".multiUnofficialSelecter > span").removeClass("chosen");
+	$(this).addClass("chosen");
+	multiBeforeStart();
+})
+$(".multiPagePrev").click(function(){
+	setTimeout(function(){
+		multiCurrentPage = Math.max(1, multiCurrentPage - 1);
+		$(".multiPageIndexNumber").html(multiCurrentPage);
+		multiBeforeStart();
+	}, 50);
+})
+$(".multiPageNext").click(function(){
+	setTimeout(function(){
+		multiCurrentPage = Math.min(99999, multiCurrentPage + 1);
+		$(".multiPageIndexNumber").html(multiCurrentPage);
+		multiBeforeStart();
+	}, 50);
+})
\ No newline at end of file
diff --git a/js/submission.js b/js/submission.js
index aaa97d2..46c1dce 100644
--- a/js/submission.js
+++ b/js/submission.js
@@ -92,7 +92,7 @@ function openSubmission(c, u){
 			else if($(this).hasClass("user-green"))	j.attr("class", "user-pupil");
 			else if($(this).hasClass("user-cyan"))	j.attr("class", "user-specialist");
 			else if($(this).hasClass("user-blue"))	j.attr("class", "user-expert");
-			else if($(this).hasClass("user-voilet"))	j.attr("class", "user-cmaster");
+			else if($(this).hasClass("user-violet"))	j.attr("class", "user-cmaster");
 			else if($(this).hasClass("user-orange"))	j.attr("class", "user-master");
 			else if($(this).hasClass("user-yellow"))	j.attr("class", "user-imaster");
 			else if($(this).hasClass("user-red"))		j.attr("class", "user-grandmaster");
diff --git a/package.json b/package.json
index d4a8a02..7b16203 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "single-instance": true,
     "main": "index.html",
     "chromium-args": "--disable-web-security --user-data-dir --disable-background-timer-throttling --disable-backgrounding-occluded-windows --disable-renderer-backgrounding",
-    "double_tap_to_zoom_enabled": false,
+    "double-tap-to_zoom-enabled": false,
     "webkit": {
         "page-cache": false,
         "plugin": true,