mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
2f0da50d93
Updated the version number in the footer from "v0.9.4 - Public Beta" to "v0.9.5 - Public Beta".
181 lines
7.2 KiB
HTML
181 lines
7.2 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 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 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="/earnings" class="nav-link {% block earnings_active %}{% endblock %}">EARNINGS</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.9.5 - 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>
|