175 lines
4.3 KiB
HTML
175 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<style>
|
||
html,
|
||
body {
|
||
width: auto;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #1a1a1a;
|
||
}
|
||
body {
|
||
font-family: "Segoe UI", Arial, sans-serif;
|
||
color: #ffffff;
|
||
padding: 15px;
|
||
box-sizing: border-box;
|
||
width: fit-content;
|
||
max-width: 600px;
|
||
}
|
||
.header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 8px 12px;
|
||
background: #2a2a2a;
|
||
border-radius: 5px;
|
||
margin-bottom: 12px;
|
||
width: calc(100% - 24px);
|
||
}
|
||
.header-title {
|
||
font-size: 1.3em;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.matches-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
.match-card {
|
||
background: #2a2a2a;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
width: calc(100% - 20px);
|
||
}
|
||
/* 胜利/失败指示条 */
|
||
.match-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 5px;
|
||
}
|
||
.match-card.win::before {
|
||
background: linear-gradient(to right, #4caf50, #8bc34a);
|
||
}
|
||
.match-card.lose::before {
|
||
background: linear-gradient(to right, #f44336, #ff9800);
|
||
}
|
||
.match-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.match-time {
|
||
font-size: 0.8em;
|
||
color: #aaaaaa;
|
||
}
|
||
.match-details {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.hero-img {
|
||
width: 60px;
|
||
height: 34px;
|
||
border-radius: 3px;
|
||
margin-right: 10px;
|
||
object-fit: cover;
|
||
}
|
||
.match-stats {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
}
|
||
.kda {
|
||
font-weight: bold;
|
||
font-size: 1.1em;
|
||
margin-bottom: 3px;
|
||
}
|
||
.match-info {
|
||
display: flex;
|
||
gap: 12px;
|
||
font-size: 0.9em;
|
||
color: #dddddd;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.match-duration,
|
||
.match-party,
|
||
.match-rank {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
.match-duration::before {
|
||
content: "️";
|
||
margin-right: 3px;
|
||
}
|
||
.match-party::before {
|
||
content: "";
|
||
margin-right: 3px;
|
||
}
|
||
.match-rank::before {
|
||
content: "";
|
||
margin-right: 3px;
|
||
}
|
||
.win-text {
|
||
color: #4caf50;
|
||
}
|
||
.lose-text {
|
||
color: #f44336;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div class="header-title">{{ player_name }}的最近比赛</div>
|
||
</div>
|
||
|
||
<div class="matches-container">
|
||
{% for match in matches %}
|
||
<div class="match-card {% if match.win %}win{% else %}lose{% endif %}">
|
||
<div class="match-header">
|
||
<div
|
||
class="match-result {% if match.win %}win-text{% else %}lose-text{% endif %}"
|
||
>
|
||
{% if match.win %}胜利{% else %}失败{% endif %}
|
||
</div>
|
||
<div class="match-time">{{ match.end_time_formatted }}</div>
|
||
</div>
|
||
<div class="match-details">
|
||
<img
|
||
class="hero-img"
|
||
src="{{ match.hero_img }}"
|
||
alt="{{ match.hero_name }}"
|
||
/>
|
||
<div class="match-stats">
|
||
<div class="kda">
|
||
{{ match.kills }} / {{ match.deaths }} / {{ match.assists }}
|
||
</div>
|
||
<div class="match-info">
|
||
<div class="match-duration">{{ match.duration_formatted }}</div>
|
||
{% if match.party_size %}
|
||
<div class="match-party">
|
||
{% if match.party_size == 1 %} 单排 {% else %} {{
|
||
match.party_size }}黑 {% endif %}
|
||
</div>
|
||
{% endif %} {% if match.average_rank %}
|
||
<div class="match-rank">{{ match.average_rank }}</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</body>
|
||
</html>
|