MibooGram/resources/genshin/material/example.html

364 lines
18 KiB
HTML
Raw Normal View History

2023-04-04 14:02:14 +00:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>Title</title>
<script src="../../js/tailwindcss-3.1.8.js"></script>
<link href="../../styles/public.css" rel="stylesheet" type="text/css"/>
<style>
@font-face {
font-family: siyuan;
src: url(../../fonts/SourceHanSerifCN-Heavy.woff) format("woff");
font-style: normal;
}
.text-shadow {
text-shadow: 0 0.08em 0.1em #000, 0 0.1em 0.3em rgba(0, 0, 0, 0.4);
}
.num {
color: white;
text-shadow: black 2px 0 0, black 0 2px 0, black -2px 0 0, black 0 -2px 0;
}
.title-fieldset {
border: none;
border-top: 2px solid;
}
.title-fieldset .inner {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bg-no-repeat bg-cover overflow-hidden" style="background-image: url('../player_card/img/bg-anemo.jpg')">
<div class="relative round-l-3xl">
<div
class="absolute w-full h-full -left-1/4 -bottom-32 opacity-80 bg-no-repeat bg-center"
style="background-image: url('https://enka.network/ui/UI_Gacha_AvatarImg_Wanderer.png'); background-size: auto 100%; transform: scale(3); "
></div>
<div class="relative">
<div class="flex-1">
<div class="text-7xl text-right text-neutral-200 text-shadow p-10 tracking-wide"
style="font-family: siyuan,serif">
<div class="mb-2 leading-relaxed">
流浪者
</div>
<div class="flex justify-end">
<div class="text-4xl">角色培养素材一览</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative bg-amber-50 text-center text-yellow-900 p-5 m-4 rounded-3xl text-3xl bg-no-repeat bg-center"
style="background-image: url('img/sumeru.webp'); background-size: auto 65%;">
<div class="font-shadow">
<div class="">★等级突破★</div>
<div class="text-left m-10">
<span style="border-left: 8px solid;">&nbsp;</span>
<span>&nbsp;角色90级升级材料</span>
<div class="text-right -mt-1.5" style="float: right">
<span>摩拉消耗</span>
<span class="text-4xl">x2,092,530</span>
</div>
</div>
</div>
<div class="grid grid-cols-5 font-shadow ml-14" style="justify-content: left;">
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
</div>
<div class="relative text-2xl mt-5 font-shadow">
<div class="text-2xl text-gray-700" style="font-family: HYWH,serif">
<span>突破至81级其它材料数量不变&nbsp;摩拉&nbsp;x</span>
<span class="text-3xl">1,444,540&nbsp;&nbsp;</span>
<span>大英雄的经验</span>
<span class="text-3xl">x257<br></span>
</div>
</div>
<fieldset class="title-fieldset bg-yellow-900 mt-6">
<legend class="inner"></legend>
</fieldset>
<div class="font-shadow">
<div class="mt-4">★天赋升级★</div>
<div class="text-left m-10">
<span style="border-left: 8px solid;">&nbsp;</span>
<span>&nbsp;满级天赋升级材料</span>
<div class="text-right -mt-1.5" style="float: right">
<span>摩拉消耗</span>
<span class="text-4xl">x4,957,500</span>
</div>
</div>
</div>
<div class="grid grid-cols-5 font-shadow ml-14" style="justify-content: left;">
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
<div class="text-center w-28">
<div class="w-28 h-28">
<div class="text-right text-2xl mr-1 num">20</div>
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
style="background-image: url('../../background/rarity/half/5.png')">
<div class="w-28 h-28 -my-8"
style="background-image: url('../../assets/material/100021/icon.png'); background-size: auto 100%;"></div>
</div>
</div>
<div class="text-2xl">
<div style="word-wrap:break-word;">Philosophies of Resistance</div>
</div>
</div>
</div>
<div class="relative text-center text-gray-700 text-2xl mt-5 font-shadow" style="font-family: HYWH,serif">
<div style="display: flex;justify-content: center;align-content: center">
<table class="table-auto" style="font-family: HYWH,serif">
<caption>将角色天赋升至8/8/8时所需材料</caption>
<tr>
<th></th>
</tr>
<tr>
<td class="px-6 py-1">「诤言」的教导 x9</td>
<td class="px-6 py-1">「诤言」的指引 x63</td>
<td class="px-6 py-1">「诤言」的哲学 x30</td>
</tr>
<tr>
<td class="px-6 py-1">蕈兽孢子 x18</td>
<td class="px-6 py-1">荧光孢粉 x66</td>
<td class="px-6 py-1">孢囊晶尘 x30</td>
</tr>
<tr>
<td class="px-6 py-1">万劫之真意 x6</td>
<td class="px-6 py-1">摩拉 x1,507,500</td>
</tr>
</table>
</div>
</div>
</div>
<div class="text-xl text-center my-5 num">
Created by @{{ bot_username }}
</div>
</div>
</body>
</html>