Merge pull request #146 from YDX-2147483647/bg

feat: 添加背景图
BITNP · Aug 24, 2024 · 7fb7643 · 7fb7643
2 parents 9b2805b + da279e2
commit 7fb7643
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 25 deletions.
diff --git a/contest/quiz/constants.py b/contest/quiz/constants.py
@@ -63,13 +63,13 @@ class ConstantsNamespace:
     MAX_TRIES = 2
     """答题次数上限"""
 
-    YEAR = 2023
+    YEAR = 2024
     MONTH = 9
 
     ROUTES = {
         "quiz:index": PageMeta(title="主页", login_required=False),
         "quiz:contest": PageMeta(title="答题", login_required=True, reluctant=True),
-        "quiz:info": PageMeta(title="个人中心", login_required=True),
+        "quiz:info": PageMeta(title="历史成绩", login_required=True),
         "quiz:contest_review": PageMeta(title="回顾", login_required=True, reluctant=True),
     }
 

diff --git a/contest/quiz/static/img/bg-contest.jpg b/contest/quiz/static/img/bg-contest.jpg
diff --git a/contest/quiz/static/img/bg-info.jpg b/contest/quiz/static/img/bg-info.jpg
diff --git a/contest/quiz/static/img/np.png b/contest/quiz/static/img/np.png
diff --git a/contest/quiz/templates/base.html b/contest/quiz/templates/base.html
@@ -18,6 +18,20 @@
     {% block scripts %}
     {% endblock scripts %}
     {% tailwind_css %}
+    {# 一般样式编译时能确定，请用 Tailwind；若需`{% static … %}`（部署时才确定），再加到这里 #}
+    <style>
+      .bg-img-contest {
+        background-image: url('{% static "img/bg-contest.jpg" %}');
+      }
+      .bg-img-info {
+        background-image: url('{% static "img/bg-info.jpg" %}');
+      }
+      #bitnp-logo {
+        width: 1.4em;
+        vertical-align:middle;
+        display: inline;
+      }
+    </style>
   </head>
   <body class="h-full">
     <div class="min-h-full grid grid-rows-[auto_1fr_auto]">
@@ -29,7 +43,7 @@
               <!-- Left nav -->
               <div class="flex items-center">
                 <div class="flex-shrink-0">
-                  <img class="h-8 w-8" src="{% static 'img/bit-icon.svg' %}" alt="北京理工大学">
+                  <img class="size-8" src="{% static 'img/bit-icon.svg' %}" alt="北京理工大学">
                 </div>
                 <div class="hidden md:block">
                   <div class="ml-10 flex items-baseline space-x-4">
@@ -77,7 +91,7 @@
                   <span class="absolute -inset-0.5"></span>
                   <span class="sr-only">打开主菜单</span>
                   <!-- Show if menu is closed -->
-                  <svg class="h-6 w-6"
+                  <svg class="size-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
@@ -86,7 +100,7 @@
                     <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                   </svg>
                   <!-- Show if menu is open -->
