diff --git a/static/css/dashboard.css b/static/css/dashboard.css index f3b1832..a521fcc 100644 --- a/static/css/dashboard.css +++ b/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 */ diff --git a/static/css/earnings.css b/static/css/earnings.css index a485433..aecebe3 100644 --- a/static/css/earnings.css +++ b/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; } diff --git a/static/css/workers.css b/static/css/workers.css index 185793a..20e25dc 100644 --- a/static/css/workers.css +++ b/static/css/workers.css @@ -20,8 +20,8 @@ } .search-box:focus { - outline: none; - box-shadow: 0 0 8px rgba(247, 147, 26, 0.5); + outline: none; + box-shadow: 0 0 8px var(--primary-color); } .filter-button { diff --git a/static/js/workers.js b/static/js/workers.js index 8a7bf12..23ef443 100644 --- a/static/js/workers.js +++ b/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 === 'asic' && workerType === 'asic') || - (filterState.currentFilter === 'bitaxe' && workerType === 'bitaxe'); + (filterState.currentFilter === 'offline' && !isOnline); - 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; diff --git a/templates/earnings.html b/templates/earnings.html index f643c7f..e642dd2 100644 --- a/templates/earnings.html +++ b/templates/earnings.html @@ -13,12 +13,6 @@ {% block content %}