Change block layout, add time visualization

Block layout is now flex.

1 files changed, 35 insertions, 0 deletions

diff --git a/static/timeVisualizer.js b/static/timeVisualizer.js
new file mode 100644
index 0000000..2dfb59e
--- /dev/null
+++ b/static/timeVisualizer.js
@@ -0,0 +1,35 @@
+export function initTimeVisualizer(containerId) {
+    const grid = document.createElement('div');
+    grid.className = 'grid';
+    document.getElementById(containerId).appendChild(grid);
+
+    function updateTime() {
+        grid.innerHTML = '';
+        const now = new Date();
+        const hours = now.getHours();
+        const minutes = now.getMinutes();
+
+        for (let i = 0; i < 24; i++) {
+            const cell = document.createElement('div');
+            cell.className = 'cell';
+            
+            if (i >= 20 || i < 4) cell.classList.add('sleep');
+            if (i < hours) cell.classList.add('past');
+            
+            if (i === hours) {
+                cell.classList.add('current');
+                const fillPercentage = (minutes / 60) * 100;
+                cell.style.setProperty('--fill', `${fillPercentage}%`);
+                const line = document.createElement('div');
+                line.className = 'timeline';
+                line.style.left = `calc(${fillPercentage}% - 1px)`;
+                cell.appendChild(line);
+            }
+            
+            grid.appendChild(cell);
+        }
+    }
+
+    updateTime();
+    setInterval(updateTime, 60000);
+}