mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-11-22 15:37:21 +00:00
eed418477f
Previously, all templates were named with the .html extension, which caused problems for editors to recognize the Jinja2 syntax used in them. In this commit, all templates have been renamed to use the .jinja2 extension to better reflect their use of Jinja2 and to improve editor recognition.
168 lines
7.1 KiB
Django/Jinja
168 lines
7.1 KiB
Django/Jinja
<!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-{{ character.element | lower }}.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('{{ character.image }}'); 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">
|
||
{{ character.name }}
|
||
</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/{{ character.association | lower}}.webp'); background-size: auto 65%;">
|
||
<div class="font-shadow">
|
||
<div class="">★等级突破★</div>
|
||
<div class="text-left m-10">
|
||
<span style="border-left: 8px solid;"> </span>
|
||
<span> 角色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;">
|
||
{% for material in level_up_materials %}
|
||
<div class="text-center w-28">
|
||
<div class="w-28 h-28">
|
||
<div class="text-right text-2xl mr-1 num">{{ material.num }}</div>
|
||
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
|
||
style="background-image: url('../../background/rarity/half/{{ material.rarity }}.png')">
|
||
<div class="w-28 h-28 -my-8"
|
||
style="background-image: url('{{ material.icon }}'); background-size: auto 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-2xl">
|
||
<div style="word-wrap:break-word;">{{ material.name }}</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
<div class="relative text-2xl mt-5 font-shadow">
|
||
<div class="text-2xl text-gray-700" style="font-family: HYWH,serif">
|
||
<span>突破至81级（其它材料数量不变）： 摩拉 x</span>
|
||
<span class="text-3xl">1,444,540 </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;"> </span>
|
||
<span> 满级天赋升级材料</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;">
|
||
{% for material in talent_materials %}
|
||
<div class="text-center w-28">
|
||
<div class="w-28 h-28">
|
||
<div class="text-right text-2xl mr-1 num">{{ material.num }}</div>
|
||
<div class="rounded-lg shadow-lg bg-contain bg-no-repeat"
|
||
style="background-image: url('../../background/rarity/half/{{ material.rarity }}.png')">
|
||
<div class="w-28 h-28 -my-8"
|
||
style="background-image: url('{{ material.icon }}'); background-size: auto 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-2xl">
|
||
<div style="word-wrap:break-word;">{{ material.name }}</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</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>将角色天赋升至{{ talent_level }}时所需材料：</caption>
|
||
<tr><th></th></tr>
|
||
<tr>
|
||
{% for i in range(1, 4) %}
|
||
{% if talent_amount[i] > 0 %}
|
||
<td class="px-6 py-1">{{ talent_materials[i - 1].name }} x{{ talent_amount[i] }}</td>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</tr>
|
||
<tr>
|
||
{% for i in range(4, 7) %}
|
||
{% if talent_amount[i] > 0 %}
|
||
<td class="px-6 py-1">{{ talent_materials[i - 1].name }} x{{ talent_amount[i] }}</td>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</tr>
|
||
<tr>
|
||
{% for i in range(7, 9) %}
|
||
{% if talent_amount[i] > 0 %}
|
||
<td class="px-6 py-1">{{ talent_materials[i - 1].name }} x{{ talent_amount[i] }}</td>
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% if talent_amount[0] > 0 %}
|
||
<td class="px-6 py-1">摩拉 x{{ talent_amount[0] }}</td>
|
||
{% endif %}
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-xl text-center my-5 num">
|
||
Created by PaiGram
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|