Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IPFS Iframe Performance Test</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, sans-serif; background: #1a1a1a; color: #fff; padding: 20px; } h1 { margin-bottom: 20px; } .test-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .test-box { background: #333; border-radius: 8px; padding: 15px; } .test-box h2 { font-size: 14px; margin-bottom: 10px; color: #aaa; } .iframe-wrapper { width: 100%; aspect-ratio: 1; background: #000; border-radius: 4px; overflow: hidden; } iframe { width: 100%; height: 100%; border: none; } .stats { margin-top: 10px; font-size: 12px; color: #888; } .buttons { margin-bottom: 20px; display: flex; gap: 10px; } button { background: #666; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background: #888; } .info { background: #222; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; } .info code { background: #444; padding: 2px 6px; border-radius: 3px; } </style></head><body> <h1>🔬 IPFS Iframe Performance Test</h1> <div class="info"> <p><strong>Token:</strong> <code>KT1JEVyKjsMLts63e4CNaMUywWTPgeQ41Smi</code> #1</p> <p><strong>IPFS CID:</strong> <code>Qmd7cuKDQBBEZp5w9FUdVHJtxT5P7dKd5WVCN6rtS7EU9E</code></p> <p>This page tests the same HTML bundle from different sources to compare performance.</p> <p>Open DevTools (F12) to monitor console logs and performance.</p> </div> <div class="buttons"> <button onclick="loadAll()">Load All</button> <button onclick="clearAll()">Clear All</button> <button onclick="loadDirect()">Load Direct Only</button> <button onclick="loadIpfsIo()">Load ipfs.io Only</button> <button onclick="loadAcGateway()">Load AC Gateway Only</button> </div> <div class="test-container"> <div class="test-box"> <h2>1. Direct IPFS (ipfs.aesthetic.computer)</h2> <div class="iframe-wrapper"> <iframe id="frame-ac" sandbox="allow-scripts allow-same-origin"></iframe> </div> <div class="stats" id="stats-ac">Not loaded</div> </div> <div class="test-box"> <h2>2. Public IPFS Gateway (ipfs.io)</h2> <div class="iframe-wrapper"> <iframe id="frame-ipfsio" sandbox="allow-scripts allow-same-origin"></iframe> </div> <div class="stats" id="stats-ipfsio">Not loaded</div> </div> <div class="test-box"> <h2>3. Cloudflare IPFS Gateway</h2> <div class="iframe-wrapper"> <iframe id="frame-cf" sandbox="allow-scripts allow-same-origin"></iframe> </div> <div class="stats" id="stats-cf">Not loaded</div> </div> <div class="test-box"> <h2>4. Restricted Sandbox (like objkt?)</h2> <div class="iframe-wrapper"> <iframe id="frame-restricted" sandbox="allow-scripts"></iframe> </div> <div class="stats" id="stats-restricted">Not loaded</div> </div> </div> <div class="test-container"> <div class="test-box" style="grid-column: span 2;"> <h2>5. Minimal Sandbox (no permissions)</h2> <div class="iframe-wrapper" style="max-width: 400px;"> <iframe id="frame-minimal" sandbox=""></iframe> </div> <div class="stats" id="stats-minimal">Not loaded</div> </div> </div>
<script> const CID = 'Qmd7cuKDQBBEZp5w9FUdVHJtxT5P7dKd5WVCN6rtS7EU9E'; const urls = { ac: `https://ipfs.aesthetic.computer/ipfs/${CID}`, ipfsio: `https://ipfs.io/ipfs/${CID}`, cf: `https://cloudflare-ipfs.com/ipfs/${CID}`, restricted: `https://ipfs.aesthetic.computer/ipfs/${CID}`, minimal: `https://ipfs.aesthetic.computer/ipfs/${CID}`, }; function loadFrame(id, url) { const frame = document.getElementById(`frame-${id}`); const stats = document.getElementById(`stats-${id}`); const start = performance.now(); stats.textContent = 'Loading...'; frame.onload = () => { const elapsed = (performance.now() - start).toFixed(1); stats.textContent = `Loaded in ${elapsed}ms`; }; frame.onerror = (e) => { stats.textContent = `Error: ${e.message || 'Failed to load'}`; }; frame.src = url; } function clearFrame(id) { const frame = document.getElementById(`frame-${id}`); const stats = document.getElementById(`stats-${id}`); frame.src = 'about:blank'; stats.textContent = 'Not loaded'; } function loadAll() { loadFrame('ac', urls.ac); loadFrame('ipfsio', urls.ipfsio); loadFrame('cf', urls.cf); loadFrame('restricted', urls.restricted); loadFrame('minimal', urls.minimal); } function clearAll() { clearFrame('ac'); clearFrame('ipfsio'); clearFrame('cf'); clearFrame('restricted'); clearFrame('minimal'); } function loadDirect() { clearAll(); loadFrame('ac', urls.ac); } function loadIpfsIo() { clearAll(); loadFrame('ipfsio', urls.ipfsio); } function loadAcGateway() { clearAll(); loadFrame('ac', urls.ac); } // Log when page loads console.log('🔬 IPFS Iframe Performance Test loaded'); console.log('CID:', CID); console.log('URLs:', urls); </script></body></html>