PamGram/resources/starrail/player_card/player_card.html

121 lines
3.5 KiB
HTML
Raw Normal View History

2023-05-11 15:09:39 +00:00
<!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;
}
2024-03-15 12:46:16 +00:00
body {
width: 1050px;
}
2023-05-11 15:09:39 +00:00
</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"
2023-05-22 13:30:36 +00:00
style="background-image: url('{{ images.banner_url }}'); background-size: auto 130%;"
2023-05-11 15:09:39 +00:00
></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>
2023-06-07 06:24:36 +00:00
<div>Lv.{{ character.level }}</div>
2023-05-11 15:09:39 +00:00
</div>
</div>
{% include 'starrail/player_card/skills.html' %}
2023-05-22 13:30:36 +00:00
{% include 'starrail/player_card/stats.html' %}
2023-05-11 15:09:39 +00:00
<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 -->
2024-03-15 12:46:16 +00:00
<div class="px-5 relative mb-4">
2023-05-11 15:09:39 +00:00
<div class="grid grid-cols-3 gap-4">
{% include 'starrail/player_card/artifacts.html' %}
</div>
</div>
2024-03-15 12:46:16 +00:00
<!-- damage -->
{%- if damage_function_available == True -%}
<div class="px-5 relative">
{% include "starrail/player_card/damage.html" %}
</div>
{%- endif -%}
2023-05-11 15:09:39 +00:00
<!-- Logo -->
<div class="mt-4 relative">
<div class="text-gray-300 text-center opacity-70 text-lg">
2024-03-15 12:46:16 +00:00
Data from MiHoMo.Me × Inspired by Miao-Plugin × Damage Cal by StarRailUID
<br>Score by hsr-optimizer x Generated by PamGram
2023-05-11 15:09:39 +00:00
</div>
</div>
</div>
</body>
</html>