optimized

docs/bangzhu.html

@@ -46,7 +46,8 @@ <h2 class="h4">1、如何使用</h2>
                     class="img-fluid" /><br />
                 打开wnr后，你就会看到这样的界面。<br />
                 先是一段工作时间，然后是一段休息时间。<br />
-                你可以设定循环的次数。<br />
+                你可以设定是否需要全屏模式来帮助你专心。<br />
+                可以设定循环的次数。<br />
                 还可以设定任务名称，以及添加备注。<br />
                 你还可以很方便地查看总时间。<br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-7.png"
@@ -55,14 +56,13 @@ <h2 class="h4">1、如何使用</h2>
                 如果需要使用电脑，则你可以将wnr最小化或隐藏到托盘菜单。<br />
                 在特殊情况下，你可以暂停、跳过或是放弃计时。<br />
                 最底部的进度条可以告诉你还剩下多少时间。<br />
-                还剩下一分钟时，你会收到一个通知提醒。
+                还剩下一分钟时，你会收到一个通知提醒。<br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-8.png"
                     class="img-fluid" /><br />
                 当时间结束时，我们会提醒你。<br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-9.png"
                     class="img-fluid" /><br />
                 然后就是下一段时间了。<br />
-                如果担心被电脑干扰，你可以开启全屏专心模式。
                 <br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-10.png"
                     class="img-fluid" /><br />

docs/help.html

@@ -49,6 +49,7 @@ <h2 class="h4">1. How to use it</h2>
                 It will repeat for the time you entered in "loop for". <br />
                 Title and notes are selective.<br />
                 You can also see how many time in total this schedule is going to cost.<br />
+                (You can have your time with wnr <b>full-screen</b> to prevent you from using you computer, too.)<br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-2.png"
                     class="img-fluid" /><br />
                 As the key <kbd>Enter</kbd> is clicked, the timer starts. Now, go & do your work! <br />
@@ -62,7 +63,6 @@ <h2 class="h4">1. How to use it</h2>
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-4.png"
                     class="img-fluid" /><br />
                 And another period of time starts. <br />
-                (You can have a rest time with wnr <b>full-screen</b> to prevent you from using you computer, too.)
                 <br />
                 <img src="https://raw.githubusercontent.com/RoderickQiu/wnr/master/res/preview/preview-5.png"
                     class="img-fluid" /><br />

index.html

@@ -69,26 +69,34 @@
         <div id="tip" class="extreme-small font-weight-bold text-black-50">
             <script>document.write(i18n.__('tip'));</script>
         </div>
-        <div id="set" class="justify-content-center">
-            <form action="timer.html" method="GET">
+        <div id="set" class="container-fluid">
+            <form action="timer.html" method="GET" class="justify-content-center align-content-center">
                 <input name="title" id="title" type="text" class="small" maxlength="11" /><br /><br />
-                <input name="work-time" id="work-time" type="number" onkeyup="allset()"
-                    oninput="if (value.length > 4) value = value.slice(0, 4)" style="ime-mode:Disabled"
-                    class="work lead" autofocus required /><input id="focus-work-set" class="focuscheck" type="checkbox"
-                    onchange="focusworkset()" /><span class="focuser extreme-small work">
-                    <script>document.write(i18n.__('focusmode1') + "<br />" + i18n.__('focusmode2'))</script></span>
-                </a><br /><br />
-                <input name="rest-time" id="rest-time" type="number" onkeyup="allset()"
-                    oninput="if (value.length > 4) value = value.slice(0, 4)" style="ime-mode:Disabled"
-                    class="rest lead" required /><input id="focus-rest-set" class="focuscheck" type="checkbox"
-                    onchange="fullscreenset()" /><span class="focuser extreme-small rest">
-                    <script>document.write(i18n.__('focusmode1') + "<br />" + i18n.__('focusmode2'))</script>
-                </span><br /><br />
+                <div class="align-content-center">
+                    <input name="work-time" id="work-time" type="number" onkeyup="allset()"
+                        oninput="if (value.length > 4) value = value.slice(0, 4)" style="ime-mode:Disabled"
+                        class="work lead" autofocus required /><input id="focus-work-set" type="checkbox"
+                        onchange="focusworkset()" /><span class="focuser extreme-small work">
+                        <script>document.write(i18n.__('focusmode1') + "<br />" + i18n.__('focusmode2'))</script></span>
+
+                </div>
+                <br />
+                <div class="align-content-center">
+                    <input name="rest-time" id="rest-time" type="number" onkeyup="allset()"
+                        oninput="if (value.length > 4) value = value.slice(0, 4)" style="ime-mode:Disabled"
+                        class="rest lead" required /><input id="focus-rest-set" type="checkbox"
+                        onchange="fullscreenset()" /><span class="focuser extreme-small rest">
+                        <script>document.write(i18n.__('focusmode1') + "<br />" + i18n.__('focusmode2'))</script>
+                    </span>
+                </div>
+                <br />
                 <input name="loop" id="loop" type="number" onkeyup="allset()"
                     oninput="if (value.length > 3) value = value.slice(0, 3)" style="ime-mode:Disabled" class="small"
-                    required /><br /><br />
+                    required />
+                <br /><br />
                 <!-- control that only numbers are OK -->
                 <input name="note" id="note" type="text" class="small" maxlength="39" />
+                <br /><br />
             </form>
             <script>
                 $('#work-time').attr('placeholder', i18n.__('worktime'));

settings.html

@@ -249,12 +249,6 @@
                     })
             }
         }
-        if (store.get("fullscreen") == true) document.getElementById("fullscreen-set").checked = true;
-        else document.getElementById("fullscreen-set").checked = false;
-        function fullscreenset() {
-            if (document.getElementById("fullscreen-set").checked == true) store.set("fullscreen", true);
-            else store.set("fullscreen", false);
-        }
         if (store.get("autocheck") != false) document.getElementById("autocheck-set").checked = true;
         else document.getElementById("autocheck-set").checked = false;
         function autocheckset() {

style.css

@@ -29,6 +29,10 @@ input, .focuser {
     border: none;
 }
 
+input {
+    width: 192px;
+}
+
 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
@@ -130,25 +134,17 @@ li {
     text-align: center;
 }
 
-.focuscheck {
-    -webkit-appearance: none;
-    /* remove default style */
-    border: solid #5490ea 1.2px;
-    border-radius: 15px;
+#focus-work-set, #focus-rest-set {
+    border-width: 1px;
     width: 18px;
     height: 18px;
 }
 
-.focuscheck:checked {
-    background-image: url(./res/icons/check.png);
-    background-size: contain;
-}
-
-#focus-work-set{
+#focus-work-set {
     border-color: #ea5454;
 }
 
-#focus-work-set:checked{
+#focus-work-set:checked {
     background-image: url(./res/icons/check-work.png);
 }