PaiGramTeam/MibooGram
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/MibooGram.git synced 2024-11-21 14:48:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Refacor web card layout & syle

Browse Source
This commit is contained in:
CWorld 2024-07-07 22:39:02 +08:00 committed by GitHub
parent 3e1f5ac5af
commit bd4794eb26
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 579 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -36,9 +36,8 @@ For contributors using WSL2 on Ubuntu 22.04, follow the [detailed guide here](/d
#### 1. Clone PaiGram from Git
```bash
git clone git@github.com:PaiGramTeam/PaiGram.git
git clone git@github.com:PaiGramTeam/PaiGram.git --recurse-submodules
cd PaiGram/
git submodule update --init --recursive
```
#### 2. Project Setup

3
docs/README_ZH.md
View File

@ -34,9 +34,8 @@
#### 1. 从 Git 克隆 PaiGram
```bash
git clone git@github.com:PaiGramTeam/PaiGram.git
git clone git@github.com:PaiGramTeam/PaiGram.git --recurse-submodules
cd PaiGram/
git submodule update --init --recursive
```
#### 2. 项目设置

63
resources/js/tailwindcss-3.1.8.js
View File

File diff suppressed because one or more lines are too long

62
resources/js/tailwindcss-3.4.4.js Normal file
View File

File diff suppressed because one or more lines are too long

129
resources/zzz/avatar_list/main.html
View File

@ -1,23 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>Avatar List</title>
<link type="text/css" href="./style.css" rel="stylesheet" />
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
<script src="../../js/tailwindcss-3.1.8.js"></script>
<script src="../../js/tailwindcss-3.4.4.js"></script>
</head>
<body>
<div class="container flex flex-col justify-center p-6">
<div class="header rounded-xl p-2 mb-6" style='background-image: url("{{ background }}") '>
<div class="frame rounded-lg border-solid border-2 bg-contain p-4 flex items-center">
<img class="w-28 h-28 rounded-full mr-4" src="{{ avatar }}" alt="Avatar">
<div
class="header rounded-xl p-2 mb-6"
style='background-image: url("{{ background }}") '
>
<div
class="frame rounded-lg border-solid border-2 bg-contain p-4 flex items-center"
>
<img
class="w-28 h-28 rounded-full mr-4"
src="{{ avatar }}"
alt="Avatar"
/>
<div>
<div class="uid text-xl italic px-2">UID: {{ uid }}</div>
</div>
</div>
</div>
<div class="content rounded-xl overflow-hidden flex flex-col justify-center">
<div
class="content rounded-xl overflow-hidden flex flex-col justify-center"
>
<table class="table text-center border-collapse">
<thead>
<tr>
@ -35,82 +46,75 @@
</tr>
</thead>
<tbody>
{% for avatar_data in avatar_datas %}
{% set equipment = avatar_data.equipment %}
{% if avatar_data.rarity == 5 %}
{% set row_bg = 'gold' %}
{% else %}
{% set row_bg = 'nongold' %}
{% endif %}
{% if equipment != none %}
{% set equip_star = equipment.rarity %}
{% else %}
{% set equip_star = '' %}
{% endif %}
{% for avatar_data in avatar_datas %} {% set equipment =
avatar_data.equipment %} {% if avatar_data.rarity == 5 %} {% set
row_bg = 'gold' %} {% else %} {% set row_bg = 'nongold' %} {% endif
%} {% if equipment != none %} {% set equip_star = equipment.rarity
%} {% else %} {% set equip_star = '' %} {% endif %}
<tr class="h-8 border border-b">
<td class="text-right {{row_bg}}">{{ start_id + loop.index }}</td>
<td class="role {{row_bg}}">
<img class="h-8 pl-2 img-drop-shadow" src="{{ avatar_data.icon }}"/>
<img
class="h-8 pl-2 img-drop-shadow"
src="{{ avatar_data.icon }}"
/>
</td>
<td class="role text-left {{row_bg}}">{{ avatar_data.name }}</td>
<td>{{ avatar_data.level }}</td>
<td
{% set constellation = avatar_data.eidolon %}
{% if constellation != 0 %}
{%
set
constellation="avatar_data.eidolon"
%}
{%
if
constellation
!="0"
%}
class="color {{ ['green', 'cyan', 'blue', 'purple', 'pink', 'red'][constellation - 1] }}"
{% endif %}
{%
endif
%}
>
<span class="number role inline-block"
>{{ constellation }}</span
>
<span class="number role inline-block">{{ constellation }}</span>
<div class="role bg"></div>
</td>
{% for skill in avatar_data.skills %}
{% set talent_style = 'talent' %}
{% set skill_level = skill.level %}
{% if skill_level < 4 %}
{% set talent_style = talent_style + ' talent-level-first' %}
{% endif %}
{% if skill.max_level == skill.level %}
{% if loop.index == 1 %}
{% set talent_max_style = " talent-level-max" %}
{% else %}
{% set talent_max_style = " talent-level-max-img" %}
{% endif %}
{% set talent_style = talent_style + talent_max_style %}
{% endif %}
{% if skill.max_level != skill.level %}
{% if skill_level < 4 %}
{% set talent_style = talent_style + ' talent-level-1' %}
{% elif skill_level < 6 %}
{% set talent_style = talent_style + ' talent-level-2' %}
{% elif skill_level < 9 %}
{% set talent_style = talent_style + ' talent-level-3' %}
{% else %}
{% set talent_style = talent_style + ' talent-level-4' %}
{% endif %}
{% endif %}
{% for skill in avatar_data.skills %} {% set talent_style =
'talent' %} {% set skill_level = skill.level %} {% if skill_level
< 4 %} {% set talent_style = talent_style + ' talent-level-first'
%} {% endif %} {% if skill.max_level == skill.level %} {% if
loop.index == 1 %} {% set talent_max_style = " talent-level-max"
%} {% else %} {% set talent_max_style = " talent-level-max-img" %}
{% endif %} {% set talent_style = talent_style + talent_max_style
%} {% endif %} {% if skill.max_level != skill.level %} {% if
skill_level < 4 %} {% set talent_style = talent_style + '
talent-level-1' %} {% elif skill_level < 6 %} {% set talent_style
= talent_style + ' talent-level-2' %} {% elif skill_level < 9 %}
{% set talent_style = talent_style + ' talent-level-3' %} {% else
%} {% set talent_style = talent_style + ' talent-level-4' %} {%
endif %} {% endif %}
<td class="{{ talent_style }}">{{ skill.level }}</td>
{% endfor %}
{% if equipment != none %}
{% endfor %} {% if equipment != none %}
<td class="weapon-{{ equip_star }}-star text-left pl-3">
{% if equipment.level < 10 %}
Lv.{{ equipment.level }}
{% else %}
Lv.{{ equipment.level }}
{% endif %}
{% if equipment.level < 10 %} Lv.{{ equipment.level }} {% else
%} Lv.{{ equipment.level }} {% endif %}
</td>
<td class="weapon-{{ equip_star }}-star color border-none {{ ['green', 'cyan', 'blue', 'purple', 'red'][equipment.eidolon - 1] }}">
<td
class="weapon-{{ equip_star }}-star color border-none {{ ['green', 'cyan', 'blue', 'purple', 'red'][equipment.eidolon - 1] }}"
>
<span class="weapon number">{{ equipment.eidolon }}</span>
<div class="weapon bg p-1">
<div class="frame-border border-solid border"></div>
</div>
</td>
<td class="weapon weapon-{{ equip_star }}-star">
<img class="h-8 pl-1" src="{{ equipment.icon }}" alt="weapon">
<img class="h-8 pl-1" src="{{ equipment.icon }}" alt="weapon" />
</td>
<td class="weapon-{{ equip_star }}-star text-left">
{{ equipment.name }}
</td>
<td class="weapon-{{ equip_star }}-star text-left">{{ equipment.name }}</td>
{% else %}
<td colspan="4"></td>
{% endif %}
@ -121,7 +125,8 @@
<div class="notice">
{% if has_more %}
<div>
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>: <code>/avatars all</code>、<code>全部练度统计</code>
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>:
<code>/avatars all</code>、<code>全部练度统计</code>
</div>
{% endif %}
</div>

202
resources/zzz/daily_note/daily_note.css
View File

@ -13,111 +13,159 @@
color: white;
}
:root {
--in-shadow: inset 1px 1px 1px #1e1f20b4, inset -1px -1px 1px #dfd8d1a9;
--out-shadow: inset -1px -1px 1px #1e1f208e, inset 1px 1px 1px #dfd8d138;
}
.title :where(.id, .day),
.stamina .main {
background-color: #080808;
outline: 1.5px solid #000000;
border: 2.5px solid #424242;
border-radius: 100px;
}
body {
width: 400px;
height: 365px;
font-size: 16px;
font-family: "tttgbnumber", system-ui;
transform: scale(1.5);
transform-origin: 0 0;
color: #1e1f20;
background: url("../../img/home.png");
background-size: 100% 100%;
}
.container {
width: 400px;
height: 365px;
background: url("../../img/home.png");
background-size: 100% 100%;
padding: 8px 16px;
position: relative;
background: transparent;
margin: 2rem 1.2rem;
background-color: #2e2e2e;
border-radius: 18px;
padding: 1.2rem;
padding-top: 4.3rem;
border: 3px solid #1e1f20;
box-shadow: var(--out-shadow);
display: flex;
column-gap: 1rem;
font-weight: bold;
}
.title {
position: absolute;
top: 1.2rem;
width: calc(100% - 2.4rem);
display: flex;
position: relative;
margin-bottom: 9px;
color: #504c49;
display: flex;
justify-content: space-between;
}
.title * {
color: #ffffff;
}
.title .id {
flex: 1;
line-height: 18px;
padding-left: 10px;
padding-right: 0.2rem;
}
.title .id:before {
content: " ";
position: absolute;
width: 5px;
height: 24px;
.title span {
display: inline-block;
padding: 0.3rem 0.5rem;
line-height: 16px;
}
.title .id-head {
border-radius: 1px;
left: 0px;
top: -3px;
background: #d3bc8d;
background: linear-gradient(#ffdc00, #ce7016);
outline: 2.5px solid #303030;
border-radius: 100px;
color: #1d1f1e;
}
.title .day {
line-height: 18px;
font-size: 13px;
line-height: 16px;
padding: 0.3rem 0.7rem;
}
.stamina {
background: url("../../img/home.png");
box-shadow: var(--in-shadow);
flex-basis: 45%;
border-radius: 12px;
outline: 1.5px solid #000000;
border: 2.5px solid #424242;
padding: 0.9rem 0.6rem;
padding-top: 1.2rem;
display: flex;
flex-direction: column;
row-gap: 0.4rem;
text-align: end;
}
.stamina .main {
display: flex;
justify-content: space-between;
padding: 0.2rem 0.7rem 0;
margin-bottom: 0.4rem;
}
.stamina .main .icon {
width: 25px;
height: 25px;
transform: scale(1.7);
}
.stamina .count span {
color: #b8b8b8;
}
.stamina .count .count-cur {
color: #ffffff;
}
.stamina .datail {
font-size: 11px;
}
.list {
flex-basis: 55%;
display: flex;
flex-direction: column;
row-gap: 0.3rem;
background-color: #080808;
border-radius: 12px;
box-shadow: var(--in-shadow);
justify-content: center;
}
.item {
border: 1px solid #dfd8d1;
border-radius: 15px 15px 15px 15px;
display: flex;
height: 49px;
margin-top: 5px;
}
.item .main {
display: flex;
flex: 1;
/*background-color: #f5f1eb;*/
position: relative;
/* font-weight: bold; */
}
.item .main .bg {
width: 100px;
height: 100%;
position: absolute;
left: 0;
/*background-size: 100% auto;*/
/*background-image: url(./items/bg.png);*/
}
.item .main .icon {
width: 25px;
height: 25px;
margin: 11px 8px 0 8px;
}
.item .main .info {
padding-top: 7px;
}
.item .main .info .name {
font-size: 14px;
/* color: #5f5f5d; */
line-height: 1;
margin-bottom: 7px;
}
.item .main .info .time {
font-size: 12px;
/* font-weight: 400; */
color: sandybrown;
line-height: 1;
}
.item .right {
/* border: 1px solid #dfd8d1; */
display: flex;
padding: 0.2rem 0.8rem;
column-gap: 0.4rem;
font-size: 11px;
line-height: 25px;
align-items: center;
justify-content: center;
width: 96px;
height: 100%;
/*background-color: #ece3d8;*/
font-size: 16px;
color: #504c49;
line-height: 55px;
}
.item .right .red {
color: #f24e4c;
.item .icon {
width: 20px;
height: 20px;
}
.item .name {
font-size: 11px;
color: #b8b8b8;
flex: 1;
}
.container .red {
background-image: linear-gradient(#fca804, #fb3b01);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
}

110
resources/zzz/daily_note/daily_note.jinja2
View File

@ -9,93 +9,55 @@
<div class="container" id="container">
<div class="title">
<div class="id">
<span>ID：{{ uid }}</span>
<span class="id-head">ID</span>
<span>{{ uid }}</span>
</div>
<div class="day">
<span>{{ day }}</span>
<div class="day">{{ day }}</div>
</div>
</div>
<div class="item">
<div class="stamina">
<div class="main">
<div class="bg"></div>
<img class="icon" src="items/电量.png" alt="" />
<div class="info">
<div class="name">电量</div>
<div class="time">
{% if resin_recovery_time %}
将于{{ resin_recovery_time }} 全部恢复
{% else %}
电量已完全恢复
{% endif %}
</div>
</div>
</div>
<div class="right">
<span class="{% if current_resin/(max_resin or 1) > 0.9 %}red{% endif %}">
{{ current_resin }}/{{ max_resin }}
</span>
</div>
</div>
<div class="item">
<div class="main">
<div class="bg"></div>
<img class="icon" src="items/Investigation-Point.png" alt=""/>
<div class="info">
<div class="name">录像店经营</div>
</div>
</div>
<div class="right">
<span class="{% if exp_status == 'DONE' %}red{% endif %}">
{% if exp_status == 'DONE' %}
已完成
{% else %}
正在营业
{% endif %}
</span>
</div>
</div>
<div class="item">
<div class="main">
<div class="bg"></div>
<img class="icon" src="./items/Inter-Knot-Credit.png" alt="" />
<div class="info">
<div class="name">每日活跃</div>
<div class="time">
{% if current_train_score == max_train_score %}
每日活跃已完成
{% else %}
每日活跃未完成
{% endif %}
</div>
</div>
</div>
<div class="right">
<div class="count">
<span
class="{% if current_train_score != max_train_score %}red{% endif %}"
>{{ current_train_score }}/{{ max_train_score }}</span>
</div>
</div>
<div class="item">
<div class="main">
<div class="bg"></div>
<img class="icon" src="./items/Resonium-Details.png" alt="" />
<div class="info">
<div class="name">每日刮刮卡</div>
</div>
</div>
<div class="right">
<span
class="{% if not card_sign_status %}red{% endif %}"
class="count-cur {% if current_resin/(max_resin or 1) > 0.9 %}red{% endif %}"
>
{% if card_sign_status %}
已完成
{% else %}
未完成
{% endif %}
{{ current_resin }}
</span>
<span>/ {{ max_resin }}</span>
</div>
<div class="datail">
{% if resin_recovery_time %} 将于{{ resin_recovery_time }}
全部恢复 {% else %} 电量已完全恢复 {% endif %}
</div>
</div>
<div class="list">
<div class="item">
<img class="icon" src="items/Investigation-Point.png" alt="" />
<div class="name">录像店经营</div>
<div class="detail {% if exp_status == 'DONE' %}red{% endif %}">
{% if exp_status == 'DONE' %} 已完成 {% else %} 正在营业 {% endif %}
</div>
</div>
<div class="item">
<img class="icon" src="./items/Inter-Knot-Credit.png" alt="" />
<div class="name">每日活跃</div>
<span
class="detail {% if current_train_score != max_train_score %}red{% endif %}"
>{{ current_train_score }}/{{ max_train_score }}</span
>
</div>
<div class="item">
<img class="icon" src="./items/Resonium-Details.png" alt="" />
<div class="name">每日刮刮卡</div>
<span class="detail {% if not card_sign_status %}red{% endif %}">
{% if card_sign_status %} 已完成 {% else %} 未完成 {% endif %}
</span>
</div>
</div>
</div>
</body>
<script type="text/javascript"></script>
</html>

49
resources/zzz/gacha_count/gacha_count.html
View File

@ -4,25 +4,40 @@
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="shortcut icon" href="#" />
<link rel="stylesheet" type="text/css" href="gacha_count.css" />
<link rel="preload" href="../../fonts/HYWenHei-85W.ttf" as="font">
<link rel="preload" href="./../../fonts/tttgbnumber.ttf" as="font">
<link rel="preload" href="./../../genshin/abyss/background/roleStarBg5.png" as="image">
<link rel="preload" href="./../../genshin/abyss/background/roleStarBg4.png" as="image">
<link rel="preload" href="../../fonts/HYWenHei-85W.ttf" as="font" />
<link rel="preload" href="./../../fonts/tttgbnumber.ttf" as="font" />
<link
rel="preload"
href="./../../genshin/abyss/background/roleStarBg5.png"
as="image"
/>
<link
rel="preload"
href="./../../genshin/abyss/background/roleStarBg4.png"
as="image"
/>
<link rel="preload" href="../gacha_log/img/starrail.png" as="image" />
<script src="../../js/tailwindcss-3.1.8.js"></script>
<script src="../../js/tailwindcss-3.4.4.js"></script>
<title></title>
</head>
<body id="container" class="body_box">
<div class="container">
<div class="info_box">
<div class="header p-2 rounded-xl mb-6" style='background-image: url("{{ background }}")'>
<div class="frame p-4 rounded-lg border-solid border-2 flex items-center">
<img class="w-16 h-16 rounded-full mr-4" src="{{ avatar }}" alt="Avatar">
<div
class="header p-2 rounded-xl mb-6"
style='background-image: url("{{ background }}")'
>
<div
class="frame p-4 rounded-lg border-solid border-2 flex items-center"
>
<img
class="w-16 h-16 rounded-full mr-4"
src="{{ avatar }}"
alt="Avatar"
/>
<div>
<h2 class="font-bold italic">ID: {{ uid }}</h2>
<h2 class="italic">
跃迁统计-{{ typeName }}
</h2>
<h2 class="italic">跃迁统计-{{ typeName }}</h2>
</div>
</div>
</div>
@ -31,7 +46,9 @@
<div class="pool_box">
<div class="title_box">
<div class="name_box">
<div class="title text-lg font-bold"><h2>「{{ val.name }}」</h2></div>
<div class="title text-lg font-bold">
<h2>「{{ val.name }}」</h2>
</div>
<span class="label label_301">{{ val.count }}抽</span>
</div>
{% if typeName != "常驻跃迁" %}
@ -42,14 +59,16 @@
{% for v in val.list %}
<div class="item">
<div class="bg{{ v.rank_type }}"></div>
<span class="num {% if v.count>=5 and v.rank_type == 5 %}life5{% endif %}">{{ v.count }}</span>
<span
class="num {% if v.count>=5 and v.rank_type == 5 %}life5{% endif %}"
>{{ v.count }}</span
>
<img class="role_img" src="{{ v.icon }}" alt="" />
</div>
{% endfor %}
</div>
</div>
{% endfor %}
{% if hasMore %}
{% endfor %} {% if hasMore %}
<div class="hasMore">*完整数据请私聊查看</div>
{% endif %}
<div class="logo">Template By Yunzai-Bot x Generated By MibooGram</div>

17
resources/zzz/gacha_log/gacha_log.html
View File

@ -5,15 +5,24 @@
<link rel="stylesheet" type="text/css" href="gacha_log.css" />
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
<link rel="preload" href="./img/starrail.png" as="image" />
<script src="../../js/tailwindcss-3.1.8.js"></script>
<script src="../../js/tailwindcss-3.4.4.js"></script>
<title>Title</title>
</head>
<body id="container" class="body_box">
<div class="container">
<div class="info_box">
<div class="header p-2 rounded-xl mb-6" style='background-image: url("{{ background }}")'>
<div class="frame p-4 rounded-lg border-solid border-2 flex items-center">
<img class="w-16 h-16 rounded-full mr-4" src="{{ avatar }}" alt="Avatar">
<div
class="header p-2 rounded-xl mb-6"
style='background-image: url("{{ background }}")'
>
<div
class="frame p-4 rounded-lg border-solid border-2 flex items-center"
>
<img
class="w-16 h-16 rounded-full mr-4"
src="{{ avatar }}"
alt="Avatar"
/>
<div>
<h2 class="font-bold italic">ID: {{ uid }}</h2>
<h2 class="italic">

BIN
resources/zzz/stats/items/arrows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
resources/zzz/stats/items/star.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 860 B

74
resources/zzz/stats/main.css
View File

@ -1,56 +1,46 @@
body {
background-color: #f5f6fb;
background: linear-gradient(#febb2e 20%, #010101 40%);
background-color: #010101;
}
.header {
/*background-image: url(../../bot/help/background/header.png);*/
box-shadow: 0 0 8px #72a2ae79;
.in-shadow {
box-shadow: inset 1px 1px 1px #1e1f20b4, inset -1px -1px 1px #dfd8d171;
}
.box {
background-color: #f4f2e4;
box-shadow: 0 0 8px #72a2ae79;
.out-shadow {
box-shadow: inset -1px -1px 1px #1e1f208e, inset 1px 1px 1px #dfd8d138;
}
.pointer-bar {
width: 95%;
height: 8px;
display: inline-block;
background-color: rgb(0, 0, 0, 0.2);
border-radius: 0.25rem;
.capsule {
background-color: #080808;
outline: 2px solid #000000;
border: 3.5px solid #424242;
border-radius: 100px;
}
.pointer-progress-bar {
border-radius: 0.25rem;
height: 100%;
background: #fff6e2;
.box .capsule.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 2.6em;
padding: 0;
}
.name {
color: #ffffee;
text-shadow: 0 0.08em 0.1em #00000093, 0 0.1em 0.3em rgba(0, 0, 0, 0.4);
.box .capsule.item > *:nth-last-child(1) {
padding-right: 1em;
background-image: linear-gradient(#ffdc00, #ce7016);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
transform: scale(2.7);
transform-origin: center 19px;
}
.uid {
color: #fff;
background: linear-gradient(
to right,
rgb(0, 0, 0, 0),
#3f7587 25%,
#3f7587 75%,
rgb(0, 0, 0, 0)
);
}
.about {
background-color: #e0dad3;
color: #8a4d30;
}
.frame-pic {
border-color: #fdfdf356;
}
.frame {
border-color: #cdbea8;
.box .capsule.item > *:nth-child(1) {
line-height: 2.6em;
border-radius: 100px;
padding: 0 1.5em;
outline: 3.5px solid #424242;
color: #ffffff;
}

107
resources/zzz/stats/stats.html
View File

@ -9,65 +9,96 @@
/>
<link href="./{{style}}.css" rel="stylesheet" />
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
<script src="../../js/tailwindcss-3.1.8.js"></script>
<script src="../../js/tailwindcss-3.4.4.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#febb2e",
card: "#252525",
dark: "#121212",
light: "#ffffff",
muted: "#858585",
},
},
},
};
</script>
</head>
<body class="text-neutral-600">
<div class="mx-auto max-w-[600px] py-8">
<div class="header p-2 rounded-xl bg-cover mb-6" style='background-image: url("{{ background }}")'>
<body>
<div class="mx-auto max-w-[640px] py-4">
<div
class="frame-pic p-4 flex items-center rounded-lg border-solid border-2"
class="header out-shadow border-4 border-black p-2 rounded-2xl bg-card mb-3"
>
<img class="w-16 h-16 rounded-full mr-4" src="{{ avatar }}" alt="Avatar">
<div class="flex flex-col items-center justify-center">
<h1 class="name text-4xl italic mb-2 px-2 text-shadow">
{{ nickname }}
</h1>
<h1 class="italic uid px-10">UID - {{ uid }}</h1>
</div>
</div>
</div>
<div class="box p-2 rounded-xl overflow-hidden">
<div class="frame rounded-lg border-solid border-2">
<h2
class="title font-semibold pt-4 text-center text-xl text-neutral-700 p-1"
<div
class="head-container relative overflow-hidden bg-[#febb2e] px-8 py-3 flex items-center rounded-lg"
>
<img src="./items/star.png" class="inline-block w-4"/>
<span
class="font-black z-0 text-[#bd910c66] uppercase absolute text-7xl"
>Zenless Zone Zero</span
>
<img
class="border-4 border-black z-10 size-20 rounded-full mr-4"
src="{{ avatar }}"
alt="Avatar"
/>
<div class="z-10 flex flex-col justify-center gap-y-2 text-dark">
<h1 class="font-bold bg-background text-4xl">{{ nickname }}</h1>
<h1 class="text-lg font-bold">UID: {{ uid }}</h1>
</div>
</div>
</div>
<div
class="box out-shadow border-4 border-black py-8 px-6 rounded-2xl bg-card flex flex-col gap-y-4"
>
<div
class="title inline-block w-auto mr-auto border-primary border-[4px] rounded-full"
>
<h2 class="flex items-center gap-x-4 capsule pl-5 text-xl text-light">
数据总览
<img
class="box-content size-6 px-4 py-1 rounded-full bg-[#121212]"
style="outline: 3.5px solid #424242"
src="./items/arrows.png"
alt="arrows"
/>
</h2>
<div class="p-6 grid grid-cols-4 gap-4 text-center">
{% for label, key in stats_labels %}
<div class="">
{% set value = stats[key] %}
{% if value == "" %}
{% set value = "-" %}
{% endif %}
<div class="text-xl box-stats">{{ value }}</div>
<div class="text-neutral-400 box-stats-label">{{ label }}</div>
</div>
<div class="grid grid-cols-2 gap-x-6 gap-y-3 text-center">
<!-- stats -->
{% for label, key in stats_labels %} {% set value = stats[key] if
stats[key] != "" else "-" %} {% set tag = "capsule" if label ==
"活跃天数" or label == "获取角色数" %}
<div
class="{{ tag }} item flex font-bold justify-between px-5 items-center py-1 bg-dark rounded-full in-shadow"
>
<div class="text-muted">{{ label }}</div>
<div class="text-light">{{ value }}</div>
</div>
{% endfor %}
{% if rogue %}
{% for label, key in rogue_labels %}
<!-- rogue -->
{% if rogue %} {% for label, key in rogue_labels %}
<div class="">
<div class="text-xl box-stats">{{ rogue[key] }}</div>
<div class="text-neutral-400 box-stats-label">{{ label }}</div>
</div>
{% endfor %}
{% endif %}
{% if ledger %}
{% for label, key in ledger_labels %}
{% endfor %} {% endif %}
<!-- ledger -->
{% if ledger %} {% for label, key in ledger_labels %}
<div class="">
<div class="text-xl box-stats">{{ ledger[key] }}</div>
<div class="text-neutral-400 box-stats-label">{{ label }}</div>
</div>
{% endfor %}
{% endif %}
{% endfor %} {% endif %}
</div>
<div class="about text-center leading-8 text-xs opacity-50">
<div class="about text-center text-xs text-muted">
所有数据会有一小时延迟 以游戏内为准 此处仅供参考
</div>
</div>
</div>
</div>
</body>
</html>