From 559bfda09115d421f9ab764050e7339352df487a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= <gru@macbook.net.r.local>
Date: Sat, 3 Jan 2026 19:41:10 +0100
Subject: [PATCH] period picker

---
 templates/index.html | 94 +++++++++++++++++++-------------------------
 1 file changed, 40 insertions(+), 54 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 0c9ac9e..4c03d0d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,86 +4,72 @@
 <!-- Alerts Container -->
 <div id="alerts-container" class="mb-4"></div>
 
-<!-- Global Period Selector -->
+<!-- Global Period Selector  -->
 <div class="card-body py-3">
     <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
-        <div>
+        <div class="flex-shrink-0 text-white-50">
             <i class="bi bi-calendar-range me-2"></i>
-            <strong>Global Time Range</strong>
+            <strong class="text-white">Global Time Range</strong>
         </div>
-        <div class="d-flex gap-2 flex-grow-1 min-w-0">
-            <div class="flex-grow-1 d-flex">
-                <div class="btn-group btn-group-sm flex-grow-1 d-none d-sm-flex" 
-                     role="group" id="global-quick-pickers"
-                     style="overflow-x: auto; scrollbar-width: thin; white-space: nowrap;">
+        
+        <div class="d-flex gap-1 flex-shrink-0 p-1 bg-dark bg-opacity-50 border border-secondary border-opacity-25 rounded-1" 
+             style="max-width: 70%;">
+            
+            <div class="btn-toolbar d-none d-sm-flex" role="toolbar" id="global-quick-pickers"
+                 style="overflow-x: auto; scrollbar-width: thin; max-width: 100%;">
+                
+                <div class="btn-group btn-group-sm me-1" role="group">
                     <input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-1h">1h</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-1h">1h</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-6h">6h</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-6h">6h</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-12h">12h</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-12h">12h</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-24h">24h</label>
-                    
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-24h">24h</label>
+                </div>
+                
+                <div class="btn-group btn-group-sm" role="group">
                     <input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-3d">3d</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-3d">3d</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-7d">7d</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-14d" value="14d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-14d">14d</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-7d">7d</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-30d">30d</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-60d" value="60d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-60d">60d</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-30d">30d</label>
                     
                     <input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-90d">90d</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-120d" value="120d">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-120d">120d</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-1y" value="1y">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-1y">1Y</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-2y" value="2y">
-                    <label class="btn btn-outline-primary px-2 py-1 me-0" for="period-2y">2Y</label>
-                    
-                    <input type="radio" class="btn-check" name="global-period" id="period-5y" value="5y">
-                    <label class="btn btn-outline-primary px-2 py-1" for="period-5y">5Y</label>
+                    <label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-90d">90d</label>
                 </div>
             </div>
             
-            <select class="form-select form-select-sm d-md-none ms-2 w-auto min-w-120px" 
-                    id="global-period-select" style="min-width: 120px;">
-                <option value="1h">1h</option>
-                <option value="6h">6h</option>
-                <option value="12h">12h</option>
-                <option value="24h">24h</option>
-                <option value="3d">3d</option>
-                <option value="7d">7d</option>
-                <option value="14d">14d</option>
-                <option value="30d">30d</option>
-                <option value="60d">60d</option>
-                <option value="90d">90d</option>
-                <option value="120d">120d</option>
-                <option value="1y">1Y</option>
-                <option value="2y">2Y</option>
-                <option value="5y">5Y</option>
+            <select class="form-select form-select-sm d-md-none ms-2 bg-dark text-white border-secondary" 
+                    id="global-period-select" style="min-width: 100px;">
+                <option value="1h" class="bg-dark text-white">1h</option>
+                <option value="6h" class="bg-dark text-white">6h</option>
+                <option value="12h" class="bg-dark text-white">12h</option>
+                <option value="24h" class="bg-dark text-white">24h</option>
+                <option value="3d" class="bg-dark text-white">3d</option>
+                <option value="7d" class="bg-dark text-white">7d</option>
+                <option value="14d" class="bg-dark text-white">14d</option>
+                <option value="30d" class="bg-dark text-white">30d</option>
+                <option value="60d" class="bg-dark text-white">60d</option>
+                <option value="90d" class="bg-dark text-white">90d</option>
+                <option value="120d" class="bg-dark text-white">120d</option>
+                <option value="1y" class="bg-dark text-white">1Y</option>
+                <option value="2y" class="bg-dark text-white">2Y</option>
+                <option value="5y" class="bg-dark text-white">5Y</option>
             </select>
-            
-            <input type="hidden" id="global-period-hidden" name="global-period" value="1h">
         </div>
+        
+        <input type="hidden" id="global-period-hidden" name="global-period" value="1h">
     </div>
 </div>
 
-
 <!-- Main Metrics Row -->
 <div class="row g-3 mb-4">
     <div class="col-md-3">