Enhance animations and refactor filtering logic

- Updated `dashboard.css` with new animations for DATUM text, including a rainbow glitch effect and pulse glow.
- Added margin-top to `.stats-grid` in `earnings.css` for better layout.
- Modified `.search-box` focus styles in `workers.css` to use primary color variable.
- Refactored filtering functionality in `workers.js` to simplify logic and improve search capabilities.
- Reintroduced user settings info section in `earnings.html`.
- Removed 'asic' and 'bitaxe' filter buttons in `workers.html` for a cleaner interface.

static/css/dashboard.css

@@ -213,15 +213,283 @@
     vertical-align: middle;
 }
 
+/* Rainbow Glitch animation for DATUM text */
+@keyframes rainbow-shift {
+    0% {
+        color: #ff2a6d;
+        text-shadow: 2px 0 #05d9e8, -2px 0 #ff2a6d, 0 0 10px #ff2a6d;
+    }
+
+    10% {
+        color: #ff2a6d;
+        text-shadow: 2px 0 #05d9e8, -2px 0 #ff2a6d, 0 0 10px #ff2a6d;
+    }
+
+    20% {
+        color: #ff7f00;
+        text-shadow: -2px 0 #05d9e8, 2px 0 #ff7f00, 0 0 10px #ff7f00;
+    }
+
+    30% {
+        color: #d8ff00;
+        text-shadow: 2px 0 #05d9e8, -2px 0 #d8ff00, 0 0 10px #d8ff00;
+    }
+
+    40% {
+        color: #00ff80;
+        text-shadow: -2px 0 #ff2a6d, 2px 0 #00ff80, 0 0 10px #00ff80;
+    }
+
+    50% {
+        color: #05d9e8;
+        text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8, 0 0 10px #05d9e8;
+    }
+
+    60% {
+        color: #0000ff;
+        text-shadow: -2px 0 #ff2a6d, 2px 0 #0000ff, 0 0 10px #0000ff;
+    }
+
+    70% {
+        color: #8000ff;
+        text-shadow: 2px 0 #05d9e8, -2px 0 #8000ff, 0 0 10px #8000ff;
+    }
+
+    80% {
+        color: #ff00ff;
+        text-shadow: -2px 0 #05d9e8, 2px 0 #ff00ff, 0 0 10px #ff00ff;
+    }
+
+    90% {
+        color: #ff007f;
+        text-shadow: 2px 0 #05d9e8, -2px 0 #ff007f, 0 0 10px #ff007f;
+    }
+
+    100% {
+        color: #ff2a6d;
+        text-shadow: -2px 0 #05d9e8, 2px 0 #ff2a6d, 0 0 10px #ff2a6d;
+    }
+}
+
+@keyframes glitch-anim {
+    0% {
+        transform: none;
+        opacity: 1;
+    }
+
+    7% {
+        transform: skew(-0.5deg, -0.9deg);
+        opacity: 0.75;
+    }
+
+    10% {
+        transform: none;
+        opacity: 1;
+    }
+
+    27% {
+        transform: none;
+        opacity: 1;
+    }
+
+    30% {
+        transform: skew(0.8deg, -0.1deg);
+        opacity: 0.75;
+    }
+
+    35% {
+        transform: none;
+        opacity: 1;
+    }
+
+    52% {
+        transform: none;
+        opacity: 1;
+    }
+
+    55% {
+        transform: skew(-1deg, 0.2deg);
+        opacity: 0.75;
+    }
+
+    50% {
+        transform: none;
+        opacity: 1;
+    }
+
+    72% {
+        transform: none;
+        opacity: 1;
+    }
+
+    75% {
+        transform: skew(0.4deg, 1deg);
+        opacity: 0.75;
+    }
+
+    80% {
+        transform: none;
+        opacity: 1;
+    }
+
+    100% {
+        transform: none;
+        opacity: 1;
+    }
+}
+
+@keyframes pulse-glow {
+    0% {
+        filter: brightness(1);
+    }
+
+    50% {
+        filter: brightness(1.3);
+    }
+
+    100% {
+        filter: brightness(1);
+    }
+}
+
 .datum-label {
-    color: cyan; /* cyan color */
+    position: relative;
+    color: cyan;
     font-size: 0.95em;
     font-weight: bold;
     text-transform: uppercase;
     margin-left: 4px;
-    background-color: rgba(0, 0, 0, 0.2);
+    padding: 2px 5px;
+    background-color: rgba(0, 0, 0, 0.3);
     border-radius: 3px;
     letter-spacing: 2px;
+    display: inline-block;
+    animation: rainbow-shift 8s infinite linear, glitch-anim 3s infinite, pulse-glow 2s infinite;
+    transform-origin: center;
+}
+
+    /* Create a glitch effect with duplicated text */
+    .datum-label::before,
+    .datum-label::after {
+        content: "DATUM";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        border-radius: 3px;
+        padding: 2px 5px;
+        clip: rect(0, 0, 0, 0);
+    }
+
+    .datum-label::before {
+        left: -1px;
+        animation: glitch-frames 2s infinite linear alternate-reverse;
+        text-shadow: -2px 0 #ff2a6d;
+        clip: rect(44px, 450px, 56px, 0);
+    }
+
+    .datum-label::after {
+        left: 1px;
+        animation: glitch-frames 3s infinite linear alternate-reverse;
+        text-shadow: 2px 0 #05d9e8;
+        clip: rect(24px, 450px, 36px, 0);
+    }
+
+@keyframes glitch-frames {
+    0% {
+        clip: rect(19px, 450px, 23px, 0);
+    }
+
+    5% {
+        clip: rect(36px, 450px, 16px, 0);
+    }
+
+    10% {
+        clip: rect(11px, 450px, 41px, 0);
+    }
+
+    15% {
+        clip: rect(22px, 450px, 33px, 0);
+    }
+
+    20% {
+        clip: rect(9px, 450px, 47px, 0);
+    }
+
+    25% {
+        clip: rect(31px, 450px, 21px, 0);
+    }
+
+    30% {
+        clip: rect(44px, 450px, 9px, 0);
+    }
+
+    35% {
+        clip: rect(17px, 450px, 38px, 0);
+    }
+
+    40% {
+        clip: rect(26px, 450px, 25px, 0);
+    }
+
+    45% {
+        clip: rect(12px, 450px, 43px, 0);
+    }
+
+    50% {
+        clip: rect(35px, 450px, 18px, 0);
+    }
+
+    55% {
+        clip: rect(8px, 450px, 49px, 0);
+    }
+
+    60% {
+        clip: rect(29px, 450px, 23px, 0);
+    }
+
+    65% {
+        clip: rect(42px, 450px, 11px, 0);
+    }
+
+    70% {
+        clip: rect(15px, 450px, 40px, 0);
+    }
+
+    75% {
+        clip: rect(24px, 450px, 27px, 0);
+    }
+
+    80% {
+        clip: rect(10px, 450px, 45px, 0);
+    }
+
+    85% {
+        clip: rect(33px, 450px, 20px, 0);
+    }
+
+    90% {
+        clip: rect(46px, 450px, 7px, 0);
+    }
+
+    95% {
+        clip: rect(13px, 450px, 42px, 0);
+    }
+
+    100% {
+        clip: rect(28px, 450px, 26px, 0);
+    }
+}
+
+/* Add some hover effects for interactivity */
+.datum-label:hover {
+    animation-play-state: paused;
+    filter: brightness(1.5);
+    cursor: pointer;
+    transform: scale(1.1);
+    transition: transform 0.2s ease;
 }
 
 /* Pool luck indicators */

