major fm updates

dmapp/dmweb/templates/switches_view.html

@@ -5,27 +5,29 @@
     body {
         margin: 20px;
         font-family: monospace;
+        background-color: #1a1a1a;
+        color: #e0e0e0;
     }
 
     .nav-tabs {
         display: flex;
         gap: 20px;
         margin-bottom: 20px;
-        border-bottom: 2px solid #333;
+        border-bottom: 2px solid #444;
         padding-bottom: 10px;
     }
 
     .nav-tabs a {
         text-decoration: none;
-        color: #666;
+        color: #888;
         font-size: 16pt;
         padding: 5px 10px;
     }
 
     .nav-tabs a.active {
-        color: #000;
+        color: #e0e0e0;
         font-weight: bold;
-        border-bottom: 3px solid #000;
+        border-bottom: 3px solid #6b9bd1;
     }
 
     .date-nav {
@@ -38,18 +40,19 @@
 
     .date-nav a {
         text-decoration: none;
-        color: #2563eb;
+        color: #6b9bd1;
         font-size: 18pt;
     }
 
     .date-info {
         font-weight: bold;
+        color: #e0e0e0;
     }
 
     .switches-container {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 2px;
     }
 
     .switch-row {
@@ -62,35 +65,37 @@
 
     .switch-time {
         width: 120px;
-        color: #666;
+        color: #aaa;
         font-weight: bold;
     }
 
     .switch-workspace {
         width: 80px;
         font-weight: bold;
+        color: #e0e0e0;
     }
 
     .switch-task {
         flex: 1;
-        color: #333;
+        color: #ccc;
     }
 
     .switch-duration {
         width: 100px;
         text-align: right;
-        color: #666;
+        color: #aaa;
     }
 
     /* Active vs idle workspace indicator */
     .ws-active { font-weight: bold; }
-    .ws-idle { opacity: 0.6; }
+    .ws-idle { opacity: 0.5; }
 
     .stats {
         margin: 20px 0;
         padding: 15px;
-        background: #f0f0f0;
+        background: #2a2a2a;
         border-radius: 4px;
+        border: 1px solid #333;
     }
 
     .stats-row {
@@ -105,11 +110,12 @@
     }
 
     .stat-label {
-        color: #666;
+        color: #999;
     }
 
     .stat-value {
         font-weight: bold;
+        color: #e0e0e0;
     }
 </style>
 {% endblock head %}
@@ -156,14 +162,19 @@
 <h3>All Switches ({{ switches|length }})</h3>
 
 <div class="switches-container">
+    {% set max_delta = switches|map(attribute='delta')|max if switches else 1 %}
+    {% set base_height = 30 %}
+    {% set max_height = 200 %}
     {% for switch in switches %}
         {% set is_active = switch.workspace in ['Plan', 'Think', 'Work'] %}
         {% set task_hash = switch.task_path|hash if switch.task_path else 0 %}
         {% set border_hue = task_hash % 360 %}
         {% set border_color = 'hsl(%d, 70%%, 50%%)'|format(border_hue) %}
-        {% set bg_color = 'hsl(%d, 70%%, 95%%)'|format(border_hue) %}
+        {% set bg_color = 'hsl(%d, 30%%, 20%%)'|format(border_hue) %}
+        {% set height_ratio = (switch.delta / max_delta) if max_delta > 0 else 0 %}
+        {% set cell_height = (base_height + (height_ratio * (max_height - base_height)))|int %}
     <div class="switch-row {{ 'ws-active' if is_active else 'ws-idle' }}"
-         style="border-left-color: {{ border_color }}; background-color: {{ bg_color }};">
+         style="border-left-color: {{ border_color }}; background-color: {{ bg_color }}; height: {{ cell_height }}px;">
         <div class="switch-time">{{ switch.date.strftime('%m/%d %H:%M:%S') }}</div>
         <div class="switch-workspace">{{ switch.workspace }}</div>
         <div class="switch-task">{{ switch.task_path }}</div>
@@ -182,4 +193,10 @@
     <p style="text-align: center; color: #666; margin-top: 40px;">No switches in this period</p>
 {% endif %}
 
+<style>
+    h3 {
+        color: #e0e0e0;
+    }
+</style>
+
 {% endblock content %}