From efb1bf2e5f89de912f1719586e63397cd5d2f803 Mon Sep 17 00:00:00 2001
From: KyleBing <kylebing@163.com>
Date: Fri, 16 Sep 2022 23:37:46 +0800
Subject: [PATCH] v2.60

---
 CHANGELOG.md               |   3 +
 index.html                 |  88 +++++++++++++++---------------
 scss/mixin/_button.scss    |   2 +-
 scss/mixin/_info.scss      |  41 ++++++++++----
 scss/mixin/_normalize.scss |   3 -
 scss/mixin/_option.scss    |   5 +-
 scss/mixin/_variables.scss |   6 +-
 scss/typepad.css           | 109 +++++++++++++++++++++----------------
 scss/typepad.scss          |  25 ++++-----
 typepad-sw.js              |  32 +++++------
 10 files changed, 175 insertions(+), 139 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3cd95e..6fa0d08 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### v2.60 `2022-09-16`
+- 重新布局
+
 ### v2.59 `2022-09-02`
 - 精简项目体积：字体大小，英文词库只载入小部分
 
diff --git a/index.html b/index.html
index 018a305..350b1e0 100755
--- a/index.html
+++ b/index.html
@@ -31,7 +31,6 @@
             <div class="btn" id="countSymbolZh">0</div>
          </div>
 
-
          <div class="btn-group">
             <div class="btn" onclick="editor.trimReturn()">去除换行</div>
             <div class="btn" onclick="editor.trimSpace()">去除空格</div>
@@ -47,7 +46,6 @@
             <div class="btn" onclick="editor.hide()">取消</div>
             <div class="btn" onclick="editor.done(engine)">确定</div>
          </div>
-
       </div>
    </div>
 </div>
@@ -56,49 +54,44 @@
 
    <!--侧边信息栏-->
    <div class="side-menu hidden-sm">
-
       <div class="tool-bar jc-space-between">
-         <div class="btn-group">
-            <div class="btn no-action number">
-               <span class="count-current bold current number" title="本段已打字数"></span> / <span class="count-total number total" title="本段总字数"></span>
-            </div>
-            <div id="totalChapter" class="btn no-action number">
-               <span class="chapter-current bold current number" title="当前段数"></span> /
-               <span class="chapter-total number total" title="总段数"></span>
-            </div>
-         </div>
-
-         <div class="btn-group">
-            <div class="btn" onclick="engine.prevChapter()" title="上一段：⌘ + U 或 F1">《</div>
-            <div class="btn" onclick="engine.nextChapter()" title="下一段：⌘ + J 或 F2">》</div>
-         </div>
-      </div>
-
-      <!--time-->
-      <div class="time-info info-panel">
-         <div class="time number">
-            <div class="minute">00</div>:<div class="second">00</div>
+         <div class="btn-group toolbar-info">
+            <div class="btn" onclick="engine.shuffleCurrent()" title="打乱当前段：⌘ + K 或 F4">打乱</div>
+            <div class="btn" onclick="engine.reset()" title="重打：⌘ + Y 或 F3">重打</div>
+            <div class="btn" onclick="engine.pause()" title="离开编辑区">暂停</div>
+            <div class="btn" onclick="engine.resume()" title="激活编辑区">继续</div>
          </div>
       </div>
 
       <!--speed-->
       <div class="speed-info info-panel">
+         <!--speed-->
          <div class="speed">--</div>
-         <div class="count pt-2">
-            <div class="count-item">
-               <p class="count-key-backspace">--</p>
-               <p class="small">回删</p>
+         <!--statistic-->
+         <div class="statistic">
+            <div class="statistic-item">
+               <p class="title count-key-backspace">--</p>
+               <p class="desc small">回删</p>
             </div>
-            <div class="count-item">
-               <p class="count-key-length">--</p>
-               <p class="small">码长</p>
+            <div class="statistic-item">
+               <p class="title count-key-length">--</p>
+               <p class="desc small">码长</p>
             </div>
-            <div class="count-item">
-               <p class="count-key-rate">--</p>
-               <p class="small">击键</p>
+            <div class="statistic-item">
+               <p class="title count-key-rate">--</p>
+               <p class="desc small">击键</p>
             </div>
          </div>
       </div>
+
+      <!--TIMER-->
+      <div class="time-info info-panel">
+         <div class="time number">
+            <div class="minute">00</div>:<div class="second">00</div>
+         </div>
+      </div>
+
+      <!--OPTIONS SETUP-->
       <div class="info-panel">
          <div class="switch-item">
             <div class="label">暗黑模式</div>
