feat: 优化网页系统

app/rank_views.py

@@ -14,20 +14,23 @@ def index():
     return render_template("index.html", loc=Config.base_location)
 
 
+@main.route('/start')
+def start():
+    return render_template("start.html", loc=Config.base_location)
+
+
 @main.route('/rank_up')
 def rank_up():
     global rank_website
-    head = ["#", "UserName", "UserID", "Reputation", "Score"]
     data = rank_website.get_rank("DESC")
-    return render_template("ranking.html", rank_head=head, rank_info=data, ranking_name="高分榜")
+    return render_template("ranking.html", rank_info=data, ranking_name="高分榜")
 
 
 @main.route('/rank_down')
 def rank_down():
     global rank_website
-    head = ["#", "UserName", "UserID", "Reputation", "Score"]
     data = rank_website.get_rank("ASC")
-    return render_template("ranking.html", rank_head=head, rank_info=data, ranking_name="警示榜")
+    return render_template("ranking.html", rank_info=data, ranking_name="警示榜")
 
 
 @main.app_errorhandler(404)

app/rank_web.py

@@ -21,13 +21,13 @@ class RankWebsite:
         res = []
         for index in range(cur.rowcount):
             i = cur.fetchone()
-            res.append((f"NO.{index + 1}", i[1], i[0][:Config.tk_show_uid_len], str(i[3]), str(i[2])))
+            res.append((f"{index + 1}", i[1], i[0][:Config.tk_show_uid_len], str(i[3]), str(i[2])))
         return res
 
     def run(self,
             host: Optional[str] = None,
             port: Optional[int] = None,
-            debug: Optional[bool] = None,
+            debug: Optional[bool] = True,
             load_dotenv: bool = True,
             **options,
             ):

app/static/styles/base.css

@@ -1,13 +1,102 @@
 html {
     font-size: 15px;
-    font-family: 'Open Sans', sans-serif;
-    background-color: #F0FFF0;
+    font-family: 'Noto Sans SC', sans-serif;
 }
 
-h1, h2 {
+ul.top-nav {
+    background-color: #F08080;
     text-align: center;
 }
 
-div.welcome {
+li.top-nav-item {
+    display: inline-block;
+    padding: 20px 20px;
+}
+
+a.top-nav-item {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+a.top-nav-item, a.top-nav-item:hover, a.top-nav-item:active, a.top-nav-item:link, a.top-nav-item:visited {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+a.top-nav-item:hover, a.top-nav-item:active {
+    text-decoration: none;
+    color: #800080;
+}
+
+@keyframes logo-run {
+    0% {
+        left: 0;
+    }
+    50% {
+        left: 100%;
+        transform: translateX(-100%);
+    }
+    100% {
+        left: 0;
+    }
+}
+
+section.logo {
+    position: relative;
+    height: 200px;
+}
+
+img.logo {
+    position: absolute;
+    left: 0;
+    max-height: 200px;
+    max-width: 200px;
+    animation: logo-run 15s infinite;
+}
+
+#bottom-nav {
+    position: fixed;
+    top: 95%;
+    background-color: black;
     text-align: center;
+    vertical-align: center;
+    height: 5%;
+    width: 100%;
+}
+
+.bottom-nav-item {
+    display: block;
+    font-size: 15px;
+    color: #FFFFFF;
+}
+
+a#github-link, a#github-link:hover, a#github-link:active, a#github-link:link, a#github-link:visited {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+a#github-link:hover, a#github-link:active {
+    text-decoration: none;
+    color: #800080;
+}
+
+#last-p {
+    margin-top: 5%;
+}
+
+@media all and (max-width: 992px) {
+    /* 小屏幕(手机) */
+    #main {
+        position: relative;
+        left: 3%;
+        width: 94%;
+    }
+}
+
+@media not all and (max-width: 992px) {
+    #main {
+        position: relative;
+        left: 30%;
+        width: 40%;
+    }
 }

app/static/styles/index.css

