Feature Added

AsifulNobel · May 10, 2017 · a3d851a · a3d851a
1 parent 39a1256
commit a3d851a
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ Then start Chrome browser and go to **extensions** page. Select **Developer Mode
 ![Options Menu](screenshots/ss1.png)
 ![Options Menu](screenshots/ss3.png)
 ![NewTab Page](screenshots/ss2.png)
+![Description Modal](screenshots/ss4.png)
 
 ### Contributing
 To contribute to this repository with features, fork it, create new branch, add your feature and create pull-request. To report bugs or new features, create an issue using the **Issues** tab.
diff --git a/css/options.css b/css/options.css
@@ -1,3 +1,17 @@
+body::-webkit-scrollbar {
+    width: 0.5em;
+}
+
+body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #8C9297;
+  outline: 1em solid #ECDEAD;
+  border-radius: 1em;
+}
+
 input[type=datetime-local], input[type=text] {
 	font-family: "Righteous";
 	border: none;
@@ -46,4 +60,15 @@ li:first-child {
 	font-weight: 700;
 	font-style: oblique;
 	margin-right: 3%;
+}
+
+#error-div {
+	color: #A51919;
+	text-transform: uppercase;
+	font-weight: 500;
+}
+
+#errors {
+	display: inline;
+	margin-left: 7%;
 }
diff --git a/css/timer.css b/css/timer.css
@@ -56,4 +56,81 @@ span {
 
 .blue {
 	background-color: #4778ad;
+}
+
+#legend {
+	background-color: #BF2E2E;
+	color: #F9EEEE;
+	width: 50px;
+	height: 50px;
+	bottom: 30px;
+	right: 30px;
+	border-radius: 3em;
+	position: fixed;
+	z-index: 5;
+	text-align: center;
+}
+
+#legend:hover {
+	background-color: #F9EEEE;
+	color: #BF2E2E;
+}
+
+#legend > i {
+	padding-top: 5%;
+	padding-right: 5%;
+}
+
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 10; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.8);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 50%;
+}
+
+.modal-content ul {
+	padding-top: 2%;
+	padding-bottom: 2%;
+	color: #4A4949;
+	font-weight: 400;
+	font-family: Ubuntu;
+	font-size: 1.2em;
+	text-transform: capitalize;
+}
+
+.modal-content span {
+	font-size: 0.7em;
+	font-family: monospace;
+	text-transform: uppercase;
+	padding: 3px;
+	color: white;
+}
+
+/* The Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
 }
diff --git a/html/options.html b/html/options.html
@@ -15,14 +15,12 @@
 		<i class="fa fa-plus-square fa-lg" id="add-button"></i>
 	</div>
 
-	<div>
-		<ul id="timers">
-
-		</ul>
+	<div id="error-div">
+		<p id="errors"></p>
 	</div>
 
 	<div>
-		<p id="errors"></p>
+		<ul id="timers"></ul>
 	</div>
 </body>
 </html>
diff --git a/html/timer.html b/html/timer.html
@@ -2,12 +2,31 @@
 <html>
 <head>
 	<title>New Tab</title>
+	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
 	<script type="text/javascript" src="../js/directive.js"></script>
 	<script type="text/javascript" src="../js/timer.js"></script>
 	<link rel="stylesheet" type="text/css" href="../css/timer.css">
 </head>
 <body>
 	<div id="parent-div">
 	</div>
+
+	<div id="myModal" class="modal">
+
+		<!-- Modal content -->
+		<div class="modal-content">
+			<i class="close fa fa-times" aria-hidden="true"></i>
+			<ul>
+				<li>when box is <span class="blue">blue</span>, more than 60% of time is remaining</li>
+				<li>when box is <span class="green">green</span>, more than 30% of time is remaining</li>
+				<li>when box is <span class="yellow">yellow</span>, more than 10% of time is remaining</li>
+				<li>when box is <span class="red">red</span>, less than or equal to 10% of time is remaining</li>
+			</ul>
+		</div>
+
+	</div>
+	<div id="legend">
+		<i class="fa fa-question fa-3x" aria-hidden="true"></i>
+	</div>
 </body>
 </html>
diff --git a/js/directive.js b/js/directive.js
@@ -197,11 +197,11 @@ function saveEvent() {
 				})
 			}
 			else {
-				setError("Date must be in future.");
+				setError("Date must be in future");
 			}
 		}
 		else {
-			setError("Event must have a valid name.");
+			setError("Event must have a valid name");
 		}
 	}
 }

diff --git a/js/options.js b/js/options.js
@@ -4,10 +4,9 @@ function masterFn() {
 
 	// Sets current date in countdown start date input
 	var y = new Date()
-	var z = new Date(y.getTime()-((new Date()).getTimezoneOffset() * 60 * 1000))
 
 	// Get Date and Time(Only Hour and Minute) string
-	document.getElementById('timerStart').value = z.toJSON().slice(0,16);
+	document.getElementById('timerStart').value = getOffsetDate(y.toUTCString()).toJSON().slice(0,16);
 }
 
 function buttonEventAdder() {

diff --git a/js/timer.js b/js/timer.js
@@ -53,6 +53,31 @@ function sortEvents() {
 function masterFn() {
 	// Creates divs of events in newtab page
 	restoreCountdowns(document.getElementById('parent-div'), 1);
+
+	var modal = document.getElementById('myModal');
+
+	// Get the button that opens the modal
+	var btn = document.getElementById("legend");
+
+	// Get the <span> element that closes the modal
+	var span = document.getElementsByClassName("close")[0];
+
+	// When the user clicks on the button, open the modal 
+	btn.onclick = function() {
+	    modal.style.display = "block";
+	}
+
+	// When the user clicks on <span> (x), close the modal
+	span.onclick = function() {
+	    modal.style.display = "none";
+	}
+
+	// When the user clicks anywhere outside of the modal, close it
+	window.onclick = function(event) {
+	    if (event.target == modal) {
+	        modal.style.display = "none";
+	    }
+	}
 }
 
 // waits until initial document without stylesheet and other resources is load

diff --git a/screenshots/ss4.png b/screenshots/ss4.png