Show midnight price change in page title

app/main.py

@@ -78,14 +78,45 @@ HOME_HTML = """\
 </div>
 <script>
 (function() {
+  let currentPrice = null;
+  let midnightPrice = null;
+
+  function formatPriceChange(change) {
+    const sign = change > 0 ? '+' : change < 0 ? '-' : '±';
+    const amount = Math.abs(change).toLocaleString('da-DK', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+    return sign + '$' + amount;
+  }
+
   function updateTitleFromPrice() {
     const priceDisplay = document.getElementById('price-display');
     const price = priceDisplay && priceDisplay.dataset.titlePrice;
-    if (price) {
+    const priceValue = priceDisplay && Number(priceDisplay.dataset.priceValue);
+    if (price && Number.isFinite(priceValue)) {
+      currentPrice = priceValue;
+    }
+    if (price && currentPrice !== null && midnightPrice !== null) {
+      const change = currentPrice - midnightPrice;
+      const formattedChange = formatPriceChange(change);
+      document.title = price + ' | ' + formattedChange;
+    } else if (price) {
       document.title = price + ' | BTC Price';
     }
   }
 
+  function updateMidnightPrice(candles) {
+    const midnight = new Date();
+    midnight.setHours(0, 0, 0, 0);
+    const midnightSeconds = Math.floor(midnight.getTime() / 1000);
+    const firstToday = candles.find(candle => candle.time >= midnightSeconds);
+    if (firstToday) {
+      midnightPrice = firstToday.open;
+      updateTitleFromPrice();
+    }
+  }
+
   const pricePanel = document.getElementById('price-panel');
   new MutationObserver(updateTitleFromPrice).observe(pricePanel, {
     childList: true,
@@ -93,7 +124,7 @@ HOME_HTML = """\
   });
   updateTitleFromPrice();
 
-  function initChart(containerId, endpoint, intervalMs) {
+  function initChart(containerId, endpoint, intervalMs, onData) {
     const container = document.getElementById(containerId);
     const chart = LightweightCharts.createChart(container, {
       layout: { background: { type: 'solid', color: '#ffffff' }, textColor: '#6b7280' },
@@ -118,6 +149,7 @@ HOME_HTML = """\
             close: parseFloat(c.close),
           })).sort((a, b) => a.time - b.time);
           series.setData(data);
+          if (onData) onData(data);
           chart.timeScale().fitContent();
         })
         .catch(e => console.error('Chart fetch error:', e));
@@ -130,7 +162,7 @@ HOME_HTML = """\
   }
 
   initChart('chart-minute', '/api/kraken-minute', 60 * 1000);
-  initChart('chart-hour', '/api/kraken-hour', 5 * 60 * 1000);
+  initChart('chart-hour', '/api/kraken-hour', 5 * 60 * 1000, updateMidnightPrice);
 })();
 </script>
 </body>
@@ -250,7 +282,7 @@ def price_json_to_html(text: str) -> str:
 
     formatted_price = f'${da_fmt(",.2f", p)}'
     html = (
-        f'<div id="price-display" data-title-price="{formatted_price}">'
+        f'<div id="price-display" data-title-price="{formatted_price}" data-price-value="{p}">'
         '<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">'
         '<div class="text-center">'
         f'<p class="text-4xl font-bold {color}">{formatted_price}</p>'