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.
114 lines
3.4 KiB
Django/Jinja
114 lines
3.4 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 type="text/css" href="../../styles/public.css" rel="stylesheet" />
|
||
<style>
|
||
.text-shadow {
|
||
text-shadow: 0 0.08em 0.1em #000, 0 0.1em 0.3em rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.star {
|
||
background-image: url("./img/star.png");
|
||
height: 1rem;
|
||
width: 5rem;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
}
|
||
.star-1 {
|
||
background-position-y: 0;
|
||
}
|
||
.star-2 {
|
||
background-position-y: -1rem;
|
||
}
|
||
.star-3 {
|
||
background-position-y: -2rem;
|
||
}
|
||
.star-4 {
|
||
background-position-y: -3rem;
|
||
}
|
||
.star-5 {
|
||
background-position-y: -4rem;
|
||
}
|
||
@font-face {
|
||
font-family: shicon;
|
||
src: url(fonts/shicon.woff) format("woff");
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: block;
|
||
}
|
||
|
||
.enka-log {
|
||
line-height: 0;
|
||
margin-right: 0.3rem;
|
||
}
|
||
.enka-log:before {
|
||
content: "\e93a";
|
||
font-family: shicon, serif;
|
||
font-size: 1.25em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-xl text-neutral-200">
|
||
<div
|
||
class="data bg-no-repeat bg-cover pb-5 min-w-[845px] overflow-hidden"
|
||
style="background-image: url('img/bg-{{ character.element.name | lower }}.jpg')"
|
||
>
|
||
<div class="relative mb-4 overflow-hidden">
|
||
<!-- Character Background -->
|
||
<div
|
||
class="absolute w-full h-full -left-1/4 opacity-80 bg-no-repeat bg-center"
|
||
style="background-image: url('{{ character.image.banner.url }}'); background-size: auto 100%;"
|
||
></div>
|
||
<div class="relative w-full flex p-5 space-x-8">
|
||
{% include "genshin/player_card/constellations.jinja2" %}
|
||
|
||
<div class="flex-1 space-y-4">
|
||
<div class="text-right italic">
|
||
<div class="characters-name text-5xl font-bold text-shadow mb-2">
|
||
{{ character.name }}
|
||
</div>
|
||
<div
|
||
class="flex flex-row justify-end text-2xl text-shadow space-x-6"
|
||
>
|
||
<div>UID {{ uid }}</div>
|
||
<div>Lv.{{ character.level }}</div>
|
||
<div
|
||
class="rounded-lg pl-1 pr-3 {% if character.friendship_level >= 10 %} bg-red-600 {% else %} bg-gray-600 {% endif %}"
|
||
>
|
||
❤ {{ character.friendship_level }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% include "genshin/player_card/skills.jinja2" %} {% include
|
||
"genshin/player_card/stats.jinja2" %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info -->
|
||
<div class="px-5 relative">
|
||
<div class="grid grid-cols-3 gap-4">
|
||
<div class="flex flex-col space-y-2">
|
||
{% include "genshin/player_card/weapon.jinja2" %} {% include
|
||
"genshin/player_card/score.jinja2" %}
|
||
</div>
|
||
|
||
{% include "genshin/player_card/artifacts.jinja2" %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Logo -->
|
||
<div class="mt-4 relative">
|
||
<div class="text-gray-300 text-center opacity-70 text-lg">
|
||
Data from <span class="enka-log"></span>Enka.Network × Inspired by
|
||
Miao-Plugin
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|