#0
0.00000001 BSV
cordQ text/html M}M<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Finder</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #fff;
margin: 0;
padding: 0;
min-height: 100vh;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
width: 95%;
max-width: min(95vh, 95vw, 1200px);
margin: 0 auto;
aspect-ratio: 1/1;
overflow: hidden;
cursor: pointer;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.original-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
object-fit: contain;
filter: grayscale(100%);
z-index: 1;
}
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 92%;
mix-blend-mode: color;
opacity: 0;
transition: all 3s ease;
background: linear-gradient(to right, transparent 0%, transparent 100%);
z-index: 2;
}
.active .color-overlay {
opacity: 1;
}
.info-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8%;
padding: 0 10px;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
z-index: 5;
}
.info-text {
background: rgba(0, 0, 0, 0.6);
padding: 4px 12px;
border-radius: 4px;
font-size: clamp(10px, 1.5vw, 14px);
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
text-overflow: clip;
opacity: 0.4;
transition: opacity 0.3s ease;
cursor: pointer;
max-width: 90%;
/* Mobile scrolling styles */
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.info-text::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.info-text:hover,
.info-text:active {
opacity: 1;
}
.hidden {
display: none !important;
}
.loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(30px, 5vw, 40px);
height: clamp(30px, 5vw, 40px);
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.error-message {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 0, 0, 0.6);
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: clamp(10px, 1.5vw, 12px);
text-align: center;
max-width: 90%;
z-index: 10;
}
@media (min-width: 1400px) {
.wrapper {
max-width: min(90vh, 90vw, 1400px);
}
}
@media (max-width: 768px) {
.wrapper {
width: 98%;
max-width: min(98vh, 98vw, 800px);
}
.info-container {
height: 10%;
background: rgba(0, 0, 0, 0.9);
}
.original-image,
.color-overlay {
height: 90%;
}
}
@media (orientation: landscape) {
.wrapper {
max-height: 90vh;
}
}
@media (orientation: portrait) {
.wrapper {
max-width: 95vw;
}
}
@media (max-width: 480px) {
.info-text {
padding: 4px 8px;
}
}
</style>
</head>
<body>
<div class="wrapper" id="artWrapper">
<div class="image-container">
<img class="original-image" src="https://ordfs.network/content/8eb77bc626d8a9622aeea4135c74c213d95da8abcac8bce91aa47cbd965b7b10_0" alt="Color Finder">
<div class="color-overlay" id="colorOverlay"></div>
<div class="info-container" id="infoContainer">
<div class="info-text" id="infoText">Original</div>
</div>
<div id="loader" class="loader"></div>
</div>
<div id="errorMessage" class="error-message" style="display: none;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Set artwork ID here - CHANGE THIS VALUE FOR EACH ARTWORK (1-16)
const artworkId = 1;
// Get elements
const artWrapper = document.getElementById('artWrapper');
const originalImage = document.querySelector('.original-image');
const colorOverlay = document.getElementById('colorOverlay');
const infoText = document.getElementById('infoText');
const infoContainer = document.getElementById('infoContainer');
const loader = document.getElementById('loader');
const errorMessageDisplay = document.getElementById('errorMessage');
// Initial state
let currentHash = '';
let currentGradient = '';
let isActive = false;
let displayMode = 0;
let opacityTimeout;
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
// Define clickable areas
const imageArea = document.createElement('div');
imageArea.style.position = 'absolute';
imageArea.style.top = '0';
imageArea.style.left = '0';
imageArea.style.width = '100%';
imageArea.style.height = isMobile ? '90%' : '92%';
imageArea.style.zIndex = '3';
imageArea.style.cursor = 'pointer';
artWrapper.appendChild(imageArea);
// Toggle Original/Colored mode
imageArea.addEventListener('click', (e) => {
toggleColorOverlay();
displayMode = 0;
updateInfoText();
});
// Toggle display mode
infoText.addEventListener('click', (e) => {
e.stopPropagation();
displayMode = (displayMode + 1) % 3;
updateInfoText();
infoText.style.opacity = '1';
if (opacityTimeout) {
clearTimeout(opacityTimeout);
}
opacityTimeout = setTimeout(() => {
infoText.style.opacity = '0.7';
}, 2000);
});
// Touch device handling
if (isMobile) {
// Add touch scroll hint for mobile
let scrollHintShown = false;
document.addEventListener('touchend', (e) => {
if (e.target !== infoText) {
if (opacityTimeout) {
clearTimeout(opacityTimeout);
}
opacityTimeout = setTimeout(() => {
infoText.style.opacity = '0.4';
}, 2000);
}
});
// Show scroll hint for long text on mobile
infoText.addEventListener('touchstart', (e) => {
if (!scrollHintShown && (displayMode === 1 || displayMode === 2)) {
const textWidth = infoText.scrollWidth;
const containerWidth = infoText.clientWidth;
if (textWidth > containerWidth) {
// Brief visual hint that content is scrollable
infoText.style.borderLeft = '3px solid rgba(255,255,255,0.5)';
infoText.style.borderRight = '3px solid rgba(255,255,255,0.5)';
setTimeout(() => {
infoText.style.borderLeft = 'none';
infoText.style.borderRight = 'none';
}, 1000);
scrollHintShown = true;
}
}
});
} else {
infoText.addEventListener('mouseenter', () => {
if (opacityTimeout) {
clearTimeout(opacityTimeout);
}
infoText.style.opacity = '1';
});
infoText.addEventListener('mouseleave', () => {
infoText.style.opacity = '0.4';
});
}
// Toggle color overlay
function toggleColorOverlay() {
isActive = !isActive;
if (isActive) {
artWrapper.classList.add('active');
} else {
artWrapper.classList.remove('active');
}
updateInfoText();
}
// Update info text
function updateInfoText() {
switch(displayMode) {
case 0:
infoText.textContent = isActive ? 'Rainbow Colored' : 'Original';
infoText.style.fontSize = 'clamp(10px, 1.5vw, 14px)';
break;
case 1:
infoText.textContent = currentHash ? `Hash: ${getDisplayHash()}` : 'Hash: Loading...';
infoText.style.fontSize = 'clamp(8px, 1.2vw, 12px)';
break;
case 2:
infoText.textContent = currentGradient ? `Gradient: ${currentGradient}` : 'Gradient: Loading...';
infoText.style.fontSize = 'clamp(8px, 1.2vw, 12px)';
break;
}
}
// Adjust hash display according to screen size
function getDisplayHash() {
const width = window.innerWidth;
if (isMobile) {
// Show full hash on mobile with horizontal scroll
return currentHash;
} else if (width < 768) {
return currentHash.substring(0, 10) + '...' + currentHash.substring(currentHash.length - 10);
} else {
return currentHash;
}
}
// Convert hue value to color name with variations
function hueToColorName(hue, saturation, lightness) {
const normalizedHue = hue % 360;
let colorName = '';
let variation = '';
// Determine base color
if (normalizedHue >= 0 && normalizedHue < 51.4) colorName = 'Red';
else if (normalizedHue >= 51.4 && normalizedHue < 102.8) colorName = 'Orange';
else if (normalizedHue >= 102.8 && normalizedHue < 154.2) colorName = 'Yellow';
else if (normalizedHue >= 154.2 && normalizedHue < 205.6) colorName = 'Green';
else if (normalizedHue >= 205.6 && normalizedHue < 257) colorName = 'Cyan';
else if (normalizedHue >= 257 && normalizedHue < 308.4) colorName = 'Blue';
else colorName = 'Violet';
// Determine variation based on saturation and lightness
if (lightness < 45) variation = 'Deep ';
else if (lightness > 55) variation = 'Bright ';
else if (saturation < 85) variation = 'Pale ';
else variation = '';
return variation + colorName;
}
// Generate 7 distinct rainbow colors with variations
function generateSevenColorRainbow(hash) {
if (!hash || hash.length < 14) return 'linear-gradient(to right, transparent, transparent)';
// Define 7 color ranges (degrees)
const colorRanges = [
[0, 51.4], // Red
[51.4, 102.8], // Orange
[102.8, 154.2], // Yellow
[154.2, 205.6], // Green
[205.6, 257], // Cyan
[257, 308.4], // Blue
[308.4, 360] // Violet
];
// Split hash into sections, avoiding leading zeros
const sections = [];
const hashLength = hash.length;
// Start from position where zeros likely end (around position 16-20)
const startPos = Math.max(16, hashLength - 56); // Ensure we have enough characters
for (let i = startPos; i < hashLength && sections.length < 14; i += 4) {
sections.push(hash.substring(i, i + 4));
}
// Generate 7 distinct colors
const colors = [];
const colorNames = [];
for (let i = 0; i < 7; i++) {
const hueSection = sections[i * 2] || '0000';
const variationSection = sections[i * 2 + 1] || '0000';
// Generate hue within the specific color range
const hueValue = parseInt(hueSection, 16) || 0;
const range = colorRanges[i];
const hue = range[0] + (hueValue % (range[1] - range[0]));
// Generate saturation and lightness variations
const variationValue = parseInt(variationSection, 16) || 0;
const saturation = 80 + (variationValue % 21); // 80-100%
const lightness = 40 + ((variationValue >> 8) % 21); // 40-60%
// Apply artwork-specific rotation
const rotationDegree = (artworkId - 1) * 51.4; // 360/7 = 51.4 degrees per artwork
const rotatedHue = (hue + rotationDegree) % 360;
colors.push({
hue: rotatedHue,
saturation: saturation,
lightness: lightness
});
colorNames.push(hueToColorName(rotatedHue, saturation, lightness));
}
// Shuffle the colors based on hash for random order
// Use the latter part of hash to avoid leading zeros
const shuffleSection = hash.substring(hashLength - 16, hashLength); // Last 16 characters
const shuffleValue = parseInt(shuffleSection, 16) || Date.now(); // Better fallback
console.log("Shuffle section:", shuffleSection, "Shuffle value:", shuffleValue); // Debug log
const shuffledColors = shuffleArray([...colors], shuffleValue);
const shuffledNames = shuffleArray([...colorNames], shuffleValue);
console.log("Color order:", shuffledNames); // Debug log
// Store color sequence for display
currentGradient = shuffledNames.join('â');
// Create gradient
let gradient = `linear-gradient(to bottom right,
transparent 0%,
hsla(${shuffledColors[0].hue}, ${shuffledColors[0].saturation}%, ${shuffledColors[0].lightness}%, 0.2) 14%,
hsla(${shuffledColors[1].hue}, ${shuffledColors[1].saturation}%, ${shuffledColors[1].lightness}%, 0.35) 28%,
hsla(${shuffledColors[2].hue}, ${shuffledColors[2].saturation}%, ${shuffledColors[2].lightness}%, 0.45) 42%,
hsla(${shuffledColors[3].hue}, ${shuffledColors[3].saturation}%, ${shuffledColors[3].lightness}%, 0.55) 56%,
hsla(${shuffledColors[4].hue}, ${shuffledColors[4].saturation}%, ${shuffledColors[4].lightness}%, 0.65) 70%,
hsla(${shuffledColors[5].hue}, ${shuffledColors[5].saturation}%, ${shuffledColors[5].lightness}%, 0.75) 84%,
hsla(${shuffledColors[6].hue}, ${shuffledColors[6].saturation}%, ${shuffledColors[6].lightness}%, 0.85) 100%)`;
return gradient;
}
// Shuffle array based on seed value - improved randomness
function shuffleArray(array, seed) {
const result = [...array];
let currentSeed = seed;
for (let i = result.length - 1; i > 0; i--) {
// Use a better random number generation from seed
currentSeed = (currentSeed * 9301 + 49297) % 233280;
const j = Math.floor((currentSeed / 233280) * (i + 1));
[result[i], result[j]] = [result[j], result[i]];
}
return result;
}
// Helper function to adjust hues in gradient
function adjustGradientHues(gradientStr, rotationDegree) {
return gradientStr.replace(/hsla\((\d+)([^)]+)\)/g, (match, hue, rest) => {
const newHue = (parseInt(hue, 10) + rotationDegree) % 360;
return `hsla(${newHue}${rest})`;
});
}
// Fetch latest block hash
async function fetchLatestBlockHash() {
setLoading(true);
console.log("Attempting to fetch latest block hash...");
try {
// Try primary API endpoint
const response = await fetch('https://api.whatsonchain.com/v1/bsv/main/chain/info', {
mode: 'cors',
headers: {
'Accept': 'application/json',
'User-Agent': 'Rainbow-Color-Finder/1.0'
}
});
console.log("API Response status:", response.status);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log("API Response data:", data);
setLoading(false);
if (data && data.bestblockhash) {
console.log("Retrieved latest block hash:", data.bestblockhash);
updateWithHash(data.bestblockhash);
return data.bestblockhash;
} else {
throw new Error('No block hash found in response');
}
} catch (error) {
console.error("Primary API failed:", error.message);
// Try alternative method with blocks endpoint
try {
console.log("Trying alternative API endpoint...");
const altResponse = await fetch('https://api.whatsonchain.com/v1/bsv/main/blocks', {
mode: 'cors',
headers: {
'Accept': 'application/json'
}
});
if (altResponse.ok) {
const blocks = await altResponse.json();
if (blocks && blocks.length > 0 && blocks[0].hash) {
console.log("Retrieved hash from blocks API:", blocks[0].hash);
updateWithHash(blocks[0].hash);
setLoading(false);
return blocks[0].hash;
}
}
} catch (altError) {
console.error("Alternative API also failed:", altError.message);
}
setError(`API Error: ${error.message}`);
setLoading(false);
// Use multiple test hashes to demonstrate functionality
const testHashes = [
'000000000000000001a16e1b8c14e739f6d7b2d2c9f6d5d8c3b2a1e0f9e8d7c6',
'000000000000000002b27c2d9e25f84afed6e3d3daf6e7e9d4c3b2f1ead9e8d7',
'000000000000000003c38d3ea36f95bf4e7f4e4ebf7f8fadec3b3c2f1fbe9ae8',
'000000000000000004d49e4fb47fa6cf5f8f5f5fcf8f9fbf3d4c4d3f2fcf9bf9',
'000000000000000005e5af5gc58fb7df6f9f6f6fdf9fadcf4e5d5e4f3fdaf9ca'
];
// Cycle through test hashes every 30 seconds for demo
const currentTime = Math.floor(Date.now() / 30000);
const testHash = testHashes[currentTime % testHashes.length];
console.log("Using demo hash:", testHash);
updateWithHash(testHash);
return null;
}
}
// Update with hash
function updateWithHash(hash) {
console.log("Updating with new hash:", hash); // Debug log
currentHash = hash;
// Generate 7-color rainbow gradient
const gradientValue = generateSevenColorRainbow(hash);
colorOverlay.style.background = gradientValue;
updateInfoText();
}
// Loading state
function setLoading(isLoading) {
if (isLoading) {
loader.style.display = 'block';
} else {
loader.style.display = 'none';
}
}
// Error message
function setError(message) {
if (message) {
errorMessageDisplay.textContent = message;
errorMessageDisplay.style.display = 'block';
setTimeout(() => {
errorMessageDisplay.style.display = 'none';
}, 5000);
} else {
errorMessageDisplay.style.display = 'none';
}
}
// Handle image loading errors
originalImage.onerror = () => {
setError('Failed to load image.');
};
// Window resize handler
window.addEventListener('resize', () => {
imageArea.style.height = isMobile ? '90%' : '92%';
updateInfoText();
});
// Initialize with more frequent updates for demo
fetchLatestBlockHash();
// Update every 30 seconds for demo (instead of 1 minute)
setInterval(fetchLatestBlockHash, 30 * 1000);
});
</script>
</body>
</html>hv© £üaÍïêjj&@Ú:ø'À_Ϭ
https://whatsonchain.com/tx/d35b2b9016a44eef36f3d642bdcfb678cf8bdd24c9b0d0f372c13b4e5156b7f0