initial commit, welcome window, top bar and working clock

css/style.css

@@ -0,0 +1,50 @@
+:root {
+    --bg-color: #a1c6e0;
+    --txt-color: #1d4058;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background-image: url(../images/bg.jpg);
+    background-size: cover;
+    background-position-y: 10%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+div {
+    position: absolute;
+    border: solid 4px var(--bg-color);
+    border-radius: 8px;
+    padding: 8px;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--bg-color);
+    color: var(--txt-color)
+}
+
+div img {
+    max-height: 40vh;
+    border-radius: 8px;
+}
+
+div p a {
+    text-decoration: underline dashed 2px;
+    color: var(--txt-color);
+}
+
+#topbar-div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    top: 1vh;
+    left: 1vh;
+    right: 1vh;
+    height: 2%;
+}
+
+#welcome-div {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <title>HarupiOS</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <main>
+        <div id="topbar-div">
+            <h4>HarupiOS</h4>
+
+            <p id="date-and-time"></p>
+            
+            <p id="notif-btn">🔔</p>
+        </div>
+    
+        <div id="welcome-div">
+            <h1>Welcome to my personal OS</h1>
+
+            <h2>Introduction</h2>
+
+            <p>
+                Welcome to my OS-looking portfolio.<br>
+                On this website, you can learn about me with an original interface.<br>
+                This website was made during the <a href="https://stardance.hackclub.com/home" target="_blank">Stardance hackclub event</a> using <a href="https://jams.hackclub.com/batch/webOS/" target="_blank">this walkthrough</a>.
+            </p>
+
+            <img src="images/me.png" alt="My profile picture">
+
+            <p>This website is <a href="https://github.com/Hvrnbi/harupios">open-source</a>.</p>
+        </div>
+    </main>
+    <script src="js/script.js"></script>
+</body>
+</html>

js/script.js

@@ -0,0 +1,11 @@
+// Functions //
+
+function updateTime() {
+    var currentTime = new Date().toLocaleString(navigator.languages[0], {"timezone": Intl.DateTimeFormat().resolvedOptions().timeZone});
+
+    document.querySelector("#date-and-time").textContent = currentTime;
+}
+
+// Intervals //
+
+setInterval(updateTime, 1000);