PaiGramTeam/MibooGram
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/MibooGram.git synced 2024-11-23 00:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
eb3848c387
MibooGram/resources/genshin/material/example.html
LittleMengBot 5f33c5fc3a
✨ Add HTML rendering for /material
2023-04-04 22:02:14 +08:00

364 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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