diff --git a/index.html b/index.html
index d4f8798..d4234e4 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,10 @@
margin-top: 2em;
}
+ .sleep-streak {
+ margin-top: 2em;
+ }
+
#container {
display: flex;
height: 100vh;
@@ -83,6 +87,8 @@
.hide {
opacity: 0;
+ height: 0;
+ margin: 0 !important;
}
.settings-table td {
@@ -110,6 +116,7 @@
background-color: #222;
}
+
@@ -134,6 +141,18 @@
+
+ Going to bed before 10pm
+
+
+
+
+
+
+
+
+
+
@@ -209,6 +228,8 @@
setText("status", data.title);
setText("description", data.description);
+ updateSleepStreak(data.streak);
+
if (data.title.toLowerCase() === "sleeping") {
const remainingText = formatRemainingTime(data.remainingDuration);
setText("sleep", "Time until wake up:
" + remainingText + "");
@@ -291,6 +312,35 @@
}
}
+ function updateSleepStreak(streakData) {
+ if (streakData.length == 0) {
+ document.getElementById("sleep-streak").classList = "hide";
+ return;
+ } else {
+ document.getElementById("sleep-streak").classList = "sleep-streak";
+ }
+
+ for (let offset = 1; offset < 8; offset++) {
+ let classes = ["bi"]
+
+ const adjustedDate = new Date((new Date()).getTime() - offset * 24 * 60 * 60 * 1000);
+ const formattedDate = adjustedDate.toISOString().split('T')[0];
+
+ if (streakData.length > 0) {
+ if (streakData.includes(formattedDate)) {
+ classes.push("bi-circle-fill");
+ } else if (offset == 0) {
+ classes.push("bi-circle-half");
+ } else {
+ classes.push("bi-circle");
+ }
+ }
+
+ document.getElementById("day-" + offset).classList = classes.join(" ");
+ document.getElementById("day-" + offset).title = formattedDate;
+ }
+ }
+
// On window focus, dismiss all notifications
window.onfocus = function () {
dismissNotifications();