MibooGram/resources/zzz/avatar_list/main.html

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

223 lines
7.8 KiB
HTML
Raw Normal View History

2024-07-06 10:10:50 +00:00
<!DOCTYPE html>
<html lang="en">
2024-07-07 14:39:02 +00:00
<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>
2024-07-07 14:39:02 +00:00
</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">
2024-07-12 13:54:54 +00:00
<div class="nickname text-4xl italic mb-2 px-2 text-light">
{{ nickname }} {% if level > 0 %}
2024-07-12 13:54:54 +00:00
<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 -->
2024-07-07 14:39:02 +00:00
<div
class="role relative overflow-hidden p-1 border-4 border-black rounded-xl bg-black {% if avatar_data.rarity == 5 %}gold{% endif %}"
2024-07-07 14:39:02 +00:00
>
<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>
2024-07-07 14:39:02 +00:00
<img
class="size-[4.7rem] bg-card rounded"
src="{{ avatar_data.icon }}"
2024-07-07 14:39:02 +00:00
/>
</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>
2024-07-07 14:39:02 +00:00
</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
2024-07-07 14:39:02 +00:00
>
</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"
/>
2024-07-07 14:39:02 +00:00
</div>
{% endif %}
2024-07-06 10:10:50 +00:00
</div>
2024-07-07 14:39:02 +00:00
</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>
2024-07-06 10:10:50 +00:00
</div>
{% endif %}
2024-07-07 14:39:02 +00:00
</body>
2024-07-06 10:10:50 +00:00
</html>