mirror of
https://github.com/PaiGramTeam/MibooGram.git
synced 2024-11-27 18:31:25 +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.
106 lines
3.3 KiB
Django/Jinja
106 lines
3.3 KiB
Django/Jinja
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||
<link rel="shortcut icon" href="#" />
|
||
<link rel="stylesheet" type="text/css" href="ledger.css" />
|
||
<link rel="preload" href="../../fonts/tttgbnumber.ttf" as="font">
|
||
<link rel="preload" href="background/bg.webp" as="image">
|
||
<link rel="preload" href="background/chart.png" as="image">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container" id="container">
|
||
<div class="title-box">
|
||
<div class="info">
|
||
<div class="uid">ID：{{uid}}</div>
|
||
<div class="month">{{day}}月札记</div>
|
||
</div>
|
||
<img class="genshin_logo" src="../../bot/help/background/genshin.png" />
|
||
</div>
|
||
<div class="data-box">
|
||
<div class="month">
|
||
<div class="head">当月获取：</div>
|
||
<div class="primogems">
|
||
<div class="icon-ys"></div>
|
||
<div class="text">原石：{{ current_primogems }} | {{ gacha }} 抽</div>
|
||
</div>
|
||
<div class="primogems">
|
||
<div class="icon-mola"></div>
|
||
<div class="text">摩拉：{{ current_mora }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="day">
|
||
<div class="head">上月获取：</div>
|
||
<div class="primogems">
|
||
<div class="icon-ys"></div>
|
||
<div class="text">原石：{{ last_primogems }} | {{ last_gacha }} 抽</div>
|
||
</div>
|
||
<div class="primogems">
|
||
<div class="icon-mola"></div>
|
||
<div class="text">摩拉：{{ last_mora }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chart-box">
|
||
<div class="head">原石收入组成：</div>
|
||
<div class="chart-info">
|
||
<div id="chartContainer"></div>
|
||
<ul class="tooltip">
|
||
{% for category in categories %}
|
||
<li>
|
||
<i style="background: {{ category.color }}"></i>
|
||
<span class="action">{{ category.name }}</span> <em>{{ category.percentage }}%</em><span class="num">{{ category.amount }}</span>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="g2plot.min.js"></script>
|
||
<script>
|
||
const { Pie } = G2Plot;
|
||
const data = {{ categories | tojson }};
|
||
const color = {{ color | tojson }};
|
||
const piePlot = new Pie("chartContainer", {
|
||
renderer: "svg",
|
||
animation: false,
|
||
data,
|
||
appendPadding: 10,
|
||
angleField: "amount",
|
||
colorField: "name",
|
||
radius: 1,
|
||
innerRadius: 0.7,
|
||
color,
|
||
meta: {},
|
||
label: {
|
||
type: "inner",
|
||
offset: "-50%",
|
||
autoRotate: false,
|
||
style: {
|
||
textAlign: "center",
|
||
fontFamily: "tttgbnumber",
|
||
},
|
||
formatter: ({ percentage }) => {
|
||
return percentage > 2 ? `${percentage}%` : "";
|
||
},
|
||
},
|
||
statistic: {
|
||
title: {
|
||
offsetY: -18,
|
||
content: "总计",
|
||
},
|
||
content: {
|
||
offsetY: -10,
|
||
style: {
|
||
fontFamily: "tttgbnumber",
|
||
},
|
||
},
|
||
},
|
||
legend:false,
|
||
});
|
||
piePlot.render();
|
||
</script>
|
||
</body>
|
||
</html>
|