I Dream Of Jeannie Archive.org Page
if (filtered.length === 0) { container.innerHTML = `<div class="no-results">🧞 No Jeannie treasures match — try another search or clear filter! “Master, say the magic word!” 🧞</div>`; return; }
// DOM elements const container = document.getElementById("cardsContainer"); const searchInput = document.getElementById("searchInput"); const filterBtns = document.querySelectorAll(".filter-btn"); const resultCountSpan = document.getElementById("resultCount");
container.innerHTML = cardsHTML; }
// 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() })); i dream of jeannie archive.org
function renderCards() { const filtered = filterItems(); resultCountSpan.innerText = `✨ ${filtered.length} magical item${filtered.length !== 1 ? 's' : ''} found from archive.org`;
/* main container */ .archive-feature { max-width: 1400px; margin: 0 auto; background: rgba(10, 18, 22, 0.65); backdrop-filter: blur(2px); border-radius: 3rem; padding: 2rem 2rem 2.5rem; box-shadow: 0 25px 45px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); border: 1px solid rgba(255,215,150,0.2); }
const cardsHTML = filtered.map(item => { // type label styling let typeLabel = ""; if (item.type === "episode") typeLabel = "📺 Full Episode"; else if (item.type === "promo") typeLabel = "🎞️ Promo / Clip"; else typeLabel = "🎙️ Featurette / Interview"; if (filtered
/* stats line */ .stats { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 0.85rem; color: #bfd1cf; padding: 0 0.2rem; }
function setActiveFilterButton(type) { filterBtns.forEach(btn => { const btnType = btn.getAttribute("data-type"); if (btnType === type) { btn.classList.add("active"); } else { btn.classList.remove("active"); } }); }
// event listeners searchInput.addEventListener("input", (e) => { currentSearch = e.target.value; renderCards(); }); say the magic word!” 🧞<
// 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; }); }
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; }