0x26cda2b3…87d9sent to0xb8952959…ccf4·#23,928,526·view on Etherscan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jimmy Grid</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#grid-container {
width: 100vmin;
height: 100vmin;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0;
}
.resize-handle-vertical {
position: absolute;
width: 10px;
height: 100%;
cursor: ew-resize;
z-index: 1000;
left: 50%;
transform: translateX(-50%);
}
.resize-handle-horizontal {
position: absolute;
width: 100%;
height: 10px;
cursor: ns-resize;
z-index: 1000;
top: 50%;
transform: translateY(-50%);
}
.cell {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: #000;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
pointer-events: auto;
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000;
z-index: 1000;
color: #888;
font-family: monospace;
font-size: 14px;
}
#loading.hidden {
display: none;
}
</style>
</head>
<body>
<div id="loading">Loading images...</div>
<div id="grid-container">
<div class="resize-handle-vertical"></div>
<div class="resize-handle-horizontal"></div>
</div>
<script>
const TX_HASHES = [
"0x75a22114078aad812352cf3a0261b5a20ac93dfde763a87111717ad3e4803006",
"0xbd1e892be3ca111e3b8dd1544190ebbaa743135692d0d8a2e2ba0d7728954754",
"0x18cf414c1096b04c0374e5eff588e849673d78e2831b6f006a033f2b8f0e3171",
"0x75a22114078aad812352cf3a0261b5a20ac93dfde763a87111717ad3e4803006"
];
let images = [];
const cells = [];
const cellTimers = [];
let isDragging = false;
let currentHandle = null;
function initGrid() {
const container = document.getElementById('grid-container');
const handles = container.querySelectorAll('.resize-handle-vertical, .resize-handle-horizontal');
for (let i = 0; i < 4; i++) {
const div = document.createElement('div');
div.className = 'cell';
div.id = `cell-${i}`;
container.appendChild(div);
cells.push(div);
}
const vHandle = container.querySelector('.resize-handle-vertical');
const hHandle = container.querySelector('.resize-handle-horizontal');
vHandle.addEventListener('mousedown', (e) => startResize(e, 'vertical'));
hHandle.addEventListener('mousedown', (e) => startResize(e, 'horizontal'));
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
}
function startResize(e, direction) {
isDragging = true;
currentHandle = direction;
e.preventDefault();
}
function resize(e) {
if (!isDragging) return;
const container = document.getElementById('grid-container');
const rect = container.getBoundingClientRect();
if (currentHandle === 'vertical') {
const x = e.clientX - rect.left;
const percent = (x / rect.width) * 100;
const clamped = Math.max(20, Math.min(80, percent));
container.style.gridTemplateColumns = `${clamped}% ${100 - clamped}%`;
} else if (currentHandle === 'horizontal') {
const y = e.clientY - rect.top;
const percent = (y / rect.height) * 100;
const clamped = Math.max(20, Math.min(80, percent));
container.style.gridTemplateRows = `${clamped}% ${100 - clamped}%`;
}
}
function stopResize() {
isDragging = false;
currentHandle = null;
}
function renderCell(index) {
if (images.length === 0) {
console.error('renderCell called but no images loaded');
return;
}
const cell = cells[index];
const htmlContent = images[index % images.length];
if (!htmlContent) {
console.error('No HTML content for index', index);
return;
}
cell.innerHTML = '';
const iframe = document.createElement('iframe');
iframe.srcdoc = htmlContent;
iframe.sandbox = 'allow-scripts allow-same-origin';
cell.appendChild(iframe);
}
function updateCell(index) {
if (images.length === 0) return;
const cell = cells[index];
if (!cell) {
scheduleNextUpdate(index);
return;
}
const randomIndex = Math.floor(Math.random() * images.length);
const htmlContent = images[randomIndex];
cell.innerHTML = '';
const iframe = document.createElement('iframe');
iframe.srcdoc = htmlContent;
iframe.sandbox = 'allow-scripts allow-same-origin';
cell.appendChild(iframe);
scheduleNextUpdate(index);
}
function scheduleNextUpdate(index) {
const delay = 3000 + Math.random() * 2000;
cellTimers[index] = setTimeout(() => updateCell(index), delay);
}
async function decodeImageFromTx(txHash) {
try {
const response = await fetch(`https://eth-mainnet.g.alchemy.com/v2/T1Y8E3Z8hUkVqyXz-I67Qh_Un2wHsfIZ`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
jsonrpc: '2.0',
id: 1,
method: 'eth_getTransactionByHash',
params: [txHash]
})
});
const data = await response.json();
if (!data.result || !data.result.input) throw new Error('No transaction data');
const hex = data.result.input.slice(2);
const bytes = new Uint8Array(hex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
const decoder = new TextDecoder();
return decoder.decode(bytes);
} catch (e) {
console.error('Failed to decode:', txHash, e);
return null;
}
}
async function init() {
try {
for (let i = 0; i < TX_HASHES.length; i++) {
const html = await decodeImageFromTx(TX_HASHES[i]);
if (html) {
images.push(html);
} else {
console.error('Failed to load tx:', TX_HASHES[i]);
}
}
if (images.length === 0) {
document.getElementById('loading').textContent = 'Error: No content loaded';
return;
}
} catch (e) {
console.error('Init error:', e);
document.getElementById('loading').textContent = 'Error loading content';
return;
}
document.getElementById('loading').classList.add('hidden');
initGrid();
for (let i = 0; i < 4; i++) {
renderCell(i);
setTimeout(() => scheduleNextUpdate(i), (i + 1) * 1000);
}
}
init();
</script>
</body>
</html>