@@ -0,0 +1,69 @@
+body {
+    background-image: url("../images/starry-sky.jpg");
+}
+
+#base {
+    position: relative;
+}
+
+#title-1 {
+    text-align: center;
+    color: #F0FFF0;
+    font-size: 50px;
+    margin-top: 10%;
+}
+
+#title-2 {
+    text-align: center;
+    color: #F0FFF0;
+    font-size: 30px;
+    margin-top: 2%;
+    text-decoration: underline;
+}
+
+#btn {
+    position: absolute;
+    display: block;
+    text-align: center;
+    color: #F0FFF0;
+    background-color: rgb(106, 90, 205);
+    border-radius: 10px;
+    border-width: 2px;
+    border-style: ridge;
+    border-color: rgb(123, 104, 238);
+    font-size: 30px;
+    margin-top: 20%;
+    height: 100px;
+
+    transition: width 1s, height 1s, left 1s, border-radius 1s;
+}
+
+@media all and (max-width: 992px) {
+    #btn {
+        left: 3%;
+        width: 94%;
+    }
+}
+
+@media not all and (max-width: 992px) {
+    #btn {
+        left: 45%;
+        width: 10%;
+    }
+
+    #btn:hover {
+        left: 40%;
+        width: 20%;
+        height: 150px;
+        border-radius: 30px;
+    }
+
+    #btn:active {
+        color: black;
+        background-color: #F0FFF0;
+    }
+}
+
+#main {
+    text-align: center;
+}

app/static/styles/ranking.css

@@ -1,28 +1,31 @@
-.rank_table {
-    background-color: #E9967A;
-    font-size: 17px;
+section#ranking-section {
+    position: relative;
+    left: 30%;
+    width: 40%;
 }
 
-table.rank_table {
-    border-width: 5px;
-    border-color: #F4A460;
-    border-style: ridge;
-
-    padding: 5px 5px;
-    margin: 5px 5% 5px;
-    width: 90%;
+li#ranking-item-1 {
+    background-color: #eaff56;
 }
 
-tr.rank_table {
-    text-align: left;
+li#ranking-item-2 {
+    background-color: #ffa631;
+}
 
+li#ranking-item-3 {
+    background-color: #ff7500;
 }
 
