Restructure js and css into single block modules

Each block is defined by:
* html: front-end elements (modify: templates/index.html) (for now)
* css: front-end design (modify: static/style.css)
* js: front-end code (new file: static/block_name.js)
* python: back-end code (new file: ./block_name.py)
  (will move later from the root to an "app" directory (python package)

1 files changed, 49 insertions, 0 deletions

diff --git a/static/block_time.js b/static/block_time.js
new file mode 100644
index 0000000..d6510ae
--- /dev/null
+++ b/static/block_time.js
@@ -0,0 +1,49 @@
+function init() {
+  initTimeVisualizer('timeVisualizer');
+}
+
+export function updateTime() {
+  fetch("/time")
+    .then(res => res.json())
+    .then(data => {
+      document.getElementById("weatherSummary").innerText = data.time;
+    });
+}
+
+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);   // 1min
+}
+
+init()