filterBtns.forEach(btn => { btn.addEventListener("click", () => { const type = btn.getAttribute("data-type"); currentFilter = type; setActiveFilterButton(type); renderCards(); }); });
// build initial dataset with enriched thumb url let masterItems = JEANNIE_ARCHIVE_ITEMS.map(item => ({ ...item, thumbUrl: getThumbnailUrl(item), // lower case fields for search searchText: `${item.title} ${item.description} ${item.year} ${item.type}`.toLowerCase() }));
/* archive card */ .archive-card { background: rgba(25, 35, 38, 0.85); backdrop-filter: blur(4px); border-radius: 1.8rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s; border: 1px solid #ffcf7a30; display: flex; flex-direction: column; } .archive-card:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px black; border-color: #ffcf7a80; } .card-thumb { height: 160px; background: #0f191c; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid #f3b33d30; } .card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; } .no-img-icon { font-size: 3.5rem; opacity: 0.6; } .card-content { padding: 1.2rem 1.2rem 1.4rem; flex: 1; } .card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.3rem; color: #ffdfa5; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .year-badge { font-size: 0.7rem; background: #00000066; padding: 0.2rem 0.5rem; border-radius: 30px; font-weight: normal; color: #ffe0b5; } .card-desc { font-size: 0.85rem; color: #cbd5e1; margin: 0.5rem 0 0.8rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .type-tag { display: inline-block; background: #3c2e1f; padding: 0.2rem 0.7rem; border-radius: 30px; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; color: #ffdd99; } .card-actions { margin-top: 0.8rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; } .btn-archive { background: #00000055; border: 1px solid #ffcf7a; padding: 0.4rem 1rem; border-radius: 40px; color: #ffdfb3; font-weight: 500; font-size: 0.75rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s; } .btn-archive:hover { background: #f3b33d; color: #1a2a2a; border-color: #f3b33d; } .external-link { font-size: 0.7rem; color: #9aaeb0; } i dream of jeannie archive.org
function filterItems() { let filtered = [...masterItems]; // apply type filter if (currentFilter !== "all") { filtered = filtered.filter(item => item.type === currentFilter); } // apply search text if (currentSearch.trim() !== "") { const searchLower = currentSearch.trim().toLowerCase(); filtered = filtered.filter(item => item.searchText.includes(searchLower)); } return filtered; }
/* stats line */ .stats { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 0.85rem; color: #bfd1cf; padding: 0 0.2rem; } filterBtns
// Additional goodies: if some archive identifiers are not perfectly matching __ia_thumb, we provide generic background // but the cards will show the no-img-icon gracefully. // also include a direct redirect to archive.org items // For extra authenticity, add a note that some thumbnails may be unavailable but the media is 100% reachable. init(); </script> </body> </html>
container.innerHTML = cardsHTML; }
// simple XSS escape function escapeHtml(str) { return str.replace(/[&<>]/g, function(m) { if (m === '&') return '&'; if (m === '<') return '<'; if (m === '>') return '>'; return m; }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) { return c; }); }
// optional: provide a simple check to see if any thumbnails missing, but we already handle. // also we display loading message for a moment then actual cards (instant because local dataset) // simulate a tiny micro-delay just for smoothness? not needed. but show initial load fine. function init() { // small timeout to show the "loading" replaced instantly setTimeout(() => { renderCards(); }, 50); } // also we display loading message for a