@@ -144,7 +137,7 @@
          </div>
       </div>
 
-      <!--keys-->
+      <!--HELP INFO : KEYS-->
       <div class="key-info info-panel">
          <div class="key-info-item word-all">
             <div>全部按键</div>
@@ -196,7 +189,7 @@
          </div>
       </div>
 
-      <!--info-->
+      <!--ABOUT INFO-->
       <div class="info-panel">
          <div class="logo">
             <img src="img/logo-inline.png" alt="">
@@ -204,10 +197,11 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
          <div class="copyright">
             <a target="_blank" href="https://kylebing.cn" class="link">KyleBing</a>
-            <p>v2.59</p>
-            <p>2022/09/02</p>
+            <p>v2.60</p>
+            <p>2022/09/16</p>
          </div>
       </div>
+
       <div class="info-panel">
          <div class="key-info-item">
             <div class="binding-key"><kbd>⌘</kbd>+<kbd>J</kbd></div>
@@ -249,19 +243,20 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
          </div>
       </div>
 
-      <!--keymap-->
+      <!--KEYMAP-->
       <div class="info-panel">
          <p>光标离开输入区自动暂停，进入输入状态自动恢复计时。</p>
          <p>快捷键只在编辑区内生效</p>
       </div>
 
-      <!--notice-->
+      <!--HELP INFO: NOTICE-->
       <div class="info-panel">
          <p>最优体验: 鼠须管输入法，谷歌浏览器、Safari 浏览器，其它平台或浏览器可能会有出入，欢迎反馈至
             <a target="_blank" href="https://github.com/KyleBing/typepad">GitHub</a></p>
          <p>mac 用户推荐用 <a target="_blank" href="https://rime.im/">鼠须管输入法</a>，86版五笔现成的配置方案可以这里找到
             <a target="_blank" href="https://github.com/KyleBing/rime-wubi86-jidian">极点码表方案</a></p>
       </div>
+
    </div>
 
    <!--内容区-->
@@ -269,10 +264,17 @@ <h1>玫枫跟打器<br>(<a target="_blank" href="https://github.com/KyleBing/typ
       <!--工具栏-->
       <div class="tool-bar">
          <div class="btn-group">
-            <div class="btn" onclick="engine.shuffleCurrent()" title="打乱当前段：⌘ + K 或 F4">打乱</div>
-            <div class="btn" onclick="engine.reset()" title="重打：⌘ + Y 或 F3">重打</div>
-            <div class="btn" onclick="engine.pause()" title="离开编辑区">暂停</div>
-            <div class="btn" onclick="engine.resume()" title="激活编辑区">继续</div>
+            <div class="btn no-action number">
+               <span class="count-current bold current number" title="本段已打字数"></span> / <span class="count-total number total" title="本段总字数"></span>
+            </div>
+            <div id="totalChapter" class="btn no-action number">
+               <span class="chapter-current bold current number" title="当前段数"></span> /
+               <span class="chapter-total number total" title="总段数"></span>
+            </div>
+         </div>
+         <div class="btn-group">
+            <div class="btn" onclick="engine.prevChapter()" title="上一段：⌘ + U 或 F1">《</div>
+            <div class="btn" onclick="engine.nextChapter()" title="下一段：⌘ + J 或 F2">》</div>
          </div>
          <div class="btn-group hidden" id="panelRepeatController">
             <div id="repeatMonitor" class="btn no-action number" onclick="engine.reset()" title="⌘ + K">
diff --git a/scss/mixin/_button.scss b/scss/mixin/_button.scss
index 93bac50..03afdad 100755
--- a/scss/mixin/_button.scss
+++ b/scss/mixin/_button.scss
@@ -2,7 +2,7 @@ $padding-top: 3px;
 $padding-lr: 6px;
 $padding-lr-radio: 8px;
 $height-btn: 20px;
-$radius-btn: 3px;
+$radius-btn: 5px;
 $radius-switch: 15px;
 
 $fz-btn: 13px;
diff --git a/scss/mixin/_info.scss b/scss/mixin/_info.scss
index 215283c..b427b95 100755
--- a/scss/mixin/_info.scss
+++ b/scss/mixin/_info.scss
@@ -8,6 +8,14 @@
   justify-content: flex-start;
 }
 
