From dc21301fb57ad6a24431c36ed9818a32b004cb9c Mon Sep 17 00:00:00 2001
From: davidsierradz <davidsierradz@gmail.com>
Date: Tue, 27 Dec 2022 12:14:37 +0000
Subject: [PATCH] feat: add homepage

---
 home/homepage.html | 86 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 home/homepage.html
diff --git a/home/homepage.html b/home/homepage.html
new file mode 100644
index 0000000..8e01011
--- /dev/null
+++ b/home/homepage.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+
+    <title>Home</title>
+    <style type="text/css" media="screen">
+      body {
+        background-color: #f5f5f5;
+        margin: 0px;
+      }
+
+      .container {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #clock {
+        font-family: monospace;
+        font-size: 5rem;
+        font-weight: 600;
+        color: #000000;
+        margin-bottom: 0.25em;
+      }
+
+      .inline {
+        display: inline-block;
+      }
+
+      @media only screen and (max-width: 960px) {
+        .container {
+          height: auto;
+        }
+
+        #clock {
+          margin-top: 1em;
+        }
+
+        .container > .bookmark-container {
+          flex-direction: column;
+          width: 60%;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="clock"></div>
+    </div>
+
+    <script>
+      // Get current time and format
+      getTime = () => {
+        let date = new Date(),
+          min = date.getMinutes(),
+          sec = date.getSeconds(),
+          hour = date.getHours();
+
+        return (
+          "" +
+          (hour < 10 ? "0" + hour : hour) +
+          ":" +
+          (min < 10 ? "0" + min : min) +
+          ":" +
+          (sec < 10 ? "0" + sec : sec)
+        );
+      };
+
+      window.onload = () => {
+        // Set up the clock
+        document.getElementById("clock").innerHTML = getTime();
+        // Set clock interval to tick clock
+        setInterval(() => {
+          document.getElementById("clock").innerHTML = getTime();
+        }, 500);
+      };
+    </script>
+  </body>
+</html>
