mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 11:10:44 +02:00
0d0a707019
Introduces a responsive theme toggle button with styles for desktop and mobile views in `theme-toggle.css`. Updates `BitcoinProgressBar.js` to support dynamic theme changes and adds a new `updateTheme` method. Enhances `main.js` for theme management based on user preferences in `localStorage`. Modifies `base.html` and other HTML files to include the theme toggle button and necessary scripts. Introduces `theme.js` for managing theme constants and applying the DeepSea theme.
100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}WORKERS - BTC-OS MINING DASHBOARD v 0.3{% endblock %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="/static/css/workers.css">
|
|
<link rel="stylesheet" href="/static/css/theme-toggle.css">
|
|
{% endblock %}
|
|
|
|
{% block header %}WORKERS OVERVIEW{% endblock %}
|
|
|
|
{% block workers_active %}active{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Summary statistics -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">MINER SUMMARY</div>
|
|
<div class="card-body">
|
|
<div class="summary-stats">
|
|
<div class="summary-stat">
|
|
<div class="worker-ring" style="--online-percent: {{ workers_online / workers_total if workers_total > 0 else 0 }}">
|
|
<div class="worker-ring-inner">
|
|
<span id="workers-count">{{ workers_total }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="summary-stat-label">WORKERS</div>
|
|
<div>
|
|
<span class="green-glow" id="workers-online">{{ workers_online }}</span> /
|
|
<span class="red-glow" id="workers-offline">{{ workers_offline }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-stat">
|
|
<div class="summary-stat-value white-glow" id="total-hashrate">
|
|
{% if total_hashrate is defined %}
|
|
{{ "%.1f"|format(total_hashrate) }} {{ hashrate_unit }}
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</div>
|
|
<div class="summary-stat-label">TOTAL HASHRATE</div>
|
|
<div class="mini-chart">
|
|
<canvas id="total-hashrate-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-stat">
|
|
<div class="summary-stat-value green-glow" id="total-earnings">
|
|
{% if total_earnings is defined %}
|
|
{{ "%.8f"|format(total_earnings) }} BTC
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</div>
|
|
<div class="summary-stat-label">UNPAID EARNINGS</div>
|
|
</div>
|
|
|
|
<div class="summary-stat">
|
|
<div class="summary-stat-value yellow-glow" id="daily-sats">
|
|
{% if daily_sats is defined %}
|
|
{{ daily_sats|commafy }} SATS
|
|
{% else %}
|
|
N/A
|
|
{% endif %}
|
|
</div>
|
|
<div class="summary-stat-label">DAILY SATS</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controls bar -->
|
|
<div class="controls-bar">
|
|
<input type="text" class="search-box" id="worker-search" placeholder="Search workers...">
|
|
<div class="filter-buttons">
|
|
<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>
|
|
|
|
<!-- Workers grid -->
|
|
<div class="worker-grid" id="worker-grid">
|
|
<!-- Worker cards will be generated here via JavaScript -->
|
|
<div id="loader" class="text-center p-5" style="display:none;">
|
|
<i class="fas fa-spinner fa-spin"></i> Loading worker data...
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascript %}
|
|
<script src="/static/js/workers.js"></script>
|
|
{% endblock %}
|