aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>IPFS Iframe Performance Test</title>
7 <style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9 body {
10 font-family: system-ui, sans-serif;
11 background: #1a1a1a;
12 color: #fff;
13 padding: 20px;
14 }
15 h1 { margin-bottom: 20px; }
16 .test-container {
17 display: grid;
18 grid-template-columns: 1fr 1fr;
19 gap: 20px;
20 margin-bottom: 20px;
21 }
22 .test-box {
23 background: #333;
24 border-radius: 8px;
25 padding: 15px;
26 }
27 .test-box h2 {
28 font-size: 14px;
29 margin-bottom: 10px;
30 color: #aaa;
31 }
32 .iframe-wrapper {
33 width: 100%;
34 aspect-ratio: 1;
35 background: #000;
36 border-radius: 4px;
37 overflow: hidden;
38 }
39 iframe {
40 width: 100%;
41 height: 100%;
42 border: none;
43 }
44 .stats {
45 margin-top: 10px;
46 font-size: 12px;
47 color: #888;
48 }
49 .buttons {
50 margin-bottom: 20px;
51 display: flex;
52 gap: 10px;
53 }
54 button {
55 background: #666;
56 color: #fff;
57 border: none;
58 padding: 10px 20px;
59 border-radius: 4px;
60 cursor: pointer;
61 }
62 button:hover { background: #888; }
63 .info {
64 background: #222;
65 padding: 15px;
66 border-radius: 8px;
67 margin-bottom: 20px;
68 font-size: 13px;
69 line-height: 1.5;
70 }
71 .info code {
72 background: #444;
73 padding: 2px 6px;
74 border-radius: 3px;
75 }
76 </style>
77</head>
78<body>
79 <h1>🔬 IPFS Iframe Performance Test</h1>
80
81 <div class="info">
82 <p><strong>Token:</strong> <code>KT1JEVyKjsMLts63e4CNaMUywWTPgeQ41Smi</code> #1</p>
83 <p><strong>IPFS CID:</strong> <code>Qmd7cuKDQBBEZp5w9FUdVHJtxT5P7dKd5WVCN6rtS7EU9E</code></p>
84 <p>This page tests the same HTML bundle from different sources to compare performance.</p>
85 <p>Open DevTools (F12) to monitor console logs and performance.</p>
86 </div>
87
88 <div class="buttons">
89 <button onclick="loadAll()">Load All</button>
90 <button onclick="clearAll()">Clear All</button>
91 <button onclick="loadDirect()">Load Direct Only</button>
92 <button onclick="loadIpfsIo()">Load ipfs.io Only</button>
93 <button onclick="loadAcGateway()">Load AC Gateway Only</button>
94 </div>
95
96 <div class="test-container">
97 <div class="test-box">
98 <h2>1. Direct IPFS (ipfs.aesthetic.computer)</h2>
99 <div class="iframe-wrapper">
100 <iframe id="frame-ac" sandbox="allow-scripts allow-same-origin"></iframe>
101 </div>
102 <div class="stats" id="stats-ac">Not loaded</div>
103 </div>
104
105 <div class="test-box">
106 <h2>2. Public IPFS Gateway (ipfs.io)</h2>
107 <div class="iframe-wrapper">
108 <iframe id="frame-ipfsio" sandbox="allow-scripts allow-same-origin"></iframe>
109 </div>
110 <div class="stats" id="stats-ipfsio">Not loaded</div>
111 </div>
112
113 <div class="test-box">
114 <h2>3. Cloudflare IPFS Gateway</h2>
115 <div class="iframe-wrapper">
116 <iframe id="frame-cf" sandbox="allow-scripts allow-same-origin"></iframe>
117 </div>
118 <div class="stats" id="stats-cf">Not loaded</div>
119 </div>
120
121 <div class="test-box">
122 <h2>4. Restricted Sandbox (like objkt?)</h2>
123 <div class="iframe-wrapper">
124 <iframe id="frame-restricted" sandbox="allow-scripts"></iframe>
125 </div>
126 <div class="stats" id="stats-restricted">Not loaded</div>
127 </div>
128 </div>
129
130 <div class="test-container">
131 <div class="test-box" style="grid-column: span 2;">
132 <h2>5. Minimal Sandbox (no permissions)</h2>
133 <div class="iframe-wrapper" style="max-width: 400px;">
134 <iframe id="frame-minimal" sandbox=""></iframe>
135 </div>
136 <div class="stats" id="stats-minimal">Not loaded</div>
137 </div>
138 </div>
139
140 <script>
141 const CID = 'Qmd7cuKDQBBEZp5w9FUdVHJtxT5P7dKd5WVCN6rtS7EU9E';
142
143 const urls = {
144 ac: `https://ipfs.aesthetic.computer/ipfs/${CID}`,
145 ipfsio: `https://ipfs.io/ipfs/${CID}`,
146 cf: `https://cloudflare-ipfs.com/ipfs/${CID}`,
147 restricted: `https://ipfs.aesthetic.computer/ipfs/${CID}`,
148 minimal: `https://ipfs.aesthetic.computer/ipfs/${CID}`,
149 };
150
151 function loadFrame(id, url) {
152 const frame = document.getElementById(`frame-${id}`);
153 const stats = document.getElementById(`stats-${id}`);
154 const start = performance.now();
155
156 stats.textContent = 'Loading...';
157
158 frame.onload = () => {
159 const elapsed = (performance.now() - start).toFixed(1);
160 stats.textContent = `Loaded in ${elapsed}ms`;
161 };
162
163 frame.onerror = (e) => {
164 stats.textContent = `Error: ${e.message || 'Failed to load'}`;
165 };
166
167 frame.src = url;
168 }
169
170 function clearFrame(id) {
171 const frame = document.getElementById(`frame-${id}`);
172 const stats = document.getElementById(`stats-${id}`);
173 frame.src = 'about:blank';
174 stats.textContent = 'Not loaded';
175 }
176
177 function loadAll() {
178 loadFrame('ac', urls.ac);
179 loadFrame('ipfsio', urls.ipfsio);
180 loadFrame('cf', urls.cf);
181 loadFrame('restricted', urls.restricted);
182 loadFrame('minimal', urls.minimal);
183 }
184
185 function clearAll() {
186 clearFrame('ac');
187 clearFrame('ipfsio');
188 clearFrame('cf');
189 clearFrame('restricted');
190 clearFrame('minimal');
191 }
192
193 function loadDirect() {
194 clearAll();
195 loadFrame('ac', urls.ac);
196 }
197
198 function loadIpfsIo() {
199 clearAll();
200 loadFrame('ipfsio', urls.ipfsio);
201 }
202
203 function loadAcGateway() {
204 clearAll();
205 loadFrame('ac', urls.ac);
206 }
207
208 // Log when page loads
209 console.log('🔬 IPFS Iframe Performance Test loaded');
210 console.log('CID:', CID);
211 console.log('URLs:', urls);
212 </script>
213</body>
214</html>