Spaces:
Building
Building
File size: 2,252 Bytes
1295969 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>retro-sync — Music NFT Collections</title>
<style>
body{background:#0a0a0a;color:#e0e0e0;font-family:monospace;max-width:800px;margin:0 auto;padding:2em}
h1{color:#0ff;font-size:1.5em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:1em 0}
.card{background:#111;border:1px solid #333;padding:16px;border-radius:8px;cursor:pointer;transition:border-color 0.2s}
.card:hover{border-color:#0ff}
.card h3{color:#ffd700;margin:0 0 4px;font-size:1em}
.card .meta{color:#888;font-size:0.8em}
.card .count{color:#0f0;font-size:0.9em;margin-top:8px}
a{color:#0ff;text-decoration:none}
.footer{margin-top:2em;color:#555;font-size:0.8em;border-top:1px solid #222;padding-top:1em}
</style>
</head><body>
<h1>🎵 retro-sync — Music NFT Collections</h1>
<p>Public domain music encoded in steganographic PNG tiles. Click to decode and play.</p>
<div class="grid" id="collections"></div>
<div class="footer">
retro-sync · DA51 CBOR · Cl(15,0,0) · 6-layer stego<br>
<a href="https://github.com/meta-introspector/retro-sync">GitHub</a> ·
<a href="https://huggingface.co/spaces/introspector/retro-sync">HuggingFace</a>
</div>
<script>
const collections = [
{name:"Bach Inventions", slug:"bach-invention", pieces:15, era:"Baroque 1720", desc:"Two-Part Inventions BWV 772-786"},
{name:"Bartók", slug:"bartok", pieces:20, era:"Modern 1908", desc:"Children's pieces, folk songs, Mikrokosmos"},
// Add more as onboarded:
// {name:"Joplin Ragtime", slug:"joplin", pieces:12, era:"1899", desc:"Maple Leaf Rag, The Entertainer"},
// {name:"Satie", slug:"satie", pieces:15, era:"1888", desc:"Gymnopédies, Gnossiennes"},
// {name:"Debussy", slug:"debussy", pieces:15, era:"1890", desc:"Clair de Lune, Arabesques"},
];
const grid = document.getElementById('collections');
for (const c of collections) {
const base = window.location.pathname.replace(/\/[^/]*$/, '');
grid.innerHTML += `
<a href="${base}/${c.slug}/" class="card">
<h3>${c.name}</h3>
<div class="meta">${c.era}</div>
<div class="meta">${c.desc}</div>
<div class="count">🎵 ${c.pieces} pieces · 71 tiles</div>
</a>`;
}
</script>
</body></html>
|