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

}



</style>
<div class="container">
    <div class=" table-responsive">
        <table class="table table-hover table-bordered">
            <caption class="caption-top text-center">
                <div class="alert alert-warning">
                    <p class="m-0">
                        <strong>CSDN 2022 博客新星总排名</strong> 👉 绿色背景是总分前 100（晋级区）👈</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" href="/csdn/blogstar">总榜</a>
                    <a class="btn btn-primary d-none d-sm-block " href="/csdn/zong">总榜详细指标</a>
                    <a class="btn btn-primary active" href="/csdn/newstar">仅看新星</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<=200 %}
            <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>{{u.regtime}}</td>
                <td>{{u.totalScore}}</td>
            </tr>
            {%endfor%}

            </tbody>
        </table>
    </div>
</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 %}