add clock to top panel

css/bar.css

@@ -0,0 +1,4 @@
+.bar {
+	z-index: 5;
+	backdrop-filter: blur(var(--blur-strength));
+}

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;
+}

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 */

css/top-panel.css

@@ -0,0 +1,6 @@
+#topPanel {
+	background: var(--panel-bg);
+	width: 100vw;
+	height: 32px;
+	position: absolute;
+}

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>

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();
+