{% extends "base.html" %}
{% block content %}
<style>
@media (max-width: 540px) {
    table {
        font-size:10px !important;
    }
}


</style>
<div class="container">

    <table class="table table-hover table-bordered table-responsive">
        <caption class="caption-top text-center">
            <div class="alert alert-warning">
                <p class="m-0">
                    <strong>CSDN 2022 博客之星总排名</strong> 👉 绿色背景是总分前 200（晋级区）👈</p>
                <p class="text-success p-0"><small>数据同步时间：2023-01-04 21:00</small></p>
                <p class="m-0"><small>来都来了，不去给橡皮擦打个5分么？</small> <br> <a target="_blank"
                                                                        href="https://bbs.csdn.net/topics/611387187"><small>https://bbs.csdn.net/topics/611387187</small></a>
                </p>

            </div>
            <div class="btn-group btn-group-sm">
                <a class="btn btn-primary active" href="/csdn/blogstar">总榜</a>
                <a class="btn btn-primary d-none d-sm-block" href="/csdn/zong">总榜详细指标</a>
                <a class="btn btn-primary" href="/csdn/newstar">仅看新星</a>
            </div>
            <br>
            <div class="btn-group btn-group-sm mt-3 d-flex" style="font-size:12px;">
                <a class="btn btn-success" href="/csdn/blogstar?page=1">其它</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=2">前端</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=3">后端</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=4">大数据</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=5">云原生</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=6">前沿</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=7">人工智能</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=8">运维</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=9">移动</a>
                <a class="btn btn-success" href="/csdn/blogstar?page=10">物联网</a>
            </div>
        </caption>
        <thead>
        <tr>
            <th>排名</th>
            <th>昵称</th>
            <th>赛道</th>
            <th>状态</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        {% for u in user %}
        {% if loop.index<=bg_green %}
        <tr class="bg-success text-white">
            {% else %}
        <tr>
            {% endif %}
            <td>{{loop.index}}</td>
            <td>
                {% if loop.index<=bg_green %}
                <a href="{{u.url}}" target="_blank" style="color:white;">{{u.nickname}}</a>
                {% else %}
                <a href="{{u.url}}" target="_blank" style="color:black;">{{u.nickname}}</a>
                {% endif %}
            </td>
            <td>{% if u.cateName =='后端' %}
                <span class="badge bg-danger">{{u.cateName}}</span>
                {% elif u.cateName == '前端'%}
                <span class="badge bg-primary">{{u.cateName}}</span>
                {% elif u.cateName == '大数据与算法'%}
                <span class="badge bg-info">{{u.cateName}}</span>
                {% elif u.cateName == 'IT其他'%}
                <span class="badge bg-warning">{{u.cateName}}</span>
                {% elif u.cateName == '人工智能'%}
                <span class="badge bg-secondary">{{u.cateName}}</span>
                {% else %}
                <span class="badge bg-success">{{u.cateName}}</span>
                {% endif %}

            </td>
            <td>
                {% if u.star =='博客之星' %}
                <span class="badge bg-primary"> {{u.star}}</span>
                {% elif u.star == '博客新星'%}
                <span class="badge bg-info">{{u.star}}</span>
                {% else %}
                <span class="badge bg-dark">{{u.star}}</span>
                {% endif %}
            </td>
            <td>{{u.totalScore}}</td>
        </tr>
        {%endfor%}

        </tbody>
    </table>
</div>
<div class="card text-center d-none d-sm-block" style="position:fixed;top: 20px;right: 0px;">
    <div class="card-header ">2022年博客之星</div>
    <div class="card-body">
        <div class="alert alert-success">
            <p><strong>使用 Ctrl+F 检索自己的昵称即可</strong></p>
            <p><a href="https://bbs.csdn.net/topics/611387187" target="_blank" class="btn btn-primary btn-block"
                  data-bs-toggle="tooltip" title="快点去，快点去！">为【橡皮擦去打个 5 分】</a></p>
            <p class="text-danger">数据每天12:00前后同步 <br>得分越多，同步越快</p>
        </div>
    </div>
    <div class="card-footer ">
        橡皮擦等你的⭐⭐⭐⭐⭐
    </div>
</div>

{% endblock %}