Show midnight change below heading

app/main.py

@@ -47,6 +47,7 @@ HOME_HTML = """\
 <div class="mx-auto max-w-lg px-4 py-6">
 <header class="text-center mb-8">
 <h1 class="text-3xl font-bold text-gray-900">BTC Price</h1>
+<p id="midnight-change" class="mt-1 text-sm text-gray-400">&nbsp;</p>
 </header>
 <div id="price-panel" hx-ext="ws" ws-connect="/ws/price">
 <div id="price-display">
@@ -101,6 +102,11 @@ HOME_HTML = """\
       const change = currentPrice - midnightPrice;
       const formattedChange = formatPriceChange(change);
       document.title = price + ' | ' + formattedChange;
+      const midnightChange = document.getElementById('midnight-change');
+      midnightChange.textContent = formattedChange;
+      midnightChange.className = 'mt-1 text-sm font-bold ' + (
+        change > 0 ? 'text-green-600' : change < 0 ? 'text-red-600' : 'text-gray-500'
+      );
     } else if (price) {
       document.title = price + ' | BTC Price';
     }

tests/test_health.py

@@ -41,6 +41,10 @@ def test_home_updates_title_from_latest_price():
     assert "document.title = price + ' | ' + formattedChange" in response.text
     assert '<h1 class="text-3xl font-bold text-gray-900">BTC Price</h1>' in response.text
     assert "page-title" not in response.text
+    assert 'id="midnight-change"' in response.text
+    assert "midnightChange.textContent = formattedChange" in response.text
+    assert "since 00:00" not in response.text
+    assert "change > 0 ? 'text-green-600' : change < 0 ? 'text-red-600'" in response.text
     assert "formatPriceChange(change)" in response.text
     assert "midnight.setHours(0, 0, 0, 0)" in response.text