I Dream Of Jeannie Archive.org Direct

filterBtns.forEach(btn => { btn.addEventListener("click", () => { const type = btn.getAttribute("data-type"); currentFilter = type; setActiveFilterButton(type); renderCards(); }); });

<div class="search-panel"> <div class="search-wrapper"> <input type="text" id="searchInput" placeholder="🔍 Search episodes, descriptions, years... (e.g. 'Jeannie', 'S2', 'Blonde')" autocomplete="off"> </div> <div class="filter-group" id="filterGroup"> <button data-type="all" class="filter-btn active">✨ All</button> <button data-type="episode" class="filter-btn">📺 Episodes</button> <button data-type="promo" class="filter-btn">🎬 Promos / Clips</button> <button data-type="featurette" class="filter-btn">📽️ Featurette / Interview</button> </div> </div> <div class="stats"> <span id="resultCount">Loading archive treasures...</span> <span>🧞‍♂️ "Thank you, Jeannie!"</span> </div> i dream of jeannie archive.org

/* search & filter row */ .search-panel { background: rgba(0, 0, 0, 0.45); border-radius: 2rem; padding: 1.2rem 1.5rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; backdrop-filter: blur(8px); } .search-wrapper { flex: 3; min-width: 200px; position: relative; } .search-wrapper input { width: 100%; padding: 0.85rem 1.2rem; border-radius: 60px; border: none; background: #1e2b2f; color: #f0ede8; font-size: 1rem; outline: none; transition: 0.2s; border: 1px solid #ffcf7a40; } .search-wrapper input:focus { border-color: #f3b33d; box-shadow: 0 0 0 3px rgba(243,179,61,0.3); } .filter-group { display: flex; gap: 0.7rem; flex-wrap: wrap; } .filter-btn { background: #2d3e3f; border: none; padding: 0.6rem 1.2rem; border-radius: 40px; font-weight: 500; color: #e2e8f0; cursor: pointer; transition: all 0.2s; font-size: 0.85rem; } .filter-btn.active { background: #f3b33d; color: #1e2a2e; box-shadow: 0 2px 8px rgba(243,179,61,0.4); } .filter-btn:hover:not(.active) { background: #4a6b6e; }

return ` <div class="archive-card" data-id="${item.identifier}"> <div class="card-thumb"> ${thumbHtml} </div> <div class="card-content"> <div class="type-tag">${typeLabel}</div> <div class="card-title"> ${escapeHtml(item.title)} <span class="year-badge">${item.year}</span> </div> <div class="card-desc">${escapeHtml(item.description)}</div> <div class="card-actions"> <a href="${item.externalUrl}" target="_blank" rel="noopener noreferrer" class="btn-archive"> 📀 View on Archive.org → </a> <span class="external-link">open media player</span> </div> </div> </div> `; }).join(''); function setActiveFilterButton(type) { filterBtns

// 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); }

/* header with genie flair */ .jeannie-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; border-bottom: 2px solid #ffcf7a; padding-bottom: 1.2rem; } .title-area h1 { font-size: 2.7rem; font-weight: 700; background: linear-gradient(135deg, #FFE6B0, #FFB347); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.5px; display: inline-flex; align-items: center; gap: 12px; } .title-area h1::before { content: "🧞‍♀️"; font-size: 2.5rem; background: none; color: #f7c56e; } .sub { color: #cbd5e1; margin-top: 0.4rem; font-size: 1rem; border-left: 3px solid #f3b33d; padding-left: 0.8rem; } .archive-badge { background: #2c3e2f; padding: 0.5rem 1.2rem; border-radius: 60px; font-weight: 500; font-size: 0.85rem; backdrop-filter: blur(4px); background: rgba(0,0,0,0.5); border: 1px solid #ffcf7a60; } .archive-badge a { color: #ffdd99; text-decoration: none; font-weight: 500; } .archive-badge a:hover { text-decoration: underline; } // also we display loading message for a

/* 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; }