mirror of
https://github.com/PaiGramTeam/PaiGram.git
synced 2024-12-29 12:22:36 +00:00
478 lines
16 KiB
HTML
478 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="zh-ch">
|
||
|
<head>
|
||
|
<meta charset="UTF-8" />
|
||
|
<title>abyss</title>
|
||
|
<meta
|
||
|
name="viewport"
|
||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||
|
/>
|
||
|
<script src="../../js/tailwindcss-3.1.8.js"></script>
|
||
|
<link type="text/css" href="../../styles/public.css" rel="stylesheet" />
|
||
|
<style>
|
||
|
#container {
|
||
|
max-width: 785px;
|
||
|
background-image: url("./../abyss/background/abyss-bg-grad.png");
|
||
|
background-color: rgb(11, 23, 44);
|
||
|
}
|
||
|
|
||
|
.item-not-owned {
|
||
|
position: relative;
|
||
|
}
|
||
|
|
||
|
.item-not-owned::after {
|
||
|
content: "";
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
right: 0;
|
||
|
bottom: 0;
|
||
|
background-color: rgb(0 0 0 / 50%);
|
||
|
border-radius: 5px;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div
|
||
|
class="mx-auto flex flex-col h-full bg-contain bg-no-repeat py-6"
|
||
|
id="container"
|
||
|
>
|
||
|
<div class="title text-2xl my-4 text-yellow-500 text-center">
|
||
|
深境螺旋 - 推荐配队
|
||
|
</div>
|
||
|
|
||
|
<div
|
||
|
class="flex flex-row px-6 py-1 my-1 text-neutral-100 bg-white bg-opacity-10 justify-evenly text-sm"
|
||
|
>
|
||
|
<div>UID 12345678</div>
|
||
|
<div>版本 3.1</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="mx-auto flex flex-col px-6 py-1 text-black my-1">
|
||
|
<div class="text-center mr-auto text-yellow-500">推荐配队 1</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden" style="
|
||
|
background-color: rgb(233, 229, 220)
|
||
|
">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000039/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">迪奥娜</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
background-color: rgb(233, 229, 220)
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000041/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">莫娜</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000002/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">神里绫华</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000047/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">枫原万叶</div>
|
||
|
</div>
|
||
|
|
||
|
<div>
|
||
|
<div class="text-neutral-300">上半</div>
|
||
|
<div class="text-neutral-400 text-sm">
|
||
|
<span class="">使用率</span>
|
||
|
<span class="">5.99%</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000023/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">香菱</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000052/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">雷电将军</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000025/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">行秋</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000032/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">班尼特</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="text-neutral-200">
|
||
|
<div>上半</div>
|
||
|
<div>使用率: 22.34%</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="mx-auto flex flex-col px-6 py-1 text-black my-1">
|
||
|
<div class="text-center mr-auto text-yellow-500">推荐配队 2</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000002/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">神里绫华</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000037/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">甘雨</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden item-not-owned">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000054/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">珊瑚宫心海</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000047/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">枫原万叶</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="text-neutral-200">
|
||
|
<div>上半</div>
|
||
|
<div>使用率: 5.42%</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000023/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">香菱</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000052/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">雷电将军</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000025/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">行秋</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000032/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">班尼特</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="text-neutral-200">
|
||
|
<div>上半</div>
|
||
|
<div>使用率: 22.34%</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="mx-auto flex flex-col px-6 py-1 text-black my-1">
|
||
|
<div class="text-center mr-auto text-yellow-500">推荐配队 3</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000045/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">罗莎莉亚</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000002/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">神里绫华</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden item-not-owned">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000054/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">珊瑚宫心海</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000047/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">枫原万叶</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="text-neutral-200">
|
||
|
<div>上半</div>
|
||
|
<div>使用率: 5.13%</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex my-2 space-x-4">
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000023/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">香菱</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg5.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000052/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">雷电将军</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
background-color: rgb(233, 229, 220)
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000025/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">行秋</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="flex-shrink-0 rounded-lg overflow-hidden">
|
||
|
<div
|
||
|
class="w-32 h-32 rounded-br-2xl bg-cover overflow-hidden"
|
||
|
style="
|
||
|
background-image: url('./../abyss/background/roleStarBg4.png');
|
||
|
"
|
||
|
>
|
||
|
<img
|
||
|
src="file:///Users/cat/github/TGPaimonBot/resources/assets/avatar/10000032/icon.png"
|
||
|
alt=""
|
||
|
/>
|
||
|
</div>
|
||
|
<div class="text-center bg-neutral-200">班尼特</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="text-neutral-200">
|
||
|
<div>上半</div>
|
||
|
<div>使用率: 22.34%</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="mt-6 text-center p-1 text-neutral-400 text-xs">
|
||
|
数据来源:游创工坊
|
||
|
</div>
|
||
|
</div>
|
||
|
</body>
|
||
|
</html>
|