+.toolbar-info{
+  width: 100%;
+  &>* {
+    text-align: center;
+    flex-grow: 1;
+  }
+}
+
 .info-panel{
   margin-bottom: $gap-block;
   padding: 15px;
@@ -44,7 +52,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 3rem;
+    font-size: 2.2rem;
     .minute{
       @extend .number
     }
@@ -55,7 +63,13 @@
 }
 
 .speed-info{
+  height: 150px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
   .speed{
+    width: 100%;
     color: $text-main;
     font-family: Impact, sans-serif;
     padding: 10px 0;
@@ -63,12 +77,12 @@
     font-size: 2rem;
     border-bottom: 1px dashed $color-border;
   }
-  .count{
+  .statistic{
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
-
+    padding: 15px 0;
     &-item{
       text-align: center;
       width: 40px;
@@ -94,15 +108,18 @@
           content: none;
         }
       }
-      p{
-        &:first-child{
-          font-family: Impact, sans-serif;
-          font-weight: bold;
-        }
-        &:last-child{
-          color: $text-comment;
-          font-size: $fz-info - 2;
-        }
+      .title {
+        font-family: Impact, sans-serif;
+        font-weight: bold;
+      }
+      .desc {
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        margin-top: 3px;
+        color: $text-comment;
+        font-size: $fz-info - 2;
       }
     }
   }
diff --git a/scss/mixin/_normalize.scss b/scss/mixin/_normalize.scss
index ee43d34..e69de29 100644
--- a/scss/mixin/_normalize.scss
+++ b/scss/mixin/_normalize.scss
@@ -1,3 +0,0 @@
-.jc-space-between{
-  justify-content: space-between;
-}
diff --git a/scss/mixin/_option.scss b/scss/mixin/_option.scss
index 9ba39e6..58caa2d 100755
--- a/scss/mixin/_option.scss
+++ b/scss/mixin/_option.scss
@@ -10,7 +10,8 @@
 }
 
 .current{
-  min-width: 12px;
+  text-align: right;
+  min-width: 20px;
   display: inline-block;
   color: $red;
-}
\ No newline at end of file
+}
diff --git a/scss/mixin/_variables.scss b/scss/mixin/_variables.scss
index 4505435..9d6178a 100755
--- a/scss/mixin/_variables.scss
+++ b/scss/mixin/_variables.scss
@@ -16,7 +16,7 @@ $color-text     : #333;
 $color-subtitle : #666;
 
 $color-border:  #dddddd;
-$color-border-clearly:  #bbb;
+$color-border-clearly:  #ccc;
 
 $bg-body      : #EBEBEB;
 
@@ -43,6 +43,6 @@ $fz-typing-english : 1.8rem;
 $fz-copyright      : 10px;
 $fz-translation    : 12px;
 
-$gap-block         : 15px;
-$radius-main       : 8px; // 全局 radius
+$gap-block         : 12px;
+$radius-main       : 7px; // 全局 radius
 
diff --git a/scss/typepad.css b/scss/typepad.css
index 103389f..a5221ed 100755
--- a/scss/typepad.css
+++ b/scss/typepad.css
@@ -75,10 +75,6 @@ tt {
   display: none;
 }
 
-.jc-space-between {
-  justify-content: space-between;
-}
-
 .pt-1 {
   padding-top: 5px;
 }
