add details (epoch, date, week) · time.trustme.click@39afc72

@@ -25,25 +25,47 @@ body.dark-theme {
 
 body {
   background: var(--bkg-color);
-  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
-h1, p {
-  color: var(--text-color);
+nav {
+  display: flex;
+  justify-content: flex-end;
+}
+
+button.theme-toggle {
+  margin: 1em;
+  cursor: pointer;
+}
+
+main {
+  position: absolute;
+  top: 0;
+  pointer-events: none;
+
+  font-family: "BerkeleyMono", monospace, serif;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
 }
 
 #clock {
   color: var(--text-color);
-  font-size: min(100vh,35vw);
-  font-family: "BerkeleyMono", monospace, serif;
-  letter-spacing: -0.1em;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%)
+  font-size: 34vw;
+  letter-spacing: -0.075em;
 }
 
-button.theme-toggle {
-  cursor: pointer;
-  float:right;
+main .details {
+  color: #666;
+  color: rgba(102,102,102,0.40);
+  font-size: 3.5vmin;
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
 }
+

@@ -1,4 +1,7 @@
+const epoch = document.getElementById('epoch');
 const clock = document.getElementById('clock');
+const date = document.getElementById('date');
+const week = document.getElementById('week');
 const updateInterval = 1000;
 
 function clockNumber(s) {
@@ -6,10 +9,20 @@ function clockNumber(s) {
 }
 
 function updateClock() {
-	let now = Temporal.Now.zonedDateTimeISO();
-	formatted_now = `${clockNumber(now.hour)}:${clockNumber(now.minute)}`
-	clock.innerText = formatted_now
-	document.title = formatted_now
+	const now = Temporal.Now.zonedDateTimeISO();
+
+	const formatted_epoch = `${now.epochSeconds}`;
+	const formatted_now = `${clockNumber(now.hour)}:${clockNumber(now.minute)}`;
+	const formatted_date = `${now.toPlainDate().toString()}`;
+	const formatted_week = `week: ${now.weekOfYear}`;
+
+	epoch.innerText = formatted_epoch;
+	if (clock.innerText != formatted_now) {
+		clock.innerText = formatted_now;
+		date.innerText = formatted_date;
+		week.innerText = formatted_week;
+		document.title = formatted_now;
+	}
 	setTimeout(updateClock, updateInterval);
 }

@@ -9,9 +9,18 @@
     <link rel="stylesheet" href="css/clock.css">
   </head>
   <body>
+    <nav>
+      <button class="theme-toggle"><img src="img/bulb.svg" /></button>
+    </nav>
     <main>
+      <div class="details">
+        <div id="epoch"></div>
+      </div>
       <div id="clock"></div>
-      <button class="theme-toggle"><img src="img/bulb.svg" /></button>
+      <div class="details">
+        <div id="date"></div>
+        <div id="week"></div>
+      </div>
     </main>
     <script src='js/temporal-polyfill@0.2.5_global.min.js'></script>
     <script src='js/clock.js'></script>

Commit 39afc72

Commit `39afc72`