PaiGramTeam/MibooGram
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/MibooGram.git synced 2024-11-30 19:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity
fd2cee4767
MibooGram/resources/genshin/abyss_team/example2.html
Chuangbo Li 345edb9fe5
🎨 使用 black 格式化所有代码
2022-10-10 19:07:28 +08:00

478 lines
16 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink