Changed to tabs for time

public/index.html

@@ -100,6 +100,106 @@
             box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
         }
 
+        /* Horizontal Time Tabs */
+        .time-tabs {
+            display: flex;
+            background: #1e293b;
+            border: 2px solid #334155;
+            border-radius: 0.75rem;
+            padding: 0.25rem;
+            gap: 0.25rem;
+            overflow-x: auto;
+        }
+
+        .time-tab {
+            flex: 1;
+            min-width: 0;
+            padding: 0.75rem 1rem;
+            background: transparent;
+            border: none;
+            border-radius: 0.5rem;
+            color: #94a3b8;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            white-space: nowrap;
+        }
+
+        .time-tab:hover {
+            background: #334155;
+            color: #e2e8f0;
+            transform: translateY(-1px);
+        }
+
+        .time-tab.active {
+            background: linear-gradient(135deg, #00d4ff, #0891b2);
+            color: white;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
+        }
+
+        .time-tab.active:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
+        }
+
+        .tab-icon {
+            font-size: 1rem;
+            flex-shrink: 0;
+        }
+
+        .tab-text {
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+
+        /* Mobile responsive tabs */
+        @media (max-width: 768px) {
+            .time-tabs {
+                flex-direction: column;
+                gap: 0.5rem;
+                padding: 0.5rem;
+            }
+
+            .time-tab {
+                padding: 1rem;
+                justify-content: flex-start;
+                border-radius: 0.75rem;
+            }
+
+            .tab-text {
+                font-size: 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .time-tabs {
+                flex-direction: row;
+                overflow-x: auto;
+                padding: 0.25rem;
+                gap: 0.25rem;
+            }
+
+            .time-tab {
+                min-width: 80px;
+                padding: 0.5rem 0.75rem;
+                flex-direction: column;
+                gap: 0.25rem;
+            }
+
+            .tab-icon {
+                font-size: 1.2rem;
+            }
+
+            .tab-text {
+                font-size: 0.75rem;
+            }
+        }
+
         .refresh-btn {
             width: 100%;
             padding: 1rem;
@@ -564,12 +664,24 @@
 
                 <div class="control-group">
                     <label class="control-label">Zeitraum</label>
-                    <select class="custom-select" id="periodSelect">
+                    <div class="time-tabs">
-                        <option value="today">📅 Heute</option>
+                        <button class="time-tab active" data-period="today">
-                        <option value="week">📊 Diese Woche</option>
+                            <span class="tab-icon">📅</span>
-                        <option value="month">📈 Dieser Monat</option>
+                            <span class="tab-text">Heute</span>
-                        <option value="all">♾️ Alle Zeiten</option>
+                        </button>
-                    </select>
+                        <button class="time-tab" data-period="week">
+                            <span class="tab-icon">📊</span>
+                            <span class="tab-text">Diese Woche</span>
+                        </button>
+                        <button class="time-tab" data-period="month">
+                            <span class="tab-icon">📈</span>
+                            <span class="tab-text">Dieser Monat</span>
+                        </button>
+                        <button class="time-tab" data-period="all">
+                            <span class="tab-icon">♾️</span>
+                            <span class="tab-text">Alle Zeiten</span>
+                        </button>
+                    </div>
                 </div>
 
                 <button class="refresh-btn pulse-animation" onclick="loadData()">
@@ -751,7 +863,7 @@
         async function loadData() {
             try {
                 const location = document.getElementById('locationSelect').value;
-                const period = document.getElementById('periodSelect').value;
+                const period = document.querySelector('.time-tab.active').dataset.period;
                 
                 // Build query parameters
                 const params = new URLSearchParams();
@@ -841,7 +953,7 @@
 
         function updateCurrentSelection() {
             const location = document.getElementById('locationSelect').value;
-            const period = document.getElementById('periodSelect').value;
+            const period = document.querySelector('.time-tab.active').dataset.period;
             
             // Get the display text from the selected option
             const locationSelect = document.getElementById('locationSelect');
@@ -919,9 +1031,20 @@
             }).join('');
         }
 
-        // Event Listener
+        // Event Listeners
         document.getElementById('locationSelect').addEventListener('change', loadData);
-        document.getElementById('periodSelect').addEventListener('change', loadData);
+        
+        // Time tab event listeners
+        document.querySelectorAll('.time-tab').forEach(tab => {
+            tab.addEventListener('click', function() {
+                // Remove active class from all tabs
+                document.querySelectorAll('.time-tab').forEach(t => t.classList.remove('active'));
+                // Add active class to clicked tab
+                this.classList.add('active');
+                // Load data with new period
+                loadData();
+            });
+        });
 
         // Initialize page
         async function init() {