mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 11:10:44 +02:00
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.
This commit is contained in:
DJObleezy
parent
bdb757c1db
commit
034aec6d12
@ -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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 8px rgba(247, 147, 26, 0.5);
|
||||
box-shadow: 0 0 8px var(--primary-color);
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user