more content

Szedann · Aug 30, 2023 · 01e204f · 01e204f
1 parent 5094a37
commit 01e204f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -12,18 +12,21 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;900&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+    <meta name="description" content="Szedann's landing page">
 </head>
 
 <body>
     <main>
-        <h1>Hi, I'm <ruby id="pronounciation"><span class="name">Szedann</span>
-                <rt>ʃɛdan</rt>
+        <h1>Hi, I'm <ruby><span class="name">Szedann</span>
+                <rt id="pronounciation">/ʃɛdan/🔈</rt>
             </ruby></h1>
     </main>
     <div>
-        it's currently
-        <span id="time">00:00</span>
-        for me
+        I'm (mostly) a web developer. <br>
+        <span class="js-on">
+            It's
+            <span id="time">00:00</span> here, so <span id="timeActivity"></span>
+        </span>
     </div>
     <div class="social">
         <nav>

diff --git a/script.js b/script.js
@@ -8,8 +8,24 @@ document.getElementById("pronounciation").onclick = () => audio.play()
 const timeElement = document.getElementById("time")
 
 const updateTime = () => {
-    timeElement.innerText = new Date().toLocaleTimeString(navigator.language, { timeZone: "Europe/Warsaw", timeStyle: "short" })
+    const now = new Date()
+    const timeZone = "Europe/Warsaw"
+    timeElement.innerText = now.toLocaleTimeString(navigator.language, { timeZone, timeStyle: "short" })
+    const dayText = "I'm probably awake! ☀️"
+    const nightText = "I'm probably sleeping. 🛏️"
+    const hour = (now.getUTCHours() - now.getTimezoneOffset() / 60) % 24
+    const isDay = (hour >= 8 && hour < 23)
+    const element = document.getElementById("timeActivity")
+    element.innerText = isDay
+        ? dayText
+        : nightText
+    element.className = isDay ? "day" : "night"
 }
 
 updateTime()
-setInterval(updateTime, 10000)
+setInterval(updateTime, 10000)
+
+let jsOnElement
+while (jsOnElement = document.querySelector(".js-on")) {
+    jsOnElement.classList.remove("js-on")
+}
diff --git a/style.css b/style.css
@@ -43,9 +43,10 @@ rt {
 }
 
 #time {
-  background-color: #000;
-  padding: 0.4em;
-  border-radius: 0.3em;
+  /* background-color: #fff;
+  color: #000; */
+  /* padding: 0.2em; */
+  /* border-radius: 0.3em; */
   font-family: "Courier New", Courier, monospace;
 }
 
@@ -64,3 +65,11 @@ p {
   align-items: center;
   gap: 0.5rem;
 }
+
+#timeActivity {
+  font-weight: bold;
+}
+
+.js-on {
+  display: none;
+}