From ec80766af5e2f59f3842b613f271c1100705af5e Mon Sep 17 00:00:00 2001
From: Mitsuo Tokumori <mitsuo@tokumori.xyz>
Date: Sat, 8 Mar 2025 01:30:17 +0900
Subject: Change block layout, add time visualization

Block layout is now flex.
---
 static/timeVisualizer.css | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 static/timeVisualizer.css

(limited to 'static/timeVisualizer.css')

diff --git a/static/timeVisualizer.css b/static/timeVisualizer.css
new file mode 100644
index 0000000..600ec4b
--- /dev/null
+++ b/static/timeVisualizer.css
@@ -0,0 +1,44 @@
+#timeVisualizer .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 42px);
+    grid-template-rows: repeat(3, 42px);
+    gap: 2px;
+    background: #f0f0f0;
+    padding: 5px;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+#timeVisualizer .cell {
+    width: 42px;
+    height: 42px;
+    background: #ffffff;
+    position: relative;
+    border: 1px solid #ddd;
+}
+
+#timeVisualizer .sleep {
+    background: #e6f3ff;
+}
+
+#timeVisualizer .past {
+    background: #cccccc;
+}
+
+#timeVisualizer .current::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: var(--fill);
+    background: #cccccc;
+}
+
+#timeVisualizer .timeline {
+    position: absolute;
+    width: 2px;
+    height: 100%;
+    background: #000000;
+    z-index: 1;
+}
-- 
cgit v1.2.3