Update index.html

index.html

@@ -104,12 +104,18 @@
         }
         .control-group { display: flex; align-items: center; gap: 8px; }
         .control-group label { font-size: 13px; font-weight: 600; color: #555; }
-        select {
-            padding: 8px 12px;
+        .time-filters { display: flex; gap: 5px; }
+        .time-btn {
+            padding: 6px 12px;
             border: 2px solid #e0e0e0;
+            background: white;
             border-radius: 6px;
-            font-size: 14px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
         }
+        .time-btn:hover { border-color: #f97316; color: #f97316; }
+        .time-btn.active { background: #f97316; color: white; border-color: #f97316; }
         .tab-buttons { display: flex; gap: 5px; margin-left: auto; }
         .tab-btn {
             padding: 8px 20px;
@@ -135,6 +141,8 @@
         .refresh-btn:hover { background: #ea580c; }
         .refresh-btn:disabled { background: #ccc; }
         
+        .velocity { font-size: 18px; margin-left: 8px; }
+        
         .rankings-panel {
             background: white;
             border-radius: 10px;
@@ -250,13 +258,13 @@
         <div class="controls">
             <div class="control-group">
                 <label>Time:</label>
-                <select id="hoursSelect">
-                    <option value="6">6 hours</option>
-                    <option value="12">12 hours</option>
-                    <option value="24" selected>24 hours</option>
-                    <option value="48">48 hours</option>
-                    <option value="72">72 hours</option>
-                </select>
+                <div class="time-filters">
+                    <button class="time-btn" data-hours="6">6h</button>
+                    <button class="time-btn" data-hours="12">12h</button>
+                    <button class="time-btn active" data-hours="24">24h</button>
+                    <button class="time-btn" data-hours="48">48h</button>
+                    <button class="time-btn" data-hours="168">7d</button>
+                </div>
             </div>
             
             <div class="tab-buttons">
@@ -382,12 +390,13 @@
                     const name = item.player || item.team;
                     const team = currentTab === 'players' ? (item.team || '') : '';
                     const url = currentTab === 'players' ? `/player/${encodeURIComponent(name)}` : `/team/${encodeURIComponent(name)}`;
+                    const velocity = currentTab === 'players' && item.velocity ? `<span class="velocity">${item.velocity}</span>` : '';
                     
                     return `
                         <a href="${url}" class="ranking-item">
                             <div class="rank-num">${item.rank}</div>
                             <div class="player-info">
-                                <div class="player-name">${name}</div>
+                                <div class="player-name">${name}${velocity}</div>
                                 ${team ? `<div class="player-team">${team}</div>` : ''}
                             </div>
                             <div class="mention-count">
@@ -411,9 +420,13 @@
             });
         });
         
-        document.getElementById('hoursSelect').addEventListener('change', (e) => {
-            hours = parseInt(e.target.value);
-            loadRankings();
+        document.querySelectorAll('.time-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                hours = parseInt(btn.dataset.hours);
+                loadRankings();
+            });
         });
         
         document.getElementById('refreshBtn').addEventListener('click', async () => {
@@ -443,4 +456,4 @@
         setInterval(loadStatus, 10000);
     </script>
 </body>
-</html>
+</html>