I Dream Of Jeannie Archive.org Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>I Dream of Jeannie · Archive Explorer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
// DOM elements const container = document.getElementById("cardsContainer"); const searchInput = document.getElementById("searchInput"); const filterBtns = document.querySelectorAll(".filter-btn"); const resultCountSpan = document.getElementById("resultCount"); i dream of jeannie archive.org
// thumbnail fallback handling: if image fails onerror, replace with emoji const thumbHtml = item.thumbUrl ? `<img src="${item.thumbUrl}" alt="${item.title}" loading="lazy" onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'no-img-icon\'>🧞♀️📼</div>';">` : `<div class="no-img-icon">🧞♀️✨</div>`; div class="filter-group" id="filterGroup">
/* card grid */ .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.8rem; margin-top: 1rem; } button data-type="all" class="filter-btn active">
<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>