Monorepo for Aesthetic.Computer
aesthetic.computer
buy.kidlisp.com: show thumbnail images in Albums section
Replace text pill chips with animated WebP thumbnails per collector,
with piece name labels and click-to-open on aesthetic.computer.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+37
-21
+37
-21
system/public/kidlisp.com/buy.html
+37
-21
system/public/kidlisp.com/buy.html
···
499
499
.album-tokens {
500
500
display: none;
501
501
flex-wrap: wrap;
502
-
gap: 6px;
503
-
padding: 8px 20px 16px 64px;
502
+
gap: 10px;
503
+
padding: 12px 20px 20px 64px;
504
504
}
505
505
.album-tokens.open {
506
506
display: flex;
507
507
}
508
-
.album-token-chip {
509
-
font-family: var(--font-mono);
510
-
font-size: 13px;
511
-
padding: 4px 10px;
512
-
background: var(--bg3);
513
-
border: 1px solid var(--border);
514
-
border-radius: 20px;
515
-
color: var(--text);
508
+
.album-thumb {
509
+
width: 80px;
516
510
cursor: pointer;
517
-
transition: all 0.15s;
511
+
transition: transform 0.15s;
518
512
}
519
-
.album-token-chip:hover {
520
-
background: var(--accent-bg);
521
-
border-color: var(--accent);
522
-
color: var(--accent);
513
+
.album-thumb:hover {
514
+
transform: scale(1.08);
515
+
}
516
+
.album-thumb img {
517
+
width: 80px;
518
+
height: 80px;
519
+
object-fit: cover;
520
+
border-radius: 8px;
521
+
border: 1px solid var(--border);
522
+
display: block;
523
+
}
524
+
.album-thumb-label {
525
+
font-family: var(--font-mono);
526
+
font-size: 11px;
527
+
color: var(--text2);
528
+
text-align: center;
529
+
margin-top: 4px;
530
+
overflow: hidden;
531
+
text-overflow: ellipsis;
532
+
white-space: nowrap;
523
533
}
524
534
525
535
.card-buy-btn {
···
811
821
}
812
822
813
823
async function fetchAlbums() {
814
-
const res = await fetch(`https://api.tzkt.io/v1/tokens/balances?token.contract=${CONTRACT}&balance.gt=0&limit=200&select=account.address,account.alias,token.metadata.name,token.tokenId`);
824
+
const res = await fetch(`https://api.tzkt.io/v1/tokens/balances?token.contract=${CONTRACT}&balance.gt=0&limit=200&select=account.address,account.alias,token.metadata.name,token.tokenId,token.metadata.thumbnailUri`);
815
825
const data = await res.json();
816
826
// Group by holder
817
827
const grouped = {};
818
828
for (const b of data) {
819
829
const addr = b['account.address'];
820
830
if (!grouped[addr]) grouped[addr] = { address: addr, alias: b['account.alias'], tokens: [] };
821
-
grouped[addr].tokens.push({ name: b['token.metadata.name'], tokenId: b['token.tokenId'] });
831
+
grouped[addr].tokens.push({ name: b['token.metadata.name'], tokenId: b['token.tokenId'], thumbnailUri: b['token.metadata.thumbnailUri'] });
822
832
}
823
833
// Sort by count desc
824
834
return Object.values(grouped).sort((a, b) => b.tokens.length - a.tokens.length);
···
931
941
<div class="album-count">${album.tokens.length}</div>
932
942
</div>
933
943
<div class="album-tokens" data-idx="${i}">
934
-
${tokens.map(t => `<span class="album-token-chip" data-code="${t.name}">${t.name}</span>`).join('')}
944
+
${tokens.map(t => {
945
+
const thumb = animatedWebpUrl(t.thumbnailUri);
946
+
return `<div class="album-thumb" data-code="${t.name}">
947
+
${thumb ? `<img src="${thumb}" alt="${t.name}" loading="lazy" />` : `<div style="width:80px;height:80px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)"></div>`}
948
+
<div class="album-thumb-label">${t.name}</div>
949
+
</div>`;
950
+
}).join('')}
935
951
</div>
936
952
</div>`;
937
953
}).join('');
···
943
959
});
944
960
});
945
961
946
-
grid.querySelectorAll('.album-token-chip').forEach(chip => {
947
-
chip.addEventListener('click', (e) => {
962
+
grid.querySelectorAll('.album-thumb').forEach(thumb => {
963
+
thumb.addEventListener('click', (e) => {
948
964
e.stopPropagation();
949
-
const code = chip.dataset.code;
965
+
const code = thumb.dataset.code;
950
966
window.open(`https://aesthetic.computer/${code}`, '_blank');
951
967
});
952
968
});