mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
f617342c23
Updated `theme-toggle.css` with new styles for DeepSea and Bitcoin themes, including a loading screen. Introduced `isApplyingTheme` flag in `main.js` to manage theme application state. Modified `applyDeepSeaTheme` and `toggleTheme` functions in `theme.js` to enhance theme switching experience with dynamic loading messages. Enhanced `base.html` to preload styles and prevent flickering during theme transitions.
233 lines
8.0 KiB
HTML
233 lines
8.0 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 v 0.3{% 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 %}
|
|
|
|
<style>
|
|
.footer {
|
|
margin-top: 30px;
|
|
padding: 10px 0;
|
|
color: grey;
|
|
font-size: 0.9rem;
|
|
text-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
|
|
border-top: 1px solid rgba(128, 128, 128, 0.2);
|
|
}
|
|
</style>
|
|
<!-- Preload theme to prevent flicker -->
|
|
<style id="theme-preload">
|
|
/* Theme-aware loading state */
|
|
html.bitcoin-theme {
|
|
background-color: #111111;
|
|
}
|
|
|
|
html.deepsea-theme {
|
|
background-color: #0c141a;
|
|
}
|
|
|
|
#theme-loader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
font-family: 'VT323', monospace;
|
|
}
|
|
|
|
html.bitcoin-theme #theme-loader {
|
|
background-color: #111111;
|
|
color: #f2a900;
|
|
}
|
|
|
|
html.deepsea-theme #theme-loader {
|
|
background-color: #0c141a;
|
|
color: #0088cc;
|
|
}
|
|
|
|
#loader-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 20px;
|
|
animation: spin 2s infinite linear;
|
|
}
|
|
|
|
#loader-text {
|
|
font-size: 24px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Hide content during load */
|
|
body {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
<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>
|
|
<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 Ocean.xyz</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>
|