From 5d80d1b78cb88881a312d36d442995a21d280139 Mon Sep 17 00:00:00 2001
From: tiansh <tiansheng111@gmail.com>
Date: Sun, 16 Jul 2023 00:17:41 +0800
Subject: [PATCH] add share and download #6

---
 src/css/common/input.css                |  88 +++++++++
 src/css/icons/icons.css                 |   5 +
 src/css/icons/icons.svg                 |   7 +-
 src/css/icons/icons.woff                | Bin 5896 -> 4944 bytes
 src/css/page/listpage.css               |  75 --------
 src/index.html                          | 235 ++++++++++++------------
 src/js/i18n/locale/en.js                |   5 +
 src/js/i18n/locale/zh_cn.js             |   5 +
 src/js/i18n/locale/zh_tw.js             |   6 +
 src/js/page/list/listpage.js            |  73 +++-----
 src/js/page/read/control/controlpage.js |  27 +++
 src/js/page/read/readpage.js            |  38 ++++
 src/js/page/read/text/scrolltextpage.js |  35 ++--
 13 files changed, 339 insertions(+), 260 deletions(-)

diff --git a/src/css/common/input.css b/src/css/common/input.css
index baece6e..63dc92f 100644
--- a/src/css/common/input.css
+++ b/src/css/common/input.css
@@ -204,3 +204,91 @@ button.submit-button .icon-go {
 ::-ms-clear {
   display: none;
 }
+
+.screen-menu {
+  display: none;
+}
+
+.screen-menu.screen-menu-active {
+  display: block;
+}
+
+.screen-option {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--window-width);
+  height: var(--window-height);
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.backdrop {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: var(--default-background);
+  color: var(--default-color);
+  opacity: 0.6;
+  z-index: 9;
+}
+
+.screen-option-group {
+  overflow: hidden;
+  border-radius: 16px;
+  margin: 8px 0;
+  max-width: 600px;
+  display: block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 16px);
+}
+
+button.screen-option-item {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  outline-offset: -2px;
+  display: block;
+  width: 100%;
+  border: 0 none;
+  padding: 0 12px;
+  height: 53px;
+  line-height: 53px;
+  font-size: 25px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--menu-background);
+  color: var(--menu-color);
+  text-align: left;
+}
+
+.screen-option .button-wrap {
+  margin: 0 -12px;
+  padding: 0 20px;
+}
+
+.screen-option-item:first-child {
+  border-radius: 16px 16px 0 0;
+} 
+
+.screen-option-item:last-child {
+  border-bottom: 0 none;
+  border-radius: 0 0 16px 16px;
+}
+
+.screen-option-item:only-child {
+  border-radius: 16px;
+}
+
+.screen-option-group:last-child {
+  margin-bottom: 10px;
+}
+
+.screen-option-group:last-child .screen-option-item {
+  text-align: center;
+}
diff --git a/src/css/icons/icons.css b/src/css/icons/icons.css
index 0d30e0b..310e9ac 100644
--- a/src/css/icons/icons.css
+++ b/src/css/icons/icons.css
@@ -107,3 +107,8 @@
   content: "\e90d";
 }
 
