Use an arrow for Next Article or Previsou Article

Bug511-Bosh
Lan Hui 2023-08-12 17:36:49 +08:00
parent d2f30daab1
commit 8dd6a2a343
1 changed files with 28 additions and 18 deletions

View File

@ -23,26 +23,36 @@
<title>EnglishPal Study Room for {{ username }}</title> <title>EnglishPal Study Room for {{ username }}</title>
<style> <style>
.shaking { .shaking {
animation: shakes 1600ms ease-in-out; animation: shakes 1600ms ease-in-out;
} }
@keyframes shakes { @keyframes shakes {
10%, 90% { transform: translate3d(-1px, 0, 0); } 10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 50% { transform: translate3d(+2px, 0, 0); } 20%, 50% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); } 30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); } 40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); } 50% { transform: translate3d(-4px, 0, 0); }
} }
.lead{
font-size: 18px;
font-family: Helvetica, sans-serif;
white-space: pre-wrap;
}
.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> </style>
</head> </head>
@ -64,8 +74,8 @@
</div> </div>
{% endfor %} {% endfor %}
<button class="btn btn-success" id="load_next_article" onclick="load_next_article();Reader.stopRead()"> 下一篇 Next Article </button> <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 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_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none" title="上一篇 Previous Article"></button>
<p><b>阅读文章并回答问题</b></p> <p><b>阅读文章并回答问题</b></p>
<div id="text-content"> <div id="text-content">