/* 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; }
// event listeners searchInput.addEventListener("input", (e) => { currentSearch = e.target.value; renderCards(); }); i dream of jeannie archive.org
// 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 */
function setActiveFilterButton(type) { filterBtns.forEach(btn => { const btnType = btn.getAttribute("data-type"); if (btnType === type) { btn.classList.add("active"); } else { btn.classList.remove("active"); } }); } transition: transform 0.2s ease
filterBtns.forEach(btn => { btn.addEventListener("click", () => { const type = btn.getAttribute("data-type"); currentFilter = type; setActiveFilterButton(type); renderCards(); }); });
/* card grid */ .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.8rem; margin-top: 1rem; }
// 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>