optimize clock & about page made

RoderickQiu · Jan 23, 2019 · 4264b2c · 4264b2c
1 parent 8844b99
commit 4264b2c
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>About</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
+    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script><!-- solve the electron-jquery conflict -->
+    <script src="res/lib/jquery-3.3.1.min.js"></script>
+    <script src="res/lib/bootstrap.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="res/lib/bootstrap.min.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+    <div class="d-flex mx-auto justify-content-center align-items-center text-dark" id="main">
+        <div id="controller">
+            <a href="javascript:window.close()" class="small rest">X</a>
+        </div>
+        <div id="about">
+            <p class="lead rest">wnr</p>
+            <p class="small text-muted">
+                <script>document.write("v" + require("./package.json").version)</script>
+            </p>
+            <p class="small">
+                <a href="javascript:require('electron').shell.openExternal(require('./package.json').homepage)">Homepage</a>&nbsp;|&nbsp;
+                <a href="javascript:require('electron').shell.openExternal('https://github.com/RoderickQiu/wnr/')">GitHub</a>&nbsp;|&nbsp;
+                <a href="javascript:require('electron').shell.openExternal('https://github.com/RoderickQiu/wnr/issues/')">Issues</a>&nbsp;|&nbsp;
+                <a href="javascript:require('electron').shell.openExternal(require('./package.json').helppage)">Help</a>
+            </p>
+            <hr />
+            <p class="small">
+                &copy; 2019
+                <a href="javascript:require('electron').shell.openExternal('https://roderickqiu.scris.top/')" class="rest">Roderick
+                    Qiu</a>.
+            </p>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -6,11 +6,21 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Type" content="text/html" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
-    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script><!-- 解决electron环境下jQuery缺失问题 -->
+    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script><!-- solve the electron-jquery conflict -->
     <script src="res/lib/jquery-3.3.1.min.js"></script>
     <script src="res/lib/bootstrap.min.js"></script>
     <link rel="stylesheet" type="text/css" href="res/lib/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="style.css" />
+    <script>
+        function about() {
+            const { BrowserWindow } = require('electron').remote;
+            let aboutWin = new BrowserWindow({ width: 233, height: 216, resizable: false, frame: false, show: false, center: true, webPreferences: { nodeIntegration: true } });
+            aboutWin.loadFile("about.html");
+            aboutWin.once('ready-to-show', () => {
+                aboutWin.show()
+            })
+        }
+    </script>
 </head>
 
 <body>
@@ -21,23 +31,23 @@
                 window.location.href = "timer.html?title=" + $("#title").val() + "&work-time=" + $("#work-time").val() + "&rest-time=" + $("#rest-time").val() + "&loop=" + $("#loop").val();
             }
         }
-        document.onkeydown = keydown;    
+        document.onkeydown = keydown;
     </script>
     <div class="d-flex mx-auto justify-content-center align-items-center text-dark" id="main">
         <div id="controller">
+            <a href="javascript:about()" class="small rest">About</a>&nbsp;
             <a href="javascript:window.close()" class="small rest">X</a>
         </div>
         <div id="set" class="justify-content-center">
             <form action="timer.html" method="GET">
-                <input name="title" id="title" placeholder="please enter a title" type="text" class="small" /><br /><br />
+                <input name="title" id="title" placeholder="please enter a title" type="text" class="small" maxlength="14" /><br /><br />
                 <input name="work-time" id="work-time" placeholder="work for (minutes)" type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                     style="ime-mode:Disabled" class="work lead" autofocus required /><br /><br />
                 <input name="rest-time" id="rest-time" placeholder="then rest for (minutes)" type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                     style="ime-mode:Disabled" class="rest lead" required /><br /><br />
                 <input name="loop" id="loop" placeholder="loop for how many times" type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                     style="ime-mode:Disabled" class="small" required /><br /><!-- control that only numbers are OK -->
             </form>
-
         </div>
     </div>
 </body>

diff --git a/timer.html b/timer.html
@@ -6,7 +6,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Type" content="text/html" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
-    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script><!-- 解决electron环境下jQuery缺失问题 -->
+    <script>if (typeof module === 'object') { window.module = module; module = undefined; }</script><!-- solve the electron-jquery conflict -->
     <script src="res/lib/jquery-3.3.1.min.js"></script>
     <script src="res/lib/bootstrap.min.js"></script>
     <link rel="stylesheet" type="text/css" href="res/lib/bootstrap.min.css" />
@@ -23,6 +23,7 @@
             <div id="title" class="text-center h3"></div>
             <div id="work-rest" class="text-center work small">Working</div>
             <div id="now-timing" class="text-center h1 work"></div>
+            <div class="text-center small"><a id="stopper" href="javascript:stopper()" class="text-black-50">Stop</a></div>
         </div>
     </div><!-- for things with 'work' mark, when it's resting, the color should be changed -->
     <audio id="beeper">
@@ -52,10 +53,23 @@
             $("#timer").html("<p class='text-center lead'>The time is too long. Please make your work time and your rest time less than a day.<br/><a href='index.html' class='text-primary'>Back</a></p>");
         } else {
             if (title && title != "undefined") $("#title").html(title);
-            var starttime, int, t, seconds, minutes, hours, method = 1, times = 0;//method: 1-work / 2-rest, times: time-reset times
+            var starttime, int, t, seconds, minutes, hours, method = 1, times = 0, isClockWorking = 1;//method: 1-work / 2-rest, times: time-reset times
             starttime = new Date().getTime();
             if (loop != 0) int = self.setInterval("clock()", 10);
             else ender();
+            function stopper() {
+                if (isClockWorking) {
+                    window.clearInterval(int);
+                    $("#stopper").text("Resume");
+                    isClockWorking = 0;//to stop
+                } else {
+                    if (method == 1) starttime = new Date().getTime() - (worktime - hours * 3600000 - minutes * 60000 - seconds * 1000);
+                    else starttime = new Date().getTime() - (resttime - hours * 3600000 - minutes * 60000 - seconds * 1000);
+                    int = self.setInterval("clock()", 10);
+                    $("#stopper").text("Stop");
+                    isClockWorking = 1;//to restart
+                }
+            }
             function warninggiver() {
                 var ipc = require('electron').ipcRenderer;
                 ipc.send('warninggiver');
@@ -80,6 +94,8 @@
                 $("#work-rest").text("");
                 $("#now-timing").text("End!");
                 warninggiver();
+                isClockWorking = 0;
+                $("#stopper").text("");
             }
             function clock() {
                 t = new Date().getTime();
@@ -95,7 +111,6 @@
                     if (times < loop * 2) {
                         starttime = new Date().getTime();
                         themechanger();
-                        int = self.setInterval("clock()", 10);
                     } else if (times == loop * 2) {
                         ender();
                     }