PaiGramTeam/MibooGram
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/MibooGram.git synced 2024-11-21 22:58:20 +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 #### 1. Clone PaiGram from Git
```bash ```bash
git clone git@github.com:PaiGramTeam/PaiGram.git git clone git@github.com:PaiGramTeam/PaiGram.git --recurse-submodules
cd PaiGram/ cd PaiGram/
git submodule update --init --recursive
``` ```
#### 2. Project Setup #### 2. Project Setup

3
docs/README_ZH.md
View File

@ -34,9 +34,8 @@
#### 1. 从 Git 克隆 PaiGram #### 1. 从 Git 克隆 PaiGram
```bash ```bash
git clone git@github.com:PaiGramTeam/PaiGram.git git clone git@github.com:PaiGramTeam/PaiGram.git --recurse-submodules
cd PaiGram/ cd PaiGram/
git submodule update --init --recursive
``` ```
#### 2. 项目设置 #### 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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Avatar List</title> <title>Avatar List</title>
<link type="text/css" href="./style.css" rel="stylesheet" /> <link type="text/css" href="./style.css" rel="stylesheet" />
<link type="text/css" href="../../styles/public.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> </head>
<body> <body>
<div class="container flex flex-col justify-center p-6"> <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
<div class="frame rounded-lg border-solid border-2 bg-contain p-4 flex items-center"> class="header rounded-xl p-2 mb-6"
<img class="w-28 h-28 rounded-full mr-4" src="{{ avatar }}" alt="Avatar"> 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>
<div class="uid text-xl italic px-2">UID: {{ uid }}</div> <div class="uid text-xl italic px-2">UID: {{ uid }}</div>
</div> </div>
</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"> <table class="table text-center border-collapse">
<thead> <thead>
<tr> <tr>
@ -35,82 +46,75 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for avatar_data in avatar_datas %} {% for avatar_data in avatar_datas %} {% set equipment =
{% set equipment = avatar_data.equipment %} avatar_data.equipment %} {% if avatar_data.rarity == 5 %} {% set
{% if avatar_data.rarity == 5 %} row_bg = 'gold' %} {% else %} {% set row_bg = 'nongold' %} {% endif
{% set row_bg = 'gold' %} %} {% if equipment != none %} {% set equip_star = equipment.rarity
{% else %} %} {% else %} {% set equip_star = '' %} {% endif %}
{% 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"> <tr class="h-8 border border-b">
<td class="text-right {{row_bg}}">{{ start_id + loop.index }}</td> <td class="text-right {{row_bg}}">{{ start_id + loop.index }}</td>
<td class="role {{row_bg}}"> <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>
<td class="role text-left {{row_bg}}">{{ avatar_data.name }}</td> <td class="role text-left {{row_bg}}">{{ avatar_data.name }}</td>
<td>{{ avatar_data.level }}</td> <td>{{ avatar_data.level }}</td>
<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] }}" 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> <div class="role bg"></div>
</td> </td>
{% for skill in avatar_data.skills %} {% for skill in avatar_data.skills %} {% set talent_style =
{% set talent_style = 'talent' %} 'talent' %} {% set skill_level = skill.level %} {% if skill_level
{% set skill_level = skill.level %} < 4 %} {% set talent_style = talent_style + ' talent-level-first'
%} {% endif %} {% if skill.max_level == skill.level %} {% if
{% if skill_level < 4 %} loop.index == 1 %} {% set talent_max_style = " talent-level-max"
{% set talent_style = talent_style + ' talent-level-first' %} %} {% else %} {% set talent_max_style = " talent-level-max-img" %}
{% endif %} {% endif %} {% set talent_style = talent_style + talent_max_style
%} {% endif %} {% if skill.max_level != skill.level %} {% if
{% if skill.max_level == skill.level %} skill_level < 4 %} {% set talent_style = talent_style + '
{% if loop.index == 1 %} talent-level-1' %} {% elif skill_level < 6 %} {% set talent_style
{% set talent_max_style = " talent-level-max" %} = talent_style + ' talent-level-2' %} {% elif skill_level < 9 %}
{% else %} {% set talent_style = talent_style + ' talent-level-3' %} {% else
{% set talent_max_style = " talent-level-max-img" %} %} {% set talent_style = talent_style + ' talent-level-4' %} {%
{% endif %} endif %} {% 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> <td class="{{ talent_style }}">{{ skill.level }}</td>
{% endfor %} {% endfor %} {% if equipment != none %}
{% if equipment != none %}
<td class="weapon-{{ equip_star }}-star text-left pl-3"> <td class="weapon-{{ equip_star }}-star text-left pl-3">
{% if equipment.level < 10 %} {% if equipment.level < 10 %} Lv.{{ equipment.level }} {% else
Lv.{{ equipment.level }} %} Lv.{{ equipment.level }} {% endif %}
{% else %}
Lv.{{ equipment.level }}
{% endif %}
</td> </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> <span class="weapon number">{{ equipment.eidolon }}</span>
<div class="weapon bg p-1"> <div class="weapon bg p-1">
<div class="frame-border border-solid border"></div> <div class="frame-border border-solid border"></div>
</div> </div>
</td> </td>
<td class="weapon weapon-{{ equip_star }}-star"> <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>
<td class="weapon-{{ equip_star }}-star text-left">{{ equipment.name }}</td>
{% else %} {% else %}
<td colspan="4"></td> <td colspan="4"></td>
{% endif %} {% endif %}
@ -121,7 +125,8 @@
<div class="notice"> <div class="notice">
{% if has_more %} {% if has_more %}
<div> <div>
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>: <code>/avatars all</code>、<code>全部练度统计</code> *想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>:
<code>/avatars all</code>、<code>全部练度统计</code>
</div> </div>
{% endif %} {% endif %}
</div> </div>

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

@ -13,111 +13,159 @@
color: white; 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 { body {
width: 400px;
height: 365px;
font-size: 16px; font-size: 16px;
font-family: "tttgbnumber", system-ui; font-family: "tttgbnumber", system-ui;
transform: scale(1.5); transform: scale(1.5);
transform-origin: 0 0; transform-origin: 0 0;
color: #1e1f20; color: #1e1f20;
background: url("../../img/home.png");
background-size: 100% 100%;
} }
.container { .container {
width: 400px; position: relative;
height: 365px; background: transparent;
background: url("../../img/home.png"); margin: 2rem 1.2rem;
background-size: 100% 100%; background-color: #2e2e2e;
padding: 8px 16px; 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 { .title {
position: absolute;
top: 1.2rem;
width: calc(100% - 2.4rem);
display: flex; display: flex;
position: relative;
margin-bottom: 9px; margin-bottom: 9px;
color: #504c49; display: flex;
justify-content: space-between;
}
.title * {
color: #ffffff;
} }
.title .id { .title .id {
flex: 1; padding-right: 0.2rem;
line-height: 18px;
padding-left: 10px;
} }
.title .id:before { .title span {
content: " "; display: inline-block;
position: absolute; padding: 0.3rem 0.5rem;
width: 5px; line-height: 16px;
height: 24px; }
.title .id-head {
border-radius: 1px; border-radius: 1px;
left: 0px; background: linear-gradient(#ffdc00, #ce7016);
top: -3px; outline: 2.5px solid #303030;
background: #d3bc8d; border-radius: 100px;
color: #1d1f1e;
} }
.title .day { .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 { .item {
border: 1px solid #dfd8d1; /* 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 {
display: flex; display: flex;
padding: 0.2rem 0.8rem;
column-gap: 0.4rem;
font-size: 11px;
line-height: 25px;
align-items: center; align-items: center;
justify-content: center;
width: 96px;
height: 100%;
/*background-color: #ece3d8;*/
font-size: 16px;
color: #504c49;
line-height: 55px;
} }
.item .right .red { .item .icon {
color: #f24e4c; 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="container" id="container">
<div class="title"> <div class="title">
<div class="id"> <div class="id">
<span>ID：{{ uid }}</span> <span class="id-head">ID</span>
<span>{{ uid }}</span>
</div> </div>
<div class="day"> <div class="day">{{ day }}</div>
<span>{{ day }}</span>
</div> </div>
</div> <div class="stamina">
<div class="item">
<div class="main"> <div class="main">
<div class="bg"></div>
<img class="icon" src="items/电量.png" alt="" /> <img class="icon" src="items/电量.png" alt="" />
<div class="info"> <div class="info">
<div class="name">电量</div> <div class="name">电量</div>
<div class="time">
{% if resin_recovery_time %}
将于{{ resin_recovery_time }} 全部恢复
{% else %}
电量已完全恢复
{% endif %}
</div> </div>
</div> </div>
</div> <div class="count">
<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">
<span <span
class="{% if current_train_score != max_train_score %}red{% endif %}" class="count-cur {% if current_resin/(max_resin or 1) > 0.9 %}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 %}"
> >
{% if card_sign_status %} {{ current_resin }}
已完成 </span>
{% else %} <span>/ {{ max_resin }}</span>
未完成 </div>
{% endif %} <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> </span>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script type="text/javascript"></script>
</html> </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" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="shortcut icon" href="#" /> <link rel="shortcut icon" href="#" />
<link rel="stylesheet" type="text/css" href="gacha_count.css" /> <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/HYWenHei-85W.ttf" as="font" />
<link rel="preload" href="./../../fonts/tttgbnumber.ttf" as="font"> <link rel="preload" href="./../../fonts/tttgbnumber.ttf" as="font" />
<link rel="preload" href="./../../genshin/abyss/background/roleStarBg5.png" as="image"> <link
<link rel="preload" href="./../../genshin/abyss/background/roleStarBg4.png" as="image"> 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" /> <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> <title></title>
</head> </head>
<body id="container" class="body_box"> <body id="container" class="body_box">
<div class="container"> <div class="container">
<div class="info_box"> <div class="info_box">
<div class="header p-2 rounded-xl mb-6" style='background-image: url("{{ background }}")'> <div
<div class="frame p-4 rounded-lg border-solid border-2 flex items-center"> class="header p-2 rounded-xl mb-6"
<img class="w-16 h-16 rounded-full mr-4" src="{{ avatar }}" alt="Avatar"> 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> <div>
<h2 class="font-bold italic">ID: {{ uid }}</h2> <h2 class="font-bold italic">ID: {{ uid }}</h2>
<h2 class="italic"> <h2 class="italic">跃迁统计-{{ typeName }}</h2>
跃迁统计-{{ typeName }}
</h2>
</div> </div>
</div> </div>
</div> </div>
@ -31,7 +46,9 @@
<div class="pool_box"> <div class="pool_box">
<div class="title_box"> <div class="title_box">
<div class="name_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> <span class="label label_301">{{ val.count }}抽</span>
</div> </div>
{% if typeName != "常驻跃迁" %} {% if typeName != "常驻跃迁" %}
@ -42,14 +59,16 @@
{% for v in val.list %} {% for v in val.list %}
<div class="item"> <div class="item">
<div class="bg{{ v.rank_type }}"></div> <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="" /> <img class="role_img" src="{{ v.icon }}" alt="" />
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
{% endfor %} {% endfor %} {% if hasMore %}
{% if hasMore %}
<div class="hasMore">*完整数据请私聊查看</div> <div class="hasMore">*完整数据请私聊查看</div>
{% endif %} {% endif %}
<div class="logo">Template By Yunzai-Bot x Generated By MibooGram</div> <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 rel="stylesheet" type="text/css" href="gacha_log.css" />
<link type="text/css" href="../../styles/public.css" rel="stylesheet" /> <link type="text/css" href="../../styles/public.css" rel="stylesheet" />
<link rel="preload" href="./img/starrail.png" as="image" /> <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> <title>Title</title>
</head> </head>
<body id="container" class="body_box"> <body id="container" class="body_box">
<div class="container"> <div class="container">
<div class="info_box"> <div class="info_box">
<div class="header p-2 rounded-xl mb-6" style='background-image: url("{{ background }}")'> <div
<div class="frame p-4 rounded-lg border-solid border-2 flex items-center"> class="header p-2 rounded-xl mb-6"
<img class="w-16 h-16 rounded-full mr-4" src="{{ avatar }}" alt="Avatar"> 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> <div>
<h2 class="font-bold italic">ID: {{ uid }}</h2> <h2 class="font-bold italic">ID: {{ uid }}</h2>
<h2 class="italic"> <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 { body {
background-color: #f5f6fb; background: linear-gradient(#febb2e 20%, #010101 40%);
background-color: #010101;
} }
.header { .in-shadow {
/*background-image: url(../../bot/help/background/header.png);*/ box-shadow: inset 1px 1px 1px #1e1f20b4, inset -1px -1px 1px #dfd8d171;
box-shadow: 0 0 8px #72a2ae79;
} }
.box { .out-shadow {
background-color: #f4f2e4; box-shadow: inset -1px -1px 1px #1e1f208e, inset 1px 1px 1px #dfd8d138;
box-shadow: 0 0 8px #72a2ae79;
} }
.pointer-bar { .capsule {
width: 95%; background-color: #080808;
height: 8px; outline: 2px solid #000000;
display: inline-block; border: 3.5px solid #424242;
background-color: rgb(0, 0, 0, 0.2); border-radius: 100px;
border-radius: 0.25rem;
} }
.pointer-progress-bar { .box .capsule.item {
border-radius: 0.25rem; display: flex;
height: 100%; flex-direction: row;
background: #fff6e2; justify-content: space-between;
align-items: center;
height: 2.6em;
padding: 0;
} }
.name { .box .capsule.item > *:nth-last-child(1) {
color: #ffffee; padding-right: 1em;
text-shadow: 0 0.08em 0.1em #00000093, 0 0.1em 0.3em rgba(0, 0, 0, 0.4); 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 { .box .capsule.item > *:nth-child(1) {
color: #fff; line-height: 2.6em;
background: linear-gradient( border-radius: 100px;
to right, padding: 0 1.5em;
rgb(0, 0, 0, 0), outline: 3.5px solid #424242;
#3f7587 25%, color: #ffffff;
#3f7587 75%,
rgb(0, 0, 0, 0)
);
}
.about {
background-color: #e0dad3;
color: #8a4d30;
}
.frame-pic {
border-color: #fdfdf356;
}
.frame {
border-color: #cdbea8;
} }

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

@ -9,65 +9,96 @@
/> />
<link href="./{{style}}.css" rel="stylesheet" /> <link href="./{{style}}.css" rel="stylesheet" />
<link type="text/css" href="../../styles/public.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> </head>
<body class="text-neutral-600"> <body>
<div class="mx-auto max-w-[600px] py-8"> <div class="mx-auto max-w-[640px] py-4">
<div class="header p-2 rounded-xl bg-cover mb-6" style='background-image: url("{{ background }}")'>
<div <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
<div class="flex flex-col items-center justify-center"> class="head-container relative overflow-hidden bg-[#febb2e] px-8 py-3 flex items-center rounded-lg"
<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"
> >
<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> </h2>
<div class="p-6 grid grid-cols-4 gap-4 text-center"> </div>
{% for label, key in stats_labels %} <div class="grid grid-cols-2 gap-x-6 gap-y-3 text-center">
<div class=""> <!-- stats -->
{% set value = stats[key] %} {% for label, key in stats_labels %} {% set value = stats[key] if
{% if value == "" %} stats[key] != "" else "-" %} {% set tag = "capsule" if label ==
{% set value = "-" %} "活跃天数" or label == "获取角色数" %}
{% endif %} <div
<div class="text-xl box-stats">{{ value }}</div> class="{{ tag }} item flex font-bold justify-between px-5 items-center py-1 bg-dark rounded-full in-shadow"
<div class="text-neutral-400 box-stats-label">{{ label }}</div> >
<div class="text-muted">{{ label }}</div>
<div class="text-light">{{ value }}</div>
</div> </div>
{% endfor %} {% endfor %}
{% if rogue %}
{% for label, key in rogue_labels %} <!-- rogue -->
{% if rogue %} {% for label, key in rogue_labels %}
<div class=""> <div class="">
<div class="text-xl box-stats">{{ rogue[key] }}</div> <div class="text-xl box-stats">{{ rogue[key] }}</div>
<div class="text-neutral-400 box-stats-label">{{ label }}</div> <div class="text-neutral-400 box-stats-label">{{ label }}</div>
</div> </div>
{% endfor %} {% endfor %} {% endif %}
{% endif %}
{% if ledger %} <!-- ledger -->
{% for label, key in ledger_labels %} {% if ledger %} {% for label, key in ledger_labels %}
<div class=""> <div class="">
<div class="text-xl box-stats">{{ ledger[key] }}</div> <div class="text-xl box-stats">{{ ledger[key] }}</div>
<div class="text-neutral-400 box-stats-label">{{ label }}</div> <div class="text-neutral-400 box-stats-label">{{ label }}</div>
</div> </div>
{% endfor %} {% endfor %} {% endif %}
{% endif %}
</div> </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>
</div> </div>
</div>
</body> </body>
</html> </html>