From 31bf7fe60d841bb51746190e84dce7979f58d509 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 4 Jun 2020 07:50:05 +0800
Subject: [PATCH] add clock to top panel

---
 css/bar.css       |  4 ++++
 css/clock.css     | 19 +++++++++++++++++++
 css/style.css     |  3 +++
 css/top-panel.css |  6 ++++++
 index.html        |  4 ++++
 js/clock.js       | 38 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 74 insertions(+)
 create mode 100644 css/bar.css
 create mode 100644 css/clock.css
 create mode 100644 css/top-panel.css
 create mode 100644 js/clock.js

diff --git a/css/bar.css b/css/bar.css
new file mode 100644
index 0000000..af947c1
--- /dev/null
+++ b/css/bar.css
@@ -0,0 +1,4 @@
+.bar {
+	z-index: 5;
+	backdrop-filter: blur(var(--blur-strength));
+}
\ No newline at end of file
diff --git a/css/clock.css b/css/clock.css
new file mode 100644
index 0000000..01aad15
--- /dev/null
+++ b/css/clock.css
@@ -0,0 +1,19 @@
+#clock {
+	color: var(--base-color);
+	font-size: 11pt;
+	font-family: roboto-bold;
+
+	/*Center lock*/
+	text-align: center;
+   	position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+
+    /*Make clock unselectable*/
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index be40739..3e96284 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,8 @@
 @import url('normalize.css');
 @import url('body-background.css');
+@import url('bar.css');
+@import url('top-panel.css');
+@import url('clock.css');
 
 :root {
 	/* Colors */
diff --git a/css/top-panel.css b/css/top-panel.css
new file mode 100644
index 0000000..2f95187
--- /dev/null
+++ b/css/top-panel.css
@@ -0,0 +1,6 @@
+#topPanel {
+	background: var(--panel-bg);
+	width: 100vw;
+	height: 32px;
+	position: absolute;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8449b82..5d762ea 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,12 @@
 	<!-- The place where we set the background/image -->
 	<div id="bodyBackground"></div>
 
+	<div class="bar" id="topPanel">
+		<div id="clock"></div>
+	</div>
 
 
 	<script src="js/body-background-set.js"></script>
+	<script src="js/clock.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/clock.js b/js/clock.js
new file mode 100644
index 0000000..96e6e52
--- /dev/null
+++ b/js/clock.js
@@ -0,0 +1,38 @@
+var clock = document.getElementById("clock")
+
+// Append 0 before time elements if less hour's than 10
+function appendZero(k) {
+	if (k < 10) {
+		return "0" + k;
+	} else {
+		return k;
+	}
+}
+
+function currentTime() {
+	// Date object
+	var date = new Date();
+
+	// Set hour, minute
+	var hour = date.getHours();
+	var min = date.getMinutes();
+	var midDay = "AM";
+	
+	// Assigning
+	midDay = (hour >= 12) ? "PM" : "AM";
+	hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour);
+	hour = appendZero(hour);
+	min = appendZero(min);
+
+	// Update clock id element
+	clock.innerText = hour + ":" + min + " " + midDay;
+	
+	// Recursion
+	// Call itself if 1 second has passed.
+	// TOKIWO TOMAREEEE!
+	var t = setTimeout(currentTime, 1000);
+}
+
+// Start
+window.onload = currentTime();
+