I Dream Of Jeannie Archive.org 🏆 🌟
// additional fallback identifiers that are known to exist on archive.org // some items may have generic thumbnails; we'll use IA standard thumb url if identifier available. // but to be robust, we generate fallback thumbnails via IA's /services/img/ endpoint function getThumbnailUrl(item) { if (item.thumbnail && item.thumbnail.startsWith('http')) return item.thumbnail; // use archive.org item identifier to fetch default thumb (__ia_thumb.jpg) if (item.identifier) { return `https://archive.org/download/${item.identifier}/__ia_thumb.jpg`; } return ""; }
<div id="cardsContainer" class="items-grid"> <div class="loading-state">✨ summoning Jeannie's bottle... fetching from archive.org metadata ✨</div> </div> <footer> 🧞♀️ Curated collection of “I Dream of Jeannie” related items from the Internet Archive’s open library. Click any button to watch or read original archived media. All content belongs to respective rights holders. </footer> </div> i dream of jeannie archive.org
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(''); // additional fallback identifiers that are known to
// 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>`; Click any button to watch or read original archived media
// DOM elements const container = document.getElementById("cardsContainer"); const searchInput = document.getElementById("searchInput"); const filterBtns = document.querySelectorAll(".filter-btn"); const resultCountSpan = document.getElementById("resultCount");
/* 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; }
/* 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>