-td.rank_table {
-    text-align: left;
+li.ranking-item {
+    border-width: 2px;
+    border-style: ridge;
+    border-color: #F08080;
+    margin: 3% auto;
+    text-align: center;
 }
 
-caption.rank_table {
-    font-size: 30px;
-    background-color: #F0FFF0;
+p.ranking-no, p.ranking-name, p.ranking-uid, p.ranking-score, p.ranking-reputation {
+    display: inline-block;
+    font-size: 17px;
+    font-weight: bold;
 }

app/static/styles/reset.css

@@ -0,0 +1,37 @@
+body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+body {
+    background: #fff;
+    color: #333;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+ul, ol {
+    list-style-type: none;
+}
+
+select, input, img, select {
+    vertical-align: middle;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:link {
+    color: #009;
+}
+
+a:visited {
+    color: #800080;
+}
+
+a:hover, a:active, a:focus {
+    color: #c00;
+    text-decoration: underline;
+}

app/static/styles/start.css

@@ -0,0 +1,16 @@
+h2.hello {
+    font-size: 27px;
+    margin-top: 3%;
+    margin-bottom: 3%;
+}
+
+h3.hello {
+    font-size: 24px;
+    margin-top: 2%;
+    margin-bottom: 2%;
+}
+
+p.hello {
+    font-size: 20px;
+    text-indent: 2em;
+}

app/templates/base.html

@@ -1,39 +1,74 @@
-{% import "macro.html" as macro %}
+{% import "macro.html" as macro %}  <!-- 导入宏 -->
 
 <!DOCTYPE html>
 <html lang="ch">
 <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
+
+    <!-- 针对移动端的优化 width为设备大小, user-scalable不允许用户缩放 initial-scale首次加载缩放大小为1.0 -->
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+
+    <!--  针对ie的设置  -->
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
     {% block font %}
+        <!-- Google Font 字体设置 -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;1,300&display=swap"
-              rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300&display=swap" rel="stylesheet">
     {% endblock %}
 
+
     {% block style %}
+        <link href="{{ url_for('static', filename='styles/reset.css') }}" rel="stylesheet">
         <link href="{{ url_for('static', filename='styles/base.css') }}" rel="stylesheet">
-        <link href="{{ url_for('static', filename='styles/nav.css') }}" rel="stylesheet">
+        <link href="{{ url_for('static', filename='styles/ranking.css') }}" rel="stylesheet">
     {% endblock %}
 
-    <title> HG: {% block  title %} HGSSystem {% endblock %} </title>
+    {% block head %} {% endblock %}
+
+    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
+    <title> {% block  title %} HGSSystem {% endblock %} </title>
 </head>
 
 <body>
 
-{% block navbar %}
-    <nav id="nav">
-        <ul>
-            <li><h1 class="nav-h1"> HGSSystem-在线榜单 </h1></li>
-            <li><a class="nav-item" href="{{ url_for('main.index') }}">首页</a></li>
-            <li><a class="nav-item" href="{{ url_for('main.rank_up') }}">高分榜</a></li>
-            <li><a class="nav-item" href="{{ url_for('main.rank_down') }}">警示榜</a></li>
+{% block nav %}
+    <nav id="top-nav">
+        <section class="logo">
+            <img class="logo" src=" {{ url_for('static', filename='images/HGSSystem.png') }} " alt="HGSSystem Logo">
+        </section>
+        <ul class="top-nav">
+            <li class="top-nav-item"><a class="top-nav-item" href="{{ url_for('main.start') }}"> 首页 </a></li>
+            <li class="top-nav-item"><a class="top-nav-item" href="{{ url_for('main.rank_up') }}"> 高分榜 </a></li>
+            <li class="top-nav-item"><a class="top-nav-item" href="{{ url_for('main.rank_down') }}"> 警告榜 </a></li>
+            <li class="top-nav-item"><a class="top-nav-item"> 积分商城 </a></li>
         </ul>
     </nav>
 {% endblock %}
 
-{% block content %}{% endblock %}
+<article>
+    {% block h1_title_ %}
+        <section style="text-align: center">
+            <h1 style=";font-size: 35px;font-weight: bold;margin: 3% auto 4%;"> {% block h1_title %} {% endblock %}</h1>
+        </section>
+    {% endblock %}
+    {% block content_ %}
+        <section id="main">
+            {% block content %}{% endblock %}
+        </section>
+    {% endblock %}
+</article>
+
+{% block bnav %}
+    <nav id="bottom-nav">
+        <p class="bottom-nav-item"> 版权归属 (c) SuperHuan<br>在
+            <a id="github-link" href="https://github.com/SuperH-0630/HGSSystem">Github</a>上查看</p>
+    </nav>
+{% endblock %}
+
+<p id="last-p"></p>  <!-- 占位作用 -->
 
 </body>
 </html>

app/templates/index.html

@@ -1,13 +1,22 @@
 {% extends "base.html" %}
 
-{% block title %} 排行榜 {% endblock %}
+{% block title %} Hello-HGSSystem {% endblock %}
 
-{% block content %}
+{% block style %}
     {{ super() }}
+    <link href="{{ url_for('static', filename='styles/index.css') }}" rel="stylesheet">
+{% endblock %}
 
-    <div class="welcome">
-        <h2>欢迎</h2>
-        <p>欢迎查阅 {{ loc }} 地区的垃圾分类榜单</p>
-        <p>目前支持的榜单包括：高分榜和警示榜</p>
-    </div>
+{% block nav %} {% endblock %}
+{% block bnav %} {% endblock %}
+{% block h1_title_ %} {% endblock %}
+
+{% block content_ %}
+    <section id="base">
+        <h1 id="title-1"> 欢迎，HGSSystem在线系统 </h1>
+        <h2 id="title-2"> {{ loc }} 站 </h2>
+        <form method="get" action="{{ url_for('main.start') }}">
+            <input id="btn" type="submit" value="开始">
+        </form>
+    </section>
 {% endblock %}

app/templates/rank_macro.html

@@ -1,26 +1,16 @@
-{% macro get_rank_head(heads) %}
-    <thead class="rank_table">
-    <tr class="rank_table">
-        {% for head in heads %}
-            <th class="rank_table" scope="col">{{ head|safe }}</th>
-        {% endfor %}
-    </tr>
-    </thead>
-{% endmacro %}
-
 {% macro _get_rank(infos) %}
-    <tr class="rank_table">
-        <th class="rank_table" scope="row"> {{ infos[0]|safe }} </th>
-        {% for info in infos[1:] %}
-            <td class="rank_table"> {{ info|safe }} </td>
-        {% endfor %}
-    </tr>
+    <li id="ranking-item-{{ infos[0] }}" class="ranking-item">
+        <p class="ranking-no"> {{ infos[0] }} </p>
+        <p class="ranking-name"> &nbsp;&nbsp;&nbsp;&nbsp;{{ infos[1] }} </p>
+        <br>
+        <p class="ranking-uid"> {{ infos[1] }} </p>
+        <p class="ranking-reputation"> &nbsp;&nbsp;&nbsp;&nbsp;Reputation: {{ infos[3] }} </p>
+        <p class="ranking-score"> &nbsp;&nbsp;&nbsp;&nbsp;Score: {{ infos[4] }} </p>
+    </li>
 {% endmacro %}
 
 {% macro get_rank(info_lines) %}
-    <tbody class="rank_table">
     {% for line in info_lines %}
         {{ _get_rank(line) }}
     {% endfor %}
-    </tbody>
 {% endmacro %}

app/templates/ranking.html

@@ -1,25 +1,16 @@
 {% extends "base.html" %}
 {% import "rank_macro.html" as rank %}
 
-{% block title %} 排行榜 {% endblock %}
-
 {% block style %}
     {{ super() }}
     <link href="{{ url_for('static', filename='styles/ranking.css') }}" rel="stylesheet">
 {% endblock %}
 
-{% block content %}
-    {{ super() }}
+{% block title %} {{ ranking_name }} {% endblock %}
+{% block h1_title %} {{ ranking_name }} {% endblock %}
 
-    <h2>{{ ranking_name }}</h2>
-    {% if rank_info and rank_head %}
-        <div>
-            <table class="rank_table">
-                {{ rank.get_rank_head(rank_head) }}
-                {{ rank.get_rank(rank_info) }}
-            </table>
-        </div>
-    {% else %}
-        <p> 排行榜获取失败 </p>
-    {% endif %}
+{% block content %}
+    <ul id="ranking">
+        {{ rank.get_rank(rank_info) }}
+    </ul>
 {% endblock %}

app/templates/start.html

@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block title %} 首页 {% endblock %}
+{% block h1_title %} 欢迎 {% endblock %}
+
+{% block style %}
+    {{ super() }}
+    <link href="{{ url_for('static', filename='styles/start.css') }}" rel="stylesheet">
+{% endblock %}
+
+{% block content %}
+
+    <h2 class="hello"> 本站介绍 </h2>
+    <p class="hello"> 欢迎访问 {{ loc }} 垃圾站的在线网站，这里将展示 {{ loc }} 垃圾站的信息。 </p>
+    <p class="hello"> 高分榜和警示榜将展示在本垃圾站投放垃圾的用户的信用和积分排行。 </p>
+    <p class="hello"> 祝您浏览愉快。 </p>
+
+    <h2 class="hello"> 高分榜 </h2>
+    <p class="hello">
+        高分榜将用户正序排行，显示高分用户。
+    </p>
+
+    <h2 class="hello"> 警示榜 </h2>
+    <p class="hello">
+        警示榜将用户倒序排行，显示低分用户。
+    </p>
+
+    <h2 class="hello"> Q&A </h2>
+    <h3 class="hello"> 什么是HGSSystem垃圾站系统？</h3>
+    <p class="hello">
+        HGSSystem是开源的垃圾站用户积分和信用评估系统。
+        他会记录使用者每次垃圾投放的情况（是否正确投放）然后评估用户的垃圾分类信用，同时给予用户一定的积分供其在积分商城消费。
+        HGSSystem的信用评估是基于贝叶斯公式计算的。
+    </p>
+
+    <h3 class="hello"> HGSSystem的全称是什么？</h3>
+    <p class="hello"> HGSSystem的全称是 HGSSystem is Garbage Sorting System。这是一个递归的名称。</p>
+
+    <h3 class="hello"> 标题Logo为什么是反的？</h3>
+    <p class="hello"> 确实是我有意为之。 </p>
+{% endblock %}