7a4fa4b312
- Move dark mode detection to inline script in HTML head - Prevents white flash in Firefox by applying theme before render - Clean up redundant code in dark-mode.js - Apply fix to all HTML pages for consistent behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
108 lines
No EOL
4 KiB
HTML
108 lines
No EOL
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mining Resources - Playground</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script>
|
|
// Apply dark mode immediately to prevent flash
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
|
|
<h1>Mining Resources</h1>
|
|
|
|
<div class="section">
|
|
<h3>Current Resources</h3>
|
|
<div class="display-large" id="current-value">Loading...</div>
|
|
<div class="info">
|
|
Rate: <span id="rate">0</span> per minute
|
|
</div>
|
|
<div class="timestamp" id="last-update">Last updated: Loading...</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Database History (Last 5 Updates)</h3>
|
|
<div id="history-container">
|
|
<div class="loading">Loading history...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="back-link">
|
|
<a href="index.html" class="back-button">← Back to Main</a>
|
|
</div>
|
|
|
|
<script>
|
|
let miningData = null;
|
|
let lastFetchTime = null;
|
|
|
|
function formatNumber(num) {
|
|
return Math.floor(num * 100) / 100; // Round to 2 decimal places
|
|
}
|
|
|
|
function formatTimestamp(timestamp) {
|
|
return new Date(timestamp).toLocaleString();
|
|
}
|
|
|
|
function calculateCurrentValue() {
|
|
if (!miningData || !lastFetchTime) return 0;
|
|
|
|
const now = new Date();
|
|
const minutesElapsed = (now - lastFetchTime) / (1000 * 60);
|
|
return miningData.current_value + (miningData.rate * minutesElapsed);
|
|
}
|
|
|
|
function updateDisplay() {
|
|
const currentValue = calculateCurrentValue();
|
|
document.getElementById('current-value').textContent = formatNumber(currentValue);
|
|
document.getElementById('last-update').textContent = 'Last updated: ' + new Date().toLocaleString();
|
|
}
|
|
|
|
function fetchMiningData() {
|
|
fetch('/api/mining')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
miningData = data;
|
|
lastFetchTime = new Date();
|
|
|
|
document.getElementById('rate').textContent = formatNumber(data.rate);
|
|
|
|
// Update history display
|
|
const historyContainer = document.getElementById('history-container');
|
|
if (data.history && data.history.length > 0) {
|
|
historyContainer.innerHTML = data.history.map(record => `
|
|
<div class="item-row">
|
|
<div class="item-name">Value: ${formatNumber(record.value)}</div>
|
|
<div class="item-id">Rate: ${formatNumber(record.rate)}/min</div>
|
|
<div class="timestamp">${formatTimestamp(record.timestamp)}</div>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
historyContainer.innerHTML = '<div class="empty">No mining history available</div>';
|
|
}
|
|
|
|
updateDisplay();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching mining data:', error);
|
|
document.getElementById('current-value').textContent = 'Error loading data';
|
|
document.getElementById('current-value').className = 'display-large error';
|
|
});
|
|
}
|
|
|
|
// Initial fetch
|
|
fetchMiningData();
|
|
|
|
// Update current value display every second
|
|
setInterval(updateDisplay, 1000);
|
|
|
|
// Fetch fresh data from server every 30 seconds
|
|
setInterval(fetchMiningData, 30000);
|
|
</script>
|
|
<script src="dark-mode.js"></script>
|
|
</body>
|
|
</html> |