static/css/earnings.css

@@ -51,6 +51,7 @@ html.deepsea-theme {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1rem;
     margin-bottom: 2rem;
+    margin-top: 2rem;
 }
 
 /* ===== CARD STYLING ===== */
@@ -239,7 +240,6 @@ html.deepsea-theme {
 .settings-info {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: 15px;
     font-size: 0.9em;
     color: #888;
 }

static/css/workers.css

@@ -20,8 +20,8 @@
 }
 
 .search-box:focus {
-  outline: none;
+    outline: none;
-  box-shadow: 0 0 8px rgba(247, 147, 26, 0.5);
+    box-shadow: 0 0 8px var(--primary-color);
 }
 
 .filter-button {

static/js/workers.js

@@ -534,33 +534,41 @@ function createWorkerCard(worker, maxHashrate) {
     return card;
 }
 
-// Filter worker data based on current filter state
+// Modified filterWorkers function for better search functionality
+// This will replace the existing filterWorkers function in workers.js
+function filterWorkers() {
+    if (!workerData || !workerData.workers) return;
+    renderWorkersList();
+}
+
+// Update the workers grid when filters change
+function updateWorkerGrid() {
+    renderWorkersList();
+}
+
+// Modified filterWorkersData function to only include 'all', 'online', and 'offline' filters
 function filterWorkersData(workers) {
     if (!workers) return [];
 
     return workers.filter(worker => {
         const workerName = (worker.name || '').toLowerCase();
         const isOnline = worker.status === 'online';
-        const workerType = (worker.type || '').toLowerCase();
 
+        // Modified to only handle 'all', 'online', and 'offline' filters
         const matchesFilter = filterState.currentFilter === 'all' ||
             (filterState.currentFilter === 'online' && isOnline) ||
-            (filterState.currentFilter === 'offline' && !isOnline) ||
+            (filterState.currentFilter === 'offline' && !isOnline);
-            (filterState.currentFilter === 'asic' && workerType === 'asic') ||
-            (filterState.currentFilter === 'bitaxe' && workerType === 'bitaxe');
 
-        const matchesSearch = filterState.searchTerm === '' || workerName.includes(filterState.searchTerm);
+        // Improved search matching to check name, model and type
+        const matchesSearch = filterState.searchTerm === '' ||
+            workerName.includes(filterState.searchTerm) ||
+            (worker.model && worker.model.toLowerCase().includes(filterState.searchTerm)) ||
+            (worker.type && worker.type.toLowerCase().includes(filterState.searchTerm));
 
         return matchesFilter && matchesSearch;
     });
 }
 
-// Apply filter to rendered worker cards
-function filterWorkers() {
-    if (!workerData || !workerData.workers) return;
-    updateWorkerGrid();
-}
-
 // Update summary stats with normalized hashrate display
 function updateSummaryStats() {
     if (!workerData) return;

templates/earnings.html

@@ -13,12 +13,6 @@
 {% block content %}
 <div class="dashboard-container">
 
-    <!-- User Settings Info -->
-    <div class="settings-info">
-        <span class="setting-item">Currency: <strong id="user-currency">{{ user_currency }}</strong></span>
-        <span class="setting-item">Timezone: <strong id="user-timezone">{{ user_timezone }}</strong></span>
-    </div>
-
     <!-- Summary Cards Section -->
     <div class="stats-grid">
         <div class="stat-card">
@@ -135,6 +129,11 @@
             </table>
         </div>
     </div>
+    <!-- User Settings Info -->
+    <div class="settings-info">
+        <span class="setting-item">Currency: <strong id="user-currency">{{ user_currency }}</strong></span>
+        <span class="setting-item">Timezone: <strong id="user-timezone">{{ user_timezone }}</strong></span>
+    </div>
 </div>
 
 <script>

templates/workers.html

@@ -80,8 +80,6 @@
         <button class="filter-button active" data-filter="all">ALL WORKERS</button>
         <button class="filter-button" data-filter="online">ONLINE</button>
         <button class="filter-button" data-filter="offline">OFFLINE</button>
-        <button class="filter-button" data-filter="asic">ASIC</button>
-        <button class="filter-button" data-filter="bitaxe">BITAXE</button>
     </div>
 </div>