+.icon-more::before {
+  content: "\e90e";
+}
+
+
diff --git a/src/css/icons/icons.svg b/src/css/icons/icons.svg
index 717dfb6..ec5f752 100644
--- a/src/css/icons/icons.svg
+++ b/src/css/icons/icons.svg
@@ -1,6 +1,10 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<!-- Font created based on Feather (https://github.com/feathericons/feather). Feather is created by Cole Bemis and released under the MIT license. -->
+<!--
+ Font created based on Feather (https://github.com/feathericons/feather).
+ Feather is created by Cole Bemis and released under the MIT license.
+ Some icons are modified to adjust use cases.
+-->
 <!--
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -27,4 +31,5 @@
 <glyph unicode="&#xe90b;" glyph-name="refresh" d="M914.475 568.918c-39.296 111.061-119.979 195.712-218.453 242.731s-215.040 56.448-326.101 17.152c-62.805-22.229-117.419-57.771-159.744-100.864l-124.843-117.333v157.397c0 23.552-19.115 42.667-42.667 42.667s-42.667-19.115-42.667-42.667v-255.915c0-0.64 0-1.28 0.043-1.877 0.213-4.907 1.237-9.6 2.944-13.909 1.707-4.352 4.181-8.448 7.381-12.16 0.512-0.555 1.024-1.152 1.536-1.664 3.883-4.053 8.576-7.339 13.824-9.6 5.077-2.176 10.624-3.413 16.469-3.499 0.171 0 0.299 0 0.469 0h256c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.624-42.667 42.624h-148.309l120.747 113.451c33.152 33.792 76.672 62.293 127.275 80.213 88.875 31.445 181.973 23.936 260.864-13.739s143.317-105.301 174.763-194.176c7.851-22.229 32.256-33.835 54.443-25.984s33.835 32.256 25.984 54.443zM873.6 298.667l-119.467-112.256c-67.584-67.627-154.88-100.949-242.304-100.949s-174.72 33.28-241.365 99.925c-37.973 37.973-64.981 82.389-80.341 127.189-7.68 22.272-31.915 34.133-54.229 26.496s-34.133-31.915-26.496-54.229c19.627-57.131 53.632-112.725 100.736-159.787 83.328-83.285 192.597-124.928 301.739-124.885s218.368 41.728 300.715 124.117l126.080 118.4v-157.355c0-23.552 19.115-42.667 42.667-42.667s42.667 19.115 42.667 42.667v255.915c0 0.64 0 1.28-0.043 1.877-0.213 4.907-1.237 9.6-2.944 13.909-1.707 4.352-4.181 8.448-7.381 12.16-0.512 0.555-1.024 1.152-1.536 1.664-3.883 4.053-8.576 7.339-13.824 9.6-5.077 2.176-10.624 3.413-16.469 3.499-0.171 0-0.299 0-0.469 0h-256c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667z" />
 <glyph unicode="&#xe90c;" glyph-name="open" d="M414.165 140.502l256 256c16.683 16.683 16.683 43.691 0 60.331l-256 256c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331l225.835-225.835-225.835-225.835c-16.683-16.683-16.683-43.691 0-60.331s43.691-16.683 60.331 0z" />
 <glyph unicode="&#xe90d;" glyph-name="checkmark" d="M823.168 712.832l-439.168-439.168-183.168 183.168c-16.683 16.683-43.691 16.683-60.331 0s-16.683-43.691 0-60.331l213.333-213.333c16.683-16.683 43.691-16.683 60.331 0l469.333 469.333c16.683 16.683 16.683 43.691 0 60.331s-43.691 16.683-60.331 0z" />
+<glyph unicode="&#xe90e;" glyph-name="more" d="M512 917.333c-258.7 0-469.333-210.633-469.333-469.333s210.633-469.333 469.333-469.333c258.7 0 469.333 210.633 469.333 469.333s-210.633 469.333-469.333 469.333zM512 832c212.582 0 384-171.417 384-384s-171.418-384-384-384c-212.583 0-384 171.418-384 384s171.417 384 384 384zM297.5 530.917c-46.623 0-85.333-38.71-85.333-85.333s38.71-85.333 85.333-85.333c46.623 0 85.333 38.71 85.333 85.333s-38.71 85.333-85.333 85.333zM510.833 530.917c-46.623 0-85.333-38.71-85.333-85.333s38.71-85.333 85.333-85.333c46.623 0 85.333 38.71 85.333 85.333s-38.71 85.333-85.333 85.333zM724.167 530.917c-46.623 0-85.333-38.71-85.333-85.333s38.71-85.333 85.333-85.333c46.623 0 85.333 38.71 85.333 85.333s-38.71 85.333-85.333 85.333z" />
 </font></defs></svg>
diff --git a/src/css/icons/icons.woff b/src/css/icons/icons.woff
index 7c4713aaf74520dcffaf3a71c5652ac4267306ab..47ce08e824eec1f464bbd09fcdce553ae9da0bab 100644
GIT binary patch
literal 4944
zcmai2U2I%e5k5cnXLr4S_wKIO8~^OuYkQq+8{517X-Vv)G;$RnBu&{xLPgX`Oi~)#
zZGLFeLYt>jp#~6A9x9RW0F|mNLP&im4+T}I4^*lu1Z<!BP??9SDi5eCPvBj?nRC6@
zX;N|QbMKrv=giERnKLtYpFX~_BBVgeoDhBdw#=B|+uQL+rfWjT2(XV)Px;P$r`K1X
z1nwNh-=Lmv{`LCV)r*9C6JuISJ$?54mG1)gwh+nBsNY)n;FEJ}t7kCvd(1CTAAh%f
z^c;}D{R`u9>h7QP-_NaIdPWE@i}BZ}9}$t)&u^Z_I`1)zr>K{HH}RMC)n~xhdkNzb
z_dUwpSY2NO?ltg!k@_oNiT>xw&5M_C-kIJy4M^kIKNGeP>J{}a#y>T0`H85@D8{>+
zOz$2Md{~H&llrahTjH=r2ZnWuH?<N!nG2vH%n>|<C#@P1mbee^7&N8uCq?PwWOuvU
z1rB>Z77WYoKk`<vgD3EiLSj{lsTiCRV)1@v9rFJ_IC)B3Q#aK+A|u2^WpQDyGCAf-
zC!3f3H5#d#TU&`ld_3M2iG&mY5{Y-Vw&LYPoKR)PW5n{bL_;@lxDxa`>Sg=uwS{?a
z6py*d@~DT$n3MBH@xWADih}PKr0@y_ugh?kVR^MH{6fK}c@OghW8U)%;9&{TZ9x$&
zF(77SLSZcDCM)|TNV`c1!ub&iwu{ShzMLggd5os#=Ll7=(X_oR0UwZN74NP}UR9Z!
zgs7Eec}Qaa4&9VYO4k_!75p#lW;ZOEg*!7=2BZCQTJ930C`V+z-*JZ|CLsuTgd&1F
ziIRuBNl6TPk`wF2h5r0Ze;xB95<J2)fjgbU9EBJJN1dA_)|JVHMGdKQLo$cGLvofW
z1iW%AYaj*W0d1mS(9n{hKqBHlIGIu264B;=%#g4>of=_D!Svrlhw24{86w@YfYHms
zBGkW+Rf99oF}@^c`DDQvjje*yLsn2CZUzmZjaB+dg9qijY7OS|hsxzc`TSrAH52i^
zqVE^`;Iusm@>|-9*w&tD&(CIkZ+efbU2Qo^qFGvHs7)6JrZY-A+K$@VQCjmt-lC*(
zZ9FU$i)ro83>2m_ekS89ZGix&SXxJ|&y#nF{N1PnYiq4@9t0Vj_Pnf8%C$aEJ);y;
zKgm)?2EF*6L?oJW9M^T6RMg5&B>U2KRM}QCrWu)zMAD8<l{3kqq(2k|&UVsK;2cLL
z6VZIaulR{VOuMOQBn2XlqmyYRZTn8*IVK+2A?~<Nk9d5b4@$zRT~}!dz{1NPj<{F^
zxmdzPJemWyjNt~ULvGr_d0ORVW47h;_zpDg7vp`&WM91Kd&M}}FJAnWWkbhV&)+`?
zLwGq!iUMn;RbLEtW1ErjSXY|uz-IPx#>|$ZEw%&no$+Ba?3jVw9LtJ9yKsS!yq_iV
zwzO1V6sxDn%CrZrKrG3YR>ZQ{Vl0wl1x^I>gLK9?254v^Zac2luq<TNGDGHo!l9ou
zCX(?;e>_w1lcY=5EE!Ox$Qq7IrcS!iv||Hlr=wPGJQYjZu!e@Ii40jVjrHR&b%JO+
zG9;dgNApR4(oe$FhB$4}skD@=d_GKMFbyW;Fx=7+!^GJ!IbqY}ZW>JD`M9=82^{mc
zWI~Uqqm(}~lrto!kQ9Q^n2R*B#W_PFc_4KlZ&3bFi6EI!5&<rbGy+<-Xms1UrLQ8V
zEs0~|QSk(#yJw>Ks0riVgbB+*7#pUzkI;Dl%Q#9R*&tBNdk83;bWGF<BH*y3Wi%D!
zqWbMaEm*;wCR;_e*{rwN!Y#@|RYpjIsS>7RcHH6(l*A~R`GpoeXrQicw?n0>YNHwk
zohmKbZnGz|d#WmJsfL%j+7&@c43Z#GHwh8y5{_tytGcDyA}NN&J*Xm%h!fD*PQo>L
zwwHhJI@Cr_JeT<bST+<NcDqgdzX)#AiSN?Y)g7&b`UxS`(^-fMA(UgHh2jiV1?nVJ
zY!jUE$b85uWmFPKNI7Hr#R<DIiLBt6Oh3x`HK%<$;d%u&T&KyV#9c>1MtSj3e6a5$
z4vNwk5ZAfjD`Q^XvE6jzPST0J{q<KP(tTBZlkLn-0{tuKKcR0zwh?g%dgsImfp(|C
zUb=GgC@Xp;1&Q5D>-nJ4`VB=DC8xf(w0wT=)b#Y!-t)`L>wxa9e0pQ*o`Z99FP}L6
z^4#3g5}@Npo}0bFw@Er?U*(=~2cY%kgHKHT;l}K<M^0eR!EpDzm0#d8qGFS{z%4CQ
zOH{~fsOY2n8{P@Z=`&-qoZLy-5V?*r=E2S{nSeY+9!!Z4!N9eUQaep@0M+Q+<oZya
z>b%J=+p?kvyjt4`spKTauC6`~-DO1{k%Q}|9ZPZrG+BwNe_C-EPiq)VHIbvEZfg6F
z@`KJecItw+Eu6TWip1nquuqm_GTC{r^B&s;6(VR4Qe~al?Irb{0AW1H4&3B(LB_by
z?yK1huj%$J)eP_S_N@@s4dXSf@RF+r`&@&4X1f*MZPj33qI--AoeEq1uy{!P1eV}(
zYO+EvWKpWPD3n3{-b~hbO}^Go1s*QLOl{U&_bL@gR5vo7$}Zh=MIyxYUY@5B0eS5q
z@<EP<2jwj512KEvSQ};!46c8k?9bmfIyx~iHTB58efy>#F8$Eh9jOsHgba_|$))@C
zD}}?85B})Dfky|NQrb&7Q_s|&f8fi{*M_FzPSNvHcB)=3j*lOk+Pin})ZSy|@#6D$
z(lRkm-M?>qVyQ6Tdwnt6u~Xh$>GBP7uPz)HT&e1y3}!s)slvX*Ky+yM^n>Y??UcOE
zr%%=Dwc79lV`=2HqE|gxE)L|25wv1HUwrze38l#5a7(6SeA9z(%G<t)D4$8rWks07
zT#=iU&${MgDEK_OhCElM4<t%vz?G5bU{)!vi8u5`^L-T!l43E;ldfLu9DRdVw{e?g
zn{SqS2S}#$empMU=gUO-vD*DaxAk?zLW=bdi*JL$7)<NpYLel1EIU6(S9h|Ut1&j0
z<uzsgguxdMTVI>|%rU>d3oh>-D6!gTzA%CILbI{D8$PkJa&83e+{(&{UGR(LdVLK2
z^>VFNrrr(!ef>@vhF;?iA_2k9-$0^XXEL|HNw3@=x|M(8JE?>J7Jc{-MEmglKR*|~
zgD*w;4TA3&X0VUH)9FJJjXob42p<_UV-N)6mw{7w<ExX`Z{ghtI^h6Iq7%Tq_1A!_
zGL;x&+z9OTeZ8#D=>J+9)|>W_{Vn??`$Ok7=RM~$_gR)Aqip1KYCF>MAb2FjZv$DS
zaDg*&E5MHhFv=JFl49@{;L8DQ<CmRW06V~cHGpGckN7eDreH;ZNn*yp3h>zg)_|7+
z*aG~60JcTHC<U+s{K){0i8=A>$4_srZ*Fdg$Hi%}Db~?9#YS`O!o|loH%hbnXGBx1
zi3{Q)7GMH&X2pInbJtyWMV?$cd-?q81u$KMpqIsYu_`Xyb>+(D#--BPwT-n4tC!Z!
zlulhK9X-8y46^MPE6n>6xSs`?4VGwCT*CVdaHqr-Jdg4Lj+p~MMmW!IliUga55|FT
AvH$=8

literal 5896
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
F^FJ4M)=>Ze

diff --git a/src/css/page/listpage.css b/src/css/page/listpage.css
index 5e253b4..2dd35ab 100644
--- a/src/css/page/listpage.css
+++ b/src/css/page/listpage.css
@@ -66,81 +66,6 @@ button.list-sort {
   display: inline;
 }
 
-.list-sort-menu {
-  display: none;
-}
-
-.screen-option {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: var(--window-width);
-  height: var(--window-height);
-  z-index: 9;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.backdrop {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: var(--default-background);
-  color: var(--default-color);
-  opacity: 0.6;
-  z-index: 1;
-}
-
-.screen-option-group {
-  overflow: hidden;
-  border-radius: 16px;
-  margin: 8px 0;
-  max-width: 600px;
-  display: block;
-  position: relative;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(100% - 16px);
-}
-
-button.screen-option-item {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  outline-offset: -2px;
-  display: block;
-  width: 100%;
-  border: 0 none;
-  padding: 0 12px;
-  height: 53px;
-  line-height: 53px;
-  font-size: 25px;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--menu-background);
-  color: var(--menu-color);
-  text-align: left;
-}
-
-.screen-option .button-wrap {
-  margin: 0 -12px;
-  padding: 0 20px;
-}
-
-.screen-option-item:last-child {
-  border-bottom: 0 none;
-}
-
-.screen-option-group:last-child {
-  margin-bottom: 10px;
-}
-
-.screen-option-group:last-child .screen-option-item {
-  text-align: center;
-}
-
 .file-item {
   position: relative;
 }
diff --git a/src/index.html b/src/index.html
index e30efca..0a5d0c8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -45,159 +45,158 @@
 <style id="custom_css"></style>
 </head>
 <body>
-<div class="page" id="list_page">
-  <input id="file" type="file" accept="text/plain,application/gzip" tabindex="-1" aria-hidden="true" />
-  <div id="file_list_container" class="file-list-container scroll" tabindex="-1">
-    <div id="file_list_sensor"></div>
-    <div id="file_list_top" class="list-action">
-      <div class="list-filter">
-        <div class="search-box">
-          <label><span class="icon icon-search" role="img" aria-hidden="true"></span><input type="search" class="search-input" /></label>
+<div class="pages" id="pages">
+  <div class="page" id="list_page">
+    <input id="file" type="file" accept="text/plain,application/gzip" tabindex="-1" aria-hidden="true" />
+    <div id="file_list_container" class="file-list-container scroll" tabindex="-1">
+      <div id="file_list_sensor"></div>
+      <div id="file_list_top" class="list-action">
+        <div class="list-filter">
+          <div class="search-box">
+            <label><span class="icon icon-search" role="img" aria-hidden="true"></span><input type="search" class="search-input" /></label>
+          </div>
+        </div>
+        <div class="list-sort">
+          <button type="button" class="list-sort">
+            <div class="button-wrap" tabindex="-1">
+              <span class="list-sort-title"><span data-i18n="listSortTitle"></span></span>
+              <span class="list-sort-content"><span></span><span class="icon icon-detail" role="img"></span></span>
+            </div>
+          </button>
         </div>
       </div>
-      <div class="list-sort">
-        <button type="button" class="list-sort">
-          <div class="button-wrap" tabindex="-1">
-            <span class="list-sort-title"><span data-i18n="listSortTitle"></span></span>
-            <span class="list-sort-content"><span></span><span class="icon icon-detail" role="img"></span></span>
-          </div>
-        </button>
+      <div role="main" id="file_list"><div id="drop_area" data-i18n="listDropArea"></div></div>
+      <div id="import_tip">
+        <div class="tip-cover"></div>
+        <div class="tip-content"><span data-i18n="listImportTip"></span></div>
       </div>
     </div>
-    <div role="main" id="file_list"><div id="drop_area" data-i18n="listDropArea"></div></div>
-    <div id="import_tip">
-      <div class="tip-cover"></div>
-      <div class="tip-content"><span data-i18n="listImportTip"></span></div>
-    </div>
   </div>
-</div>
-<div id="list_sort_menu" class="list-sort-menu" role="dialog" aria-modal="true">
-  <div class="backdrop"></div>
-  <div class="list-sort-options screen-option">
-    <div class="screen-option-group">
-      <button type="button" class="screen-option-item" data-option="dateread" data-option-default><div class="button-wrap" tabindex="-1"><span data-i18n="listSortByDateRead"></span></div></button>
-      <button type="button" class="screen-option-item" data-option="dateadd"><div class="button-wrap" tabindex="-1"><span data-i18n="listSortByDateAdd"></span></div></button>
-      <button type="button" class="screen-option-item" data-option="title"><div class="button-wrap" tabindex="-1"><span data-i18n="listSortByTitle"></span></div></button>
+  <div class="page" id="read_page">
+    <div class="read-layer read-sub-page read-control">
+      <div class="footer-line"><div class="icon-line" role="toolbar"></div></div>
+      <button class="read-control-cover"></button>
     </div>
-    <div class="screen-option-group">
-      <button type="button" class="screen-option-item"><div class="button-wrap" tabindex="-1"><span data-i18n="listSortCancel"></span></div></button>
-    </div>
-  </div>
-</div>
-<div class="page" id="read_page">
-  <div class="read-layer read-sub-page read-control">
-    <div class="footer-line"><div class="icon-line" role="toolbar"></div></div>
-    <button class="read-control-cover"></button>
-  </div>
-  <div class="read-layer read-sub-page read-index">
-    <div class="index-tab-group">
-      <div class="tab-group" role="tablist" tabindex="0">
-        <div class="tab-group-wrap" tabindex="-1">
-          <button type="button" id="read_index_contents_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_contents" tabindex="-1"></button>
-          <button type="button" id="read_index_bookmark_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_bookmark" tabindex="-1"></button>
-          <button type="button" id="read_index_search_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_search" tabindex="-1"></button>
+    <div class="read-layer read-sub-page read-index">
+      <div class="index-tab-group">
+        <div class="tab-group" role="tablist" tabindex="0">
+          <div class="tab-group-wrap" tabindex="-1">
+            <button type="button" id="read_index_contents_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_contents" tabindex="-1"></button>
+            <button type="button" id="read_index_bookmark_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_bookmark" tabindex="-1"></button>
+            <button type="button" id="read_index_search_tab" class="tab-item" role="tab" aria-selected="false" aria-controls="read_index_search" tabindex="-1"></button>
+          </div>
         </div>
       </div>
-    </div>
-    <div id="read_index_contents" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_contents_tab">
-      <div class="index-tab-container">
-        <div id="contents_list" class="contents-list index-list scroll" tabindex="-1"></div>
-        <div id="contents_list_fake" class="contents-list index-list" tabindex="-1" aria-hidden="true"></div>
-      </div>
-      <div id="read_index_contents_config" class="">
+      <div id="read_index_contents" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_contents_tab">
         <div class="index-tab-container">
-          <div class="config-option-text">
-            <form action="/"><label><span class="config-option-text-title" data-i18n="readContentsTemplate"></span><input class="config-option-text-input input-with-submit" type="text" enterkeyhint="search"></label></form>
+          <div id="contents_list" class="contents-list index-list scroll" tabindex="-1"></div>
+          <div id="contents_list_fake" class="contents-list index-list" tabindex="-1" aria-hidden="true"></div>
+        </div>
+        <div id="read_index_contents_config" class="">
+          <div class="index-tab-container">
+            <div class="config-option-text">
+              <form action="/"><label><span class="config-option-text-title" data-i18n="readContentsTemplate"></span><input class="config-option-text-input input-with-submit" type="text" enterkeyhint="search"></label></form>
+            </div>
+            <div class="config-option-text-description" data-i18n="readContentsTemplateDescription"></div>
+            <div class="contents-history-title"><span data-i18n="readContentsTemplateHistory"></span></div>
+            <div class="contents-history-list scroll" tabindex="-1"></div>
           </div>
-          <div class="config-option-text-description" data-i18n="readContentsTemplateDescription"></div>
-          <div class="contents-history-title"><span data-i18n="readContentsTemplateHistory"></span></div>
-          <div class="contents-history-list scroll" tabindex="-1"></div>
         </div>
       </div>
-    </div>
-    <div id="read_index_bookmark" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_bookmark_tab">
-      <div class="index-tab-container">
-        <div id="bookmark_list" class="bookmark-list index-list scroll" tabindex="-1"></div>
+      <div id="read_index_bookmark" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_bookmark_tab">
+        <div class="index-tab-container">
+          <div id="bookmark_list" class="bookmark-list index-list scroll" tabindex="-1"></div>
+        </div>
       </div>
-    </div>
-    <div id="read_index_search" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_search_tab">
-      <div class="index-tab-container">
-        <div class="search-box">
-          <div class="search-box-placehodler" tabindex="-1" aria-hidden="true"></div>
-          <form action="/"><label><span class="icon icon-search" role="img" aria-hidden="true"></span><input type="search" name="search_box" class="search-input" /></label></form>
+      <div id="read_index_search" class="index-tab-panel" role="tabpanel" aria-labelledby="read_index_search_tab">
+        <div class="index-tab-container">
+          <div class="search-box">
+            <div class="search-box-placehodler" tabindex="-1" aria-hidden="true"></div>
+            <form action="/"><label><span class="icon icon-search" role="img" aria-hidden="true"></span><input type="search" name="search_box" class="search-input" /></label></form>
+          </div>
+          <div id="search_list" class="search-list index-list scroll" tabindex="-1"></div>
         </div>
-        <div id="search_list" class="search-list index-list scroll" tabindex="-1"></div>
       </div>
     </div>
-  </div>
-  <div class="read-layer read-sub-page read-jump">
-    <div class="read-jump-cover"></div>
-    <div class="footer-line">
-      <div id="jump_range"></div>
+    <div class="read-layer read-sub-page read-jump">
+      <div class="read-jump-cover"></div>
+      <div class="footer-line">
+        <div id="jump_range"></div>
+      </div>
     </div>
   </div>
-</div>
-<div class="page" id="config_page">
-  <div class="config-page-main config-page">
-    <div role="main" class="config-page-content scroll" tabindex="-1"></div>
-  </div>
-  <div id="config_page_select" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <div class="config-option-select-list config-group"></div>
-      <div class="config-option-select-description"></div>
+  <div class="page" id="config_page">
+    <div class="config-page-main config-page">
+      <div role="main" class="config-page-content scroll" tabindex="-1"></div>
     </div>
-  </div>
-  <div id="config_page_color" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <div class="config-option-color-picker"></div>
+    <div id="config_page_select" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <div class="config-option-select-list config-group"></div>
+        <div class="config-option-select-description"></div>
+      </div>
     </div>
-  </div>
-  <div id="config_page_font" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <input id="select_font_file" type="file" accept="font/ttf,font/otf,font/woff,font/woff2" />
-      <div class="font-select-section config-group"></div>
-      <div class="config-option-select-list config-group"></div>
+    <div id="config_page_color" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <div class="config-option-color-picker"></div>
+      </div>
     </div>
-  </div>
-  <div id="config_page_voice" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <div class="config-option-select-list config-group"></div>
-      <div class="config-option-voice-description"></div>
+    <div id="config_page_font" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <input id="select_font_file" type="file" accept="font/ttf,font/otf,font/woff,font/woff2" />
+        <div class="font-select-section config-group"></div>
+        <div class="config-option-select-list config-group"></div>
+      </div>
     </div>
-  </div>
-  <div id="config_page_text" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <div class="config-option-text">
-        <label>
-          <span class="config-option-text-title"></span>
-          <input class="config-option-text-input" type="text" enterkeyhint="done" />
-        </label>
+    <div id="config_page_voice" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <div class="config-option-select-list config-group"></div>
+        <div class="config-option-voice-description"></div>
       </div>
-      <div class="config-option-text-description"></div>
     </div>
-  </div>
-  <div id="config_page_webpage" class="config-option-page config-page">
-    <div role="main" class="config-page-content">
-      <iframe src="about:blank" class="config-webpage-iframe"></iframe>
+    <div id="config_page_text" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <div class="config-option-text">
+          <label>
+            <span class="config-option-text-title"></span>
+            <input class="config-option-text-input" type="text" enterkeyhint="done" />
+          </label>
+        </div>
+        <div class="config-option-text-description"></div>
+      </div>
     </div>
-  </div>
-  <div id="config_page_about" class="config-option-page config-page">
-  </div>
-  <div id="config_page_expert" class="config-option-page config-page">
-    <div role="main" class="config-page-content scroll">
-      <div class="config-option-expert">
-        <textarea class="config-option-expert-input scroll" type="text" enterkeyhint="done"></textarea>
+    <div id="config_page_webpage" class="config-option-page config-page">
+      <div role="main" class="config-page-content">
+        <iframe src="about:blank" class="config-webpage-iframe"></iframe>
+      </div>
+    </div>
+    <div id="config_page_about" class="config-option-page config-page">
+    </div>
+    <div id="config_page_expert" class="config-option-page config-page">
+      <div role="main" class="config-page-content scroll">
+        <div class="config-option-expert">
+          <textarea class="config-option-expert-input scroll" type="text" enterkeyhint="done"></textarea>
+        </div>
+        <div class="config-option-expert-description"></div>
       </div>
-      <div class="config-option-expert-description"></div>
     </div>
   </div>
 </div>
+<div id="screen_menu" class="screen-menu" role="dialog" aria-modal="true" aria-hidden="true">
+  <div class="backdrop"></div>
+  <div class="screen-option"></div>
+</div>
 <template id="icon">
   <span class="icon" role="img"></span>
 </template>
 <template id="icon_button">
   <button type="button"><div class="button-wrap" tabindex="-1" data-ref="icon"></div></button>
 </template>
+<template id="menugroup">
+  <div class="screen-option-group"></div>
+</template>
+<template id="menuitem">
+  <button type="button" class="screen-option-item"><div class="button-wrap" tabindex="-1"><span data-ref="text"></span></div></button>
+</template>
 <template id="header">
   <div class="header-line" role="navigation">
     <div class="header-left" data-ref="left"></div>
diff --git a/src/js/i18n/locale/en.js b/src/js/i18n/locale/en.js
index 0896684..0666e4e 100644
--- a/src/js/i18n/locale/en.js
+++ b/src/js/i18n/locale/en.js
@@ -44,6 +44,11 @@ export default {
   readPageScrollDown: 'Scroll Down',
   readControlClose: 'Hide buttons',
   readAutoScrollStop: 'Stop auto scroll',
+  readMenuButton: 'More',
+  readMenuShare: 'Share',
+  readMenuDownload: 'Download',
+  readMenuAutoScroll: 'Auto Scroll',
+  readMenuCancel: 'Cancel',
 
   configPageTitle: 'Settings',
   configWithDetail: 'Detail',
diff --git a/src/js/i18n/locale/zh_cn.js b/src/js/i18n/locale/zh_cn.js
index 53c72f6..66406af 100644
--- a/src/js/i18n/locale/zh_cn.js
+++ b/src/js/i18n/locale/zh_cn.js
@@ -44,6 +44,11 @@ export default {
   readPageScrollDown: '向下翻',
   readControlClose: '隐藏按钮',
   readAutoScrollStop: '停止滚动',
+  readMenuButton: '更多',
+  readMenuShare: '共享',
+  readMenuDownload: '下载',
+  readMenuAutoScroll: '自动滚动',
+  readMenuCancel: '取消',
 
   configPageTitle: '设置',
   configWithDetail: '详情',
diff --git a/src/js/i18n/locale/zh_tw.js b/src/js/i18n/locale/zh_tw.js
index 2151db8..f1c3c57 100644
--- a/src/js/i18n/locale/zh_tw.js
+++ b/src/js/i18n/locale/zh_tw.js
@@ -44,6 +44,12 @@ export default {
   readPageScrollDown: '向下翻',
   readControlClose: '隱藏按鈕',
   readAutoScrollStop: '停止捲動',
+  readMenuButton: '更多',
+  readMenuShare: '分享',
+  readMenuDownload: '下載',
+  readMenuAutoScroll: '自動捲動',
+  readMenuCancel: '取消',
+
 
   configPageTitle: '設定',
   configWithDetail: '詳細資料',
diff --git a/src/js/page/list/listpage.js b/src/js/page/list/listpage.js
index 275a4a1..e536d59 100644
--- a/src/js/page/list/listpage.js
+++ b/src/js/page/list/listpage.js
@@ -15,6 +15,7 @@ import i18n from '../../i18n/i18n.js';
 import template from '../../ui/util/template.js';
 import dom from '../../ui/util/dom.js';
 import ItemList from '../../ui/component/itemlist.js';
+import Menu from '../../ui/component/menu.js';
 
 export default class ListPage extends Page {
   constructor() {
@@ -41,15 +42,27 @@ export default class ListPage extends Page {
     this.searchContainer = this.fileListContainer.querySelector('.list-filter');
     this.searchInput = this.searchContainer.querySelector('.list-filter input');
     this.searchClearButton = template.iconButton('remove', i18n.getMessage('listFilterClear'));
-    this.sortButton = this.fileListContainer.querySelector('.list-sort');
+    this.sortButton = this.fileListContainer.querySelector('.list-sort button');
     this.sortContent = this.fileListContainer.querySelector('.list-sort-content');
-    this.sortMenu = document.querySelector('#list_sort_menu');
     this.importTip = document.querySelector('#import_tip');
 
     this.searchInput.placeholder = i18n.getMessage('listSearchPlaceholder');
     this.searchClearButton.classList.add('list-filter-clear');
     this.searchClearButton.disabled = true;
     this.searchContainer.appendChild(this.searchClearButton);
+    this.sortKey = {
+      dateread: i18n.getMessage('listSortByDateRead'),
+      dateadd: i18n.getMessage('listSortByDateAdd'),
+      title: i18n.getMessage('listSortByTitle'),
+    };
+    this.sortMenu = new Menu({
+      groups: [['dateread', 'dateadd', 'title'].map(value => ({
+        title: this.sortKey[value],
+        value,
+      })), [{
+        title: i18n.getMessage('listSortCancel'),
+      }]],
+    });
     this.initialListener();
     this.options = { sortBy: 'dateread', search: '' };
   }
@@ -88,24 +101,6 @@ export default class ListPage extends Page {
     this.searchClearButton.addEventListener('click', event => {
       this.clearSearch();
     });
-    this.sortMenuKeyboardHandler = this.sortMenuKeyboardHandler.bind(this);
-    this.sortButton.addEventListener('click', event => {
-      this.showSortMenu();
-    });
-    this.sortMenu.addEventListener('click', event => {
-      const target = event.target;
-      if (!(target instanceof Element)) return;
-      const item = target.closest('.screen-option-item');
-      if (item) {
-        const option = item.dataset.option;
-        if (option) {
-          this.options.sortBy = option;
-          this.updateSort();
-          this.updateList();
-        }
-      }
-      this.hideSortMenu();
-    });
 
     /** @param {DragEvent} event */
     const isValidFlieDragEvent = event => {
@@ -140,6 +135,12 @@ export default class ListPage extends Page {
       this.importFile(file);
       event.preventDefault();
     });
+    this.sortMenu.bind(this.sortButton, sortBy => {
+      if (!sortBy) return;
+      this.options.sortBy = sortBy;
+      this.updateSort();
+      this.updateList();
+    });
   }
   /** @param {File} item */
   async importFile(item) {
@@ -239,9 +240,7 @@ export default class ListPage extends Page {
     return this.updateSearch();
   }
   updateSort() {
-    const menuItems = [...document.querySelectorAll('.list-sort-menu [data-option]')];
-    const activeItem = menuItems.find(item => item.dataset.option === this.options.sortBy);
-    this.sortContent.querySelector('span').textContent = activeItem.textContent;
+    this.sortContent.querySelector('span').textContent = this.sortKey[this.options.sortBy];
   }
   searchFiles(/** @type {import('../../data/storage.js').ReaderFileMeta[]} */files) {
     for (let i = 0; i < files.length;) {
@@ -258,34 +257,6 @@ export default class ListPage extends Page {
     }[sortBy];
     files.sort(cmp);
   }
-  /** @param {KeyboardEvent} event */
-  sortMenuKeyboardHandler(event) {
-    if (event.code === 'Escape') {
-      this.hideSortMenu();
-    }
-  }
-  showSortMenu() {
-    this.sortMenu.style.display = 'block';
-    this.element.setAttribute('aria-hidden', 'true');
-    dom.disableKeyboardFocus(this.element);
-    document.addEventListener('keydown', this.sortMenuKeyboardHandler);
-    if (document.activeElement === this.sortButton) {
-      this.sortMenu.querySelector('button').focus();
-    }
-    this.sortMenuActiveElementBefore = document.activeElement;
-    if (document.activeElement.matches('button')) {
-      const buttons = this.sortMenu.querySelectorAll('.screen-option-item');
-      Array.from(buttons).pop().focus();
-    }
-  }
-  hideSortMenu() {
-    this.sortMenu.style.display = 'none';
-    this.element.setAttribute('aria-hidden', 'false');
-    dom.enableKeyboardFocus(this.element);
-    document.removeEventListener('keydown', this.sortMenuKeyboardHandler);
-    this.sortMenuActiveElementBefore.focus();
-    this.sortMenuActiveElementBefore = null;
-  }
 }
 
 
diff --git a/src/js/page/read/control/controlpage.js b/src/js/page/read/control/controlpage.js
index 0571b68..47c1330 100644
--- a/src/js/page/read/control/controlpage.js
+++ b/src/js/page/read/control/controlpage.js
@@ -12,6 +12,7 @@ import ReadPage from '../readpage.js';
 import speech from '../../../text/speech.js';
 import i18n from '../../../i18n/i18n.js';
 import template from '../../../ui/util/template.js';
+import Menu from '../../../ui/component/menu.js';
 
 export default class ControlPage extends ReadSubPage {
   /**
@@ -28,8 +29,12 @@ export default class ControlPage extends ReadSubPage {
     this.container.insertBefore(headerRef.get('root'), this.container.firstChild);
     const backButton = template.iconButton('back', i18n.getMessage('buttonBack'));
     headerRef.get('left').appendChild(backButton);
+    const moreButton = template.iconButton('more', i18n.getMessage('readMenuButton'));
+    headerRef.get('right').appendChild(moreButton);
     this.bookTitleElement = headerRef.get('mid');
     this.backButton = backButton;
+    this.moreButton = moreButton;
+    moreButton.hidden = true;
     this.hide();
 
     this.coverElement = this.container.querySelector('.read-control-cover');
@@ -50,6 +55,14 @@ export default class ControlPage extends ReadSubPage {
     const stopIcon = template.icon('speech-stop', i18n.getMessage('buttonSpeechStop'));
     this.speechButton.querySelector('.icon').after(stopIcon);
 
+    this.moreButtons = [];
+    this.moreMenuHandler = new Map();
+    this.moreMenu = new Menu({
+      groups: [this.moreButtons, [{
+        title: i18n.getMessage('readMenuCancel'),
+      }]],
+    });
+
     [
       { name: 'contents', button: this.contentsButton },
       { name: 'bookmark', button: this.bookmarkButton },
@@ -71,6 +84,10 @@ export default class ControlPage extends ReadSubPage {
     this.backButton.addEventListener('click', event => {
       this.readPage.gotoList();
     });
+    this.moreMenu.bind(this.moreButton, action => {
+      if (!action) return;
+      this.moreMenuHandler.get(action)();
+    });
     this.coverElement.addEventListener('touchstart', event => {
       event.preventDefault();
       window.requestAnimationFrame(() => { this.hide(); });
@@ -137,4 +154,14 @@ export default class ControlPage extends ReadSubPage {
   focus() {
     this.backButton.focus();
   }
+  registerMoreMenu(title, handler) {
+    this.moreButton.hidden = false;
+    const key = {}, item = { title, value: key };
+    this.moreButtons.push(item);
+    this.moreMenuHandler.set(key, handler);
+    return () => {
+      this.moreButtons.splice(this.moreButtons.indexOf(item), 1);
+      this.moreMenuHandler.delete(key);
+    };
+  }
 }
diff --git a/src/js/page/read/readpage.js b/src/js/page/read/readpage.js
index c17d3e4..45db8f3 100644
--- a/src/js/page/read/readpage.js
+++ b/src/js/page/read/readpage.js
@@ -18,6 +18,7 @@ import Page from '../page.js';
 import file from '../../data/file.js';
 import config from '../../data/config.js';
 import onResize from '../../ui/util/onresize.js';
+import i18n from '../../i18n/i18n.js';
 
 export default class ReadPage extends Page {
   constructor() {
@@ -57,6 +58,18 @@ export default class ReadPage extends Page {
       this.container.scrollLeft = 0;
       event.preventDefault();
     });
+
+    const mayShare = this.canShareFile();
+    this.shareFile = this.shareFile.bind(this);
+    if (mayShare) {
+      this.controlPage.registerMoreMenu(i18n.getMessage('readMenuShare'), this.shareFile);
+    }
+    this.downloadFile = this.downloadFile.bind(this);
+    const maybeNeedDownload = !mayShare ||
+      navigator.userAgentData?.mobile === true ? false : !['iPhone', 'iPad'].includes(navigator.platform);
+    if (maybeNeedDownload) {
+      this.controlPage.registerMoreMenu(i18n.getMessage('readMenuDownload'), this.downloadFile);
+    }
   }
   /**
    * @param {{ id: number }} config
@@ -277,5 +290,30 @@ export default class ReadPage extends Page {
   isSpeaking() { return this.speech.isWorking(); }
   getBookmarks() { return this.index.bookmarks; }
   getContents() { return this.index.content; }
+  canShareFile() {
+    if (!navigator.share) return false;
+    if (!navigator.canShare) return false;
+    const testFile = new File([''], 'file.txt', { type: 'text/plain' });
+    return navigator.canShare({ files: [testFile] });
+  }
+  downloadContent() {
+    const text = '\ufeff' + this.content.replace(/\r\n|\r|\n/g, '\r\n');
+    return new TextEncoder().encode(text).buffer;
+  }
+  shareFile() {
+    const file = new File([this.downloadContent()], this.meta.title + '.txt', { type: 'text/plain' });
+    return navigator.share({ files: [file] });
+  }
+  downloadFile() {
+    const blob = new Blob([this.downloadContent()], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.download = this.meta.title + '.txt';
+    link.href = url;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => { URL.revokeObjectURL(url); }, 10e3);
+  }
 }
 
diff --git a/src/js/page/read/text/scrolltextpage.js b/src/js/page/read/text/scrolltextpage.js
index e720835..044a7e1 100644
--- a/src/js/page/read/text/scrolltextpage.js
+++ b/src/js/page/read/text/scrolltextpage.js
@@ -74,6 +74,12 @@ export default class ScrollTextPage extends TextPage {
       container.style.setProperty('--text-max-width', this.maxTextWidth + 'px');
     }
     this.observeEdgeReadAloud();
+    this.checkTimeResolutionForAutoScroll().then(() => {
+      if (this.isCurrent) {
+        this.autoScrollMenuUnload = this.readPage.controlPage.registerMoreMenu(
+          i18n.getMessage('readMenuAutoScroll'), () => { this.autoScrollStart(); });
+      }
+    });
   }
   async onInactivate() {
     this.unobserveEdgeReadAloud();
@@ -94,6 +100,7 @@ export default class ScrollTextPage extends TextPage {
     this.autoScrollStop();
     this.autoScrollSpeedFactor = null;
     this.textAreaOffset = null;
+    this.autoScrollMenuUnload?.();
   }
   initUpdatePage() {
     super.initUpdatePage();
@@ -1138,23 +1145,12 @@ export default class ScrollTextPage extends TextPage {
       this.autoScrollStart();
     }
   }
-  autoScrollStart() {
-    if (this.readPage.isSpeaking()) return;
-    if (this.autoScrollRunning) return;
-    this.autoScrollPaging = false;
-    const currentAutoScroll = this.autoScrollRunning = {};
-    this.readPage.disableControlPage();
-    this.container.classList.add('read-page-auto-scroll');
-    const rAF = callback => {
-      if (currentAutoScroll === this.autoScrollRunning) {
-        window.requestAnimationFrame(callback);
-      }
-    };
-    new Promise((resolve, reject) => {
+  checkTimeResolutionForAutoScroll() {
+    return new Promise((resolve, reject) => {
       const historyTime = [];
       (function checkFrameTick(count) {
         if (count === 0) resolve();
-        rAF(() => {
+        window.requestAnimationFrame(() => {
           const now = performance.now();
           if (historyTime.includes(now)) reject();
           else {
@@ -1163,7 +1159,16 @@ export default class ScrollTextPage extends TextPage {
           }
         });
       }(5));
-    }).then(() => {
+    });
+  }
+  autoScrollStart() {
+    if (this.readPage.isSpeaking()) return;
+    if (this.autoScrollRunning) return;
+    this.autoScrollPaging = false;
+    const currentAutoScroll = this.autoScrollRunning = {};
+    this.readPage.disableControlPage();
+    this.container.classList.add('read-page-auto-scroll');
+    this.checkTimeResolutionForAutoScroll().then(() => {
       if (currentAutoScroll !== this.autoScrollRunning) return;
       window.getSelection()?.empty();
       document.addEventListener('visibilitychange', this.autoScrollOnVisibilityChange);