From 8dd6a2a34331ea397f2e3d57ab3a63ee8439826a Mon Sep 17 00:00:00 2001
From: Lan Hui <1348141770@qq.com>
Date: Sat, 12 Aug 2023 17:36:49 +0800
Subject: [PATCH] Use an arrow for Next Article or Previsou Article

---
 app/templates/userpage_get.html | 46 ++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index 433b58e..129405e 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -23,26 +23,36 @@
     <title>EnglishPal Study Room for {{ username }}</title>
 
     <style>
-        .shaking {
-            animation: shakes 1600ms ease-in-out;
-        }
+      .shaking {
+          animation: shakes 1600ms ease-in-out;
+      }
 
-        @keyframes shakes {
-            10%, 90% { transform: translate3d(-1px, 0, 0); }
-            20%, 50% { transform: translate3d(+2px, 0, 0); }
-            30%, 70% { transform: translate3d(-4px, 0, 0); }
-            40%, 60% { transform: translate3d(+4px, 0, 0); }
-            50% { transform: translate3d(-4px, 0, 0); }
-        }
-
-        .lead{
-            font-size: 18px;
-            font-family: Helvetica, sans-serif;
-            white-space: pre-wrap;
-        }
+      @keyframes shakes {
+          10%, 90% { transform: translate3d(-1px, 0, 0); }
+          20%, 50% { transform: translate3d(+2px, 0, 0); }
+          30%, 70% { transform: translate3d(-4px, 0, 0); }
+          40%, 60% { transform: translate3d(+4px, 0, 0); }
+          50% { transform: translate3d(-4px, 0, 0); }
+      }
 
+      .lead{
+          font-size: 22px;
+          font-family: Helvetica, sans-serif;
+          white-space: pre-wrap;
+      }
 
+      .arrow {
+	  padding: 0;
+	  background-color: #fff;
+	  font-size: 50px;
+	  line-height: 51px;
+	  display: inline-block;
+      }
 
+      .arrow:hover {
+	  background: #ffff66;
+	  cursor: pointer;
+      }
 
     </style>
 </head>
@@ -64,8 +74,8 @@
     </div>
     {% endfor %}
 
-        <button class="btn btn-success" id="load_next_article" onclick="load_next_article();Reader.stopRead()"> 下一篇 Next Article </button>
-        <button class="btn btn-success" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none"> 上一篇 Previous Article </button>
+        <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 Next Article">⇨</button>
+        <button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none" title="上一篇 Previous Article">⇦</button>
 
     <p><b>阅读文章并回答问题</b></p>
     <div id="text-content">