<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="wws-ship.css" />
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.main-content {
			width: 1000px;
			border-radius: 16px;
			font-family: "Microsoft YaHei";
			font-size: 30px;
		}

		.page-box {
			width: 1000px;
			display: flex;
			flex-direction: column;
		}

		.page-header {
			font-size: 40px;
			padding: 20px;
		}

		.clan-user-server {
			height: 80px;
			line-height: 80px;
			font-weight: bold;
			text-align: center;
		}

		.clan {
			display: inline-block;
			height: 80px;
			padding-right: 10px;
		}

		.server {
			display: inline-block;
			height: 80px;
			padding-left: 20px;
		}

		.username {
			display: inline-block;
			height: 80px;
		}

		.server-border {
			width: 160px;
			height: 40px;
			margin-top: 20px;
			line-height: 40px;
			text-align: center;
			background-color: #F2F2F2;
			border-radius: 20px;
			font-size: 30px;
		}

		.ship-detail {
			display: flex;
			height: 60px;
			line-height: 60px;
			font-weight: bold;
		}


		.ship-level {
			flex: 1;
			text-align: right;
			padding-right: 60px;
		}

		.ship-name {
			display: inline-block;
			height: 60px;
		}

		.ship-icon {
			flex: 1;
			padding-left: 70px;
		}

		.ship-icon img {
			width: 60px;
			height: 60px;
		}


		.ranking {
			display: flex;
			justify-content: space-around;
			align-content: space-around;
			height: 60px;
			line-height: 40px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.ranking_border {
			margin-top: 10px;
			height: 40px;
			border-radius: 28px;
			padding: 4px 20px;
			background-color: #F2F2F2;
		}

		.last-time {
			height: 60px;
			line-height: 60px;
			text-align: center;
			color: #606266;
		}

		.pr {
			display: flex;
			height: 120px;
			font-weight: bold;
			line-height: 60px;
			padding: 0 60px;
			margin-top: 20px;
		}

		.pr-bar-bg {
			position: relative;
			flex: 1;
			line-height: 80px;
			background-color: #A6A6A6;
			height: 80px;
			border-radius: 40px;
			margin-top: 10px;
			text-align: center;
			color: #FFFFFF;
		}

		.pr-bar {
			position: absolute;
			top: 0;
			left: 0;
			height: 80px;
			z-index: 1;
			border-radius: 40px;
		}

		.pr-number {
			z-index: 99;
			position: absolute;
			left: 0px;
			right: 0px;
			font-size: 35px;
			font-weight: bold;
		}

		.data-change {
			margin: 10px 60px;
			height: 120px;
			display: flex;
			flex-direction: column;
			background-color: #F2F2F2;
			border-radius: 15px;
			font-weight: bold;
		}

		.change-header {
			flex: 1;
			display: flex;
			background-color: #D9D9D9;
			border-radius: 15px;
			color: #606266;
		}

		.change-body {
			flex: 1;
			display: flex;
		}

		.change-header-item,
		.change-body-item {
			flex: 1;
			text-align: center;
			line-height: 60px;
		}

		.ship-overview {
			margin: 10px 50px;
			height: 420px;
			display: flex;
			flex-direction: column;
		}

		.overview-col {
			flex: 1;
			display: flex;
		}

		.overview-item {
			flex: 1;
			background-color: #F2F2F2;
			border-radius: 15px;
			margin: 10px;
			display: flex;
			flex-direction: column;
			font-size: 40px;
			font-weight: bold;
		}

		.overview-item-title {
			height: 95px;
			line-height: 125px;
			text-align: center;
			color: #606266;
		}

		.overview-item-data {
			height: 95px;
			line-height: 65px;
			text-align: center;
		}




		.information-header {
			width: 680px;
			margin: 20px 160px;
			height: 60px;
			line-height: 60px;
			font-weight: bold;
			text-align: center;
			background-color: #BFBFBF;
			border-radius: 15px;
		}

		.information-body {
			width: 880px;
			margin: 0 60px;
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			font-weight: bold;
			background-color: #F2F2F2;
			border-radius: 15px;
		}

		.information-body-top {
			display: flex;
			background-color: #D9D9D9;
			border-radius: 8px;
			color: #606266;
		}

		.information-item {
			height: 60px;
			line-height: 60px;
			flex: 1;
			text-align: center;
		}

		.information-body-data {
			display: flex;
			border-radius: 8px;
		}

		.ship-highest-header {
			height: 60px;
			line-height: 60px;
			width: 680px;
			margin: 40px 160px 20px 160px;
			font-weight: bold;
			text-align: center;
			background-color: #BFBFBF;
			border-radius: 15px;
		}

		.ship-highest-data {
			width: 900px;
			margin: 20px 50px;
			display: flex;
			flex-direction: column;
		}

		.high-col {
			display: flex;
			justify-content: space-around;
		}

		.high-item {
			flex: 1;
			height: 120px;
			line-height: 100px;
			background-color: #F2F2F2;
			border-radius: 8px;
			display: flex;
			flex-direction: column;
			margin: 10px;
		}

		.high-item-top {
			height: 60px;
			line-height: 70px;
			font-weight: bold;
			color: #606266;
			text-align: center;
		}

		.high-item-bottom {
			height: 60px;
			line-height: 50px;
			font-weight: bold;
			text-align: center;
		}

		.footer {
			text-align: center;
			font-weight: bold;
			font-size: 24px;
			color: #909399;
			margin-bottom: 20px;
		}
	</style>
	<body>
		<div class="main-content">
			<div class="page-box">
				<div class="page-header">

						<div class="clan-user-server">
					 	{% if data['clanInfo']['tag'] %}
							<div class="clan" style="color: {{ data['clanInfo']['colorRgb'] }};">
								[{{ data['clanInfo']['tag'] }}]</div>
						{% endif %}
							<div class="username">{{ data['userName'] }}</div>
							<div class="server">
								<!-- 动态设置服务器字体颜色 -->
								<div class="server-border">{{ data['serverName'] }}</div>
							</div>
						</div>

						<div class="ship-detail">
							{% if data['shipInfo']['shipInfo']['nameCn'] %}
							<div class="ship-level">{{ data['shipInfo']['shipInfo']['level'] }}</div>
							{% else %}
							<div class="ship-level">{{ data['rankSolo']['shipInfo']['level'] }}</div>
							{% endif %}

							{% if data['shipInfo']['shipInfo']['nameCn'] %}
							<div class="ship-name">{{ data['shipInfo']['shipInfo']['nameCn'] }}</div>
							{% else %}
							<div class="ship-name">{{ data['rankSolo']['shipInfo']['nameCn'] }}</div>
							{% endif %}
							<div class="ship-icon"><img
									src={% if data['shipInfo']['shipInfo']['shipType'] == 'Destroyer' or data['rankSolo']['shipInfo']['shipType'] == 'Destroyer' %} "https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_destroyer.png"
									{% elif data['shipInfo']['shipInfo']['shipType'] == 'Cruiser' or data['rankSolo']['shipInfo']['shipType'] == 'Cruiser' %} "https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_cruiser.png"
									{% elif data['shipInfo']['shipInfo']['shipType'] == 'Battleship' or data['rankSolo']['shipInfo']['shipType'] == 'Battleship' %} "https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_battleship.png"
									{% elif data['shipInfo']['shipInfo']['shipType'] == 'AirCarrier' or data['rankSolo']['shipInfo']['shipType'] == 'AirCarrier' %} "https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_aircarrier.png"
									{% else %} "https://hikari-resource.oss-cn-shanghai.aliyuncs.com/shipType_Icon/icon_sunk_submarine.png"
									{% endif %} /></div>
						</div>
					</div>

					<div class="pr">
						<!-- 动态设置长度及颜色，填写PR即可 -->
						<div class="pr-bar-bg">
							{% if data['shipInfo']['pr']['color'] and data['shipInfo']['pr']['color'] != '#828282' %}
							<span class="pr-number">{{ data['shipInfo']['pr']['value'] }} &nbsp;&nbsp;&nbsp;&nbsp;<span
									class="pr-text"></span></span>
							{% else %}
							<span class="pr-number">{{ data['rankSolo']['pr']['value'] }} &nbsp;&nbsp;&nbsp;&nbsp;<span
									class="pr-text"></span></span>
							{% endif %}
							<div class="pr-bar"></div>
						</div>
					</div>
					
					<div class="last-time">
						<span>最后战斗时间：</span><span>{{ time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(abs(data['shipInfo']['lastBattlesTime']))) }}</span>
					</div>
					
					{% if shipRank %}
					<div class="ranking">
						<div class="ranking_border"><span
								style="color: #606266;">排名</span>&nbsp;&nbsp;<span>{{shipRank}}</span>
						</div>
					</div>
					{% endif %}
					{% if data['rank'] != -1 %}
					<div class="ranking">
						<div class="ranking_border"><span
								style="color: #606266;">排名</span>&nbsp;&nbsp;<span>{{data['rank']}}</span>
						</div>
					</div>
					{% endif %}

					<div class="data-change">
						<div class="change-header">
							<div class="change-header-item">场均</div>
							<div class="change-header-item">胜率</div>
							<div class="change-header-item">PR</div>
						</div>
						<div class="change-body">
							<div class="change-body-item change-avgdmg">
								{{ '%+d' | format(data['dwpDataVO']['damage']) }}</div>
							<div class="change-body-item change-win">{{ '%+.2f' | format(data['dwpDataVO']['wins']) }}
							</div>
							<div class="change-body-item change-pr">{{ '%+d' | format(data['dwpDataVO']['pr']) }}</div>
						</div>
					</div>

					<div class="ship-overview">
						<div class="overview-col">
							<div class="overview-item">
								<div class="overview-item-title">场次</div>
								<div class="overview-item-data">{{ data['shipInfo']['battles'] }}</div>
							</div>
							<div class="overview-item">
								<div class="overview-item-title">胜率</div>
								<div class="overview-item-data"
									style="color: {{ data['shipInfo']['winsData']['color'] }};">
									{{ data['shipInfo']['wins'] }}%</div>
							</div>
							<div class="overview-item">
								<div class="overview-item-title">场均</div>
								<div class="overview-item-data"
									style="color: {{ data['shipInfo']['damageData']['color'] }};">
									{{ data['shipInfo']['damage'] }}</div>
							</div>
						</div>
						<div class="overview-col">
							<div class="overview-item">
								<div class="overview-item-title">经验</div>
								<div class="overview-item-data">{{ data['shipInfo']['xp'] }}</div>
							</div>
							<div class="overview-item">
								<div class="overview-item-title">击杀</div>
								<div class="overview-item-data">{{ '%.2f' | format(data['shipInfo']['frags']) }}</div>
							</div>
							<div class="overview-item">
								<div class="overview-item-title">命中</div>
								<div class="overview-item-data">{{ data['shipInfo']['hit'] }}%</div>
							</div>
						</div>
					</div>

					<div class="information-header">
						总体战绩
					</div>

					<div class="information-body">
						<div class="information-body-top">
							<div class="information-item">类型</div>
							<div class="information-item">场次</div>
							<div class="information-item">胜率</div>
							<div class="information-item">PR</div>
							<div class="information-item">场均</div>
							<div class="information-item">击杀</div>
						</div>

						{% if data['shipSolo']['battles'] %}
						<div class="information-body-data">
							<div class="information-item" style="color: #909399;">单野</div>
							<div class="information-item">{{ data['shipSolo']['battles'] }}</div>
							<div class="information-item" style="color: {{ data['shipSolo']['winsData']['color'] }};">
								{{ data['shipSolo']['wins'] }}%</div>
							<div class="information-item" style="color: {{ data['shipSolo']['pr']['color'] }};">
								{{ data['shipSolo']['pr']['value'] }}</div>
							<div class="information-item"
								style="color: {{ data['shipSolo']['damageData']['color'] }};">
								{{ data['shipSolo']['damage'] }}</div>
							<div class="information-item">{{ '%.2f' | format(data['shipSolo']['frags']) }}</div>
						</div>
						{% endif %}
						{% if data['shipTwo']['battles'] %}
						<div class="information-body-data">
							<div class="information-item" style="color: #909399;">自行车</div>
							<div class="information-item">{{ data['shipTwo']['battles'] }}</div>
							<div class="information-item" style="color: {{ data['shipTwo']['winsData']['color'] }};">
								{{ data['shipTwo']['wins'] }}%</div>
							<div class="information-item" style="color: {{ data['shipTwo']['pr']['color'] }};">
								{{ data['shipTwo']['pr']['value'] }}</div>
							<div class="information-item"
								style="color: {{ data['shipTwo']['damageData']['color'] }};">
								{{ data['shipTwo']['damage'] }}</div>
							<div class="information-item">{{ '%.2f' | format(data['shipTwo']['frags']) }}</div>
						</div>
						{% endif %}
						{% if data['shipThree']['battles'] %}
						<div class="information-body-data">
							<div class="information-item" style="color: #909399;">三轮车</div>
							<div class="information-item">{{ data['shipThree']['battles'] }}</div>
							<div class="information-item" style="color: {{ data['shipThree']['winsData']['color'] }};">
								{{ data['shipThree']['wins'] }}%</div>
							<div class="information-item" style="color: {{ data['shipThree']['pr']['color'] }};">
								{{ data['shipThree']['pr']['value'] }}</div>
							<div class="information-item"
								style="color: {{ data['shipThree']['damageData']['color'] }};">
								{{ data['shipThree']['damage'] }}</div>
							<div class="information-item">{{ '%.2f' | format(data['shipThree']['frags']) }}</div>
						</div>
						{% endif %}
						{% if data['rankSolo']['battles'] %}
						<div class="information-body-data">
							<div class="information-item" style="color: #909399;">排位</div>
							<div class="information-item">{{ data['rankSolo']['battles'] }}</div>
							<div class="information-item" style="color: {{ data['rankSolo']['winsData']['color'] }};">
								{{ data['rankSolo']['wins'] }}%</div>
							<div class="information-item" style="color: {{ data['rankSolo']['pr']['color'] }};">
								{{ data['rankSolo']['pr']['value'] }}</div>
							<div class="information-item"
								style="color: {{ data['rankSolo']['damageData']['color'] }};">
								{{ data['rankSolo']['damage'] }}</div>
							<div class="information-item">{{ '%.2f' | format(data['rankSolo']['frags']) }}</div>
						</div>
						{% endif %}
					</div>

					<div class="ship-highest-header">
						最高纪录
					</div>

					<div class="ship-highest-data">
						<div class="high-col">
							<div class="high-item">
								<div class="high-item-top">最高伤害</div>
								<div class="high-item-bottom">{{ data['shipInfo']['extensionDataInfo']['maxDamage'] }}
								</div>
							</div>
							<div class="high-item">
								<div class="high-item-top">侦察伤害</div>
								<div class="high-item-bottom">
									{{ data['shipInfo']['extensionDataInfo']['maxDamageScouting'] }}</div>
							</div>
							<div class="high-item">
								<div class="high-item-top">最高潜在</div>
								<div class="high-item-bottom">
									{{ data['shipInfo']['extensionDataInfo']['maxTotalAgro'] }}</div>
							</div>
						</div>
						<div class="high-col">
							<div class="high-item">
								<div class="high-item-top">经验</div>
								<div class="high-item-bottom">{{ data['shipInfo']['extensionDataInfo']['maxXp'] }}</div>
							</div>
							<div class="high-item">
								<div class="high-item-top">击杀</div>
								<div class="high-item-bottom">{{ data['shipInfo']['extensionDataInfo']['maxFrags'] }}
								</div>
							</div>
							<div class="high-item">
								<div class="high-item-top">飞机击落</div>
								<div class="high-item-bottom">
									{{ data['shipInfo']['extensionDataInfo']['maxPlanesKilled'] }}</div>
							</div>
						</div>
					</div>

					<div class="footer">
						<p>© 西行寺雨季&nbsp;&nbsp;© 本心</p>
						<p>https://github.com/benx1n/HikariBot</p>
						<p>QQ频道搜索”yuyuko”即可使用稳定的腾讯官方机器人~</p>
						<p>Design By 冷眠 H5 Converted By C1ystal</p>
						<p>赞助鸣谢：男人们的定远号、Wishing</p>
					</div>
				</div>
			</div>
	</body>
	<script>
		// 胜率条颜色动态变化
		let bar_bg_width = document.querySelector('.pr-bar-bg').clientWidth;
		let pr_number = document.querySelector('.pr-number').innerText;
		pr_number = parseInt(pr_number);
		if (pr_number == 0) {
			document.querySelector(".pr-bar").style.backgroundColor = "#828282";
			document.querySelector(".pr-text").innerText = "暂无数据";
		} else if (pr_number < 750) {
			document.querySelector(".pr-bar").style.backgroundColor = "#F44336";
			document.querySelector(".pr-text").innerText = "还需努力";
		} else if (pr_number < 1100) {
			document.querySelector(".pr-bar").style.backgroundColor = "#FF9800";
			document.querySelector(".pr-text").innerText = "低于平均";
		} else if (pr_number < 1350) {
			document.querySelector(".pr-bar").style.backgroundColor = "#FFC107";
			document.querySelector(".pr-text").innerText = "平均水平";
			document.querySelector(".pr-number").style.color = "#303133";
		} else if (pr_number < 1550) {
			document.querySelector(".pr-bar").style.backgroundColor = "#8BC34A";
			document.querySelector(".pr-text").innerText = "好";
		} else if (pr_number < 1750) {
			document.querySelector(".pr-bar").style.backgroundColor = "#4CAF50";
			document.querySelector(".pr-text").innerText = "很好";
		} else if (pr_number < 2100) {
			document.querySelector(".pr-bar").style.backgroundColor = "#00BCD4";
			document.querySelector(".pr-text").innerText = "非常好";
		} else if (pr_number < 2450) {
			document.querySelector(".pr-bar").style.backgroundColor = "#9C27B0";
			document.querySelector(".pr-text").innerText = "大佬水平";
		} else {
			document.querySelector(".pr-bar").style.backgroundColor = "#673AB7";
			document.querySelector(".pr-text").innerText = "神佬水平";
			pr_number = 2450; //防止pr条溢出
		}

		if (pr_number < 220 && pr_number > 0) {
			pr_number = 220; //防止pr过低导致圆角异常
		}
		// 胜率条动态长度
		let width = bar_bg_width * (pr_number / 2450);
		document.querySelector('.pr-bar').style.width = width + "px";
	</script>

	<script>
		// 服务器字体颜色自动填充
		let server_name = document.querySelector(".server").innerText;
		if (server_name == "亚服") {
			document.querySelector(".server").style.color = "#92D050";
		} else if (server_name == "国服") {
			document.querySelector(".server").style.color = "#BF9000";
		} else if (server_name == "欧服") {
			document.querySelector(".server").style.color = "#009664";
		} else if (server_name == "美服") {
			document.querySelector(".server").style.color = "#6872C4";
		} else if (server_name == "俄服") {
			document.querySelector(".server").style.color = "#FF0000";
		}
	</script>

	<script>
		// 数据变化动态颜色填充
		let change_avgdmg = document.querySelector(".change-avgdmg").innerText;
		change_avgdmg = parseInt(change_avgdmg);

		let change_win = document.querySelector(".change-win").innerText;
		change_win = change_win.split("%", 1);
		change_win = parseFloat(change_win);

		let change_pr = document.querySelector(".change-pr").innerText;
		change_pr = parseInt(change_pr);

		if (change_avgdmg > 0) {
			document.querySelector(".change-avgdmg").style.color = "#70AD47";
		} else {
			document.querySelector(".change-avgdmg").style.color = "#FF0000";
		}

		if (change_win > 0) {
			document.querySelector(".change-win").style.color = "#70AD47";
		} else {
			document.querySelector(".change-win").style.color = "#FF0000";
		}

		if (change_pr > 0) {
			document.querySelector(".change-pr").style.color = "#70AD47";
		} else {
			document.querySelector(".change-pr").style.color = "#FF0000";
		}
	</script>

	<script>
		let ship_level = document.querySelector(".ship-level").innerText;
		let level_number = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
		let level_roma = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "★"];
		let ship_level_roma = level_roma[level_number.indexOf(ship_level)]
		document.querySelector(".ship-level").innerText = ship_level_roma;
	</script>
	
</html>
