mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-11-22 07:08:04 +00:00
223 lines
7.8 KiB
HTML
223 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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.4.4.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#febb2e",
|
|
dark: "#1a1c1b",
|
|
card: "#252525",
|
|
light: "#ffffff",
|
|
muted: "#858585",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="bg-black flex flex-col justify-center p-4 gap-y-4">
|
|
<div
|
|
class="header out-shadow rounded-2xl px-6 py-4 flex items-center gap-x-4 border-[6px] border-card"
|
|
style='background-image: url("{{ background }}") '
|
|
>
|
|
<img
|
|
class="size-20 rounded-full mr-4 border-4 border-black"
|
|
src="{{ avatar }}"
|
|
alt="Avatar"
|
|
/>
|
|
<div class="flex-1">
|
|
<div class="nickname text-4xl italic mb-2 px-2 text-light">
|
|
{{ nickname }} {% if level > 0 %}
|
|
<span class="text-lg">lv.{{ level }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="uid text-light text-2xl">UID: {{ uid }}</div>
|
|
</div>
|
|
<div class="z-10">
|
|
<img class="size-16" src="../../img/logo.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content grid grid-cols-2 gap-4 rounded-xl">
|
|
{% for avatar_data in avatar_datas %}
|
|
<div
|
|
class="flex out-shadow bg-card p-2.5 rounded-2xl items-center gap-x-2.5"
|
|
>
|
|
<!-- <td class="text-right {{ row_bg }}">
|
|
{{ start_id + loop.index }}
|
|
</td> -->
|
|
<!-- role -->
|
|
<div
|
|
class="role relative overflow-hidden p-1 border-4 border-black rounded-xl bg-black {% if avatar_data.rarity == 5 %}gold{% endif %}"
|
|
>
|
|
<div
|
|
class="rank-container absolute top-0 left-0 z-10 p-1 bg-black text-light rounded-br-lg"
|
|
>
|
|
{% set rarity = 'S' if avatar_data.rarity == 5 else 'A' %}
|
|
<img class="size-4" src="../../img/rarity/{{ rarity }}.png" />
|
|
<!-- <span class="rank font-bold">
|
|
{% if avatar_data.rarity == 5 %}S{% else %}A{% endif %}
|
|
</span> -->
|
|
</div>
|
|
<img
|
|
class="size-[4.7rem] bg-card rounded"
|
|
src="{{ avatar_data.icon }}"
|
|
/>
|
|
</div>
|
|
|
|
<!-- info -->
|
|
<div
|
|
class="info in-shadow flex-1 relative flex flex-row justify-between bg-black text-muted px-3 py-3 rounded-xl gap-x-1"
|
|
>
|
|
<div class="basic flex flex-col items-start gap-y-2 min-w-[3.7rem]">
|
|
<span class="name text-xl text-light">{{ avatar_data.name }}</span>
|
|
|
|
<div>
|
|
<small
|
|
class="level text-light font-sans font-bold bg-[#686868] px-1.5 py-1 rounded"
|
|
>Lv.{{ avatar_data.level }}</small
|
|
>
|
|
<!-- constellation -->
|
|
{% set constellation = avatar_data.eidolon %} {% set class_str =
|
|
'' %} {% if constellation != 0 %} {% set color = ['green', 'cyan',
|
|
'blue', 'purple', 'pink', 'red'][constellation - 1] %} {% set
|
|
class_str = "color-" ~ color %} {% endif %}
|
|
<span class="number {{ class_str }} mx-1"
|
|
>{{ constellation }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="divider w-2">
|
|
<div
|
|
class="absolute top-0 h-full w-2 bg-card -skew-x-12"
|
|
style="
|
|
box-shadow: inset -1px 0 1px #1e1f208e,
|
|
inset 1px 0 1px #dfd8d138;
|
|
"
|
|
></div>
|
|
</div>
|
|
<!-- skills -->
|
|
<!-- {% for skill in avatar_data.skills %} <div>{{ skill.level }}</div> {% endfor %} -->
|
|
{% set skills = avatar_data.skills %}
|
|
<div class="skills flex flex-col gap-y-2">
|
|
<ul class="ml-3">
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-0.0d9692b6.png" />
|
|
<span>{{ skills[0].level }}</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-2.d863591b.png" />
|
|
<span>{{ skills[2].level }}</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-6.3fc55b66.png" />
|
|
<span>{{ skills[5].level }}</span>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-1.e2f84ffb.png" />
|
|
<span>{{ skills[1].level }}</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-3.afdb8abe.png" />
|
|
<span>{{ skills[3].level }}</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-5.3d486da1.png" />
|
|
<span>{{ skills[4].level }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- equipment -->
|
|
{% set equipment = avatar_data.equipment %}
|
|
<div
|
|
class="equipment in-shadow bg-black rounded-xl p-2 gap-y-2 text-muted flex flex-col h-full items-end justify-center min-w-[7.4rem] relative overflow-hidden"
|
|
>
|
|
{% if equipment %} {% set equip_star = equipment.rarity %}
|
|
<div
|
|
class="equip-{{ equip_star }}-star out-shadow w-full flex items-center justify-between rounded ps-3 pe-2 mt-1 pb-1 gap-x-3"
|
|
>
|
|
<div
|
|
class="weapon relative"
|
|
style="filter: drop-shadow(2px 2px 2px black)"
|
|
>
|
|
<img
|
|
class="size-8 scale-150"
|
|
src="{{ equipment.icon }}"
|
|
alt="weapon"
|
|
/>
|
|
<small
|
|
class="number absolute -bottom-1 -end-1 bg-dark size-4 text-center rounded-full"
|
|
>{{ equipment.eidolon }}</small
|
|
>
|
|
</div>
|
|
<div class="element-text-shadow text-light font-bold font-sans">
|
|
Lv.{{ equipment.level }}
|
|
</div>
|
|
</div>
|
|
<p class="text-light">{{ equipment.name }}</p>
|
|
{% else %}
|
|
<div
|
|
class="absolute top-0 start-0 h-full w-full justify-center bg-dark flex items-center"
|
|
>
|
|
<img
|
|
class="size-16 mx-auto"
|
|
src="../agent_detail/images/equip-disable-bg.png"
|
|
alt="no-equip"
|
|
/>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="notice skills text-muted flex items-center gap-x-3">
|
|
<p>图样说明:</p>
|
|
<ul>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-0.0d9692b6.png" />
|
|
<span>普通攻击</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-2.d863591b.png" />
|
|
<span>闪避</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-6.3fc55b66.png" />
|
|
<span>支援技</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-1.e2f84ffb.png" />
|
|
<span>特殊技</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-3.afdb8abe.png" />
|
|
<span>连携技</span>
|
|
</li>
|
|
<li>
|
|
<img src="../agent_detail/images/skill-icon-5.3d486da1.png" />
|
|
<span>核心技</span>
|
|
</li>
|
|
</ul>
|
|
<p class="ml-auto">Generated By MibooGram</p>
|
|
</div>
|
|
{% if has_more %}
|
|
<div class="notice text-muted">
|
|
*想查看完整数据请在指令中加上<code>all</code>或者<code>全部</code>:
|
|
<code>/avatars all</code>、<code>全部练度统计</code>
|
|
</div>
|
|
{% endif %}
|
|
</body>
|
|
</html>
|