#0
0.00000001 BSV
cordQ text/html M.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BSV Block Hash Linked Cosmic Rings</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<defs>
<radialGradient id="spaceGradient">
<stop offset="0%" stop-color="#0B3D91" />
<stop offset="100%" stop-color="#000000" />
</radialGradient>
<linearGradient id="rainbowGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="16.67%" stop-color="#FF7F00" />
<stop offset="33.33%" stop-color="#FFFF00" />
<stop offset="50%" stop-color="#00FF00" />
<stop offset="66.67%" stop-color="#0000FF" />
<stop offset="83.33%" stop-color="#8B00FF" />
<stop offset="100%" stop-color="#FF0000" />
</linearGradient>
<linearGradient id="rainbowGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF7F00" />
<stop offset="16.67%" stop-color="#FFFF00" />
<stop offset="33.33%" stop-color="#00FF00" />
<stop offset="50%" stop-color="#0000FF" />
<stop offset="66.67%" stop-color="#8B00FF" />
<stop offset="83.33%" stop-color="#FF0000" />
<stop offset="100%" stop-color="#FF7F00" />
</linearGradient>
<pattern id="rotatingTexture1" patternUnits="userSpaceOnUse" width="40" height="40"
patternTransform="rotate(30)">
<rect width="40" height="40" fill="none" />
<circle cx="20" cy="20" r="15" fill="rgba(255,255,255,0.1)" />
<circle cx="0" cy="0" r="5" fill="rgba(255,255,255,0.2)" />
<circle cx="40" cy="40" r="5" fill="rgba(255,255,255,0.2)" />
<animateTransform attributeName="patternTransform" attributeType="XML" type="rotate" from="30 20 20"
to="390 20 20" dur="60s" repeatCount="indefinite" />
</pattern>
<pattern id="rotatingTexture2" patternUnits="userSpaceOnUse" width="40" height="40"
patternTransform="rotate(-30)">
<rect width="40" height="40" fill="none" />
<circle cx="20" cy="20" r="15" fill="rgba(255,255,255,0.1)" />
<circle cx="0" cy="40" r="5" fill="rgba(255,255,255,0.2)" />
<circle cx="40" cy="0" r="5" fill="rgba(255,255,255,0.2)" />
<animateTransform attributeName="patternTransform" attributeType="XML" type="rotate" from="-30 20 20"
to="-390 20 20" dur="50s" repeatCount="indefinite" />
</pattern>
<radialGradient id="brightSphereGradient">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="50%" stop-color="#AAAAFF" />
<stop offset="100%" stop-color="#5555FF" />
</radialGradient>
<linearGradient id="pulseGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(0,255,255,0);stop-opacity:0" />
<stop offset="50%" style="stop-color:rgba(0,255,255,1);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgba(0,255,255,0);stop-opacity:0" />
</linearGradient>
<filter id="pulseGlow">
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow">
<feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<pattern id="complexGeometricPattern" patternUnits="userSpaceOnUse" width="100" height="100">
<rect width="100" height="100" fill="none" />
<circle cx="50" cy="50" r="40" stroke="#FFFFFF" stroke-width="2" fill="none" />
<polygon points="50,10 90,90 10,90" stroke="#FFFFFF" stroke-width="2" fill="none" />
<rect x="20" y="20" width="60" height="60" stroke="#FFFFFF" stroke-width="2" fill="none" />
<line x1="0" y1="0" x2="100" y2="100" stroke="#FFFFFF" stroke-width="2" />
<line x1="0" y1="100" x2="100" y2="0" stroke="#FFFFFF" stroke-width="2" />
</pattern>
</defs>
<rect width="400" height="400" fill="url(#spaceGradient)" />
<g filter="url(#pulseGlow)">
<path d="M0,200 Q100,100 200,200 T400,200" stroke="url(#pulseGradient)" fill="none" stroke-width="4">
<animate attributeName="d" values="M0,200 Q100,100 200,200 T400,200;
M0,200 Q100,300 200,200 T400,200;
M0,200 Q100,100 200,200 T400,200" dur="10s" repeatCount="indefinite" />
</path>
<path d="M0,180 Q120,280 240,180 T400,180" stroke="url(#pulseGradient)" fill="none" stroke-width="3">
<animate attributeName="d" values="M0,180 Q120,280 240,180 T400,180;
M0,180 Q120,80 240,180 T400,180;
M0,180 Q120,280 240,180 T400,180" dur="8s" repeatCount="indefinite" />
</path>
<path d="M0,220 Q80,120 160,220 T400,220" stroke="url(#pulseGradient)" fill="none" stroke-width="3">
<animate attributeName="d" values="M0,220 Q80,120 160,220 T400,220;
M0,220 Q80,320 160,220 T400,220;
M0,220 Q80,120 160,220 T400,220" dur="12s" repeatCount="indefinite" />
</path>
</g>
<g id="starsContainer"></g>
<g id="saturnRings" transform="translate(0, -80)">
<g id="ring1" transform="rotate(-30, 200, 200)">
<ellipse cx="200" cy="200" rx="160" ry="53" stroke="url(#rainbowGradient1)" stroke-width="15"
fill="none" filter="url(#glow)" />
<ellipse cx="200" cy="200" rx="160" ry="53" fill="url(#rotatingTexture1)" opacity="0.8" />
</g>
<g id="ring2" transform="rotate(30, 200, 200)">
<ellipse cx="200" cy="200" rx="160" ry="53" stroke="url(#rainbowGradient2)" stroke-width="15"
fill="none" filter="url(#glow)" />
<ellipse cx="200" cy="200" rx="160" ry="53" fill="url(#rotatingTexture2)" opacity="0.8" />
</g>
</g>
<circle id="centerSphere" cx="200" cy="120" r="15" fill="white" filter="url(#glow)">
<animate attributeName="r" values="15;20;15" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" />
</circle>
<g transform="translate(200, 520)">
<circle cx="0" cy="0" r="280" fill="url(#brightSphereGradient)" opacity="0.7" />
<circle cx="0" cy="0" r="280" fill="url(#complexGeometricPattern)" fill-opacity="0.4" />
<ellipse cx="0" cy="-140" rx="250" ry="55" fill="white" fill-opacity="0.2" />
<g>
<circle cx="0" cy="0" r="280" fill="url(#complexGeometricPattern)" fill-opacity="0.3" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360"
dur="60s" repeatCount="indefinite" />
</g>
<g>
<circle cx="0" cy="0" r="280" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-dasharray="10 5">
<animate attributeName="stroke-dashoffset" values="0;30" dur="10s" repeatCount="indefinite" />
</circle>
<path d="M-140,0 Q0,-140 140,0 Q0,140 -140,0" fill="none" stroke="#FFFFFF" stroke-width="2">
<animate attributeName="d" values="M-140,0 Q0,-140 140,0 Q0,140 -140,0;
M0,-140 Q140,0 0,140 Q-140,0 0,-140;
M-140,0 Q0,-140 140,0 Q0,140 -140,0" dur="15s" repeatCount="indefinite" />
</path>
<g>
<circle cx="0" cy="0" r="200" fill="none" stroke="#FFFFFF" stroke-width="2" />
<line x1="-200" y1="0" x2="200" y2="0" stroke="#FFFFFF" stroke-width="2" />
<line x1="0" y1="-200" x2="0" y2="200" stroke="#FFFFFF" stroke-width="2" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360"
dur="30s" repeatCount="indefinite" />
</g>
</g>
</g>
</svg>
<script>
function createStars() {
const starsContainer = document.getElementById('starsContainer');
const numStars = 100;
for (let i = 0; i < numStars; i++) {
const star = document.createElementNS("http://www.w3.org/2000/svg", "circle");
star.setAttribute("cx", Math.random() * 400);
star.setAttribute("cy", Math.random() * 400);
star.setAttribute("r", Math.random() * 1.5 + 0.5);
star.setAttribute("fill", "white");
const animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
animate.setAttribute("attributeName", "opacity");
animate.setAttribute("values", "0;1;0");
animate.setAttribute("dur", `${Math.random() * 3 + 2}s`);
animate.setAttribute("repeatCount", "indefinite");
star.appendChild(animate);
starsContainer.appendChild(star);
}
}
createStars();
let isDragging = false;
let startX, startY;
let originalTransform1, originalTransform2;
const ring1 = document.getElementById('ring1');
const ring2 = document.getElementById('ring2');
const saturnRings = document.getElementById('saturnRings');
function getTransformValues(element) {
const transform = element.getAttribute('transform');
const match = transform.match(/rotate\(([-\d.]+)/);
return match ? parseFloat(match[1]) : 0;
}
function startDrag(e) {
isDragging = true;
startX = e.clientX || e.touches[0].clientX;
startY = e.clientY || e.touches[0].clientY;
originalTransform1 = getTransformValues(ring1);
originalTransform2 = getTransformValues(ring2);
}
function drag(e) {
if (!isDragging) return;
const x = e.clientX || e.touches[0].clientX;
const y = e.clientY || e.touches[0].clientY;
const dx = x - startX;
const dy = y - startY;
const rotationFactor = 0.5;
const scaleFactor = 0.01;
const newRotation1 = originalTransform1 + dx * rotationFactor;
const newRotation2 = originalTransform2 - dx * rotationFactor;
const newScale = 1 + dy * scaleFactor;
ring1.setAttribute('transform', `rotate(${newRotation1}, 200, 200) scale(${newScale})`);
ring2.setAttribute('transform', `rotate(${newRotation2}, 200, 200) scale(${newScale})`);
}
function endDrag() {
isDragging = false;
}
saturnRings.addEventListener('mousedown', startDrag);
saturnRings.addEventListener('touchstart', startDrag);
window.addEventListener('mousemove', drag);
window.addEventListener('touchmove', drag);
window.addEventListener('mouseup', endDrag);
window.addEventListener('touchend', endDrag);
async function updateSphereColor() {
try {
const response = await fetch('/v1/bsv/block/latest');
const data = await response.json();
const hash = data.hash;
// Use the last 6 characters of the hash to generate the color
const color = '#' + hash.slice(-6);
// Apply the color to the center sphere
document.getElementById('centerSphere').setAttribute('fill', color);
// Schedule the next update
setTimeout(updateSphereColor, 60000); // Update every minute
} catch (error) {
console.error('Error fetching block data:', error);
setTimeout(updateSphereColor, 60000); // Retry after a minute
}
}
// Start updating the sphere color
updateSphereColor();
</script>
</body>
</html>hv© tÝWÎ<ÖÖ{7t Ny.¬
https://whatsonchain.com/tx/633641ef9c1f2122d767c90b98f7800a83bdbdd9177f232bdfad4e406020d3eb