フルスクリーン化および、リセットボタンを追加

README.md

@@ -1,6 +1,8 @@
 # Time Keeper
 HTML5 and JavaScript based timer with notification chime for academic conference.
 
+![Screenshot](screenshot.png)
+
 ### How to Use?
 Access
 http://maruta.github.io/timekeeper/  

browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#f2f2f2</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

css/timekeeper.css

@@ -102,6 +102,10 @@ html,body{
 	text-align: center;
 }
 
+.overtime #time{
+	color: red;
+}
+
 #info{
 	font-weight: bold;
 	color: white;

index.html

@@ -5,8 +5,16 @@
 <title>Time Keeper</title>
 <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="./js/jquery.timer.js"></script>
+<script type="text/javascript" src="./js/jquery.fullscreen.min.js"></script>
 <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="./js/timekeeper.js"></script>
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="manifest" href="manifest.json">
+<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#f2f2f2">
+<meta name="theme-color" content="#ffffff">
 <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <link href="./css/timekeeper.css" rel="stylesheet">
 
@@ -23,6 +31,8 @@
           <li id="standby" class="active"><a href="#standby"><span class="glyphicon glyphicon-stop" aria-hidden="true"></span> <span class="hidden-xs">Standby</span></a></li>
           <li id="start"><a href="#start"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> <span class="hidden-xs">Start</span></a></li>
           <li id="pause"><a href="#pause"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span> <span class="hidden-xs">Pause</span></a></li>
+          <li id="reset"><a href="#reset"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> <span class="hidden-xs">Reset</span></a></li>
+          <li id="fs"><a href="#fullscreen"><span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span> <span class="hidden-xs">Fullscreen</span></a></li>
         </ul>
         <form class="navbar-form navbar-left" action="">
           <div class="form-group">
@@ -36,7 +46,7 @@
         </ul>
     </div><!-- /.container-fluid -->
   </nav>
-	<div id="time">
+	<div id="time" data-toggle="tooltip" title="Click to change timer type">
 		00:00
 	</div>
 	<div id="state">

js/timekeeper.js

@@ -2,6 +2,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2014-2016 Ichiro Maruta
+Copyright (c) 2018 TakamiChie
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -24,6 +25,7 @@ THE SOFTWARE.
 
 $(function(){
 	var loadedcss = '';
+	var countdown = 0;
 	$('#time1').val('15:00');
 	$('#time2').val('20:00');
 	$('#time3').val('25:00');
@@ -49,6 +51,10 @@ $(function(){
 		if(params.t2 !== undefined) $('#time2').val(params.t2);
 		if(params.t3 !== undefined) $('#time3').val(params.t3);
 		if(params.m !== undefined) $('#info').html(params.m);
+		if(params.cd !== undefined){
+			countdown = parseInt(params.cd);
+			if(isNaN(countdown) || countdown > 3){ countdown = 0; }
+		}
 		if(loadedcss !== ''){
 			location.reload();
 		}
@@ -64,7 +70,8 @@ $(function(){
     var hashstr = '#t1=' + $('#time1').val()
 		+ '&t2=' + $('#time2').val()
 		+ '&t3=' + $('#time3').val()
-		+ '&m=' + encodeURIComponent($('#info').html());
+		+ '&m=' + encodeURIComponent($('#info').html())
+		+ '&cd=' + countdown;
 		if(loadedcss !== 'default'){
 			hashstr = hashstr + '&th=' + encodeURIComponent(loadedcss);
 		}
@@ -157,6 +164,37 @@ $(function(){
 		changeStateClass('paused');
 	});
 
+	$('.nav #reset').click(function (event){
+		event.preventDefault();
+		if(!$('.nav li#start').hasClass('active')){
+			return;
+		}
+		changeStateClass('standby');
+		changePhaseClass('0');
+		time_inner=(new Date('2011/1/1 00:00:00'));
+		show_time();
+		changeStateClass('start');
+		start_time = new Date((new Date()).getTime() - (time_inner-(new Date('2011/1/1 00:00:00'))));
+		last_time = null;
+		$('.nav #reset').blur();
+	});
+
+	$('.nav #fs').click(function (event){
+		event.preventDefault();
+		if(!$.fullscreen.isFullScreen()){
+			$('body').fullscreen();
+		}else{
+			$.fullscreen.exit();
+		}
+		$('.nav #fs').blur();
+	});
+
+	// change countdown method
+	$('#time').click(function (event){
+		countdown = (countdown + 1) % 4;
+		updateHash();
+	});
+
 	function resize_display() {
 		var height=$('body').height();
 		var width=$('body').width();
@@ -183,9 +221,34 @@ $(function(){
 	});
 
 	function show_time(){
-		var time_str= ('00' +  time_inner.getMinutes()   ).slice(-2) + ':'
-					+ ('00' +  time_inner.getSeconds() ).slice(-2);
+		var time_str= "";
+		var overtime = false;
+		if(countdown > 0){
+			var count_time = time_inner.getMinutes() * 60 + time_inner.getSeconds();
+			var time = new Date('2011/1/1 00:'+$('#time' + countdown).val());
+			var end_time = time.getMinutes() * 60 + time.getSeconds();
+			var rest_time = end_time - count_time;
+			if(isNaN(rest_time)){
+				// inputting?
+				time_str = "00:00";
+				time_color = "white";
+			}else{
+				var arest_time = Math.abs(rest_time);
+				var ms = [Math.floor(arest_time / 60), arest_time % 60];
+				time_str= ('00' +  ms[0]   ).slice(-2) + ':'
+							+ ('00' +  ms[1] ).slice(-2);	
+				overtime = rest_time <= 0;
+			}
+		}else{
+			time_str= ('00' +  time_inner.getMinutes()   ).slice(-2) + ':'
+						+ ('00' +  time_inner.getSeconds() ).slice(-2);
+		}
 		$('#time').html(time_str);
+		if(overtime){
+			$('body').addClass('overtime');
+		}else{
+			$('body').removeClass('overtime');
+		}
 	}
 
 	var time_inner = new Date('2011/1/1 00:00:00');

manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "TimeKeeper",
+  "name": "TimeKeeper",
+  "description": "HTML5 Presentation Timer",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "index.html",
+  "background_color": "#808080",
+  "theme_color": "#808080",
+  "display": "standalone"
+}

theme/default.css

@@ -29,6 +29,9 @@
 	/* styles for body element */
 }
 
+/* overtime(countdown only) */
+.overtime{
+}
 
 /* classes for states */
 .state-stanby{