<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>*{padding:0;margin:0;}.flex-1{flex:1;}.flex-2{flex:2;}.flex-3{flex:3;}.flex-4{flex:4;}.flex-8{flex:8;}.flex-10{flex:10;}.main-content,body{width:1500px;font-size:30px;font-family:"Microsoft YaHei",serif;font-weight:bold;}.chart-box{margin:0 80px;margin-top:30px;background-color:#F2F2F2;height:400px;display:flex;border-radius:16px;}.chart-bar{flex:6;}.chart-pie{flex:4;}.page-box{width:1500px;display:flex;flex-direction:column;}.masking-header{display:flex;justify-content:flex-start;height:280px;width:auto;margin-top:10px;margin-left:10px;gap:15px;border-radius:36px;background:linear-gradient(to right,rgba(250,250,250,0.75) 600px,rgba(250,250,250,0));}.user-info{font-weight:bolder;line-height:30px;font-size:45px;}.user-sign-time{margin-top:30px;font-family:"Microsoft YaHei UI Light",serif;}.user-server{margin-top:5px;font-family:"Microsoft YaHei UI Light",serif;}.server-style{font-weight:bold;}.user-signature{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:30px;gap:10px;width:auto;background:rgba(0,0,0,0.1);border-radius:36px;margin-top:30px;}.ship-header{margin:-10px 400px 20px;text-align:center;font-size:55px;font-weight:bold;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;overflow:hidden;}.pr{display:flex;align-items:center;justify-content:center;font-weight:bold;line-height:80px;font-size:35px;border-radius:26px;margin-left:50px;margin-right:50px;}.recnet-time{text-align:center;font-weight:normal;margin-top:20px;}.overview-change{display:flex;margin-top:30px;padding:0 80px;height:450px;}.overview-change-item{flex:1;display:flex;flex-direction:column;margin:0 20px;}.item-top{flex:5;border-radius:16px;}.item-bottom{display:flex;flex:4;margin-top:20px;}.bottom-mini-item-left{margin-right:10px;}.bottom-mini-item-right{margin-left:10px;}.bottom-mini-item-left,.bottom-mini-item-right{display:flex;flex-direction:column;border-radius:16px;flex:1;}.one-background-color{background-color:#F2F2F2;}.two-background-color{background-color:#D9D9D9;}.three-background-color{background-color:#E4E4E4;}.item-top{display:flex;flex-direction:column;}.item-top div{height:120px;text-align:center;font-size:60px;}.item-top-top{color:#606266;font-weight:normal;line-height:150px;}.item-top-bottom{line-height:90px;}.mini-item-top{color:#606266;font-weight:normal;line-height:135px;}.mini-item-bottom{line-height:45px;}.bottom-mini-item-left div,.bottom-mini-item-right div{height:95px;text-align:center;font-size:35px;}.information-body{margin:0 100px;margin-top:30px;display:flex;flex-direction:column;border-radius:16px;}.information-col{height:60px;display:flex;line-height:60px;}.information-col-item{flex:1;text-align:center;}.random-header{margin:0 400px;margin-top:30px;height:60px;line-height:60px;border-radius:16px;text-align:center;}.random-table-header .random-col-item{line-height:60px;}.footer{margin-top:30px;text-align:center;font-weight:bold;font-size:24px;color:#909399;margin-bottom:20px;}.frag-data{display:flex;margin:30px 90px;}.frag-data-col{display:flex;flex:1;margin-bottom:20px;}.frag-item{flex:1;text-align:center;border-radius:16px;margin:0 10px;}.frag-key,.frag-value{height:100px;font-size:35px;}.frag-key{color:#606266;font-weight:normal;line-height:120px;}.frag-value{line-height:80px;}.ship-col-item-ship{overflow:hidden;display:flex;justify-content:flex-start;align-items:center;padding:0 0 0 15px;}.ship-name{text-align:left;margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1;width:0;}.ship-data-col{display:flex;height:90px;}.ship-information-col{color:#606266;height:60px;display:flex;}.ship-col-item{line-height:90px;text-align:center;}.recent-battle-text-wins{color:#8BC34A;}.recent-battle-text-lose{color:#DD3B2FFF;}.recent-battle-text-tie{color:#87CEEB;}.recent-time-header{margin:0 100px;margin-top:20px;width:200px;height:60px;line-height:60px;border-radius:16px;text-align:center;}
</style>
    <style>
        .xi-row {
            margin: 0 50px;
            height: 300px;
            display: flex;
            text-align: center;
        }

        .ship-count {
            flex: 1;
            background-color: #F2F2F2;
            border-radius: 16px;
        }

        .xi {
            flex: 2;
            background-color: #F2F2F2;
            margin-left: 20px;
            border-radius: 16px;
            display: flex;
        }

        .type {
            font-size: 50px;
            color: #767171;
            font-weight: normal;
            text-align: left;
            margin-left: 75px;
            margin-top: 70px;
        }

        .in-port {
            font-size: 20px;
            color: #767171;
            font-weight: normal;
            text-align: left;
            margin-left: 75px;
        }

        .number {
            font-size: 50px;
            color: rgb(1,129,118);
            text-align: left;
            margin-left: 75px;
        }

        .xi-right img {
            width: 100%;
            margin: 44px 0;
        }

        .x-row {
            margin: 0 50px;
            margin-top: 30px;
            height: 300px;
            background-color: #F2F2F2;
            border-radius: 16px;
            display: flex;
        }

        .x-right {
            flex: 5;
        }

        .x-right {
            margin-bottom: 25px;
            margin-right: 30px;
            display: flex;
        }

        .total-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            text-align: center;
        }

        .total-item img {
            min-height: 150px;
        }

        .mini-count {
            font-size: 20px;
            display: flex;
            flex-direction: column;
        }

        .ix-row {
            margin: 0 50px;
            margin-top: 30px;
            background-color: #F2F2F2;
            border-radius: 16px;
            display: flex;
            flex-wrap: wrap;
        }

        .tier-item {
            text-align: center;
            flex: 1;
            margin: 10px 10px;
        }

        .coin {
            margin: 0 50px;
            margin-top: 30px;
            background-color: #F2F2F2;
            text-align: center;
            height: 120px;
            line-height: 120px;
            display: flex;
            justify-content: center;
            font-weight: normal;
            color: #767171;
            font-size: 45px;
            border-radius: 16px;
        }

        .coin img {
            height: 80px;
            margin: 20px 0;
        }


        .shop-item	{
            margin: 20px 0;
            flex: 1 1 18%;
            text-align: center;
        }

        .ix-right img {
            width: 200px;
            margin: 50px;
        }
    </style>
    <style>
        {%if data['userInfo']['avatar']['colorName']['status']==2 %}
            .mirage-text {
                background: {{ data['userInfo']['avatar']['colorName']['data'] }};
                color: transparent;
                -webkit-background-clip: text;
                animation: ran-7e872de5 10s linear infinite;
            }
        {% endif %}

        .page-header {
            border-radius: 36px;
            height: 300px;
            margin: 50px 50px 30px;
            display: flex;
            justify-content: flex-start;
        {%if data['userInfo']['avatar']['banner']['status']==2 %}
            background: url("{{data['userInfo']['avatar']['banner']['data']}}") no-repeat;
        {% endif %}
            background-position: center;
            background-size: 100%;
        }

        .avatar-header {
            filter: drop-shadow(9px 9px 12px rgba(0, 0, 0, 0.3));
            border-radius: 36px;
            height: 93%;
            width: 260px;
            margin-left: 10px;
            margin-top: 10px;
        {%if data['userInfo']['avatar']['avatar']['status']==2 %}
            background: url("{{data['userInfo']['avatar']['avatar']['data']}}") no-repeat;
        {% else %}
            background: url("{{data['userInfo']['dogTag']}}") no-repeat;
        {% endif %}
            background-position: center;
            background-size: 100%;
        }

        .clan-user-server {
            margin: 20px;
            text-align: left;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            font-weight: bold;
            flex-grow: 1;
            justify-content: center;
        {% if data['userInfo']['avatar']['sign']['status'] != 2 %}
            gap: 20px;
        {% endif %}

        }
    </style>
