PaiGram/resources/genshin/player_card/player_card.jinja2
洛水居室 eed418477f
♻️ Rename HTML templates to use .jinja2 extension
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.
2023-05-09 19:19:32 +08:00

114 lines
3.4 KiB
Django/Jinja
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 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>