mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
2f1cbd3143
Updated `NotificationService` to distinguish between low and normal hashrate modes, utilizing 3-hour and 10-minute averages for detection. Improved `updateChartWithNormalizedData` in `main.js` to support localStorage persistence for hashrate state and refined mode-switching logic. Introduced `showHashrateNormalizeNotice` for user notifications regarding hashrate normalization. Updated HTML files for UI consistency, including version number and structured display of pool fees and unpaid earnings. Ensured proper chart updates and annotations for 24-hour averages.
180 lines
7.1 KiB
HTML
180 lines
7.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}BTC-OS MINING DASHBOARD {% endblock %}</title>
|
|
|
|
<!-- Common fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<!-- Bootstrap -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Common CSS -->
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="/static/css/theme-toggle.css">
|
|
|
|
<!-- Theme JS (added to ensure consistent application of theme) -->
|
|
<script src="/static/js/theme.js"></script>
|
|
|
|
<!-- Page-specific CSS -->
|
|
{% block css %}{% endblock %}
|
|
|
|
<script>
|
|
// Execute this immediately to preload theme
|
|
(function () {
|
|
const useDeepSea = localStorage.getItem('useDeepSeaTheme') === 'true';
|
|
const themeClass = useDeepSea ? 'deepsea-theme' : 'bitcoin-theme';
|
|
|
|
// Apply theme class to html element
|
|
document.documentElement.classList.add(themeClass);
|
|
|
|
// Create and add loader
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Create loader element
|
|
const loader = document.createElement('div');
|
|
loader.id = 'theme-loader';
|
|
|
|
const icon = document.createElement('div');
|
|
icon.id = 'loader-icon';
|
|
icon.innerHTML = useDeepSea ? '🌊' : '₿';
|
|
|
|
const text = document.createElement('div');
|
|
text.id = 'loader-text';
|
|
text.textContent = 'Loading ' + (useDeepSea ? 'DeepSea' : 'Bitcoin') + ' Theme';
|
|
|
|
loader.appendChild(icon);
|
|
loader.appendChild(text);
|
|
document.body.appendChild(loader);
|
|
|
|
// Add fade-in effect for content once theme is loaded
|
|
setTimeout(function () {
|
|
document.body.style.visibility = 'visible';
|
|
|
|
// Fade out loader
|
|
loader.style.transition = 'opacity 0.5s ease';
|
|
loader.style.opacity = '0';
|
|
|
|
// Remove loader after fade
|
|
setTimeout(function () {
|
|
if (loader && loader.parentNode) {
|
|
loader.parentNode.removeChild(loader);
|
|
}
|
|
}, 500);
|
|
}, 300);
|
|
});
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
// Add underwater effects for DeepSea theme
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Check if DeepSea theme is active
|
|
if (localStorage.getItem('useDeepSeaTheme') === 'true') {
|
|
// Create underwater light rays
|
|
const rays = document.createElement('div');
|
|
rays.className = 'underwater-rays';
|
|
document.body.appendChild(rays);
|
|
|
|
// Create digital noise
|
|
const noise = document.createElement('div');
|
|
noise.className = 'digital-noise';
|
|
document.body.appendChild(noise);
|
|
}
|
|
});
|
|
</script>
|
|
<div class="container-fluid">
|
|
<!-- Connection status indicator -->
|
|
<div id="connectionStatus"></div>
|
|
|
|
<h1 class="text-center">
|
|
<a href="/" style="text-decoration:none; color:inherit;">
|
|
{% block header %}BTC-OS MINING DASHBOARD{% endblock %}
|
|
</a>
|
|
</h1>
|
|
|
|
<!-- Top right link -->
|
|
<a href="https://x.com/DJObleezy" id="topRightLink" target="_blank" rel="noopener noreferrer">MADE BY @DJO₿LEEZY</a>
|
|
|
|
<!-- Theme toggle button (new) -->
|
|
<button id="themeToggle" class="theme-toggle-btn">
|
|
<span>Toggle Theme</span>
|
|
</button>
|
|
|
|
{% block last_updated %}
|
|
<p class="text-center" id="lastUpdated" style="color: #f7931a; text-transform: uppercase;"><strong>LAST UPDATED:</strong> {{ current_time }}<span id="terminal-cursor"></span></p>
|
|
{% endblock %}
|
|
|
|
{% block navigation %}
|
|
<div class="navigation-links">
|
|
<a href="/dashboard" class="nav-link {% block dashboard_active %}{% endblock %}">DASHBOARD</a>
|
|
<a href="/workers" class="nav-link {% block workers_active %}{% endblock %}">WORKERS</a>
|
|
<a href="/blocks" class="nav-link {% block blocks_active %}{% endblock %}">BLOCKS</a>
|
|
<a href="/notifications" class="nav-link {% block notifications_active %}{% endblock %}">
|
|
NOTIFICATIONS
|
|
<span id="nav-unread-badge" class="nav-badge"></span>
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<!-- Main content area -->
|
|
{% block content %}{% endblock %}
|
|
|
|
<!-- Hidden Congrats Message -->
|
|
{% block congrats_message %}
|
|
<div id="congratsMessage" style="display:none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: #f7931a; color: #000; padding: 10px; border-radius: 5px; box-shadow: 0 0 15px rgba(247, 147, 26, 0.7);"></div>
|
|
{% endblock %}
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer text-center">
|
|
<p>Not affiliated with <a href="https://www.Ocean.xyz">Ocean.xyz</a></p>
|
|
<p>v0.8.8 - Public Beta</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- External JavaScript libraries -->
|
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.1.0"></script>
|
|
|
|
<!-- Theme toggle initialization -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Initialize theme toggle button based on current theme
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
if (themeToggle) {
|
|
// Check current theme
|
|
const isDeepSea = localStorage.getItem('useDeepSeaTheme') === 'true';
|
|
|
|
// Update button style based on theme
|
|
if (isDeepSea) {
|
|
themeToggle.style.borderColor = '#0088cc';
|
|
themeToggle.style.color = '#0088cc';
|
|
} else {
|
|
themeToggle.style.borderColor = '#f2a900';
|
|
themeToggle.style.color = '#f2a900';
|
|
}
|
|
|
|
// Add click event listener
|
|
themeToggle.addEventListener('click', function () {
|
|
toggleTheme(); // This will now trigger a page refresh
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Page-specific JavaScript -->
|
|
{% block javascript %}{% endblock %}
|
|
|
|
<!-- Bitcoin Progress Bar -->
|
|
<script src="/static/js/BitcoinProgressBar.js"></script>
|
|
</body>
|
|
</html>
|