mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +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.
127 lines
4.9 KiB
HTML
127 lines
4.9 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>
|
|
</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>
|