/* 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); }
/* loading + error */ .loading-state, .error-state, .no-results { text-align: center; padding: 3rem; font-size: 1.2rem; background: rgba(0,0,0,0.3); border-radius: 2rem; margin-top: 1rem; } .error-state { color: #ffae70; } footer { text-align: center; margin-top: 2.5rem; font-size: 0.75rem; color: #6f8f92; border-top: 1px solid #ffcf7a30; padding-top: 1.5rem; } @media (max-width: 680px) { .archive-feature { padding: 1.2rem; } .title-area h1 { font-size: 1.8rem; } } </style> </head> <body> <div class="archive-feature"> <div class="jeannie-header"> <div class="title-area"> <h1>I Dream of Jeannie · Archive</h1> <div class="sub">classic episodes · promos · nostalgic media from the Internet Archive</div> </div> <div class="archive-badge"> 📀 powered by <a href="https://archive.org" target="_blank" rel="noopener">archive.org</a> metadata </div> </div>
// 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>`; 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`;
// event listeners searchInput.addEventListener("input", (e) => { currentSearch = e.target.value; renderCards(); }); /* main container */
// DOM elements const container = document.getElementById("cardsContainer"); const searchInput = document.getElementById("searchInput"); const filterBtns = document.querySelectorAll(".filter-btn"); const resultCountSpan = document.getElementById("resultCount");
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; } // also include a direct redirect to archive
// 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>