-                  <svg class="hidden h-6 w-6"
+                  <svg class="hidden size-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
@@ -139,23 +153,30 @@ <h1 class="text-3xl font-bold tracking-tight text-gray-900">{% current_page_titl
         {% endblock heading %}
       </header>
       {% block main %}
-        <main>
-          <div class="mx-auto max-w-2xl py-6 px-6 lg:px-8">
+        <main class="bg-fixed bg-center
+                     {% block main_bg_style %}
+                     {% endblock main_bg_style %}">
+          <div class="mx-auto max-w-2xl py-6 px-6 lg:px-8
+                      {% block main_container_bg_style %}
+                        bg-gray-100/85 shadow
+                      {% endblock main_container_bg_style %}">
             {% block content %}
             {% endblock content %}
           </div>
         </main>
       {% endblock main %}
       <!-- Footer -->
-      <footer class="mt-4 pt-2 bg-gray-50 shadow-inner">
+      <footer class="pt-5 bg-gray-50 shadow-inner">
         <div class="flex gap-2 justify-center p-2">
           <img src="{% static 'img/bit-icon.svg' %}" alt="" class="h-8">
           <img src="{% static 'img/bit-text.svg' %}" alt="北京理工大学" class="h-8">
         </div>
         <p class="text-center text-gray-500">北京理工大学 © {{ constants.YEAR }}</p>
-        <p class="text-center text-gray-500 prose-a:underline">
-          Powered by <a href="https://www.bitnp.net/" target="_blank">Net Pioneer Association</a> of BIT. Designed by Lytning et al.
-        </p>
+        <div class="text-center text-gray-500 prose-a:underline">
+          Powered by
+          <img id="bitnp-logo" src="{% static 'img/np.png' %}" alt="LOGO">
+          <a href="https://www.bitnp.net/" target="_blank">北京理工大学网络开拓者协会</a>.
+        </div>
       </footer>
     </div>
   </body>

diff --git a/contest/quiz/templates/contest.html b/contest/quiz/templates/contest.html
@@ -11,7 +11,7 @@
 {% endblock scripts %}
 {% block main %}
   {# 宽度超过 7xl / 80rem / 1280px 后，aside 与 header 右对齐 #}
-  <main class="mx-auto max-w-7xl w-full">
+  <main class="mx-auto max-w-7xl w-full bg-img-contest bg-fixed bg-center">
     {# 进度 #}
     <aside class="sticky top-0 md:top-4 mt-4 md:mr-4 min-[1280px]:mr-0 md:ml-auto md:w-80 p-2 bg-white shadow">
       <div class="grid grid-cols-[auto_1fr] mx-auto max-w-md items-center">
@@ -62,7 +62,19 @@
         {% endfor %}
         <div class="text-center">
           <button type="submit"
-                  class="px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">提交</button>
+                  class="text-lg text-red-700 font-bold px-4 py-2 bg-white shadow rounded-full hover:bg-gray-100">
+            <!-- https://heroicons.com/ arrow-up-tray -->
+            {# 图标上下不对称，不能按默认居中对齐，不然显得偏 #}
+            <svg class="size-6 inline align-text-bottom"
+                 xmlns="http://www.w3.org/2000/svg"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke-width="2"
+                 stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
+            </svg>
+            提交
+          </button>
         </div>
       </form>
     </article>

diff --git a/contest/quiz/templates/contest_review.html b/contest/quiz/templates/contest_review.html
@@ -1,8 +1,15 @@
 {% extends "base.html" %}
 {% load my_humanize humanize %}
+{% block main_bg_style %}
+  bg-img-contest
+{% endblock main_bg_style %}
+{% block main_container_bg_style %}
+{% endblock main_container_bg_style %}
 {% block content %}
-  <p class="prose">提交时刻：{{ response.submit_at }}（{{ response.submit_at | naturaltime }}）。</p>
-  <p class="prose">单次成绩：{{ response.score | as_score }}分。</p>
+  <aside class="my-4 -mx-6 lg:-mx-8 p-4 sm:px-6 lg:px-8 bg-white shadow">
+    <p class="prose">提交时刻：{{ response.submit_at }}（{{ response.submit_at | naturaltime }}）。</p>
+    <p class="prose">单次成绩：{{ response.score | as_score }}分。</p>
+  </aside>
   <form class="prose">
     {% for a in response.answer_set.all %}
       <fieldset class="my-4 -mx-6 lg:-mx-8 p-4 sm:px-6 lg:px-8 bg-white shadow disabled:text-gray-400"

diff --git a/contest/quiz/templates/index.html b/contest/quiz/templates/index.html
@@ -25,25 +25,28 @@
           </defs>
         </svg>
         {# Left/top: Texts #}
-        <div class="mx-auto max-w-md px-6 text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
-          <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
+        <div class="mx-auto max-w-md px-6 lg:mx-0 lg:flex-auto lg:py-16">
+          <p class="text-lg leading-8 text-gray-600 text-center lg:text-left">欢迎各位新同学参与</p>
+          <h1 class="text-3xl font-bold tracking-tight sm:text-4xl text-center lg:text-left">
             <span class="text-2xl sm:text-3xl">北京理工大学</span>
             <br>
             国防知识竞赛
           </h1>
           <p class="mt-6 text-lg leading-8 text-gray-600">
-            系统随机抽取{{ constants.n_questions_per_response_total }}道题，限时{{ constants.DEADLINE_DURATION | natural_delta }}。每人限答{{ constants.MAX_TRIES }}次，取<span class="text-red-700 font-bold">最高成绩</span>为学生个人成绩。
+            <strong>规则：</strong>系统随机抽取{{ constants.n_questions_per_response_total }}道题，限时{{ constants.DEADLINE_DURATION | natural_delta }}。每人限答{{ constants.MAX_TRIES }}次，取最高成绩为最终个人成绩。
           </p>
-          <p class="text-lg leading-8 text-red-700 font-bold">由于系统与网络原因，请尽量在时间截止前手动交卷。另外建议不要多开答题页面，否则只有某一页面的答卷有效，可能出现随机性。</p>
-          <p class="text-lg leading-8 text-gray-600">希望同学们掌握好答题时间，并做好充分的答题准备，预祝同学们考个好成绩！</p>
+          <p class="text-lg leading-8 text-gray-600">
+            <strong>作答注意事项：</strong>作答过程中请注意<strong class="text-red-700">答题时间</strong>，请在单次答题时限交卷，否则答题时间截止系统将自动提交；<strong class="text-red-700">切勿同时打开多个答题页面</strong>，否则只有某一页面答卷有效，影响成绩计算。
+          </p>
+          <p class="text-lg leading-8 text-gray-600">预祝同学们答题顺利，取得好成绩！</p>
           <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
             {% if not user.is_authenticated or status == 'taking contest' or user.student and user.student.n_left_tries > 0 %}
               {# 不确定 or 正在答题 or 还能发卷 ⇒ 显示 #}
               <a href="{% url 'quiz:contest' %}"
                  id="url-quiz-contest"
                  class="text-lg px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">
                 <!-- https://heroicons.com/ arrow-left-on-rectangle -->
-                <svg class="h-6 w-6 inline"
+                <svg class="size-6 inline"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
@@ -72,7 +75,7 @@ <h1 class="text-3xl font-bold tracking-tight sm:text-4xl">
               </p>
             {% endif %}
             <a class="text-sm font-semibold leading-6 hover:text-gray-500"
-               href="{% url 'quiz:info' %}">个人中心 <span aria-hidden="true">→</span></a>
+               href="{% url 'quiz:info' %}">历史成绩 <span aria-hidden="true">→</span></a>
           </div>
         </div>
         {# Right/bottom: Image #}

diff --git a/contest/quiz/templates/info.html b/contest/quiz/templates/info.html
@@ -5,6 +5,9 @@
   <script type='module' src="{% static 'js/dist/index_and_info.js' %}"></script>
   {{ status | json_script:"data:status" }}
 {% endblock scripts %}
+{% block main_bg_style %}
+  bg-img-info
+{% endblock main_bg_style %}
 {% block content %}
   <div class="prose mb-4 prose-a:no-underline">
     <h2>成绩</h2>
@@ -26,7 +29,7 @@ <h2>成绩</h2>
              id="url-quiz-contest"
              class="text-lg px-4 py-2 bg-red-700 text-white shadow rounded-full hover:bg-red-500">
             <!-- https://heroicons.com/ arrow-left-on-rectangle -->
-            <svg class="h-6 w-6 inline"
+            <svg class="size-6 inline"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"

diff --git a/contest/quiz/tests.py b/contest/quiz/tests.py
@@ -183,7 +183,7 @@ def setUp(self):
         self.student = Student.objects.create(user=self.user)
 
     def test_info_view(self):
-        """访问个人中心"""
+        """访问历史成绩"""
         self.client.force_login(self.user)
 
         response = self.client.get(reverse("quiz:info"))

diff --git a/contest/quiz/views.py b/contest/quiz/views.py
@@ -101,7 +101,7 @@ def get_context_data(self, **kwargs) -> dict[str, Any]:
 
 @method_decorator(student_only, name="dispatch")
 class InfoView(LoginRequiredMixin, IndexView):
-    """个人中心"""
+    """历史成绩"""
 
     template_name = "info.html"