PamGram/resources/starrail/player_card/player_card.html

121 lines
3.5 KiB
HTML
Raw Permalink 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(../../genshin/player_card/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;
font-size: 1.25em;
}
body {
width: 1050px;
}
</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_detail.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('{{ images.banner_url }}'); background-size: auto 130%;"
></div>
<div class="relative w-full flex p-5 space-x-8">
{% include 'starrail/player_card/constellations.html' %}
<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_detail.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>
</div>
{% include 'starrail/player_card/skills.html' %}
{% include 'starrail/player_card/stats.html' %}
<div class="flex flex-col space-y-2">
{% if weapon != none %}
{% include 'starrail/player_card/weapon.html' %}
{% endif %}
{% include 'starrail/player_card/score.html' %}
</div>
</div>
</div>
</div>
<!-- Info -->
<div class="px-5 relative mb-4">
<div class="grid grid-cols-3 gap-4">
{% include 'starrail/player_card/artifacts.html' %}
</div>
</div>
<!-- damage -->
{%- if damage_function_available == True -%}
<div class="px-5 relative">
{% include "starrail/player_card/damage.html" %}
</div>
{%- endif -%}
<!-- Logo -->
<div class="mt-4 relative">
<div class="text-gray-300 text-center opacity-70 text-lg">
Data from MiHoMo.Me × Inspired by Miao-Plugin × Damage Cal by StarRailUID
<br>Score by hsr-optimizer x Generated by PamGram
</div>
</div>
</div>
</body>
</html>