@@ -318,7 +314,7 @@ tt {
 }
 
 .side-menu {
-  margin-right: 15px;
+  margin-right: 12px;
   flex-shrink: 0;
   width: 200px;
   display: flex;
@@ -326,16 +322,24 @@ tt {
   justify-content: flex-start;
 }
 
+.toolbar-info {
+  width: 100%;
+}
+.toolbar-info > * {
+  text-align: center;
+  flex-grow: 1;
+}
+
 .info-panel {
-  margin-bottom: 15px;
+  margin-bottom: 12px;
   padding: 15px;
   color: #555;
   background-color: white;
   border: 1px solid #dddddd;
   font-size: 12px;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
 }
 .info-panel > p {
   margin-bottom: 5px;
@@ -362,9 +366,17 @@ tt {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 3rem;
+  font-size: 2.2rem;
+}
+.speed-info {
+  height: 150px;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
 }
 .speed-info .speed {
+  width: 100%;
   color: #333;
   font-family: Impact, sans-serif;
   padding: 10px 0;
@@ -372,20 +384,21 @@ tt {
   font-size: 2rem;
   border-bottom: 1px dashed #dddddd;
 }
-.speed-info .count {
+.speed-info .statistic {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.2rem;
+  padding: 15px 0;
 }
-.speed-info .count-item {
+.speed-info .statistic-item {
   text-align: center;
   width: 40px;
   color: #333;
   position: relative;
   margin-right: 22px;
 }
-.speed-info .count-item:after {
+.speed-info .statistic-item:after {
   content: "";
   position: absolute;
   right: -12px;
@@ -395,17 +408,22 @@ tt {
   top: 50%;
   margin-top: -7.5px;
 }
-.speed-info .count-item:last-child {
+.speed-info .statistic-item:last-child {
   margin-right: 0;
 }
-.speed-info .count-item:last-child:after {
+.speed-info .statistic-item:last-child:after {
   content: none;
 }
-.speed-info .count-item p:first-child {
+.speed-info .statistic-item .title {
   font-family: Impact, sans-serif;
   font-weight: bold;
 }
-.speed-info .count-item p:last-child {
+.speed-info .statistic-item .desc {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 3px;
   color: #999;
   font-size: 10px;
 }
@@ -664,13 +682,13 @@ input[type=checkbox]:checked + label.checker {
 
 .btn-group {
   display: flex;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
   justify-content: flex-start;
   overflow: hidden;
   border: 1px solid #dddddd;
-  margin: 0 15px 15px 0;
+  margin: 0 12px 12px 0;
 }
 .btn-group.dash {
   border-style: dashed;
@@ -737,7 +755,8 @@ label.btn, .btn-group .btn-vertical > label {
   justify-content: space-between;
 }
 .current {
-  min-width: 12px;
+  text-align: right;
+  min-width: 20px;
   display: inline-block;
   color: #FF3B30;
 }
@@ -746,10 +765,10 @@ label.btn, .btn-group .btn-vertical > label {
   overflow-y: auto;
   border: 1px solid #dddddd;
   background-color: white;
-  margin-top: 15px;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
+  margin-top: 12px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
 }
 
 .table {
@@ -1252,18 +1271,18 @@ body {
 
 .template-container {
   color: #333;
-  padding: 15px 20px;
+  padding: 10px 15px;
   letter-spacing: 1px;
   border: 1px solid #dddddd;
-  border-bottom: none;
   min-height: 150px;
   max-height: 200px;
-  background-color: white;
   overflow-y: scroll;
   overflow-x: hidden;
-  -webkit-border-radius: 8px 8px 0 0;
-  -moz-border-radius: 8px 8px 0 0;
-  border-radius: 8px 8px 0 0;
+  margin-bottom: 12px;
+  background-color: rgba(255, 255, 255, 0.7);
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
 }
 .template-container.big {
   max-height: 200px;
@@ -1281,30 +1300,28 @@ body {
   position: relative;
 }
 .typing-container textarea {
+  padding: 10px 15px;
   overflow: hidden;
-  -webkit-border-radius: 0 0 8px 8px;
-  -moz-border-radius: 0 0 8px 8px;
-  border-radius: 0 0 8px 8px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
   -webkit-appearance: none;
   white-space: pre-wrap;
   border: 1px solid #dddddd;
-  border-top-width: 2px;
   resize: none;
   min-height: 150px;
   max-height: 200px;
   width: 100%;
-  padding: 15px 20px;
   display: block;
 }
 .typing-container textarea.big {
   max-height: 200px;
 }
 .typing-container textarea:focus {
-  border-color: #bbb;
-  border-top-color: black;
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+  border-color: #ccc;
+  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.12);
 }
 
 .text {
@@ -1314,14 +1331,14 @@ body {
   /* Big Character mode*/
 }
 .text.english {
-  line-height: 1.3;
+  line-height: 1.2;
   font-size: 1.8rem;
-  font-family: "Galvji";
-  letter-spacing: -1px;
+  font-family: "";
+  letter-spacing: 0;
 }
 .text .correct {
   text-shadow: none;
-  color: #d0e5d9 !important;
+  color: rgba(0, 0, 0, 0.1) !important;
   white-space: inherit;
 }
 .text.big {
diff --git a/scss/typepad.scss b/scss/typepad.scss
index 7211bf4..41e86e7 100755
--- a/scss/typepad.scss
+++ b/scss/typepad.scss
@@ -33,16 +33,17 @@ body{
 
 .template-container{
   color: $text-main;
-  padding: 15px 20px;
+  padding: 10px 15px;
   letter-spacing: 1px;
   border: 1px solid $color-border;
-  border-bottom: none;
+  //border-bottom: none;
   min-height: 150px;
   max-height: 200px;
-  background-color: white;
   overflow-y: scroll;
   overflow-x: hidden;
-  @include border-radius($radius-main $radius-main 0 0);
+  margin-bottom: $gap-block;
+  background-color: transparentize(white, 0.3);
+  @include border-radius($radius-main);
   &.big{
     max-height: 200px;
   }
@@ -57,25 +58,23 @@ body{
   letter-spacing: 1px;
   position: relative;
   textarea{
+    padding: 10px 15px;
     overflow: hidden;
-    @include border-radius(0 0 $radius-main $radius-main);
+    @include border-radius($radius-main);
     -webkit-appearance: none;
     white-space: pre-wrap;
     border: 1px solid $color-border;
-    border-top-width: 2px;
     resize: none;
     min-height: 150px;
     max-height: 200px;
     width: 100%;
-    padding: 15px 20px;
     display: block;
     &.big{
       max-height: 200px;
     }
     &:focus{
       border-color: $color-border-clearly;
-      border-top-color: black;
-      @include box-shadow(inset 0 0 10px transparentize(black, 0.8));
+      @include box-shadow(inset 0 0 10px transparentize(black, 0.88));
     }
   }
 }
@@ -85,14 +84,14 @@ body{
   font-size: $fz-typing;
   white-space: pre-wrap;
   &.english {
-    line-height: 1.3;
+    line-height: 1.2;
     font-size: $fz-typing-english;
-    font-family: 'Galvji';
-    letter-spacing: -1px;
+    font-family: '';
+    letter-spacing: 0;
   }
   .correct{
     text-shadow: none;
-    color: #d0e5d9   !important;
+    color: transparentize(black, 0.9)  !important;
     white-space: inherit;
   }
   /* Big Character mode*/
diff --git a/typepad-sw.js b/typepad-sw.js
index f2afa07..d6f266f 100644
--- a/typepad-sw.js
+++ b/typepad-sw.js
@@ -1,5 +1,5 @@
 const preFix = 'typepad'
-const version = '259';
+const version = '260';
 
 self.addEventListener('install', event => {
    self.skipWaiting();
@@ -7,25 +7,25 @@ self.addEventListener('install', event => {
       caches.open(preFix + version).then(cache => {
          return cache.addAll([
             '/tools/typepad/',
-            '/tools/typepad/index.html?v=2.59',
-            '/tools/typepad/scss/typepad.css?v=2.59',
+            '/tools/typepad/index.html?v=2.60',
+            '/tools/typepad/scss/typepad.css?v=2.60',
 
             // 英文单词
-            '/tools/typepad/js/class/english-vocabulary/CET4.js?v=2.59',
+            '/tools/typepad/js/class/english-vocabulary/CET4.js?v=2.60',
 
-            '/tools/typepad/js/class/Database.js?v=2.59',
-            '/tools/typepad/js/class/Utility.js?v=2.59',
-            '/tools/typepad/js/class/KeyCount.js?v=2.59',
-            '/tools/typepad/js/class/Config.js?v=2.59',
-            '/tools/typepad/js/class/Editor.js?v=2.59',
-            '/tools/typepad/js/class/Article.js?v=2.59',
-            '/tools/typepad/js/class/ArticleType.js?v=2.59',
-            '/tools/typepad/js/class/Reg.js?v=2.59',
-            '/tools/typepad/js/class/Engine.js?v=2.59',
-            '/tools/typepad/js/class/Record.js?v=2.59',
-            '/tools/typepad/js/class/CETWord.js?v=2.59',
+            '/tools/typepad/js/class/Database.js?v=2.60',
+            '/tools/typepad/js/class/Utility.js?v=2.60',
+            '/tools/typepad/js/class/KeyCount.js?v=2.60',
+            '/tools/typepad/js/class/Config.js?v=2.60',
+            '/tools/typepad/js/class/Editor.js?v=2.60',
+            '/tools/typepad/js/class/Article.js?v=2.60',
+            '/tools/typepad/js/class/ArticleType.js?v=2.60',
+            '/tools/typepad/js/class/Reg.js?v=2.60',
+            '/tools/typepad/js/class/Engine.js?v=2.60',
+            '/tools/typepad/js/class/Record.js?v=2.60',
+            '/tools/typepad/js/class/CETWord.js?v=2.60',
             '/tools/typepad/js/require_v2.3.6.js',
-            '/tools/typepad/js/typepad.js?v=2.59',
+            '/tools/typepad/js/typepad.js?v=2.60',
             '/tools/typepad/img/logo.png',
             '/tools/typepad/scss/font/RobotoMono.ttf',
             '/tools/typepad/scss/font/DSDigital.ttf',