<body>
<div class="main-content">
    <div class="page-box">
        <div class="page-header one-background-color">
            <div class="masking-header">
                <div class="avatar-header"></div>
                <div class="clan-user-server">
                    <div class="user-info ">
                        {#                    是否有工会#}
                        {% if data['userInfo']['clanInfo']['tag'] %}
                            <span style="color: {{ data['userInfo']['clanInfo']['color'] }};">[{{ data['userInfo']['clanInfo']['tag'] }}]</span>
                        {% endif %}
                        <span class="mirage-text">{{ data['userInfo']['userName'] }}</span></div>
                    <div class="user-sign-time">注册时间: <span
                            class="server-style">{{ time.strftime('%Y-%m-%d %H:%M',time.localtime(int(abs(data['userInfo']['accountCreateTime'])))) }}</span>
                    </div>
                    <div class="user-server">服务器: <span class="server server-style">{{ data['userInfo']['serverCn'] }}</span></div>
                    {% if data['userInfo']['avatar']['sign']['status'] == 2 %}
                        <div class="user-signature">
                            {{ data['userInfo']['avatar']['sign']['data'] }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="xi-row">
            <div class="ship-count">
                <div class="type">
                    总船只
                </div>

                {% if data['auth'] %}
                    <div class="in-port" style="color: green;">
                        已授权
                    </div>
                {% else %}
                    <div class="in-port" style="color: red;">
                        未授权
                    </div>
                {% endif %}


                <div class="number">
                    {{ data['shipCount'] }}
                </div>
            </div>
            <div class="xi">
                <!-- 等级柱形图 -->
                <div class="chart-bar"></div>
            </div>
        </div>

        <div class="recnet-time">
            <p>授权数据校准请访问"wows.mgaia.top"，右上角选择服务器后点击WG图标</p>
        </div>

        <div class="x-row">
            <div class="x-right">
                <div class="total-item">
                    <div class="total-top">
                        <img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/resource_Icon/steel.svg"/>
                    </div>
                    <div class="total-bottom" style="color: rgb(0,131,216);">
                        <div><span id="steel">{{ data['resourceView']['sumResource'][1]['bonusMap']['0'] }}</span>钢铁</div>
                        <div class="mini-count">
                            <div id="steel-1"></div>
                            <div id="steel-2"></div>
                            <div id="steel-3"></div>
                        </div>
                    </div>
                </div>
                <div class="total-item">
                    <div class="total-top">
                        <img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/resource_Icon/coal.svg"/>
                    </div>
                    <div class="total-bottom" style="color: rgb(144,206,87);">
                        <div><span id="coal">{{ data['resourceView']['sumResource'][2]['bonusMap']['0'] }}</span>煤炭</div>
                        <div class="mini-count">
                            <div id="coal-1"></div>
                            <div id="coal-2"></div>
                            <div id="coal-3"></div>
                        </div>
                    </div>
                </div>
                <div class="total-item">
                    <div class="total-top">
                        <img src="https://hikari-resource.oss-cn-shanghai.aliyuncs.com/resource_Icon/research.svg"/>
                    </div>
                    <div class="total-bottom" style="color: rgb(6,130,105);">
                        <div><span id="research">{{ data['resourceView']['sumResource'][0]['bonusMap']['0'] }}</span>研发点</div>
                        <div class="mini-count">
                            <div id="research-1"></div>
                            <div id="research-2"></div>
                            <div id="research-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ix-row">

            {% for each in data['resourceView']['infos'] %}
                <div class="tier-item">
                    <div style="font-weight: normal; color: rgb(118,113,113); font-size: 45px;">{{ ['0','I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI'][each['level']] }}</div>
                    {% if each['bonusType'] == 'RESEARCH' %}
                        <div style="color: rgb(2,123,106);">{{ each['shipCount'] }}</div>
                        <div style="height: 10px; background-color: rgb(6,130,105); border-radius: 3px;"></div>
                        <div style="color: rgb(121, 93, 20);">{{ each['bonusMap']['0'] }}</div>
                        <div style="color: rgb(6,130,105);">研发</div>
                    {% elif each['bonusType'] == 'COAL' %}
                        <div style="color: rgb(144,206,87);">{{ each['shipCount'] }}</div>
                        <div style="height: 10px; background-color: rgb(144,206,87); border-radius: 3px;"></div>
                        <div style="color: rgb(121, 93, 20);">{{ each['bonusMap']['0'] }}</div>
                        <div style="color: rgb(144,206,87);">煤炭</div>
                    {% elif each['bonusType'] == 'STEEL' %}
                        <div style="color: rgb(2,123,106);">{{ each['shipCount'] }}</div>
                        <div style="height: 10px; background-color: rgb(0,131,216); border-radius: 3px;"></div>
                        <div style="color: rgb(121, 93, 20);">{{ each['bonusMap']['0'] }}</div>
                        <div style="color: rgb(0,131,216);">钢铁</div>
                    {% elif each['bonusType'] == 'TOKEN' %}
                        <div style="color: rgb(226, 0, 0);">{{ each['shipCount'] }}</div>
                        <div style="height: 10px; background-color: rgb(226, 0, 0); border-radius: 3px;"></div>
                        <div style="color: rgb(121, 93, 20);">{{ each['bonusMap']['0'] }}</div>
                        <div style="color: rgb(226, 0, 0);">代币</div>
                    {% endif %}
                </div>
            {% endfor %}



        </div>

        <div class="coin">
            <img src="{{ data['exchangeView']['iconUrl'] }}">
            <div style="width: 30px;"></div>
            <div>{{ data['exchangeView']['name'] }}&nbsp;&nbsp;</div>
            <div style="font-weight: bold;">{{ data['exchangeView']['sumToken'] }}</div>
            <div>个</div>
        </div>

        <div class="ix-row">
            {% for each in data['exchangeView']['exchangeList'] %}
                <div class="shop-item">
                    <div style="height: 150px;">
                        <img src="{{ each['iconUrl'] }}" style="width: 160px;max-height: 140px; display: inline-block">
                    </div>
                    {% if each['have'] %}
                        <div style="font-size: 22px; font-weight: normal;color: #DF9B2D;">{{ each['name'] }}</div>
                    {% else %}
                        <div style="font-size: 22px; font-weight: normal;">{{ each['name'] }}</div>
                    {% endif %}
                    {% if each['maxNumber'] == 0 %}
                        <div style="font-size: 22px; font-weight: normal;">可无限兑换</div>
                    {% else %}
                        <div style="font-size: 22px; font-weight: normal;">最多可兑换&nbsp;&nbsp;<span>{{ each['maxNumber'] }}</span></div>
                    {% endif %}
                    <div style="font-weight: normal; display: flex; justify-content: center;">
                        <img src="{{ data['exchangeView']['iconUrl'] }}" style="max-width: 50px; display: inline-block;">
                        <div style="width: 20px;"></div>
                        <div style="display: flex; justify-content: center; align-items: center; font-size: 24px;">{{ each['price'] }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>

{#        {% if data['exchangeView']['exchangeSumToken'] > 0 %}#}
{#        <div class="coin">#}
{#            <div>兑换全部物品所需</div>#}
{#            <div style="font-weight: bold;">{{ data['exchangeView']['exchangeSumToken'] }}</div>#}
{#        </div>#}
{#        {% endif %}#}

        {#扩展兑换列表#}
        {% for each in data['exchangeView']['extend'] %}
            <div class="coin">
                <div style="width: 30px;"></div>
                <div>{{ each['key'] }}&nbsp;&nbsp;</div>
            </div>
            <div class="ix-row">
                {% for temp in each['value'] %}
                    <div class="shop-item">
                        <div style="height: 150px;">
                            <img src="{{ temp['iconUrl'] }}" style="width: 160px;max-height: 140px; display: inline-block">
                        </div>
                        {% if temp['have'] %}
                            <div style="font-size: 22px; font-weight: normal;color: #DF9B2D;">{{ temp['name'] }}</div>
                        {% else %}
                            <div style="font-size: 22px; font-weight: normal;">{{ temp['name'] }}</div>
                        {% endif %}
                        <div style="font-size: 22px; font-weight: normal;">{{ temp['des'] }}</div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}

        <div class="footer">
            <p>https://github.com/benx1n/HikariBot</p>
            <p>频道搜索”yuyuko”即可使用稳定的腾讯官方机器人~</p>
            <p>©yuyuko-team</p>
        </div>
    </div>
</div>
</body>
{% if template_path and template_path/"echarts.js" %}
    <script src="file:\\{{template_path}}/echarts.js"></script>
{% else %}
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.js"></script>
{% endif %}
<script>
    let steel_count = document.getElementById("steel").innerText;
    document.getElementById("steel-1").innerText = parseInt(steel_count * 1.05) + " +5%";
    document.getElementById("steel-2").innerText = parseInt(steel_count * 1.07) + " +7%";
    document.getElementById("steel-3").innerText = parseInt(steel_count * 1.10) + " +10%";

    let coal_count = document.getElementById("coal").innerText;
    document.getElementById("coal-1").innerText = parseInt(coal_count * 1.05) + " +5%";
    document.getElementById("coal-2").innerText = parseInt(coal_count * 1.07) + " +7%";
    document.getElementById("coal-3").innerText = parseInt(coal_count * 1.10) + " +10%";

    let research_count = document.getElementById("research").innerText;
    document.getElementById("research-1").innerText = parseInt(research_count * 1.01) + " +1%";
    document.getElementById("research-2").innerText = parseInt(research_count * 1.03) + " +3%";
    document.getElementById("research-3").innerText = parseInt(research_count * 1.05) + " +5%";
</script>

<script>
    window.onload = function () {
        drawBarChart();
    };

    function drawBarChart() {
        var barChart = echarts.init(document.querySelector('.chart-bar'));
        var barOption = {
            animation: false,
            tooltip: {},
            label: {
                position: 'top',
                show: true,
                fontSize: '15',
                color: '#303133',
            },
            xAxis: {
                data: ['V', 'VI', 'VII', 'VIII', 'IX', 'X', '★'],
                axisLabel: {
                    align: 'center',
                    fontSize: '20',
                }
            },
            yAxis: {
                axisLabel: {
                    align: 'center',
                    fontSize: '20',
                }
            },
            series: [{
                name: '持有数',
                type: 'bar',
                data: [
                    {% for each in data['levelCount'] %}
                        {{ each['value'] }},
                    {% endfor %}
                ],
                itemStyle: {
                    color: '#D6ECFB40',
                    borderWidth: 1,
                    borderType: 'solid',
                    borderColor: '#9FB8FF',
                    shadowColor: '#9FB8FF',
                    shadowBlur: 3
                },
            }]
        };
        barChart.setOption(barOption);
    }
</script>
</html>
