mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
Add files via upload
This commit is contained in:
DJObleezy
GitHub
parent
6fcbfa806d
commit
8c5c39d435
852
static/js/BitcoinProgressBar.js
Normal file
852
static/js/BitcoinProgressBar.js
Normal file
@ -0,0 +1,852 @@
|
||||
/**
|
||||
* BitcoinMinuteRefresh.js - A minute-based refresh system tied to server uptime
|
||||
*
|
||||
* This module creates a Bitcoin-themed terminal that shows server uptime
|
||||
* and refreshes data only on minute boundaries for better synchronization.
|
||||
*/
|
||||
|
||||
const BitcoinMinuteRefresh = (function () {
|
||||
// Constants
|
||||
const STORAGE_KEY = 'bitcoin_last_refresh_time'; // For cross-page sync
|
||||
|
||||
// Private variables
|
||||
let terminalElement = null;
|
||||
let uptimeElement = null;
|
||||
let serverTimeOffset = 0;
|
||||
let serverStartTime = null;
|
||||
let uptimeInterval = null;
|
||||
let lastMinuteValue = -1;
|
||||
let isInitialized = false;
|
||||
let refreshCallback = null;
|
||||
|
||||
/**
|
||||
* Create and inject the retro terminal element into the DOM
|
||||
*/
|
||||
function createTerminalElement() {
|
||||
// Container element
|
||||
terminalElement = document.createElement('div');
|
||||
terminalElement.id = 'bitcoin-terminal';
|
||||
terminalElement.className = 'bitcoin-terminal';
|
||||
|
||||
// Terminal content
|
||||
terminalElement.innerHTML = `
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-title">SYSTEM MONITOR v.3</div>
|
||||
<div class="terminal-controls">
|
||||
<div class="terminal-dot minimize" title="Minimize" onclick="BitcoinMinuteRefresh.toggleTerminal()"></div>
|
||||
<div class="terminal-dot close" title="Close" onclick="BitcoinMinuteRefresh.hideTerminal()"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-content">
|
||||
<div class="status-row">
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot connected"></div>
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
<span id="terminal-clock" class="terminal-clock">00:00:00</span>
|
||||
</div>
|
||||
|
||||
<div class="minute-progress-container">
|
||||
<div class="minute-labels">
|
||||
<span>0s</span>
|
||||
<span>15s</span>
|
||||
<span>30s</span>
|
||||
<span>45s</span>
|
||||
<span>60s</span>
|
||||
</div>
|
||||
<div class="minute-progress-bar">
|
||||
<div id="minute-progress-inner" class="minute-progress-inner">
|
||||
<div class="minute-progress-fill"></div>
|
||||
<div class="scan-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="refresh-status" class="refresh-status">
|
||||
Next refresh at the top of the minute
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="uptime-timer" class="uptime-timer">
|
||||
<div class="uptime-title">UPTIME</div>
|
||||
<div class="uptime-display">
|
||||
<div class="uptime-value">
|
||||
<span id="uptime-hours" class="uptime-number">00</span>
|
||||
<span class="uptime-label">H</span>
|
||||
</div>
|
||||
<div class="uptime-separator">:</div>
|
||||
<div class="uptime-value">
|
||||
<span id="uptime-minutes" class="uptime-number">00</span>
|
||||
<span class="uptime-label">M</span>
|
||||
</div>
|
||||
<div class="uptime-separator">:</div>
|
||||
<div class="uptime-value">
|
||||
<span id="uptime-seconds" class="uptime-number">00</span>
|
||||
<span class="uptime-label">S</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-minimized">
|
||||
<!-- <div class="minimized-clock">
|
||||
<span id="minimized-clock-value">00:00:00</span>
|
||||
</div>
|
||||
<div class="minimized-separator">|</div> -->
|
||||
<div class="minimized-uptime">
|
||||
<span class="mini-uptime-label">UPTIME</span>
|
||||
<span id="minimized-uptime-value">00:00:00</span>
|
||||
</div>
|
||||
<div class="minimized-status-dot connected"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Append to body
|
||||
document.body.appendChild(terminalElement);
|
||||
|
||||
// Cache element references
|
||||
uptimeElement = document.getElementById('uptime-timer');
|
||||
|
||||
// Check if terminal was previously collapsed
|
||||
if (localStorage.getItem('bitcoin_terminal_collapsed') === 'true') {
|
||||
terminalElement.classList.add('collapsed');
|
||||
}
|
||||
|
||||
// Add custom styles if not already present
|
||||
if (!document.getElementById('bitcoin-terminal-styles')) {
|
||||
addStyles();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add CSS styles for the terminal
|
||||
*/
|
||||
function addStyles() {
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.id = 'bitcoin-terminal-styles';
|
||||
styleElement.textContent = `
|
||||
/* Terminal Container */
|
||||
.bitcoin-terminal {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 340px;
|
||||
background-color: #000000;
|
||||
border: 1px solid #f7931a; // Changed from 2px to 1px
|
||||
color: #f7931a;
|
||||
font-family: 'VT323', monospace;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 5px rgba(247, 147, 26, 0.3); // Added to match card shadow
|
||||
}
|
||||
|
||||
/* Terminal Header */
|
||||
.terminal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f7931a;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.terminal-title {
|
||||
color: #f7931a;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
animation: terminal-flicker 4s infinite;
|
||||
}
|
||||
|
||||
/* Control Dots */
|
||||
.terminal-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.terminal-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #555;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.terminal-dot.minimize:hover {
|
||||
background-color: #ffcc00;
|
||||
}
|
||||
|
||||
.terminal-dot.close:hover {
|
||||
background-color: #ff3b30;
|
||||
}
|
||||
|
||||
/* Terminal Content */
|
||||
.terminal-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Status Row */
|
||||
.status-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Status Indicator */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.status-dot.connected {
|
||||
background-color: #32CD32;
|
||||
box-shadow: 0 0 5px #32CD32;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.terminal-clock {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
}
|
||||
|
||||
/* Minute Progress Bar */
|
||||
.minute-progress-container {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.minute-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.7rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.minute-progress-bar {
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background-color: #111;
|
||||
border: 1px solid #f7931a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.minute-progress-inner {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.minute-progress-fill {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #f7931a, #ffa500);
|
||||
transition: width 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Scan line effect */
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
animation: scan 2s linear infinite;
|
||||
box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.5);
|
||||
z-index: 2;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Refresh status */
|
||||
.refresh-status {
|
||||
font-size: 0.8rem;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
}
|
||||
|
||||
/* Uptime Display - Modern Digital Clock Style (Horizontal) */
|
||||
.uptime-timer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
background-color: #111;
|
||||
border: 1px solid rgba(247, 147, 26, 0.5);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.uptime-display {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.uptime-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.uptime-number {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
background-color: #000;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
min-width: 32px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 8px rgba(247, 147, 26, 0.8);
|
||||
color: #f7931a;
|
||||
}
|
||||
|
||||
.uptime-label {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.uptime-separator {
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
text-shadow: 0 0 8px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
.uptime-title {
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* Special effects */
|
||||
.minute-progress-inner.near-refresh .minute-progress-fill {
|
||||
box-shadow: 0 0 15px #f7931a, 0 0 25px #f7931a;
|
||||
animation: pulse-brightness 1s infinite;
|
||||
}
|
||||
|
||||
.minute-progress-inner.refresh-now .minute-progress-fill {
|
||||
animation: refresh-flash 1s forwards;
|
||||
}
|
||||
|
||||
/* Show button */
|
||||
#bitcoin-terminal-show {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background-color: #f7931a;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
font-family: 'VT323', monospace;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
box-shadow: 0 0 10px rgba(247, 147, 26, 0.5);
|
||||
}
|
||||
|
||||
/* CRT scanline effect */
|
||||
.terminal-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Minimized view styling */
|
||||
.terminal-minimized {
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 10px;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.terminal-minimized::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.minimized-clock {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.minimized-separator {
|
||||
margin: 0 10px;
|
||||
color: rgba(247, 147, 26, 0.5);
|
||||
font-size: 1.1rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.minimized-uptime {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mini-uptime-label {
|
||||
font-size: 0.6rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
opacity: 0.7;
|
||||
margin-left: 45px;
|
||||
color: #f7931a;
|
||||
}
|
||||
|
||||
#minimized-uptime-value {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
|
||||
margin-left: 45px;
|
||||
color: #f7931a;
|
||||
}
|
||||
|
||||
.minimized-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Collapsed state */
|
||||
.bitcoin-terminal.collapsed {
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.bitcoin-terminal.collapsed .terminal-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bitcoin-terminal.collapsed .terminal-minimized {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bitcoin-terminal.collapsed .terminal-header {
|
||||
border-bottom: none;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes scan {
|
||||
0% { top: -2px; }
|
||||
100% { top: 17px; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes terminal-flicker {
|
||||
0% { opacity: 0.97; }
|
||||
5% { opacity: 0.95; }
|
||||
10% { opacity: 0.97; }
|
||||
15% { opacity: 0.94; }
|
||||
20% { opacity: 0.98; }
|
||||
50% { opacity: 0.95; }
|
||||
80% { opacity: 0.96; }
|
||||
90% { opacity: 0.94; }
|
||||
100% { opacity: 0.98; }
|
||||
}
|
||||
|
||||
@keyframes pulse-brightness {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
@keyframes refresh-flash {
|
||||
0% { filter: brightness(1); background-color: #f7931a; }
|
||||
10% { filter: brightness(1.8); background-color: #fff; }
|
||||
20% { filter: brightness(1); background-color: #f7931a; }
|
||||
30% { filter: brightness(1.8); background-color: #fff; }
|
||||
40% { filter: brightness(1); background-color: #f7931a; }
|
||||
100% { filter: brightness(1); background-color: #f7931a; }
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media (max-width: 768px) {
|
||||
.bitcoin-terminal {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 320px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.bitcoin-terminal.collapsed {
|
||||
width: auto;
|
||||
max-width: 300px;
|
||||
left: 50%; // Changed from "left: auto"
|
||||
right: auto; // Changed from "right: 10px"
|
||||
transform: translateX(-50%); // Changed from "transform: none"
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the minute progress bar based on current seconds
|
||||
*/
|
||||
function updateMinuteProgress() {
|
||||
try {
|
||||
// Get current server time
|
||||
const now = new Date(Date.now() + (serverTimeOffset || 0));
|
||||
const seconds = now.getSeconds();
|
||||
const milliseconds = now.getMilliseconds();
|
||||
|
||||
// Calculate precise progress within the minute (0-1)
|
||||
const progress = (seconds + (milliseconds / 1000)) / 60;
|
||||
|
||||
// Update the progress bar
|
||||
const progressBar = document.getElementById('minute-progress-inner');
|
||||
if (progressBar) {
|
||||
// Set the width based on the current progress through the minute
|
||||
progressBar.style.width = (progress * 100) + "%";
|
||||
|
||||
// Add effects when close to the end of the minute
|
||||
if (seconds >= 50) {
|
||||
progressBar.classList.add('near-refresh');
|
||||
document.getElementById('refresh-status').textContent = `Refresh in ${60 - seconds} seconds...`;
|
||||
} else {
|
||||
progressBar.classList.remove('near-refresh');
|
||||
document.getElementById('refresh-status').textContent = 'Next refresh at the top of the minute';
|
||||
}
|
||||
|
||||
// Flash when reaching 00 seconds (new minute)
|
||||
if (seconds === 0 && milliseconds < 500) {
|
||||
progressBar.classList.add('refresh-now');
|
||||
document.getElementById('refresh-status').textContent = 'Refreshing data...';
|
||||
|
||||
// Remove the class after animation completes
|
||||
setTimeout(() => {
|
||||
progressBar.classList.remove('refresh-now');
|
||||
}, 1000);
|
||||
} else {
|
||||
progressBar.classList.remove('refresh-now');
|
||||
}
|
||||
}
|
||||
|
||||
// Check if we've crossed into a new minute
|
||||
const currentMinute = now.getMinutes();
|
||||
if (lastMinuteValue !== -1 && currentMinute !== lastMinuteValue && seconds === 0) {
|
||||
// Trigger refresh on minute change (only when seconds are 0)
|
||||
if (typeof refreshCallback === 'function') {
|
||||
console.log('New minute started - triggering refresh...');
|
||||
refreshCallback();
|
||||
}
|
||||
}
|
||||
|
||||
// Update last minute value
|
||||
lastMinuteValue = currentMinute;
|
||||
|
||||
} catch (e) {
|
||||
console.error("BitcoinMinuteRefresh: Error updating progress bar:", e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the terminal clock
|
||||
*/
|
||||
function updateClock() {
|
||||
try {
|
||||
const now = new Date(Date.now() + (serverTimeOffset || 0));
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
const timeString = `${hours}:${minutes}:${seconds}`;
|
||||
|
||||
// Update both clocks (normal and minimized views)
|
||||
const clockElement = document.getElementById('terminal-clock');
|
||||
if (clockElement) {
|
||||
clockElement.textContent = timeString;
|
||||
}
|
||||
|
||||
const minimizedClockElement = document.getElementById('minimized-clock-value');
|
||||
if (minimizedClockElement) {
|
||||
minimizedClockElement.textContent = timeString;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("BitcoinMinuteRefresh: Error updating clock:", e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the uptime display
|
||||
*/
|
||||
function updateUptime() {
|
||||
if (serverStartTime) {
|
||||
try {
|
||||
const currentServerTime = Date.now() + serverTimeOffset;
|
||||
const diff = currentServerTime - serverStartTime;
|
||||
|
||||
// Calculate hours, minutes, seconds
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||
|
||||
// Update the main uptime display with digital clock style
|
||||
document.getElementById('uptime-hours').textContent = String(hours).padStart(2, '0');
|
||||
document.getElementById('uptime-minutes').textContent = String(minutes).padStart(2, '0');
|
||||
document.getElementById('uptime-seconds').textContent = String(seconds).padStart(2, '0');
|
||||
|
||||
// Update the minimized uptime display
|
||||
const minimizedUptimeElement = document.getElementById('minimized-uptime-value');
|
||||
if (minimizedUptimeElement) {
|
||||
minimizedUptimeElement.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("BitcoinMinuteRefresh: Error updating uptime:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Notify other tabs that data has been refreshed
|
||||
*/
|
||||
function notifyRefresh() {
|
||||
const now = Date.now();
|
||||
localStorage.setItem(STORAGE_KEY, now.toString());
|
||||
localStorage.setItem('bitcoin_refresh_event', 'refresh-' + now);
|
||||
console.log("BitcoinMinuteRefresh: Notified other tabs of refresh at " + new Date(now).toISOString());
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the minute refresh system
|
||||
*/
|
||||
function initialize(refreshFunc) {
|
||||
// Store the refresh callback
|
||||
refreshCallback = refreshFunc;
|
||||
|
||||
// Create the terminal element if it doesn't exist
|
||||
if (!document.getElementById('bitcoin-terminal')) {
|
||||
createTerminalElement();
|
||||
} else {
|
||||
// Get references to existing elements
|
||||
terminalElement = document.getElementById('bitcoin-terminal');
|
||||
uptimeElement = document.getElementById('uptime-timer');
|
||||
}
|
||||
|
||||
// Try to get stored server time information
|
||||
try {
|
||||
serverTimeOffset = parseFloat(localStorage.getItem('serverTimeOffset') || '0');
|
||||
serverStartTime = parseFloat(localStorage.getItem('serverStartTime') || '0');
|
||||
} catch (e) {
|
||||
console.error("BitcoinMinuteRefresh: Error reading server time from localStorage:", e);
|
||||
}
|
||||
|
||||
// Clear any existing intervals
|
||||
if (uptimeInterval) {
|
||||
clearInterval(uptimeInterval);
|
||||
}
|
||||
|
||||
// Set up intervals for updating at 50ms precision for smooth animation
|
||||
uptimeInterval = setInterval(function () {
|
||||
updateClock();
|
||||
updateUptime();
|
||||
updateMinuteProgress();
|
||||
}, 50);
|
||||
|
||||
// Listen for storage events to sync across tabs
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
// Handle visibility changes
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
|
||||
// Initialize last minute value
|
||||
const now = new Date(Date.now() + serverTimeOffset);
|
||||
lastMinuteValue = now.getMinutes();
|
||||
|
||||
// Log current server time details for debugging
|
||||
console.log(`BitcoinMinuteRefresh: Server time is ${now.toISOString()}, minute=${lastMinuteValue}, seconds=${now.getSeconds()}`);
|
||||
|
||||
// Mark as initialized
|
||||
isInitialized = true;
|
||||
|
||||
console.log("BitcoinMinuteRefresh: Initialized");
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle storage changes for cross-tab synchronization
|
||||
*/
|
||||
function handleStorageChange(event) {
|
||||
if (event.key === 'bitcoin_refresh_event') {
|
||||
console.log("BitcoinMinuteRefresh: Detected refresh from another tab");
|
||||
|
||||
// If another tab refreshed, consider refreshing this one too
|
||||
// But don't refresh if it was just refreshed recently (5 seconds)
|
||||
const lastRefreshTime = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
|
||||
if (typeof refreshCallback === 'function' && Date.now() - lastRefreshTime > 5000) {
|
||||
refreshCallback();
|
||||
}
|
||||
} else if (event.key === 'serverTimeOffset' || event.key === 'serverStartTime') {
|
||||
try {
|
||||
serverTimeOffset = parseFloat(localStorage.getItem('serverTimeOffset') || '0');
|
||||
serverStartTime = parseFloat(localStorage.getItem('serverStartTime') || '0');
|
||||
} catch (e) {
|
||||
console.error("BitcoinMinuteRefresh: Error reading updated server time:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle visibility changes
|
||||
*/
|
||||
function handleVisibilityChange() {
|
||||
if (!document.hidden) {
|
||||
console.log("BitcoinMinuteRefresh: Page became visible, updating");
|
||||
|
||||
// Update immediately when page becomes visible
|
||||
updateClock();
|
||||
updateUptime();
|
||||
updateMinuteProgress();
|
||||
|
||||
// Check if we need to do a refresh based on time elapsed
|
||||
if (typeof refreshCallback === 'function') {
|
||||
const lastRefreshTime = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
|
||||
if (Date.now() - lastRefreshTime > 60000) { // More than a minute since last refresh
|
||||
refreshCallback();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update server time information
|
||||
*/
|
||||
function updateServerTime(timeOffset, startTime) {
|
||||
serverTimeOffset = timeOffset;
|
||||
serverStartTime = startTime;
|
||||
|
||||
// Store in localStorage for cross-page sharing
|
||||
localStorage.setItem('serverTimeOffset', serverTimeOffset.toString());
|
||||
localStorage.setItem('serverStartTime', serverStartTime.toString());
|
||||
|
||||
// Update the uptime immediately
|
||||
updateUptime();
|
||||
updateMinuteProgress();
|
||||
|
||||
console.log("BitcoinMinuteRefresh: Server time updated - offset:", serverTimeOffset, "ms");
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle terminal collapsed state
|
||||
*/
|
||||
function toggleTerminal() {
|
||||
if (!terminalElement) return;
|
||||
|
||||
terminalElement.classList.toggle('collapsed');
|
||||
localStorage.setItem('bitcoin_terminal_collapsed', terminalElement.classList.contains('collapsed'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the terminal and show the restore button
|
||||
*/
|
||||
function hideTerminal() {
|
||||
if (!terminalElement) return;
|
||||
|
||||
terminalElement.style.display = 'none';
|
||||
|
||||
// Create show button if it doesn't exist
|
||||
if (!document.getElementById('bitcoin-terminal-show')) {
|
||||
const showButton = document.createElement('button');
|
||||
showButton.id = 'bitcoin-terminal-show';
|
||||
showButton.textContent = 'Show Monitor';
|
||||
showButton.onclick = showTerminal;
|
||||
document.body.appendChild(showButton);
|
||||
}
|
||||
|
||||
document.getElementById('bitcoin-terminal-show').style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the terminal and hide the restore button
|
||||
*/
|
||||
function showTerminal() {
|
||||
if (!terminalElement) return;
|
||||
|
||||
terminalElement.style.display = 'block';
|
||||
document.getElementById('bitcoin-terminal-show').style.display = 'none';
|
||||
}
|
||||
|
||||
// Public API
|
||||
return {
|
||||
initialize: initialize,
|
||||
notifyRefresh: notifyRefresh,
|
||||
updateServerTime: updateServerTime,
|
||||
toggleTerminal: toggleTerminal,
|
||||
hideTerminal: hideTerminal,
|
||||
showTerminal: showTerminal
|
||||
};
|
||||
})();
|
||||
|
||||
// Auto-initialize when document is ready if a refresh function is available in the global scope
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Check if manualRefresh function exists in global scope
|
||||
if (typeof window.manualRefresh === 'function') {
|
||||
BitcoinMinuteRefresh.initialize(window.manualRefresh);
|
||||
} else {
|
||||
console.log("BitcoinMinuteRefresh: No refresh function found, will need to be initialized manually");
|
||||
}
|
||||
});
|
||||
384
static/js/block-animation.js
Normal file
384
static/js/block-animation.js
Normal file
@ -0,0 +1,384 @@
|
||||
// Bitcoin Block Mining Animation Controller
|
||||
class BlockMiningAnimation {
|
||||
constructor(svgContainerId) {
|
||||
// Get the container element
|
||||
this.container = document.getElementById(svgContainerId);
|
||||
if (!this.container) {
|
||||
console.error("SVG container not found:", svgContainerId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Get SVG elements
|
||||
this.blockHeight = document.getElementById("block-height");
|
||||
this.statusHeight = document.getElementById("status-height");
|
||||
this.miningPool = document.getElementById("mining-pool");
|
||||
this.blockTime = document.getElementById("block-time");
|
||||
this.transactionCount = document.getElementById("transaction-count");
|
||||
this.miningHash = document.getElementById("mining-hash");
|
||||
this.nonceValue = document.getElementById("nonce-value");
|
||||
this.difficultyValue = document.getElementById("difficulty-value");
|
||||
this.miningStatus = document.getElementById("mining-status");
|
||||
|
||||
// Debug element availability
|
||||
console.log("Animation elements found:", {
|
||||
blockHeight: !!this.blockHeight,
|
||||
statusHeight: !!this.statusHeight,
|
||||
miningPool: !!this.miningPool,
|
||||
blockTime: !!this.blockTime,
|
||||
transactionCount: !!this.transactionCount,
|
||||
miningHash: !!this.miningHash,
|
||||
nonceValue: !!this.nonceValue,
|
||||
difficultyValue: !!this.difficultyValue,
|
||||
miningStatus: !!this.miningStatus
|
||||
});
|
||||
|
||||
// Animation state
|
||||
this.animationPhase = "collecting"; // collecting, mining, found, adding
|
||||
this.miningSpeed = 300; // ms between nonce updates
|
||||
this.nonceCounter = 0;
|
||||
this.currentBlockData = null;
|
||||
this.animationInterval = null;
|
||||
this.apiRetryCount = 0;
|
||||
this.maxApiRetries = 3;
|
||||
|
||||
// Initialize random hash for mining animation
|
||||
this.updateRandomHash();
|
||||
}
|
||||
|
||||
// Start the animation loop
|
||||
start() {
|
||||
if (this.animationInterval) {
|
||||
clearInterval(this.animationInterval);
|
||||
}
|
||||
|
||||
console.log("Starting block mining animation");
|
||||
this.animationInterval = setInterval(() => this.animationTick(), this.miningSpeed);
|
||||
|
||||
// Start by fetching the latest block
|
||||
this.fetchLatestBlockWithRetry();
|
||||
}
|
||||
|
||||
// Stop the animation
|
||||
stop() {
|
||||
if (this.animationInterval) {
|
||||
clearInterval(this.animationInterval);
|
||||
this.animationInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Main animation tick function
|
||||
animationTick() {
|
||||
switch (this.animationPhase) {
|
||||
case "collecting":
|
||||
// Simulate collecting transactions
|
||||
this.updateTransactionAnimation();
|
||||
break;
|
||||
|
||||
case "mining":
|
||||
// Update nonce and hash values
|
||||
this.updateMiningAnimation();
|
||||
break;
|
||||
|
||||
case "found":
|
||||
// Block found phase - brief celebration
|
||||
this.updateFoundAnimation();
|
||||
break;
|
||||
|
||||
case "adding":
|
||||
// Adding block to chain
|
||||
this.updateAddingAnimation();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch latest block with retry logic
|
||||
fetchLatestBlockWithRetry() {
|
||||
this.apiRetryCount = 0;
|
||||
this.fetchLatestBlock();
|
||||
}
|
||||
|
||||
// Fetch the latest block data from mempool.space
|
||||
fetchLatestBlock() {
|
||||
console.log("Fetching latest block data, attempt #" + (this.apiRetryCount + 1));
|
||||
|
||||
// Show that we're fetching
|
||||
if (this.miningStatus) {
|
||||
this.miningStatus.textContent = "Connecting to blockchain...";
|
||||
}
|
||||
|
||||
// Use the mempool.space public API
|
||||
fetch("https://mempool.space/api/v1/blocks/tip/height")
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch latest block height: " + response.status);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(height => {
|
||||
console.log("Latest block height:", height);
|
||||
// Fetch multiple blocks but limit to 1
|
||||
return fetch(`https://mempool.space/api/v1/blocks?height=${height}&limit=1`);
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch block data: " + response.status);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(blockData => {
|
||||
console.log("Block data received:", blockData);
|
||||
|
||||
// Ensure we have data and use the first block
|
||||
if (blockData && blockData.length > 0) {
|
||||
this.currentBlockData = blockData[0];
|
||||
this.startBlockAnimation();
|
||||
|
||||
// Reset retry count on success
|
||||
this.apiRetryCount = 0;
|
||||
} else {
|
||||
throw new Error("No block data received");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error fetching block data:", error);
|
||||
|
||||
// Retry logic
|
||||
this.apiRetryCount++;
|
||||
if (this.apiRetryCount < this.maxApiRetries) {
|
||||
console.log(`Retrying in 2 seconds... (attempt ${this.apiRetryCount + 1}/${this.maxApiRetries})`);
|
||||
setTimeout(() => this.fetchLatestBlock(), 2000);
|
||||
} else {
|
||||
console.warn("Max retries reached, using placeholder data");
|
||||
// Use placeholder data if fetch fails after retries
|
||||
this.usePlaceholderData();
|
||||
this.startBlockAnimation();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Start the block animation sequence
|
||||
startBlockAnimation() {
|
||||
// Reset animation state
|
||||
this.animationPhase = "collecting";
|
||||
this.nonceCounter = 0;
|
||||
|
||||
// Update block data display immediately
|
||||
this.updateBlockDisplay();
|
||||
|
||||
// Schedule the animation sequence
|
||||
setTimeout(() => {
|
||||
this.animationPhase = "mining";
|
||||
if (this.miningStatus) {
|
||||
this.miningStatus.textContent = "Mining in progress...";
|
||||
}
|
||||
|
||||
// After a random mining period, find the block
|
||||
setTimeout(() => {
|
||||
this.animationPhase = "found";
|
||||
if (this.miningStatus) {
|
||||
this.miningStatus.textContent = "BLOCK FOUND!";
|
||||
}
|
||||
|
||||
// Then move to adding phase
|
||||
setTimeout(() => {
|
||||
this.animationPhase = "adding";
|
||||
if (this.miningStatus) {
|
||||
this.miningStatus.textContent = "Adding to blockchain...";
|
||||
}
|
||||
|
||||
// After adding, fetch a new block or loop with current one
|
||||
setTimeout(() => {
|
||||
// Fetch a new block every time to keep data current
|
||||
this.fetchLatestBlockWithRetry();
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}, 5000 + Math.random() * 5000); // Random mining time
|
||||
}, 3000); // Time for collecting transactions
|
||||
}
|
||||
|
||||
// Update block display with current block data
|
||||
updateBlockDisplay() {
|
||||
if (!this.currentBlockData) {
|
||||
console.error("No block data available to display");
|
||||
return;
|
||||
}
|
||||
|
||||
// Safely extract and format block data
|
||||
const blockData = Array.isArray(this.currentBlockData)
|
||||
? this.currentBlockData[0]
|
||||
: this.currentBlockData;
|
||||
|
||||
console.log("Updating block display with data:", blockData);
|
||||
|
||||
try {
|
||||
// Safely extract and format block height
|
||||
const height = blockData.height ? blockData.height.toString() : "N/A";
|
||||
if (this.blockHeight) this.blockHeight.textContent = height;
|
||||
if (this.statusHeight) this.statusHeight.textContent = height;
|
||||
|
||||
// Safely format block timestamp
|
||||
let formattedTime = "N/A";
|
||||
if (blockData.timestamp) {
|
||||
const timestamp = new Date(blockData.timestamp * 1000);
|
||||
formattedTime = timestamp.toLocaleString();
|
||||
}
|
||||
if (this.blockTime) this.blockTime.textContent = formattedTime;
|
||||
|
||||
// Safely format transaction count
|
||||
const txCount = blockData.tx_count ? blockData.tx_count.toString() : "N/A";
|
||||
if (this.transactionCount) this.transactionCount.textContent = txCount;
|
||||
|
||||
// Format mining pool
|
||||
let poolName = "Unknown";
|
||||
if (blockData.extras && blockData.extras.pool && blockData.extras.pool.name) {
|
||||
poolName = blockData.extras.pool.name;
|
||||
}
|
||||
if (this.miningPool) this.miningPool.textContent = poolName;
|
||||
|
||||
// Format difficulty (simplified)
|
||||
let difficultyStr = "Unknown";
|
||||
if (blockData.difficulty) {
|
||||
// Format as scientific notation for better display
|
||||
difficultyStr = blockData.difficulty.toExponential(2);
|
||||
}
|
||||
if (this.difficultyValue) this.difficultyValue.textContent = difficultyStr;
|
||||
|
||||
// Use actual nonce if available
|
||||
if (this.nonceValue && blockData.nonce) {
|
||||
this.nonceValue.textContent = blockData.nonce.toString();
|
||||
// Use this as starting point for animation
|
||||
this.nonceCounter = blockData.nonce;
|
||||
}
|
||||
|
||||
// Update block hash (if available)
|
||||
if (this.miningHash && blockData.id) {
|
||||
const blockHash = blockData.id;
|
||||
const shortHash = blockHash.substring(0, 8) + "..." + blockHash.substring(blockHash.length - 8);
|
||||
this.miningHash.textContent = shortHash;
|
||||
}
|
||||
|
||||
console.log("Block display updated successfully");
|
||||
} catch (error) {
|
||||
console.error("Error updating block display:", error, "Block data:", blockData);
|
||||
}
|
||||
}
|
||||
|
||||
// Transaction collection animation
|
||||
updateTransactionAnimation() {
|
||||
// Animation for collecting transactions is handled by SVG animation
|
||||
// We could add additional logic here if needed
|
||||
}
|
||||
|
||||
// Mining animation - update nonce and hash
|
||||
updateMiningAnimation() {
|
||||
// Increment nonce
|
||||
this.nonceCounter += 1 + Math.floor(Math.random() * 1000);
|
||||
if (this.nonceValue) {
|
||||
this.nonceValue.textContent = this.nonceCounter.toString().padStart(10, '0');
|
||||
}
|
||||
|
||||
// Update hash value
|
||||
this.updateRandomHash();
|
||||
}
|
||||
|
||||
// Block found animation - show a hash that matches difficulty
|
||||
updateFoundAnimation() {
|
||||
if (!this.miningHash || !this.nonceValue || !this.currentBlockData) return;
|
||||
|
||||
try {
|
||||
// Make the "found" hash start with enough zeros based on difficulty
|
||||
// Use actual block hash if available
|
||||
const blockData = Array.isArray(this.currentBlockData)
|
||||
? this.currentBlockData[0]
|
||||
: this.currentBlockData;
|
||||
|
||||
if (blockData.id) {
|
||||
const blockHash = blockData.id;
|
||||
const shortHash = blockHash.substring(0, 8) + "..." + blockHash.substring(blockHash.length - 8);
|
||||
this.miningHash.textContent = shortHash;
|
||||
} else {
|
||||
// Fallback to generated hash
|
||||
const zeros = Math.min(6, Math.max(2, Math.floor(Math.log10(blockData.difficulty) / 10)));
|
||||
const zeroPrefix = '0'.repeat(zeros);
|
||||
const remainingChars = '0123456789abcdef';
|
||||
let hash = zeroPrefix;
|
||||
|
||||
// Fill the rest with random hex characters
|
||||
for (let i = zeros; i < 8; i++) {
|
||||
hash += remainingChars.charAt(Math.floor(Math.random() * remainingChars.length));
|
||||
}
|
||||
|
||||
this.miningHash.textContent = hash + "..." + hash;
|
||||
}
|
||||
|
||||
// Use the actual nonce if available
|
||||
if (blockData.nonce) {
|
||||
this.nonceValue.textContent = blockData.nonce.toString();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating found animation:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Adding block to chain animation
|
||||
updateAddingAnimation() {
|
||||
// Animation for adding to blockchain is handled by SVG animation
|
||||
// We could add additional logic here if needed
|
||||
}
|
||||
|
||||
// Generate a random hash string for mining animation
|
||||
updateRandomHash() {
|
||||
if (!this.miningHash) return;
|
||||
|
||||
const characters = '0123456789abcdef';
|
||||
let hash = '';
|
||||
|
||||
// Generate random 8-char segment
|
||||
for (let i = 0; i < 8; i++) {
|
||||
hash += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
}
|
||||
|
||||
this.miningHash.textContent = hash + "..." + hash;
|
||||
}
|
||||
|
||||
// Use placeholder data if API fetch fails
|
||||
usePlaceholderData() {
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
this.currentBlockData = {
|
||||
height: 888888,
|
||||
timestamp: now,
|
||||
tx_count: 2500,
|
||||
difficulty: 50000000000000,
|
||||
nonce: 123456789,
|
||||
id: "00000000000000000000b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7",
|
||||
extras: {
|
||||
pool: {
|
||||
name: "Placeholder Pool"
|
||||
}
|
||||
}
|
||||
};
|
||||
console.log("Using placeholder data:", this.currentBlockData);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize and start the animation when the page loads
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("DOM content loaded, initializing animation");
|
||||
|
||||
// Ensure we give the SVG enough time to be fully rendered and accessible
|
||||
setTimeout(() => {
|
||||
const svgContainer = document.getElementById("svg-container");
|
||||
if (!svgContainer) {
|
||||
console.error("SVG container not found in DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const animation = new BlockMiningAnimation("svg-container");
|
||||
animation.start();
|
||||
console.log("Animation started successfully");
|
||||
} catch (error) {
|
||||
console.error("Error starting animation:", error);
|
||||
}
|
||||
}, 1500); // Increased delay to ensure SVG is fully loaded
|
||||
});
|
||||
762
static/js/blocks.js
Normal file
762
static/js/blocks.js
Normal file
@ -0,0 +1,762 @@
|
||||
"use strict";
|
||||
|
||||
// Global variables
|
||||
let currentStartHeight = null;
|
||||
const mempoolBaseUrl = "https://mempool.space";
|
||||
let blocksCache = {};
|
||||
let isLoading = false;
|
||||
|
||||
// DOM ready initialization
|
||||
$(document).ready(function() {
|
||||
console.log("Blocks page initialized");
|
||||
|
||||
// Load the latest blocks on page load
|
||||
loadLatestBlocks();
|
||||
|
||||
// Set up event listeners
|
||||
$("#load-blocks").on("click", function() {
|
||||
const height = $("#block-height").val();
|
||||
if (height && !isNaN(height)) {
|
||||
loadBlocksFromHeight(height);
|
||||
} else {
|
||||
showToast("Please enter a valid block height");
|
||||
}
|
||||
});
|
||||
|
||||
$("#latest-blocks").on("click", loadLatestBlocks);
|
||||
|
||||
// Handle Enter key on the block height input
|
||||
$("#block-height").on("keypress", function(e) {
|
||||
if (e.which === 13) {
|
||||
const height = $(this).val();
|
||||
if (height && !isNaN(height)) {
|
||||
loadBlocksFromHeight(height);
|
||||
} else {
|
||||
showToast("Please enter a valid block height");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Close the modal when clicking the X or outside the modal
|
||||
$(".block-modal-close").on("click", closeModal);
|
||||
$(window).on("click", function(event) {
|
||||
if ($(event.target).hasClass("block-modal")) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize BitcoinMinuteRefresh if available
|
||||
if (typeof BitcoinMinuteRefresh !== 'undefined' && BitcoinMinuteRefresh.initialize) {
|
||||
BitcoinMinuteRefresh.initialize(loadLatestBlocks);
|
||||
console.log("BitcoinMinuteRefresh initialized with refresh function");
|
||||
}
|
||||
});
|
||||
|
||||
// Helper function to format timestamps as readable dates
|
||||
function formatTimestamp(timestamp) {
|
||||
const date = new Date(timestamp * 1000);
|
||||
return date.toLocaleString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
}
|
||||
|
||||
// Helper function to format numbers with commas
|
||||
function numberWithCommas(x) {
|
||||
if (x == null) return "N/A";
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
// Helper function to format file sizes
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes < 1024) return bytes + " B";
|
||||
else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + " KB";
|
||||
else return (bytes / 1048576).toFixed(2) + " MB";
|
||||
}
|
||||
|
||||
// Helper function to show toast messages
|
||||
function showToast(message) {
|
||||
// Check if we already have a toast container
|
||||
let toastContainer = $(".toast-container");
|
||||
if (toastContainer.length === 0) {
|
||||
// Create a new toast container
|
||||
toastContainer = $("<div>", {
|
||||
class: "toast-container",
|
||||
css: {
|
||||
position: "fixed",
|
||||
bottom: "20px",
|
||||
right: "20px",
|
||||
zIndex: 9999
|
||||
}
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
// Create a new toast
|
||||
const toast = $("<div>", {
|
||||
class: "toast",
|
||||
text: message,
|
||||
css: {
|
||||
backgroundColor: "#f7931a",
|
||||
color: "#000",
|
||||
padding: "10px 15px",
|
||||
borderRadius: "5px",
|
||||
marginTop: "10px",
|
||||
boxShadow: "0 0 10px rgba(247, 147, 26, 0.5)",
|
||||
fontFamily: "var(--terminal-font)",
|
||||
opacity: 0,
|
||||
transition: "opacity 0.3s ease"
|
||||
}
|
||||
}).appendTo(toastContainer);
|
||||
|
||||
// Show the toast
|
||||
setTimeout(() => {
|
||||
toast.css("opacity", 1);
|
||||
|
||||
// Hide and remove the toast after 3 seconds
|
||||
setTimeout(() => {
|
||||
toast.css("opacity", 0);
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Function to load blocks from a specific height
|
||||
function loadBlocksFromHeight(height) {
|
||||
if (isLoading) return;
|
||||
|
||||
// Convert to integer
|
||||
height = parseInt(height);
|
||||
if (isNaN(height) || height < 0) {
|
||||
showToast("Please enter a valid block height");
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
currentStartHeight = height;
|
||||
|
||||
// Check if we already have this data in cache
|
||||
if (blocksCache[height]) {
|
||||
displayBlocks(blocksCache[height]);
|
||||
isLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
$("#blocks-grid").html('<div class="loader"><span class="loader-text">Loading blocks from height ' + height + '<span class="terminal-cursor"></span></span></div>');
|
||||
|
||||
// Fetch blocks from the API
|
||||
$.ajax({
|
||||
url: `${mempoolBaseUrl}/api/v1/blocks/${height}`,
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
timeout: 10000,
|
||||
success: function(data) {
|
||||
// Cache the data
|
||||
blocksCache[height] = data;
|
||||
|
||||
// Display the blocks
|
||||
displayBlocks(data);
|
||||
|
||||
// Update latest block stats
|
||||
if (data.length > 0) {
|
||||
updateLatestBlockStats(data[0]);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("Error fetching blocks:", error);
|
||||
$("#blocks-grid").html('<div class="error">Error fetching blocks. Please try again later.</div>');
|
||||
|
||||
// Show error toast
|
||||
showToast("Failed to load blocks. Please try again later.");
|
||||
},
|
||||
complete: function() {
|
||||
isLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to load the latest blocks
|
||||
function loadLatestBlocks() {
|
||||
if (isLoading) return;
|
||||
|
||||
isLoading = true;
|
||||
|
||||
// Show loading state
|
||||
$("#blocks-grid").html('<div class="loader"><span class="loader-text">Loading latest blocks<span class="terminal-cursor"></span></span></div>');
|
||||
|
||||
// Fetch the latest blocks from the API
|
||||
$.ajax({
|
||||
url: `${mempoolBaseUrl}/api/v1/blocks`,
|
||||
method: "GET",
|
||||
dataType: "json",
|
||||
timeout: 10000,
|
||||
success: function(data) {
|
||||
// Cache the data (use the first block's height as the key)
|
||||
if (data.length > 0) {
|
||||
currentStartHeight = data[0].height;
|
||||
blocksCache[currentStartHeight] = data;
|
||||
|
||||
// Update the block height input with the latest height
|
||||
$("#block-height").val(currentStartHeight);
|
||||
|
||||
// Update latest block stats
|
||||
updateLatestBlockStats(data[0]);
|
||||
}
|
||||
|
||||
// Display the blocks
|
||||
displayBlocks(data);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("Error fetching latest blocks:", error);
|
||||
$("#blocks-grid").html('<div class="error">Error fetching blocks. Please try again later.</div>');
|
||||
|
||||
// Show error toast
|
||||
showToast("Failed to load latest blocks. Please try again later.");
|
||||
},
|
||||
complete: function() {
|
||||
isLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to update the latest block stats section
|
||||
function updateLatestBlockStats(block) {
|
||||
if (!block) return;
|
||||
|
||||
$("#latest-height").text(block.height);
|
||||
$("#latest-time").text(formatTimestamp(block.timestamp));
|
||||
$("#latest-tx-count").text(numberWithCommas(block.tx_count));
|
||||
$("#latest-size").text(formatFileSize(block.size));
|
||||
$("#latest-difficulty").text(numberWithCommas(Math.round(block.difficulty)));
|
||||
|
||||
// Pool info
|
||||
if (block.extras && block.extras.pool) {
|
||||
$("#latest-pool").text(block.extras.pool.name);
|
||||
} else {
|
||||
$("#latest-pool").text("Unknown");
|
||||
}
|
||||
}
|
||||
|
||||
// Function to display the blocks in the grid
|
||||
function displayBlocks(blocks) {
|
||||
const blocksGrid = $("#blocks-grid");
|
||||
|
||||
// Clear the grid
|
||||
blocksGrid.empty();
|
||||
|
||||
if (!blocks || blocks.length === 0) {
|
||||
blocksGrid.html('<div class="no-blocks">No blocks found</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a card for each block
|
||||
blocks.forEach(function(block) {
|
||||
const blockCard = createBlockCard(block);
|
||||
blocksGrid.append(blockCard);
|
||||
});
|
||||
|
||||
// Add navigation controls if needed
|
||||
addNavigationControls(blocks);
|
||||
}
|
||||
|
||||
// Function to create a block card
|
||||
function createBlockCard(block) {
|
||||
const timestamp = formatTimestamp(block.timestamp);
|
||||
const formattedSize = formatFileSize(block.size);
|
||||
const formattedTxCount = numberWithCommas(block.tx_count);
|
||||
|
||||
// Get the pool name or "Unknown"
|
||||
const poolName = block.extras && block.extras.pool ? block.extras.pool.name : "Unknown";
|
||||
|
||||
// Calculate total fees in BTC
|
||||
const totalFees = block.extras ? (block.extras.totalFees / 100000000).toFixed(8) : "N/A";
|
||||
|
||||
// Create the block card
|
||||
const blockCard = $("<div>", {
|
||||
class: "block-card",
|
||||
"data-height": block.height,
|
||||
"data-hash": block.id
|
||||
});
|
||||
|
||||
// Create the block header
|
||||
const blockHeader = $("<div>", {
|
||||
class: "block-header"
|
||||
});
|
||||
|
||||
blockHeader.append($("<div>", {
|
||||
class: "block-height",
|
||||
text: "#" + block.height
|
||||
}));
|
||||
|
||||
blockHeader.append($("<div>", {
|
||||
class: "block-time",
|
||||
text: timestamp
|
||||
}));
|
||||
|
||||
blockCard.append(blockHeader);
|
||||
|
||||
// Create the block info section
|
||||
const blockInfo = $("<div>", {
|
||||
class: "block-info"
|
||||
});
|
||||
|
||||
// Add transaction count
|
||||
const txCountItem = $("<div>", {
|
||||
class: "block-info-item"
|
||||
});
|
||||
txCountItem.append($("<div>", {
|
||||
class: "block-info-label",
|
||||
text: "Transactions"
|
||||
}));
|
||||
txCountItem.append($("<div>", {
|
||||
class: "block-info-value white",
|
||||
text: formattedTxCount
|
||||
}));
|
||||
blockInfo.append(txCountItem);
|
||||
|
||||
// Add size
|
||||
const sizeItem = $("<div>", {
|
||||
class: "block-info-item"
|
||||
});
|
||||
sizeItem.append($("<div>", {
|
||||
class: "block-info-label",
|
||||
text: "Size"
|
||||
}));
|
||||
sizeItem.append($("<div>", {
|
||||
class: "block-info-value white",
|
||||
text: formattedSize
|
||||
}));
|
||||
blockInfo.append(sizeItem);
|
||||
|
||||
// Add miner/pool
|
||||
const minerItem = $("<div>", {
|
||||
class: "block-info-item"
|
||||
});
|
||||
minerItem.append($("<div>", {
|
||||
class: "block-info-label",
|
||||
text: "Miner"
|
||||
}));
|
||||
minerItem.append($("<div>", {
|
||||
class: "block-info-value green",
|
||||
text: poolName
|
||||
}));
|
||||
blockInfo.append(minerItem);
|
||||
|
||||
// Add total fees
|
||||
const feesItem = $("<div>", {
|
||||
class: "block-info-item"
|
||||
});
|
||||
feesItem.append($("<div>", {
|
||||
class: "block-info-label",
|
||||
text: "Total Fees"
|
||||
}));
|
||||
feesItem.append($("<div>", {
|
||||
class: "block-info-value yellow",
|
||||
text: totalFees + " BTC"
|
||||
}));
|
||||
blockInfo.append(feesItem);
|
||||
|
||||
blockCard.append(blockInfo);
|
||||
|
||||
// Add event listener for clicking on the block card
|
||||
blockCard.on("click", function() {
|
||||
showBlockDetails(block);
|
||||
});
|
||||
|
||||
return blockCard;
|
||||
}
|
||||
|
||||
// Function to add navigation controls to the blocks grid
|
||||
function addNavigationControls(blocks) {
|
||||
// Get the height of the first and last block in the current view
|
||||
const firstBlockHeight = blocks[0].height;
|
||||
const lastBlockHeight = blocks[blocks.length - 1].height;
|
||||
|
||||
// Create navigation controls
|
||||
const navControls = $("<div>", {
|
||||
class: "block-navigation"
|
||||
});
|
||||
|
||||
// Newer blocks button (if not already at the latest blocks)
|
||||
if (firstBlockHeight !== currentStartHeight) {
|
||||
const newerButton = $("<button>", {
|
||||
class: "block-button",
|
||||
text: "Newer Blocks"
|
||||
});
|
||||
|
||||
newerButton.on("click", function() {
|
||||
loadBlocksFromHeight(firstBlockHeight + 15);
|
||||
});
|
||||
|
||||
navControls.append(newerButton);
|
||||
}
|
||||
|
||||
// Older blocks button
|
||||
const olderButton = $("<button>", {
|
||||
class: "block-button",
|
||||
text: "Older Blocks"
|
||||
});
|
||||
|
||||
olderButton.on("click", function() {
|
||||
loadBlocksFromHeight(lastBlockHeight - 1);
|
||||
});
|
||||
|
||||
navControls.append(olderButton);
|
||||
|
||||
// Add the navigation controls to the blocks grid
|
||||
$("#blocks-grid").append(navControls);
|
||||
}
|
||||
|
||||
// Function to show block details in a modal
|
||||
function showBlockDetails(block) {
|
||||
const modal = $("#block-modal");
|
||||
const blockDetails = $("#block-details");
|
||||
|
||||
// Clear the details
|
||||
blockDetails.empty();
|
||||
|
||||
// Format the timestamp
|
||||
const timestamp = formatTimestamp(block.timestamp);
|
||||
|
||||
// Create the block header section
|
||||
const headerSection = $("<div>", {
|
||||
class: "block-detail-section"
|
||||
});
|
||||
|
||||
headerSection.append($("<div>", {
|
||||
class: "block-detail-title",
|
||||
text: "Block #" + block.height
|
||||
}));
|
||||
|
||||
// Add block hash
|
||||
const hashItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
hashItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Block Hash"
|
||||
}));
|
||||
hashItem.append($("<div>", {
|
||||
class: "block-hash",
|
||||
text: block.id
|
||||
}));
|
||||
headerSection.append(hashItem);
|
||||
|
||||
// Add timestamp
|
||||
const timeItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
timeItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Timestamp"
|
||||
}));
|
||||
timeItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: timestamp
|
||||
}));
|
||||
headerSection.append(timeItem);
|
||||
|
||||
// Add merkle root
|
||||
const merkleItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
merkleItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Merkle Root"
|
||||
}));
|
||||
merkleItem.append($("<div>", {
|
||||
class: "block-hash",
|
||||
text: block.merkle_root
|
||||
}));
|
||||
headerSection.append(merkleItem);
|
||||
|
||||
// Add previous block hash
|
||||
const prevHashItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
prevHashItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Previous Block"
|
||||
}));
|
||||
prevHashItem.append($("<div>", {
|
||||
class: "block-hash",
|
||||
text: block.previousblockhash
|
||||
}));
|
||||
headerSection.append(prevHashItem);
|
||||
|
||||
blockDetails.append(headerSection);
|
||||
|
||||
// Create the mining section
|
||||
const miningSection = $("<div>", {
|
||||
class: "block-detail-section"
|
||||
});
|
||||
|
||||
miningSection.append($("<div>", {
|
||||
class: "block-detail-title",
|
||||
text: "Mining Details"
|
||||
}));
|
||||
|
||||
// Add miner/pool
|
||||
const minerItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
minerItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Miner"
|
||||
}));
|
||||
const poolName = block.extras && block.extras.pool ? block.extras.pool.name : "Unknown";
|
||||
minerItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: poolName
|
||||
}));
|
||||
miningSection.append(minerItem);
|
||||
|
||||
// Add difficulty
|
||||
const difficultyItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
difficultyItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Difficulty"
|
||||
}));
|
||||
difficultyItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: numberWithCommas(Math.round(block.difficulty))
|
||||
}));
|
||||
miningSection.append(difficultyItem);
|
||||
|
||||
// Add nonce
|
||||
const nonceItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
nonceItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Nonce"
|
||||
}));
|
||||
nonceItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: numberWithCommas(block.nonce)
|
||||
}));
|
||||
miningSection.append(nonceItem);
|
||||
|
||||
// Add bits
|
||||
const bitsItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
bitsItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Bits"
|
||||
}));
|
||||
bitsItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: block.bits
|
||||
}));
|
||||
miningSection.append(bitsItem);
|
||||
|
||||
// Add version
|
||||
const versionItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
versionItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Version"
|
||||
}));
|
||||
versionItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: "0x" + block.version.toString(16)
|
||||
}));
|
||||
miningSection.append(versionItem);
|
||||
|
||||
blockDetails.append(miningSection);
|
||||
|
||||
// Create the transaction section
|
||||
const txSection = $("<div>", {
|
||||
class: "block-detail-section"
|
||||
});
|
||||
|
||||
txSection.append($("<div>", {
|
||||
class: "block-detail-title",
|
||||
text: "Transaction Details"
|
||||
}));
|
||||
|
||||
// Add transaction count
|
||||
const txCountItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
txCountItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Transaction Count"
|
||||
}));
|
||||
txCountItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: numberWithCommas(block.tx_count)
|
||||
}));
|
||||
txSection.append(txCountItem);
|
||||
|
||||
// Add size
|
||||
const sizeItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
sizeItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Size"
|
||||
}));
|
||||
sizeItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: formatFileSize(block.size)
|
||||
}));
|
||||
txSection.append(sizeItem);
|
||||
|
||||
// Add weight
|
||||
const weightItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
weightItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Weight"
|
||||
}));
|
||||
weightItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: numberWithCommas(block.weight) + " WU"
|
||||
}));
|
||||
txSection.append(weightItem);
|
||||
|
||||
blockDetails.append(txSection);
|
||||
|
||||
// Create the fee section if available
|
||||
if (block.extras) {
|
||||
const feeSection = $("<div>", {
|
||||
class: "block-detail-section"
|
||||
});
|
||||
|
||||
feeSection.append($("<div>", {
|
||||
class: "block-detail-title",
|
||||
text: "Fee Details"
|
||||
}));
|
||||
|
||||
// Add total fees
|
||||
const totalFeesItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
totalFeesItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Total Fees"
|
||||
}));
|
||||
const totalFees = (block.extras.totalFees / 100000000).toFixed(8);
|
||||
totalFeesItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: totalFees + " BTC"
|
||||
}));
|
||||
feeSection.append(totalFeesItem);
|
||||
|
||||
// Add reward
|
||||
const rewardItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
rewardItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Block Reward"
|
||||
}));
|
||||
const reward = (block.extras.reward / 100000000).toFixed(8);
|
||||
rewardItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: reward + " BTC"
|
||||
}));
|
||||
feeSection.append(rewardItem);
|
||||
|
||||
// Add median fee
|
||||
const medianFeeItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
medianFeeItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Median Fee Rate"
|
||||
}));
|
||||
medianFeeItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: block.extras.medianFee + " sat/vB"
|
||||
}));
|
||||
feeSection.append(medianFeeItem);
|
||||
|
||||
// Add average fee
|
||||
const avgFeeItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
avgFeeItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Average Fee"
|
||||
}));
|
||||
avgFeeItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: numberWithCommas(block.extras.avgFee) + " sat"
|
||||
}));
|
||||
feeSection.append(avgFeeItem);
|
||||
|
||||
// Add average fee rate
|
||||
const avgFeeRateItem = $("<div>", {
|
||||
class: "block-detail-item"
|
||||
});
|
||||
avgFeeRateItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Average Fee Rate"
|
||||
}));
|
||||
avgFeeRateItem.append($("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: block.extras.avgFeeRate + " sat/vB"
|
||||
}));
|
||||
feeSection.append(avgFeeRateItem);
|
||||
|
||||
// Add fee range with visual representation
|
||||
if (block.extras.feeRange && block.extras.feeRange.length > 0) {
|
||||
const feeRangeItem = $("<div>", {
|
||||
class: "block-detail-item transaction-data"
|
||||
});
|
||||
|
||||
feeRangeItem.append($("<div>", {
|
||||
class: "block-detail-label",
|
||||
text: "Fee Rate Percentiles (sat/vB)"
|
||||
}));
|
||||
|
||||
const feeRangeText = $("<div>", {
|
||||
class: "block-detail-value",
|
||||
text: block.extras.feeRange.join(", ")
|
||||
});
|
||||
|
||||
feeRangeItem.append(feeRangeText);
|
||||
|
||||
// Add visual fee bar
|
||||
const feeBarContainer = $("<div>", {
|
||||
class: "fee-bar-container"
|
||||
});
|
||||
|
||||
const feeBar = $("<div>", {
|
||||
class: "fee-bar"
|
||||
});
|
||||
|
||||
feeBarContainer.append(feeBar);
|
||||
feeRangeItem.append(feeBarContainer);
|
||||
|
||||
// Animate the fee bar
|
||||
setTimeout(() => {
|
||||
feeBar.css("width", "100%");
|
||||
}, 100);
|
||||
|
||||
feeSection.append(feeRangeItem);
|
||||
}
|
||||
|
||||
blockDetails.append(feeSection);
|
||||
}
|
||||
|
||||
// Show the modal
|
||||
modal.css("display", "block");
|
||||
}
|
||||
|
||||
// Function to close the modal
|
||||
function closeModal() {
|
||||
$("#block-modal").css("display", "none");
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user