MibooGram/resources/genshin/stats/stats.html
洛水居室 aea5e41d7b
🎨 重写玩家统计
Co-authored-by: Li Chuangbo <im@chuangbo.li>
2022-10-08 20:58:45 +08:00

71 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<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>
</head>
<body class="text-neutral-600">
<div class="mx-auto max-w-[600px] py-8">
<div class="header p-6 flex mb-8 rounded-xl bg-cover justify-between">
<div class="flex flex-col items-center justify-center">
<h1 class="text-4xl italic name mb-2 px-2">
{{ info.nickname }}
<span class="text-lg">lv.{{ info.level }}</span>
</h1>
<h1 class="italic uid px-10">UID - {{ uid }}</h1>
</div>
</div>
<div class="box pt-4 rounded-xl overflow-hidden">
<div>
<h2 class="box-title text-center text-xl ring text-neutral-100 p-1">
数据总览
</h2>
<div class="p-6 grid grid-cols-4 gap-4 text-center">
{% for label, key in stats_labels %}
<div class="">
<div class="text-xl box-stats">{{ stats[key] }}</div>
<div class="text-neutral-400">{{ label }}</div>
</div>
{% endfor %}
</div>
</div>
<div>
<h2 class="box-title text-center text-xl ring text-neutral-100 p-1">
世界探索
</h2>
<div class="p-6 grid grid-cols-4 gap-4 text-center text-neutral-100">
{% for e in explorations %}
<div
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
style="background-image: url('{{ e.cover }}');"
>
<img class="w-3/5" src="{{ e.icon }}" />
<div class="text-sm w-full truncate">{{ e.name }}</div>
<div class="text-xs">{{ e.explored }}%</div>
<div class="pointer-bar">
<div
class="pointer-progress-bar"
style="width: {{ e.explored }}%"
></div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="about text-center leading-8 text-xs opacity-50">
所有数据会有一小时延迟 以游戏内为准 此处仅供参考
</div>
</div>
</div>
</body>
</html>