/* 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>
// DOM elements const container = document.getElementById("cardsContainer"); const searchInput = document.getElementById("searchInput"); const filterBtns = document.querySelectorAll(".filter-btn"); const resultCountSpan = document.getElementById("resultCount");
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(''); i dream of jeannie archive.org
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";
// state let currentFilter = "all"; let currentSearch = ""; /* loading + error */
/* stats line */ .stats { display: flex; justify-content: space-between; margin-bottom: 1.5rem; font-size: 0.85rem; color: #bfd1cf; padding: 0 0.2rem; }
container.innerHTML = cardsHTML; }
<script> // ============================================================ // PRE-DEFINED METADATA: I Dream of Jeannie items on archive.org // Real identifiers, direct links to open content (episodes, promos, specials) // Each object contains identifier, title, year, description, type, thumbnail hint // ============================================================ const JEANNIE_ARCHIVE_ITEMS = [ { identifier: "I_Dream_of_Jeannie_S01E01", title: "S01E01 - The Lady in the Bottle", year: 1965, description: "Pilot episode: astronaut Tony Nelson finds a mysterious bottle on a deserted island and releases a beautiful 2,000-year-old genie.", type: "episode", thumbnail: "https://archive.org/download/I_Dream_of_Jeannie_S01E01/__ia_thumb.jpg", externalUrl: "https://archive.org/details/I_Dream_of_Jeannie_S01E01" }, { identifier: "I_Dream_of_Jeannie_S01E02", title: "S01E02 - My Hero?", year: 1965, description: "Jeannie decides to make Tony a hero at the NASA base, but her magical help leads to hilarious chaos.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/I_Dream_of_Jeannie_S01E02" }, { identifier: "I_Dream_of_Jeannie_S01E03", title: "S01E03 - Guess What Happened on the Way to the Moon?", year: 1965, description: "Jeannie sneaks aboard Tony's flight to the moon, causing unexpected and funny situations.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieS01E03GuessWhatHappenedOnTheWayToTheMoon" }, { identifier: "I_Dream_of_Jeannie_S02E01", title: "S02E01 - The Greatest Invention in the World", year: 1966, description: "Dr. Bellows gets suspicious again while Jeannie tries to help Tony with a top-secret project.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieS02E01TheGreatestInventionInTheWorld" }, { identifier: "jeannie_promo_nbc_1967", title: "NBC Fall Promo - I Dream of Jeannie (1967)", year: 1967, description: "Vintage network promo featuring Barbara Eden & Larry Hagman. Classic 60s advertisement.", type: "promo", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieNBCTVPromo1967" }, { identifier: "jeannie_bloopers_reel", title: "I Dream of Jeannie - Bloopers & Gag Reel", year: 1970, description: "Rare behind-the-scenes outtakes and funny moments from the set of Jeannie.", type: "featurette", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieBloopers" }, { identifier: "IDreamOfJeannieS03E06", title: "S03E06 - The Mod Party", year: 1967, description: "Jeannie throws a groovy 60s mod party, much to Tony's dismay. Guest star vibes.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieS03E06TheModParty" }, { identifier: "jeannie_interview_barbara_eden", title: "Barbara Eden Interview - Remembering Jeannie", year: 2001, description: "Interview with Barbara Eden reflecting on the iconic role and cultural impact of the show.", type: "featurette", thumbnail: "", externalUrl: "https://archive.org/details/BarbaraEdenInterviewIDreamOfJeannie" }, { identifier: "IDreamOfJeannie_Christmas_ep", title: "S04E15 - The World's Greatest Lover (Christmas Episode)", year: 1968, description: "Holiday classic where Jeannie uses her magic to help Tony's romantic side.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieS04E15TheWorldsGreatestLover" }, { identifier: "jeannie_cartoon_promo", title: "I Dream of Jeannie Animated Special Promo", year: 1973, description: "Rare animated promo / Saturday morning cartoon preview featuring Jeannie.", type: "promo", thumbnail: "", externalUrl: "https://archive.org/details/JeannieAnimatedPromo1973" }, { identifier: "IDreamOfJeannie_Season5_Clip", title: "S05E01 - Jeannie and the Wild Pipchick", year: 1969, description: "Jeannie meets a wild relative, laughter ensues at Cocoa Beach.", type: "episode", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeannieS05E01JeannieAndTheWildPipchick" }, { identifier: "jeannie_archive_panel", title: "Paley Center Panel: I Dream of Jeannie Reunion", year: 2003, description: "Full panel discussion with cast and creators, celebrating the legacy.", type: "featurette", thumbnail: "", externalUrl: "https://archive.org/details/IDreamOfJeanniePaleyPanel" } ];
function setActiveFilterButton(type) { filterBtns.forEach(btn => { const btnType = btn.getAttribute("data-type"); if (btnType === type) { btn.classList.add("active"); } else { btn.classList.remove("active"); } }); } Guest star vibes
filterBtns.forEach(btn => { btn.addEventListener("click", () => { const type = btn.getAttribute("data-type"); currentFilter = type; setActiveFilterButton(type); renderCards(); }); });