mirror of
https://github.com/PaiGramTeam/PaiGram.git
synced 2024-11-25 18:04:10 +00:00
🎨 微调 /stats 璃月颜色
This commit is contained in:
Chuangbo Li
GitHub
parent
d992dde670
commit
a03e226448
@ -1,12 +1,9 @@
|
|||||||
:root {
|
:root {
|
||||||
--dark: #e0dad3;
|
--primary: #ffeabd;
|
||||||
--light: #f0ece8;
|
|
||||||
--white: #f5f5f5;
|
|
||||||
--grey: #6c6c6c;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: rgba(253, 253, 253, 0.75);
|
background-color: #f5f6fb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@ -15,36 +12,15 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid rgb(255, 233, 144, 0.5);
|
|
||||||
background-color: #9c433d;
|
background-color: #9c433d;
|
||||||
box-shadow: 0 0 16px rgb(255 233 144 / 50%);
|
box-shadow: 0 0 16px rgb(255 233 144 / 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-title {
|
.box-title {
|
||||||
background-color: rgb(255, 200, 122, 0.1);
|
background-color: rgb(255, 200, 122, 0.1);
|
||||||
text-align: center;
|
|
||||||
line-height: 3rem;
|
|
||||||
--tw-ring-color: #ff9966;
|
--tw-ring-color: #ff9966;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.box-title h1 {
|
|
||||||
text-shadow: 0 0 1px #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-box {
|
|
||||||
color: #ffeabd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.world-exploration-icon {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.world-exploration {
|
|
||||||
border: 1px solid rgb(255, 233, 144, 1);
|
|
||||||
background-color: rgb(255, 255, 255, 0.01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pointer-bar {
|
.pointer-bar {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
@ -59,14 +35,15 @@ body {
|
|||||||
background: linear-gradient(to bottom, #f5efcd, #f8eabd, #ffdf90);
|
background: linear-gradient(to bottom, #f5efcd, #f8eabd, #ffdf90);
|
||||||
}
|
}
|
||||||
|
|
||||||
.test {
|
.name {
|
||||||
background: linear-gradient(to bottom, #ffffff, #ffeabd, #ffdf90);
|
background: linear-gradient(to bottom, #ffffff, #ffeabd, #ffdf90);
|
||||||
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.test-1 {
|
.uid {
|
||||||
color: #ffeabd;
|
color: var(--primary);
|
||||||
background: linear-gradient(to right, rgb(0, 0, 0, 0), #cc6666, rgb(0, 0, 0, 0));
|
background: linear-gradient(to right, rgb(0, 0, 0, 0), #cc6666, rgb(0, 0, 0, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,3 +51,12 @@ body {
|
|||||||
background-color: #e0dad3;
|
background-color: #e0dad3;
|
||||||
color: #8a4d30;
|
color: #8a4d30;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box-stats {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-stats-label {
|
||||||
|
color: var(--primary) !important;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,59 +1,256 @@
|
|||||||
<!DOCTYPE html>
|
<html lang="zh-CN">
|
||||||
<html lang="en">
|
<head>
|
||||||
<head>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<title>Title</title>
|
<title>Title</title>
|
||||||
<link href="../../styles/tailwind.min.css" rel="stylesheet"/>
|
<meta
|
||||||
<link href="liyue.css" rel="stylesheet"/>
|
name="viewport"
|
||||||
</head>
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||||
<body>
|
/>
|
||||||
<div class="container mx-auto px-5 py-10 max-w-3xl font-black">
|
<link href="./liyue.css" rel="stylesheet" />
|
||||||
<div class="header p-6 flex mb-8 rounded-xl bg-cover justify-between">
|
<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">
|
<div class="flex flex-col items-center justify-center">
|
||||||
<h1 class="text-4xl italic test mb-2">胡桃</h1>
|
<h1 class="text-4xl italic name mb-2 px-2">
|
||||||
<h1 class="text-2xl italic test-1 px-10">UID -111111111</h1>
|
小何
|
||||||
|
<span class="text-lg">lv.58</span>
|
||||||
|
</h1>
|
||||||
|
<h1 class="italic uid px-10">UID - 125324176</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box pt-4 rounded-xl space-y-4 overflow-hidden">
|
<div class="box pt-4 rounded-xl overflow-hidden">
|
||||||
<div class="box-title text-2xl ring text-white">
|
<div>
|
||||||
<h1>数据总览</h1>
|
<h2 class="box-title text-center text-xl ring text-neutral-100 p-1">
|
||||||
</div>
|
数据总览
|
||||||
<div class="stats-box flex flex-wrap text-center">
|
</h2>
|
||||||
<div class="mx-auto p-2 rounded-xl flex-1">
|
<div class="p-6 grid grid-cols-4 gap-4 text-center">
|
||||||
<div class="stats-name text-base p-1">活跃天数</div>
|
<div class="">
|
||||||
<div class="stats-value text-xl p-1 font-bold">114514</div>
|
<div class="text-xl box-stats">493</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">活跃天数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-auto p-2 rounded-xl flex-1">
|
|
||||||
<div class="stats-name text-xl p-1">成就达成数</div>
|
|
||||||
<div class="stats-value text-base p-1 font-bold">test2</div>
|
|
||||||
</div>
|
|
||||||
<div class="mx-auto p-2 rounded-xl flex-1">
|
|
||||||
<div class="stats-name text-xl p-1">获取角色数</div>
|
|
||||||
<div class="stats-value text-base p-1 font-bold">test2</div>
|
|
||||||
</div>
|
|
||||||
<div class="mx-auto p-2 rounded-xl flex-1">
|
|
||||||
<div class="stats-name text-xl p-1">深境螺旋</div>
|
|
||||||
<div class="stats-value text-base p-1 font-bold">12-3</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="box-title text-2xl ring text-white">
|
|
||||||
<h1>世界探索</h1>
|
|
||||||
</div>
|
|
||||||
<div class="stats-box flex flex-wrap text-center">
|
|
||||||
<div class="world-exploration rounded-xl flex-shrink p-2 mx-auto space-y-1">
|
|
||||||
<img class="world-exploration-icon" src="./test/UI_ChapterIcon_Mengde.png">
|
|
||||||
<div class="">蒙德</div>
|
|
||||||
<div class="text-xs">22%</div>
|
|
||||||
<div class="pointer-bar">
|
|
||||||
<div class="pointer-progress-bar" style="width: 23%"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">536</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">成就达成数</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">38</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">获取角色数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">12-3</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">深境螺旋</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">227</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">解锁传送点</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">41</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">解锁秘境</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">58</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">奇馈宝箱数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">128</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">华丽宝箱数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">316</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">珍贵宝箱数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">1184</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">精致宝箱数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">1594</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">普通宝箱数</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">65</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">风神瞳</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">131</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">岩神瞳</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">180</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">雷神瞳</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="text-xl box-stats">80</div>
|
||||||
|
<div class="text-neutral-400 box-stats-label">草神瞳</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</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">
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Xumi.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Xumi.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">须弥</div>
|
||||||
|
<div class="text-xs">28.0%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 28%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_ChasmsMaw.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_ChasmsMaw.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">层岩巨渊·地下矿区</div>
|
||||||
|
<div class="text-xs">98.7%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 98.7%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_ChasmsMaw.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_ChasmsMaw.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">层岩巨渊</div>
|
||||||
|
<div class="text-xs">92.9%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 92.9%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Enkanomiya.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Enkanomiya.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">渊下宫</div>
|
||||||
|
<div class="text-xs">98.3%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 98.3%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Daoqi.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Daoqi.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">稻妻</div>
|
||||||
|
<div class="text-xs">100.0%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Dragonspine.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Dragonspine.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">龙脊雪山</div>
|
||||||
|
<div class="text-xs">83.6%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 83.6%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Liyue.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Liyue.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">璃月</div>
|
||||||
|
<div class="text-xs">95.9%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 95.9%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center rounded-lg p-2 space-y-1 bg-cover"
|
||||||
|
style="
|
||||||
|
background-image: url('https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterCover_Mengde.png');
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-3/5"
|
||||||
|
src="https://upload-bbs.mihoyo.com/game_record/genshin/city_icon/UI_ChapterIcon_Mengde.png"
|
||||||
|
/>
|
||||||
|
<div class="text-sm w-full truncate">蒙德</div>
|
||||||
|
<div class="text-xs">100.0%</div>
|
||||||
|
<div class="pointer-bar">
|
||||||
|
<div class="pointer-progress-bar" style="width: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="about text-center leading-8 text-xs opacity-50">
|
<div class="about text-center leading-8 text-xs opacity-50">
|
||||||
所有数据会有一小时延迟 以游戏内为准 此处仅供参考
|
所有数据会有一小时延迟 以游戏内为准 此处仅供参考
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,9 +1,13 @@
|
|||||||
|
:root {
|
||||||
|
--primary: #ffeabd;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #f5f6fb;
|
background-color: #f5f6fb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background-image: url(background/liyue.png);
|
background-image: url(./background/liyue.png);
|
||||||
box-shadow: 0 0 16px rgb(255 233 144 / 50%);
|
box-shadow: 0 0 16px rgb(255 233 144 / 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -39,7 +43,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uid {
|
.uid {
|
||||||
color: #ffeabd;
|
color: var(--primary);
|
||||||
background: linear-gradient(to right, rgb(0, 0, 0, 0), #cc6666, rgb(0, 0, 0, 0));
|
background: linear-gradient(to right, rgb(0, 0, 0, 0), #cc6666, rgb(0, 0, 0, 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,5 +53,10 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-stats {
|
.box-stats {
|
||||||
color: #ffeabd;
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-stats-label {
|
||||||
|
color: var(--primary) !important;
|
||||||
|
opacity: 0.65;
|
||||||
}
|
}
|
||||||
@ -31,7 +31,7 @@
|
|||||||
{% for label, key in stats_labels %}
|
{% for label, key in stats_labels %}
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="text-xl box-stats">{{ stats[key] }}</div>
|
<div class="text-xl box-stats">{{ stats[key] }}</div>
|
||||||
<div class="text-neutral-400">{{ label }}</div>
|
<div class="text-neutral-400 box-stats-label">{{ label }}</div>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user