mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-11-22 07:08:04 +00:00
138 lines
4.6 KiB
HTML
138 lines
4.6 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.4.4.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#febb2e",
|
|
card: "#252525",
|
|
dark: "#121212",
|
|
light: "#ffffff",
|
|
muted: "#858585",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="mx-auto max-w-[630px] py-4">
|
|
<div
|
|
class="header out-shadow border-4 border-black p-2 rounded-2xl bg-card mb-3"
|
|
>
|
|
<div
|
|
class="head-container relative overflow-hidden bg-[#febb2e] px-8 py-3 flex items-center rounded-lg"
|
|
>
|
|
<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-1 flex flex-col justify-center gap-y-2 text-dark"
|
|
>
|
|
<h1 class="bg-background text-4xl line-clamp-1">
|
|
{{ nickname }}
|
|
{% if level > 0 %}
|
|
<span class="text-lg">lv.{{ level }}</span>
|
|
{% endif %}
|
|
</h1>
|
|
<h1 class="text-lg">UID: {{ uid }}</h1>
|
|
</div>
|
|
<div class="z-10">
|
|
<img class="size-16" src="../../img/logo.png" alt="logo" />
|
|
</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>
|
|
<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 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 %}
|
|
|
|
<!-- coins -->
|
|
{% for v in stats.commemorative_coins_list %}
|
|
{% set label = v.name %}
|
|
{% set value = v.num %}
|
|
<div
|
|
class="item flex 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 %}
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div class="grid grid-cols-2 gap-x-6 gap-y-3 text-center">
|
|
<!-- cat note -->
|
|
{% for v in cat_notes_list %}
|
|
{% set label = v.name %}
|
|
<div
|
|
class="item flex justify-between px-5 items-center py-1 bg-dark rounded-full in-shadow"
|
|
>
|
|
<div class="text-muted">{{ label }}</div>
|
|
<div class="text-light">{{ v.num }}/{{ v.total }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="about text-center text-xs text-muted">
|
|
所有数据会有一小时延迟 以游戏内为准 此处仅供参考
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|