Jelajah Teleskop Seru!<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Fredoka', sans-serif;\n background-color: #FFFBEB; \/* LEGO Yellow primary background *\/\n color: #E4002B; \/* LEGO Red primary text *\/\n }\n .bg-primary { background-color: #FFFBEB; }\n .bg-secondary { background-color: #FFDB4D; } \/* Softer yellow for secondary background *\/\n .text-primary { color: #E4002B; }\n .text-secondary { color: #A3001D; } \/* Darker Red softer text *\/\n .accent-color { background-color: #E4002B; } \/* LEGO Red for buttons *\/\n .accent-text { color: #FFFFFF; } \/* White for contrast on accent *\/\n .highlight-color { color: #FF8200; } \/* LEGO Orange for titles\/highlights *\/\n .section {\n scroll-margin-top: 80px;\n }\n .nav-link {\n transition: color 0.3s ease;\n font-weight: 600;\n }\n .nav-link:hover, .nav-link.active {\n color: #FF8200; \/* LEGO Orange highlight for active nav *\/\n }\n .interactive-hotspot {\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: rgba(228, 0, 43, 0.8); \/* LEGO Red hotspot *\/\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n font-size: 1.25rem;\n border: 3px solid white;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n }\n .interactive-hotspot:hover {\n transform: scale(1.25);\n background-color: rgba(228, 0, 43, 1);\n }\n .comparison-tab {\n transition: all 0.3s ease;\n background-color: #FF8200; \/* LEGO Orange for tabs *\/\n color: #FFFFFF; \/* White text on tabs *\/\n border: none;\n cursor: pointer;\n font-weight: 600;\n }\n .comparison-tab.active {\n background-color: #E4002B; \/* LEGO Red active tab *\/\n color: #FFFFFF;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 40vh;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .loader {\n border-top-color: #E4002B; \/* Loader color matches accent *\/\n -webkit-animation: spinner 1.5s linear infinite;\n animation: spinner 1.5s linear infinite;\n }\n\n @-webkit-keyframes spinner {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n\n @keyframes spinner {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n textarea::placeholder {\n color: #B04A4A; \/* Muted red placeholder *\/\n font-family: 'Inter', sans-serif;\n }\n #gemini-answer-text, #celestial-facts-text {\n white-space: pre-wrap;\n }\n \/* Custom style for diagram placeholder *\/\n .telescope-diagram-placeholder {\n background-color: #FFDB4D; \/* Match secondary background *\/\n color: #E4002B; \/* Match primary text color *\/\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n font-size: 1.5rem;\n text-align: center;\n border: 4px dashed #FF8200; \/* LEGO Orange dashed border *\/\n }\n <\/style>\n<\/head>\n<body class=\"bg-primary text-primary\">\n\n <header class=\"bg-primary\/80 backdrop-blur-md sticky top-0 z-50 shadow-md\">\n <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <h1 class=\"text-3xl font-bold text-highlight-color\">✨ Jelajah Teleskop Seru!<\/h1>\n <div class=\"hidden md:flex space-x-6\">\n <a href=\"#fungsi\" class=\"nav-link text-xl\">Fungsi<\/a>\n <a href=\"#anatomi\" class=\"nav-link text-xl\">Anatomi<\/a>\n <a href=\"#jenis\" class=\"nav-link text-xl\">Jenis<\/a>\n <a href=\"#fondasi\" class=\"nav-link text-xl\">Fondasi<\/a>\n <a href=\"#aksesoris\" class=\"nav-link text-xl\">Aksesori<\/a>\n <a href=\"#sejarah\" class=\"nav-link text-xl\">Sejarah<\/a>\n <a href=\"#tanya-gemini\" class=\"nav-link text-xl\">Tanya Gemini<\/a>\n <a href=\"#eksplorasi-llm\" class=\"nav-link text-xl\">Jelajahi Benda Langit<\/a>\n <\/div>\n <div class=\"md:hidden\">\n <button id=\"menu-btn\" class=\"text-3xl text-highlight-color\">\u2630<\/button>\n <\/div>\n <\/nav>\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-primary\/95\">\n <a href=\"#fungsi\" class=\"block py-3 px-6 nav-link text-lg\">Fungsi<\/a>\n <a href=\"#anatomi\" class=\"block py-3 px-6 nav-link text-lg\">Anatomi<\/a>\n <a href=\"#jenis\" class=\"block py-3 px-6 nav-link text-lg\">Jenis<\/a>\n <a href=\"#fondasi\" class=\"block py-3 px-6 nav-link text-lg\">Fondasi<\/a>\n <a href=\"#aksesoris\" class=\"block py-3 px-6 nav-link text-lg\">Aksesori<\/a>\n <a href=\"#sejarah\" class=\"block py-3 px-6 nav-link text-lg\">Sejarah<\/a>\n <a href=\"#tanya-gemini\" class=\"block py-3 px-6 nav-link text-lg\">Tanya Gemini<\/a>\n <a href=\"#eksplorasi-llm\" class=\"block py-3 px-6 nav-link text-lg\">Jelajahi Benda Langit<\/a>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto px-6\">\n <section id=\"hero\" class=\"text-center py-20\">\n <h2 class=\"text-5xl md:text-7xl font-bold mb-4 text-highlight-color\">Siap Melihat Bintang? ✨<\/h2>\n <p class=\"text-xl md:text-2xl text-secondary max-w-3xl mx-auto\">Ayo, petualang cilik! Aplikasi ini akan ajak kamu keliling alam semesta dan kenalan sama alat ajaib bernama teleskop. Siap-siap terkejut dengan rahasia langit!<\/p>\n <\/section>\n\n <section id=\"fungsi\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Gimana Sih Teleskop Bekerja?<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop itu seperti “ember cahaya” super. Dia ngumpulin cahaya dari bintang-bintang biar kita bisa lihat lebih jelas. Yuk, lihat animasinya!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <canvas id=\"light-animation\" class=\"w-full h-72 rounded-xl bg-gray-800 shadow-md\"><\/canvas>\n <\/div>\n <div class=\"space-y-6\">\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1. Kumpulin Cahaya!<\/h4>\n <p class=\"text-secondary text-lg\">Lensa besar di depan teleskop menangkap cahaya dari benda-benda jauh. Semakin besar lensanya, semakin banyak cahaya yang terkumpul, dan gambar jadi lebih terang!<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">2. Fokusin Cahaya!<\/h4>\n <p class=\"text-secondary text-lg\">Cahaya yang sudah dikumpulkan akan difokuskan ke satu titik, biar gambarnya jadi tajam, nggak buram.<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">3. Bikin Gambar Lebih Besar!<\/h4>\n <p class=\"text-secondary text-lg\">Nah, terakhir, lensa kecil di tempat kita ngintip akan memperbesar gambar yang sudah fokus tadi. Jadi, bintang atau planet yang jauh itu kelihatan lebih dekat!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"anatomi\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Kenalan Sama Bagian Teleskop!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Setiap bagian teleskop punya tugasnya sendiri. Yuk, pencet nomornya biar tahu nama dan fungsinya!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-start\">\n <div class=\"relative w-full max-w-lg mx-auto aspect-[3\/4] p-4 bg-secondary rounded-2xl shadow-lg telescope-diagram-placeholder\">\n \n <p class=\"text-secondary\">Diagram Teleskop<\/p>\n <div id=\"hotspot-1\" data-part=\"finderscope\" class=\"interactive-hotspot\" style=\"top: 15%; left: 30%;\">1<\/div>\n <div id=\"hotspot-2\" data-part=\"objective\" class=\"interactive-hotspot\" style=\"top: 45%; left: 10%;\">2<\/div>\n <div id=\"hotspot-3\" data-part=\"tube\" class=\"interactive-hotspot\" style=\"top: 50%; left: 50%;\">3<\/div>\n <div id=\"hotspot-4\" data-part=\"focuser\" class=\"interactive-hotspot\" style=\"top: 75%; left: 35%;\">4<\/div>\n <div id=\"hotspot-5\" data-part=\"eyepiece\" class=\"interactive-hotspot\" style=\"top: 85%; left: 45%;\">5<\/div>\n <div id=\"hotspot-6\" data-part=\"mount\" class=\"interactive-hotspot\" style=\"top: 70%; left: 70%;\">6<\/div>\n <\/div>\n <div id=\"anatomy-info\" class=\"p-8 bg-secondary rounded-2xl min-h-[300px] shadow-lg\">\n <h4 id=\"anatomy-title\" class=\"font-bold text-3xl mb-4 text-highlight-color\">Pencet Nomornya Ya!<\/h4>\n <p id=\"anatomy-text\" class=\"text-secondary text-xl\">Klik di lingkaran merah dengan angka pada area diagram teleskop di sebelah kiri untuk tahu nama dan cerita seru tentang bagian-bagian teleskop!<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"jenis\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Pilih Teleskop Impianmu!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Ada tiga jenis teleskop yang paling banyak dipakai. Masing-masing punya kehebatan sendiri. Pilih salah satu tombol di bawah untuk membandingkan!<\/p>\n <\/div>\n <div class=\"flex justify-center space-x-3 md:space-x-6 mb-8\">\n <button data-type=\"refractor\" class=\"comparison-tab active px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Refraktor<\/button>\n <button data-type=\"reflector\" class=\"comparison-tab px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Reflektor<\/button>\n <button data-type=\"catadioptric\" class=\"comparison-tab px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Gabungan<\/button>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"p-6 bg-primary rounded-xl shadow-md\">\n <h4 id=\"comparison-title\" class=\"font-bold text-3xl mb-2 text-highlight-color\">Teleskop Refraktor (Lensa Kaca!)<\/h4>\n <p id=\"comparison-text\" class=\"text-secondary text-lg mb-4\">Teleskop ini pakai lensa kaca besar untuk mengumpulkan cahaya. Desainnya klasik, mirip teropong mata biasa. Bagus banget buat lihat Bulan dan planet yang terang. Tapi kalau ukurannya besar, bisa mahal, lho!<\/p>\n <div id=\"comparison-details\" class=\"text-base space-y-2 text-secondary\">\n <p>✅ **Hebatnya:** Gampang dirawat, gambarnya jelas dan bersih.<\/p>\n <p>❌ **Kekurangannya:** Lumayan mahal kalau lensanya besar, kadang ada sedikit warna aneh di pinggir objek.<\/p>\n <p>🌟 **Cocok Untuk:** Anak-anak pemula, lihat Bulan dan planet.<\/p>\n <\/div>\n <\/div>\n <div class=\"chart-container bg-primary p-4 rounded-xl shadow-md\">\n <canvas id=\"comparison-chart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"fondasi\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Alas Teleskop yang Kuat!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop itu butuh “kaki” yang kuat biar nggak goyang-goyang. Ada dua jenis alas utama, yuk kita kenalan!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"p-8 bg-secondary rounded-2xl shadow-lg\">\n <h4 class=\"font-bold text-3xl mb-4 text-center text-highlight-color\">Alas Atas-Bawah (Alt-Azimuth)<\/h4>\n <p class=\"text-lg text-secondary mb-4\">Alas ini paling gampang dipakai! Bisa digerakin ke atas-bawah dan ke kiri-kanan, persis kayak tripod kamera. Cocok buat kamu yang baru mulai dan pengen lihat benda di Bumi juga!<\/p>\n <ul class=\"list-disc list-inside space-y-2 text-secondary text-lg\">\n <li>✅ **Hebatnya:** Gampang dipakai, ringan, murah.<\/li>\n <li>❌ **Kekurangannya:** Bintang atau planet bisa cepat “kabur” dari pandangan karena Bumi terus berputar.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-8 bg-secondary rounded-2xl shadow-lg\">\n <h4 class=\"font-bold text-3xl mb-4 text-center text-highlight-color\">Alas Ngikutin Bintang (Ekuatorial)<\/h4>\n <p class=\"text-lg text-secondary mb-4\">Alas ini lebih pintar! Dia bisa “ngikutin” pergerakan bintang biar bintangnya tetep kelihatan di teleskop. Bagus banget buat motret bintang! Tapi agak sedikit ribet kalau baru pertama kali pakai.<\/p>\n <ul class=\"list-disc list-inside space-y-2 text-secondary text-lg\">\n <li>✅ **Hebatnya:** Bintang dan planet akan tetap terlihat, cocok buat motret langit.<\/li>\n <li>❌ **Kekurangannya:** Agak berat dan perlu sedikit belajar cara setelnya.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"aksesoris\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Alat Bantu Seru untuk Teleskopmu! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskopmu bisa makin hebat dengan alat bantu ini. Yuk, kenalan!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">➕<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Lensa Pembesar Ekstra!<\/h4>\n <p class=\"text-secondary text-lg\">Ini namanya Lensa Barlow. Kalau dipasang ke teleskop, dia bisa bikin perbesaran lensamu jadi dua atau tiga kali lipat! Jadi, planet kelihatan makin gede!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🌑<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Kacamata untuk Bulan!<\/h4>\n <p class=\"text-secondary text-lg\">Bulan itu terang banget kalau dilihat pakai teleskop. Filter Bulan ini kayak kacamata hitam buat teleskopmu, biar matamu nyaman dan bisa lihat detail Bulan lebih jelas!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🗺️<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Peta Harta Karun Bintang!<\/h4>\n <p class=\"text-secondary text-lg\">Mau cari bintang atau galaksi tertentu? Pakai Peta Bintang atau aplikasi di HP-mu. Dia tunjukkin di mana bintang-bintang itu bersembunyi di langit!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🔴<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Senter Rahasia Malam!<\/h4>\n <p class=\"text-secondary text-lg\">Saat mengamati bintang, kita butuh gelap. Senter merah ini bantu kamu lihat alat tanpa bikin matamu kaget sama cahaya putih yang bisa bikin mata sulit lihat bintang!<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"sejarah\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Kisah Seru Teleskop!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop punya banyak cerita menarik yang mengubah cara kita melihat dunia. Yuk, kita lihat beberapa kisahnya!<\/p>\n <\/div>\n <div class=\"space-y-8 relative before:absolute before:inset-0 before:ml-5 before:h-full before:w-1 before:bg-highlight-color\/50 md:before:mx-auto md:before:left-0\">\n <div class=\"relative flex items-center md:justify-end md:pr-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1608: Penemuan Kaca Ajaib! 👓<\/h4>\n <p class=\"text-secondary text-lg\">Ada kakek-kakek tukang kacamata namanya Hans Lippershey dari Belanda. Dia bikin alat yang bisa bikin benda jauh jadi dekat! Walaupun patennya ditolak, idenya menyebar luas.<\/p>\n <\/div>\n <\/div>\n <div class=\"relative flex items-center md:justify-start md:pl-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1609: Galileo Jadi Pahlawan Bintang! 🧑‍🔬<\/h4>\n <p class=\"text-secondary text-lg\">Galileo Galilei dengar kabar soal kaca ajaib itu, lalu dia bikin sendiri yang lebih canggih. Dia orang pertama yang pakai teleskopnya buat ngintip langit! Dia lihat kawah Bulan dan bulan-bulan di sekitar Jupiter. Keren banget, kan?<\/p>\n <\/div>\n <\/div>\n <div class=\"relative flex items-center md:justify-end md:pr-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1990: Teleskop di Luar Angkasa! 🚀<\/h4>\n <p class=\"text-secondary text-lg\">Ada teleskop namanya Hubble, dia dikirim ke luar angkasa! Awalnya sempat “sakit”, tapi astronot-astronot hebat memperbaikinya. Sekarang, Hubble kirim gambar-gambar alam semesta yang paling indah dan menakjubkan!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"tanya-gemini\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Tanya Gemini, Si Pintar! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Punya pertanyaan seru tentang teleskop atau bintang? Tanya aja ke Gemini, dia tahu banyak!<\/p>\n <\/div>\n <div class=\"max-w-3xl mx-auto p-8 bg-primary rounded-2xl shadow-xl\">\n <textarea id=\"gemini-question-input\" class=\"w-full p-4 rounded-xl border border-gray-300 focus:outline-none focus:ring-3 focus:ring-highlight-color mb-4 text-lg resize-y min-h-[100px]\" placeholder=\"Contoh: Kenapa bintang berkelip? Apa itu galaksi?\"><\/textarea>\n <button id=\"ask-gemini-btn\" class=\"w-full accent-color text-accent-text py-4 rounded-xl font-semibold text-xl hover:opacity-90 transition duration-300 shadow-lg\">Tanya Gemini Sekarang!<\/button>\n <div id=\"gemini-loading\" class=\"mt-6 text-center text-secondary hidden\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mx-auto mb-2\"><\/div>\n Gemini lagi mikir… Sabar ya!\n <\/div>\n <div id=\"gemini-answer\" class=\"mt-8 p-6 bg-secondary rounded-xl text-secondary hidden\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Jawaban Seru dari Gemini:<\/h4>\n <p id=\"gemini-answer-text\" class=\"text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"eksplorasi-llm\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Fakta Seru Benda Langit! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Mau tahu cerita unik tentang planet favoritmu atau bintang yang paling terang? Ketik namanya di sini!<\/p>\n <\/div>\n <div class=\"max-w-3xl mx-auto p-8 bg-secondary rounded-2xl shadow-xl\">\n <textarea id=\"celestial-object-input\" class=\"w-full p-4 rounded-xl border border-gray-300 focus:outline-none focus:ring-3 focus:ring-highlight-color mb-4 text-lg resize-y min-h-[100px]\" placeholder=\"Contoh: Mars, Matahari, Bima Sakti\"><\/textarea>\n <button id=\"get-facts-btn\" class=\"w-full accent-color text-accent-text py-4 rounded-xl font-semibold text-xl hover:opacity-90 transition duration-300 shadow-lg\">Cari Fakta!<\/button>\n <div id=\"celestial-loading\" class=\"mt-6 text-center text-secondary hidden\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mx-auto mb-2\"><\/div>\n Gemini lagi mencari… Tunggu sebentar!\n <\/div>\n <div id=\"celestial-facts\" class=\"mt-8 p-6 bg-primary rounded-xl text-secondary hidden\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Fakta tentang <span id=\"celestial-object-name\"><\/span>:<\/h4>\n <p id=\"celestial-facts-text\" class=\"text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-secondary mt-16\">\n <div class=\"container mx-auto px-6 py-10 text-center text-secondary\">\n <p class=\"text-lg font-semibold\">Dibuat dengan cinta untuk para penjelajah kecil.<\/p>\n <p class=\"text-base mt-2\">Ayo terus belajar dan menjelajahi keajaiban alam semesta!<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const anatomyData = {\n finderscope: {\n title: '1. Teropong Kecil (Finderscope)',\n text: 'Ini teleskop kecil di samping teleskop besar. Gunanya biar kita gampang nyari bintang atau planet di langit sebelum melihat pakai yang besar!'\n },\n objective: {\n title: '2. Lensa Besar \/ Cermin Utama',\n text: 'Ini bagian paling penting! Dia yang pertama ngumpulin cahaya dari benda langit. Semakin besar dia, semakin banyak cahaya yang ditangkap, jadi gambar bintangnya makin terang!'\n },\n tube: {\n title: '3. Tabung Teleskop',\n text: 'Ini adalah \"rumah\" buat lensa dan cermin di dalam. Dia jaga biar semuanya aman dari debu dan cahaya yang mengganggu.'\n },\n focuser: {\n title: '4. Pemutar Fokus (Focuser)',\n text: 'Putar bagian ini biar gambar bintangnya jadi jelas dan nggak buram! Mirip kayak kamu main kamera biar fokus.'\n },\n eyepiece: {\n title: '5. Lensa Mata (Eyepiece)',\n text: 'Ini lensa kecil tempat kamu ngintip. Kalau diganti-ganti, gambar bintangnya bisa jadi lebih besar atau lebih kecil, sesuai yang kamu mau!'\n },\n mount: {\n title: '6. Alas & Kaki Teleskop (Mounting & Tripod)',\n text: 'Ini bagian yang bikin teleskop berdiri tegak dan nggak goyang. Penting banget biar gambar bintangnya nggak ikut goyang!'\n }\n };\n\n const comparisonData = {\n refractor: {\n title: 'Teleskop Refraktor (Lensa Kaca!)',\n text: 'Teleskop ini pakai lensa kaca besar untuk mengumpulkan cahaya. Desainnya klasik, mirip teropong mata biasa. Bagus banget buat lihat Bulan dan planet yang terang. Tapi kalau ukurannya besar, bisa mahal, lho!',\n details: {\n pros: 'Gampang dirawat, gambarnya jelas dan bersih.',\n cons: 'Lumayan mahal kalau lensanya besar, kadang ada sedikit warna aneh di pinggir objek.',\n ideal: 'Anak-anak pemula, lihat Bulan dan planet.'\n },\n chartData: [8, 9, 4, 9, 5]\n },\n reflector: {\n title: 'Teleskop Reflektor (Cermin Pantul!)',\n text: 'Teleskop ini pakai cermin besar di dalamnya untuk mengumpulkan cahaya. Harganya lebih terjangkau kalau mau yang ukurannya besar. Cocok buat lihat galaksi dan nebula yang redup!',\n details: {\n pros: 'Lebih murah untuk ukuran besar, gambar terang.',\n cons: 'Cerminnya perlu dibersihkan kadang-kadang, agak lebih sulit dirawat.',\n ideal: 'Anak-anak yang sudah sedikit mahir, suka lihat galaksi.'\n },\n chartData: [5, 6, 9, 6, 9]\n },\n catadioptric: {\n title: 'Teleskop Gabungan (Lensa & Cermin!)',\n text: 'Teleskop ini gabungan lensa dan cermin, jadi ukurannya bisa kecil tapi bisa lihat benda jauh dengan bagus! Gampang dibawa ke mana-mana. Pilihan serbaguna yang hebat!',\n details: {\n pros: 'Kecil dan mudah dibawa, bisa lihat banyak objek, gambar bagus.',\n cons: 'Agak mahal, kalau kena benturan perlu diperbaiki ahlinya.',\n ideal: 'Anak-anak yang suka menjelajah dan motret bintang.'\n },\n chartData: [9, 7, 7, 8, 7]\n }\n };\n\n const anatomyInfoTitle = document.getElementById('anatomy-title');\n const anatomyInfoText = document.getElementById('anatomy-text');\n const hotspots = document.querySelectorAll('.interactive-hotspot');\n\n hotspots.forEach(hotspot => {\n hotspot.addEventListener('click', () => {\n const part = hotspot.dataset.part;\n const data = anatomyData[part];\n anatomyInfoTitle.textContent = data.title;\n anatomyInfoText.textContent = data.text;\n });\n });\n\n const comparisonTabs = document.querySelectorAll('.comparison-tab');\n const comparisonTitle = document.getElementById('comparison-title');\n const comparisonText = document.getElementById('comparison-text');\n const comparisonDetails = document.getElementById('comparison-details');\n \n const ctx = document.getElementById('comparison-chart').getContext('2d');\n const comparisonChart = new Chart(ctx, {\n type: 'radar',\n data: {\n labels: ['Gampang Dibawa', 'Gampang Dirawat', 'Harga\/Ukuran', 'Kualitas Planet', 'Kualitas Galaksi'],\n datasets: [{\n label: 'Skor Kehebatan',\n data: comparisonData.refractor.chartData,\n backgroundColor: 'rgba(228, 0, 43, 0.4)', \/* LEGO Red with opacity *\/\n borderColor: 'rgba(228, 0, 43, 1)', \/* LEGO Red *\/\n borderWidth: 3,\n pointBackgroundColor: 'rgba(255, 130, 0, 1)', \/* LEGO Orange point color *\/\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(255, 130, 0, 1)'\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { color: 'rgba(163, 0, 29, 0.3)' }, \/* Darker Red grid lines *\/\n grid: { color: 'rgba(163, 0, 29, 0.3)' },\n pointLabels: { color: '#E4002B', font: { size: 14, family: 'Fredoka' } }, \/* LEGO Red, playful font *\/\n suggestedMin: 0,\n suggestedMax: 10,\n ticks: {\n backdropColor: 'rgba(255, 205, 0, 1)', \/* Match primary background *\/\n color: '#A3001D', \/* Darker Red for ticks *\/\n stepSize: 2,\n font: { size: 12, family: 'Fredoka' }\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n bodyFont: { family: 'Inter' },\n titleFont: { family: 'Inter' }\n }\n }\n }\n });\n\n function updateComparison(type) {\n const data = comparisonData[type];\n comparisonTitle.textContent = data.title;\n comparisonText.textContent = data.text;\n comparisonDetails.innerHTML = `\n <p>✅ **Hebatnya:** ${data.details.pros}<\/p>\n <p>❌ **Kekurangannya:** ${data.details.cons}<\/p>\n <p>🌟 **Cocok Untuk:** ${data.details.ideal}<\/p>\n `;\n comparisonChart.data.datasets[0].data = data.chartData;\n comparisonChart.update();\n }\n\n comparisonTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n comparisonTabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n const type = tab.dataset.type;\n updateComparison(type);\n });\n });\n\n const menuBtn = document.getElementById('menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n menuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n \n const navLinks = document.querySelectorAll('.nav-link');\n navLinks.forEach(link => {\n link.addEventListener('click', () => {\n if(!mobileMenu.classList.contains('hidden')) {\n mobileMenu.classList.add('hidden');\n }\n });\n });\n\n const lightCanvas = document.getElementById('light-animation');\n const lightCtx = lightCanvas.getContext('2d');\n let animationFrameId;\n let particles = [];\n\n function resizeCanvas() {\n lightCanvas.width = lightCanvas.offsetWidth;\n lightCanvas.height = lightCanvas.offsetHeight;\n }\n\n function createParticles() {\n particles = [];\n for (let i = 0; i < 50; i++) {\n particles.push({\n x: Math.random() * lightCanvas.width \/ 3,\n y: Math.random() * lightCanvas.height,\n vx: 2 + Math.random() * 1,\n vy: 0\n });\n }\n }\n \n function drawLightAnimation() {\n lightCtx.clearRect(0, 0, lightCanvas.width, lightCanvas.height);\n \n const lensCenterX = lightCanvas.width * 0.4;\n const lensCenterY = lightCanvas.height \/ 2;\n const lensHeight = lightCanvas.height * 0.8;\n\n lightCtx.strokeStyle = 'rgba(228, 0, 43, 0.8)'; \/* LEGO Red for light path *\/\n lightCtx.lineWidth = 4;\n lightCtx.beginPath();\n lightCtx.moveTo(lensCenterX, lensCenterY - lensHeight \/ 2);\n lightCtx.quadraticCurveTo(lensCenterX + 40, lensCenterY, lensCenterX, lensCenterY + lensHeight \/ 2);\n lightCtx.stroke();\n\n const focusPointX = lightCanvas.width * 0.75;\n const focusPointY = lightCanvas.height \/ 2;\n \n lightCtx.fillStyle = 'rgba(255, 255, 255, 0.9)';\n particles.forEach(p => {\n lightCtx.beginPath();\n lightCtx.arc(p.x, p.y, 3, 0, Math.PI * 2);\n lightCtx.fill();\n \n p.x += p.vx;\n \n if (p.x > lensCenterX) {\n const dx = focusPointX - p.x;\n const dy = focusPointY - p.y;\n const angle = Math.atan2(dy, dx);\n p.vx = Math.cos(angle) * 3.5;\n p.vy = Math.sin(angle) * 3.5;\n }\n p.y += p.vy;\n\n if (p.x > lightCanvas.width) {\n p.x = 0;\n p.y = Math.random() * lightCanvas.height;\n p.vx = 2 + Math.random() * 1;\n p.vy = 0;\n }\n });\n\n animationFrameId = requestAnimationFrame(drawLightAnimation);\n }\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n if (!animationFrameId) {\n resizeCanvas();\n createParticles();\n drawLightAnimation();\n }\n } else {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n animationFrameId = null;\n }\n }\n });\n }, { threshold: 0.1 });\n\n observer.observe(lightCanvas);\n window.addEventListener('resize', () => {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n animationFrameId = null;\n resizeCanvas();\n createParticles();\n drawLightAnimation();\n }\n });\n\n \/\/ Gemini API Integration - Tanya Gemini\n const geminiQuestionInput = document.getElementById('gemini-question-input');\n const askGeminiBtn = document.getElementById('ask-gemini-btn');\n const geminiLoading = document.getElementById('gemini-loading');\n const geminiAnswer = document.getElementById('gemini-answer');\n const geminiAnswerText = document.getElementById('gemini-answer-text');\n\n async function callGeminiApi(prompt, outputElement, loadingElement, buttonElement) {\n if (!prompt) {\n outputElement.textContent = 'Ayo, tulis pertanyaanmu dulu, ya!';\n outputElement.parentElement.classList.remove('hidden');\n return;\n }\n\n loadingElement.classList.remove('hidden');\n outputElement.parentElement.classList.add('hidden');\n outputElement.textContent = '';\n buttonElement.disabled = true;\n\n let chatHistory = [];\n chatHistory.push({ role: \"user\", parts: [{ text: prompt }] });\n const payload = { contents: chatHistory };\n const apiKey = \"\";\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;\n\n let retryCount = 0;\n const maxRetries = 5;\n const baseDelay = 1000; \/\/ 1 second\n\n while (retryCount < maxRetries) {\n try {\n const response = await fetch(apiUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (response.status === 429) { \/\/ Too Many Requests\n const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 500; \/\/ Exponential backoff with jitter\n console.warn(`Rate limit hit. Retrying in ${delay \/ 1000}s...`);\n await new Promise(res => setTimeout(res, delay));\n retryCount++;\n continue; \/\/ Retry the request\n }\n\n const result = await response.json();\n \n if (result.candidates && result.candidates.length > 0 &&\n result.candidates[0].content && result.candidates[0].content.parts &&\n result.candidates[0].content.parts.length > 0) {\n const text = result.candidates[0].content.parts[0].text;\n outputElement.textContent = text;\n outputElement.parentElement.classList.remove('hidden');\n } else {\n outputElement.textContent = 'Maaf, Gemini lagi pusing nih. Coba pertanyaan lain ya!';\n outputElement.parentElement.classList.remove('hidden');\n }\n break; \/\/ Exit loop on success\n } catch (error) {\n console.error('Error calling Gemini API:', error);\n outputElement.textContent = 'Wah, ada gangguan sinyal ke luar angkasa. Coba lagi nanti ya!';\n outputElement.parentElement.classList.remove('hidden');\n break; \/\/ Exit loop on critical error\n } finally {\n loadingElement.classList.add('hidden');\n buttonElement.disabled = false;\n }\n }\n\n if (retryCount === maxRetries) {\n outputElement.textContent = 'Gemini capek nih, nggak bisa jawab sekarang. Coba lagi nanti ya!';\n outputElement.parentElement.classList.remove('hidden');\n loadingElement.classList.add('hidden');\n buttonElement.disabled = false;\n }\n }\n\n askGeminiBtn.addEventListener('click', () => {\n callGeminiApi(geminiQuestionInput.value.trim(), geminiAnswerText, geminiLoading, askGeminiBtn);\n });\n\n \/\/ Gemini API Integration - Jelajahi Benda Langit\n const celestialObjectInput = document.getElementById('celestial-object-input');\n const getFactsBtn = document.getElementById('get-facts-btn');\n const celestialLoading = document.getElementById('celestial-loading');\n const celestialFacts = document.getElementById('celestial-facts');\n const celestialObjectName = document.getElementById('celestial-object-name');\n const celestialFactsText = document.getElementById('celestial-facts-text');\n\n getFactsBtn.addEventListener('click', () => {\n const objectName = celestialObjectInput.value.trim();\n if (!objectName) {\n celestialFactsText.textContent = 'Ups! Ketik dulu nama benda langitnya, ya.';\n celestialFacts.classList.remove('hidden');\n return;\n }\n celestialObjectName.textContent = objectName; \/\/ Set the object name in the title\n const prompt = `Berikan 3-5 fakta menarik tentang ${objectName} untuk anak-anak dengan bahasa yang sederhana dan ceria. Mulai dengan sapaan \"Hai, teman kecil!\" atau sejenisnya.`;\n callGeminiApi(prompt, celestialFactsText, celestialLoading, getFactsBtn);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"views":6,"_links":{"self":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":3,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":337,"date":"2025-08-13T10:39:34","date_gmt":"2025-08-13T03:39:34","guid":{"rendered":"http:\/\/imahnoong.com\/wp\/?p=337"},"modified":"2025-08-13T10:41:15","modified_gmt":"2025-08-13T03:41:15","slug":"jelajah-teleskop-seru","status":"publish","type":"post","link":"https:\/\/imahnoong.com\/wp\/2025\/08\/13\/jelajah-teleskop-seru\/","title":{"rendered":"JELAJAH TELESKOP SERU"},"content":{"rendered":"\n\n\n\n\n\n \n \n Jelajah Teleskop Seru!<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700&family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Fredoka', sans-serif;\n background-color: #FFFBEB; \/* LEGO Yellow primary background *\/\n color: #E4002B; \/* LEGO Red primary text *\/\n }\n .bg-primary { background-color: #FFFBEB; }\n .bg-secondary { background-color: #FFDB4D; } \/* Softer yellow for secondary background *\/\n .text-primary { color: #E4002B; }\n .text-secondary { color: #A3001D; } \/* Darker Red softer text *\/\n .accent-color { background-color: #E4002B; } \/* LEGO Red for buttons *\/\n .accent-text { color: #FFFFFF; } \/* White for contrast on accent *\/\n .highlight-color { color: #FF8200; } \/* LEGO Orange for titles\/highlights *\/\n .section {\n scroll-margin-top: 80px;\n }\n .nav-link {\n transition: color 0.3s ease;\n font-weight: 600;\n }\n .nav-link:hover, .nav-link.active {\n color: #FF8200; \/* LEGO Orange highlight for active nav *\/\n }\n .interactive-hotspot {\n position: absolute;\n width: 40px;\n height: 40px;\n background-color: rgba(228, 0, 43, 0.8); \/* LEGO Red hotspot *\/\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n font-size: 1.25rem;\n border: 3px solid white;\n box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n }\n .interactive-hotspot:hover {\n transform: scale(1.25);\n background-color: rgba(228, 0, 43, 1);\n }\n .comparison-tab {\n transition: all 0.3s ease;\n background-color: #FF8200; \/* LEGO Orange for tabs *\/\n color: #FFFFFF; \/* White text on tabs *\/\n border: none;\n cursor: pointer;\n font-weight: 600;\n }\n .comparison-tab.active {\n background-color: #E4002B; \/* LEGO Red active tab *\/\n color: #FFFFFF;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 40vh;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .loader {\n border-top-color: #E4002B; \/* Loader color matches accent *\/\n -webkit-animation: spinner 1.5s linear infinite;\n animation: spinner 1.5s linear infinite;\n }\n\n @-webkit-keyframes spinner {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n }\n\n @keyframes spinner {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n textarea::placeholder {\n color: #B04A4A; \/* Muted red placeholder *\/\n font-family: 'Inter', sans-serif;\n }\n #gemini-answer-text, #celestial-facts-text {\n white-space: pre-wrap;\n }\n \/* Custom style for diagram placeholder *\/\n .telescope-diagram-placeholder {\n background-color: #FFDB4D; \/* Match secondary background *\/\n color: #E4002B; \/* Match primary text color *\/\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px;\n font-size: 1.5rem;\n text-align: center;\n border: 4px dashed #FF8200; \/* LEGO Orange dashed border *\/\n }\n <\/style>\n<\/head>\n<body class=\"bg-primary text-primary\">\n\n <header class=\"bg-primary\/80 backdrop-blur-md sticky top-0 z-50 shadow-md\">\n <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <h1 class=\"text-3xl font-bold text-highlight-color\">✨ Jelajah Teleskop Seru!<\/h1>\n <div class=\"hidden md:flex space-x-6\">\n <a href=\"#fungsi\" class=\"nav-link text-xl\">Fungsi<\/a>\n <a href=\"#anatomi\" class=\"nav-link text-xl\">Anatomi<\/a>\n <a href=\"#jenis\" class=\"nav-link text-xl\">Jenis<\/a>\n <a href=\"#fondasi\" class=\"nav-link text-xl\">Fondasi<\/a>\n <a href=\"#aksesoris\" class=\"nav-link text-xl\">Aksesori<\/a>\n <a href=\"#sejarah\" class=\"nav-link text-xl\">Sejarah<\/a>\n <a href=\"#tanya-gemini\" class=\"nav-link text-xl\">Tanya Gemini<\/a>\n <a href=\"#eksplorasi-llm\" class=\"nav-link text-xl\">Jelajahi Benda Langit<\/a>\n <\/div>\n <div class=\"md:hidden\">\n <button id=\"menu-btn\" class=\"text-3xl text-highlight-color\">\u2630<\/button>\n <\/div>\n <\/nav>\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-primary\/95\">\n <a href=\"#fungsi\" class=\"block py-3 px-6 nav-link text-lg\">Fungsi<\/a>\n <a href=\"#anatomi\" class=\"block py-3 px-6 nav-link text-lg\">Anatomi<\/a>\n <a href=\"#jenis\" class=\"block py-3 px-6 nav-link text-lg\">Jenis<\/a>\n <a href=\"#fondasi\" class=\"block py-3 px-6 nav-link text-lg\">Fondasi<\/a>\n <a href=\"#aksesoris\" class=\"block py-3 px-6 nav-link text-lg\">Aksesori<\/a>\n <a href=\"#sejarah\" class=\"block py-3 px-6 nav-link text-lg\">Sejarah<\/a>\n <a href=\"#tanya-gemini\" class=\"block py-3 px-6 nav-link text-lg\">Tanya Gemini<\/a>\n <a href=\"#eksplorasi-llm\" class=\"block py-3 px-6 nav-link text-lg\">Jelajahi Benda Langit<\/a>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto px-6\">\n <section id=\"hero\" class=\"text-center py-20\">\n <h2 class=\"text-5xl md:text-7xl font-bold mb-4 text-highlight-color\">Siap Melihat Bintang? ✨<\/h2>\n <p class=\"text-xl md:text-2xl text-secondary max-w-3xl mx-auto\">Ayo, petualang cilik! Aplikasi ini akan ajak kamu keliling alam semesta dan kenalan sama alat ajaib bernama teleskop. Siap-siap terkejut dengan rahasia langit!<\/p>\n <\/section>\n\n <section id=\"fungsi\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Gimana Sih Teleskop Bekerja?<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop itu seperti “ember cahaya” super. Dia ngumpulin cahaya dari bintang-bintang biar kita bisa lihat lebih jelas. Yuk, lihat animasinya!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <canvas id=\"light-animation\" class=\"w-full h-72 rounded-xl bg-gray-800 shadow-md\"><\/canvas>\n <\/div>\n <div class=\"space-y-6\">\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1. Kumpulin Cahaya!<\/h4>\n <p class=\"text-secondary text-lg\">Lensa besar di depan teleskop menangkap cahaya dari benda-benda jauh. Semakin besar lensanya, semakin banyak cahaya yang terkumpul, dan gambar jadi lebih terang!<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">2. Fokusin Cahaya!<\/h4>\n <p class=\"text-secondary text-lg\">Cahaya yang sudah dikumpulkan akan difokuskan ke satu titik, biar gambarnya jadi tajam, nggak buram.<\/p>\n <\/div>\n <div class=\"p-4 rounded-xl bg-primary shadow-sm\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">3. Bikin Gambar Lebih Besar!<\/h4>\n <p class=\"text-secondary text-lg\">Nah, terakhir, lensa kecil di tempat kita ngintip akan memperbesar gambar yang sudah fokus tadi. Jadi, bintang atau planet yang jauh itu kelihatan lebih dekat!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"anatomi\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Kenalan Sama Bagian Teleskop!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Setiap bagian teleskop punya tugasnya sendiri. Yuk, pencet nomornya biar tahu nama dan fungsinya!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-start\">\n <div class=\"relative w-full max-w-lg mx-auto aspect-[3\/4] p-4 bg-secondary rounded-2xl shadow-lg telescope-diagram-placeholder\">\n \n <p class=\"text-secondary\">Diagram Teleskop<\/p>\n <div id=\"hotspot-1\" data-part=\"finderscope\" class=\"interactive-hotspot\" style=\"top: 15%; left: 30%;\">1<\/div>\n <div id=\"hotspot-2\" data-part=\"objective\" class=\"interactive-hotspot\" style=\"top: 45%; left: 10%;\">2<\/div>\n <div id=\"hotspot-3\" data-part=\"tube\" class=\"interactive-hotspot\" style=\"top: 50%; left: 50%;\">3<\/div>\n <div id=\"hotspot-4\" data-part=\"focuser\" class=\"interactive-hotspot\" style=\"top: 75%; left: 35%;\">4<\/div>\n <div id=\"hotspot-5\" data-part=\"eyepiece\" class=\"interactive-hotspot\" style=\"top: 85%; left: 45%;\">5<\/div>\n <div id=\"hotspot-6\" data-part=\"mount\" class=\"interactive-hotspot\" style=\"top: 70%; left: 70%;\">6<\/div>\n <\/div>\n <div id=\"anatomy-info\" class=\"p-8 bg-secondary rounded-2xl min-h-[300px] shadow-lg\">\n <h4 id=\"anatomy-title\" class=\"font-bold text-3xl mb-4 text-highlight-color\">Pencet Nomornya Ya!<\/h4>\n <p id=\"anatomy-text\" class=\"text-secondary text-xl\">Klik di lingkaran merah dengan angka pada area diagram teleskop di sebelah kiri untuk tahu nama dan cerita seru tentang bagian-bagian teleskop!<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"jenis\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Pilih Teleskop Impianmu!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Ada tiga jenis teleskop yang paling banyak dipakai. Masing-masing punya kehebatan sendiri. Pilih salah satu tombol di bawah untuk membandingkan!<\/p>\n <\/div>\n <div class=\"flex justify-center space-x-3 md:space-x-6 mb-8\">\n <button data-type=\"refractor\" class=\"comparison-tab active px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Refraktor<\/button>\n <button data-type=\"reflector\" class=\"comparison-tab px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Reflektor<\/button>\n <button data-type=\"catadioptric\" class=\"comparison-tab px-6 py-3 rounded-full text-xl font-semibold shadow-md hover:scale-105\">Gabungan<\/button>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"p-6 bg-primary rounded-xl shadow-md\">\n <h4 id=\"comparison-title\" class=\"font-bold text-3xl mb-2 text-highlight-color\">Teleskop Refraktor (Lensa Kaca!)<\/h4>\n <p id=\"comparison-text\" class=\"text-secondary text-lg mb-4\">Teleskop ini pakai lensa kaca besar untuk mengumpulkan cahaya. Desainnya klasik, mirip teropong mata biasa. Bagus banget buat lihat Bulan dan planet yang terang. Tapi kalau ukurannya besar, bisa mahal, lho!<\/p>\n <div id=\"comparison-details\" class=\"text-base space-y-2 text-secondary\">\n <p>✅ **Hebatnya:** Gampang dirawat, gambarnya jelas dan bersih.<\/p>\n <p>❌ **Kekurangannya:** Lumayan mahal kalau lensanya besar, kadang ada sedikit warna aneh di pinggir objek.<\/p>\n <p>🌟 **Cocok Untuk:** Anak-anak pemula, lihat Bulan dan planet.<\/p>\n <\/div>\n <\/div>\n <div class=\"chart-container bg-primary p-4 rounded-xl shadow-md\">\n <canvas id=\"comparison-chart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"fondasi\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Alas Teleskop yang Kuat!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop itu butuh “kaki” yang kuat biar nggak goyang-goyang. Ada dua jenis alas utama, yuk kita kenalan!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"p-8 bg-secondary rounded-2xl shadow-lg\">\n <h4 class=\"font-bold text-3xl mb-4 text-center text-highlight-color\">Alas Atas-Bawah (Alt-Azimuth)<\/h4>\n <p class=\"text-lg text-secondary mb-4\">Alas ini paling gampang dipakai! Bisa digerakin ke atas-bawah dan ke kiri-kanan, persis kayak tripod kamera. Cocok buat kamu yang baru mulai dan pengen lihat benda di Bumi juga!<\/p>\n <ul class=\"list-disc list-inside space-y-2 text-secondary text-lg\">\n <li>✅ **Hebatnya:** Gampang dipakai, ringan, murah.<\/li>\n <li>❌ **Kekurangannya:** Bintang atau planet bisa cepat “kabur” dari pandangan karena Bumi terus berputar.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-8 bg-secondary rounded-2xl shadow-lg\">\n <h4 class=\"font-bold text-3xl mb-4 text-center text-highlight-color\">Alas Ngikutin Bintang (Ekuatorial)<\/h4>\n <p class=\"text-lg text-secondary mb-4\">Alas ini lebih pintar! Dia bisa “ngikutin” pergerakan bintang biar bintangnya tetep kelihatan di teleskop. Bagus banget buat motret bintang! Tapi agak sedikit ribet kalau baru pertama kali pakai.<\/p>\n <ul class=\"list-disc list-inside space-y-2 text-secondary text-lg\">\n <li>✅ **Hebatnya:** Bintang dan planet akan tetap terlihat, cocok buat motret langit.<\/li>\n <li>❌ **Kekurangannya:** Agak berat dan perlu sedikit belajar cara setelnya.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"aksesoris\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Alat Bantu Seru untuk Teleskopmu! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskopmu bisa makin hebat dengan alat bantu ini. Yuk, kenalan!<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">➕<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Lensa Pembesar Ekstra!<\/h4>\n <p class=\"text-secondary text-lg\">Ini namanya Lensa Barlow. Kalau dipasang ke teleskop, dia bisa bikin perbesaran lensamu jadi dua atau tiga kali lipat! Jadi, planet kelihatan makin gede!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🌑<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Kacamata untuk Bulan!<\/h4>\n <p class=\"text-secondary text-lg\">Bulan itu terang banget kalau dilihat pakai teleskop. Filter Bulan ini kayak kacamata hitam buat teleskopmu, biar matamu nyaman dan bisa lihat detail Bulan lebih jelas!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🗺️<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Peta Harta Karun Bintang!<\/h4>\n <p class=\"text-secondary text-lg\">Mau cari bintang atau galaksi tertentu? Pakai Peta Bintang atau aplikasi di HP-mu. Dia tunjukkin di mana bintang-bintang itu bersembunyi di langit!<\/p>\n <\/div>\n <div class=\"p-6 bg-primary rounded-xl shadow-md flex flex-col items-center text-center\">\n <span class=\"text-5xl mb-4\">🔴<\/span> \n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Senter Rahasia Malam!<\/h4>\n <p class=\"text-secondary text-lg\">Saat mengamati bintang, kita butuh gelap. Senter merah ini bantu kamu lihat alat tanpa bikin matamu kaget sama cahaya putih yang bisa bikin mata sulit lihat bintang!<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"sejarah\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">Kisah Seru Teleskop!<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Teleskop punya banyak cerita menarik yang mengubah cara kita melihat dunia. Yuk, kita lihat beberapa kisahnya!<\/p>\n <\/div>\n <div class=\"space-y-8 relative before:absolute before:inset-0 before:ml-5 before:h-full before:w-1 before:bg-highlight-color\/50 md:before:mx-auto md:before:left-0\">\n <div class=\"relative flex items-center md:justify-end md:pr-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1608: Penemuan Kaca Ajaib! 👓<\/h4>\n <p class=\"text-secondary text-lg\">Ada kakek-kakek tukang kacamata namanya Hans Lippershey dari Belanda. Dia bikin alat yang bisa bikin benda jauh jadi dekat! Walaupun patennya ditolak, idenya menyebar luas.<\/p>\n <\/div>\n <\/div>\n <div class=\"relative flex items-center md:justify-start md:pl-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1609: Galileo Jadi Pahlawan Bintang! 🧑‍🔬<\/h4>\n <p class=\"text-secondary text-lg\">Galileo Galilei dengar kabar soal kaca ajaib itu, lalu dia bikin sendiri yang lebih canggih. Dia orang pertama yang pakai teleskopnya buat ngintip langit! Dia lihat kawah Bulan dan bulan-bulan di sekitar Jupiter. Keren banget, kan?<\/p>\n <\/div>\n <\/div>\n <div class=\"relative flex items-center md:justify-end md:pr-8\">\n <div class=\"hidden md:block w-1\/2\"><\/div>\n <div class=\"bg-secondary p-8 rounded-2xl shadow-lg w-full md:w-1\/2\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">1990: Teleskop di Luar Angkasa! 🚀<\/h4>\n <p class=\"text-secondary text-lg\">Ada teleskop namanya Hubble, dia dikirim ke luar angkasa! Awalnya sempat “sakit”, tapi astronot-astronot hebat memperbaikinya. Sekarang, Hubble kirim gambar-gambar alam semesta yang paling indah dan menakjubkan!<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"tanya-gemini\" class=\"section py-16 bg-secondary rounded-2xl shadow-lg\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Tanya Gemini, Si Pintar! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Punya pertanyaan seru tentang teleskop atau bintang? Tanya aja ke Gemini, dia tahu banyak!<\/p>\n <\/div>\n <div class=\"max-w-3xl mx-auto p-8 bg-primary rounded-2xl shadow-xl\">\n <textarea id=\"gemini-question-input\" class=\"w-full p-4 rounded-xl border border-gray-300 focus:outline-none focus:ring-3 focus:ring-highlight-color mb-4 text-lg resize-y min-h-[100px]\" placeholder=\"Contoh: Kenapa bintang berkelip? Apa itu galaksi?\"><\/textarea>\n <button id=\"ask-gemini-btn\" class=\"w-full accent-color text-accent-text py-4 rounded-xl font-semibold text-xl hover:opacity-90 transition duration-300 shadow-lg\">Tanya Gemini Sekarang!<\/button>\n <div id=\"gemini-loading\" class=\"mt-6 text-center text-secondary hidden\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mx-auto mb-2\"><\/div>\n Gemini lagi mikir… Sabar ya!\n <\/div>\n <div id=\"gemini-answer\" class=\"mt-8 p-6 bg-secondary rounded-xl text-secondary hidden\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Jawaban Seru dari Gemini:<\/h4>\n <p id=\"gemini-answer-text\" class=\"text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"eksplorasi-llm\" class=\"section py-16\">\n <div class=\"text-center mb-12\">\n <h3 class=\"text-4xl font-bold text-accent-color\">✨ Fakta Seru Benda Langit! ✨<\/h3>\n <p class=\"text-lg text-secondary mt-2 max-w-2xl mx-auto\">Mau tahu cerita unik tentang planet favoritmu atau bintang yang paling terang? Ketik namanya di sini!<\/p>\n <\/div>\n <div class=\"max-w-3xl mx-auto p-8 bg-secondary rounded-2xl shadow-xl\">\n <textarea id=\"celestial-object-input\" class=\"w-full p-4 rounded-xl border border-gray-300 focus:outline-none focus:ring-3 focus:ring-highlight-color mb-4 text-lg resize-y min-h-[100px]\" placeholder=\"Contoh: Mars, Matahari, Bima Sakti\"><\/textarea>\n <button id=\"get-facts-btn\" class=\"w-full accent-color text-accent-text py-4 rounded-xl font-semibold text-xl hover:opacity-90 transition duration-300 shadow-lg\">Cari Fakta!<\/button>\n <div id=\"celestial-loading\" class=\"mt-6 text-center text-secondary hidden\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mx-auto mb-2\"><\/div>\n Gemini lagi mencari… Tunggu sebentar!\n <\/div>\n <div id=\"celestial-facts\" class=\"mt-8 p-6 bg-primary rounded-xl text-secondary hidden\">\n <h4 class=\"font-bold text-2xl mb-2 text-highlight-color\">Fakta tentang <span id=\"celestial-object-name\"><\/span>:<\/h4>\n <p id=\"celestial-facts-text\" class=\"text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-secondary mt-16\">\n <div class=\"container mx-auto px-6 py-10 text-center text-secondary\">\n <p class=\"text-lg font-semibold\">Dibuat dengan cinta untuk para penjelajah kecil.<\/p>\n <p class=\"text-base mt-2\">Ayo terus belajar dan menjelajahi keajaiban alam semesta!<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const anatomyData = {\n finderscope: {\n title: '1. Teropong Kecil (Finderscope)',\n text: 'Ini teleskop kecil di samping teleskop besar. Gunanya biar kita gampang nyari bintang atau planet di langit sebelum melihat pakai yang besar!'\n },\n objective: {\n title: '2. Lensa Besar \/ Cermin Utama',\n text: 'Ini bagian paling penting! Dia yang pertama ngumpulin cahaya dari benda langit. Semakin besar dia, semakin banyak cahaya yang ditangkap, jadi gambar bintangnya makin terang!'\n },\n tube: {\n title: '3. Tabung Teleskop',\n text: 'Ini adalah \"rumah\" buat lensa dan cermin di dalam. Dia jaga biar semuanya aman dari debu dan cahaya yang mengganggu.'\n },\n focuser: {\n title: '4. Pemutar Fokus (Focuser)',\n text: 'Putar bagian ini biar gambar bintangnya jadi jelas dan nggak buram! Mirip kayak kamu main kamera biar fokus.'\n },\n eyepiece: {\n title: '5. Lensa Mata (Eyepiece)',\n text: 'Ini lensa kecil tempat kamu ngintip. Kalau diganti-ganti, gambar bintangnya bisa jadi lebih besar atau lebih kecil, sesuai yang kamu mau!'\n },\n mount: {\n title: '6. Alas & Kaki Teleskop (Mounting & Tripod)',\n text: 'Ini bagian yang bikin teleskop berdiri tegak dan nggak goyang. Penting banget biar gambar bintangnya nggak ikut goyang!'\n }\n };\n\n const comparisonData = {\n refractor: {\n title: 'Teleskop Refraktor (Lensa Kaca!)',\n text: 'Teleskop ini pakai lensa kaca besar untuk mengumpulkan cahaya. Desainnya klasik, mirip teropong mata biasa. Bagus banget buat lihat Bulan dan planet yang terang. Tapi kalau ukurannya besar, bisa mahal, lho!',\n details: {\n pros: 'Gampang dirawat, gambarnya jelas dan bersih.',\n cons: 'Lumayan mahal kalau lensanya besar, kadang ada sedikit warna aneh di pinggir objek.',\n ideal: 'Anak-anak pemula, lihat Bulan dan planet.'\n },\n chartData: [8, 9, 4, 9, 5]\n },\n reflector: {\n title: 'Teleskop Reflektor (Cermin Pantul!)',\n text: 'Teleskop ini pakai cermin besar di dalamnya untuk mengumpulkan cahaya. Harganya lebih terjangkau kalau mau yang ukurannya besar. Cocok buat lihat galaksi dan nebula yang redup!',\n details: {\n pros: 'Lebih murah untuk ukuran besar, gambar terang.',\n cons: 'Cerminnya perlu dibersihkan kadang-kadang, agak lebih sulit dirawat.',\n ideal: 'Anak-anak yang sudah sedikit mahir, suka lihat galaksi.'\n },\n chartData: [5, 6, 9, 6, 9]\n },\n catadioptric: {\n title: 'Teleskop Gabungan (Lensa & Cermin!)',\n text: 'Teleskop ini gabungan lensa dan cermin, jadi ukurannya bisa kecil tapi bisa lihat benda jauh dengan bagus! Gampang dibawa ke mana-mana. Pilihan serbaguna yang hebat!',\n details: {\n pros: 'Kecil dan mudah dibawa, bisa lihat banyak objek, gambar bagus.',\n cons: 'Agak mahal, kalau kena benturan perlu diperbaiki ahlinya.',\n ideal: 'Anak-anak yang suka menjelajah dan motret bintang.'\n },\n chartData: [9, 7, 7, 8, 7]\n }\n };\n\n const anatomyInfoTitle = document.getElementById('anatomy-title');\n const anatomyInfoText = document.getElementById('anatomy-text');\n const hotspots = document.querySelectorAll('.interactive-hotspot');\n\n hotspots.forEach(hotspot => {\n hotspot.addEventListener('click', () => {\n const part = hotspot.dataset.part;\n const data = anatomyData[part];\n anatomyInfoTitle.textContent = data.title;\n anatomyInfoText.textContent = data.text;\n });\n });\n\n const comparisonTabs = document.querySelectorAll('.comparison-tab');\n const comparisonTitle = document.getElementById('comparison-title');\n const comparisonText = document.getElementById('comparison-text');\n const comparisonDetails = document.getElementById('comparison-details');\n \n const ctx = document.getElementById('comparison-chart').getContext('2d');\n const comparisonChart = new Chart(ctx, {\n type: 'radar',\n data: {\n labels: ['Gampang Dibawa', 'Gampang Dirawat', 'Harga\/Ukuran', 'Kualitas Planet', 'Kualitas Galaksi'],\n datasets: [{\n label: 'Skor Kehebatan',\n data: comparisonData.refractor.chartData,\n backgroundColor: 'rgba(228, 0, 43, 0.4)', \/* LEGO Red with opacity *\/\n borderColor: 'rgba(228, 0, 43, 1)', \/* LEGO Red *\/\n borderWidth: 3,\n pointBackgroundColor: 'rgba(255, 130, 0, 1)', \/* LEGO Orange point color *\/\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(255, 130, 0, 1)'\n }]\n },\n options: {\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { color: 'rgba(163, 0, 29, 0.3)' }, \/* Darker Red grid lines *\/\n grid: { color: 'rgba(163, 0, 29, 0.3)' },\n pointLabels: { color: '#E4002B', font: { size: 14, family: 'Fredoka' } }, \/* LEGO Red, playful font *\/\n suggestedMin: 0,\n suggestedMax: 10,\n ticks: {\n backdropColor: 'rgba(255, 205, 0, 1)', \/* Match primary background *\/\n color: '#A3001D', \/* Darker Red for ticks *\/\n stepSize: 2,\n font: { size: 12, family: 'Fredoka' }\n }\n }\n },\n plugins: {\n legend: {\n display: false\n },\n tooltip: {\n bodyFont: { family: 'Inter' },\n titleFont: { family: 'Inter' }\n }\n }\n }\n });\n\n function updateComparison(type) {\n const data = comparisonData[type];\n comparisonTitle.textContent = data.title;\n comparisonText.textContent = data.text;\n comparisonDetails.innerHTML = `\n <p>✅ **Hebatnya:** ${data.details.pros}<\/p>\n <p>❌ **Kekurangannya:** ${data.details.cons}<\/p>\n <p>🌟 **Cocok Untuk:** ${data.details.ideal}<\/p>\n `;\n comparisonChart.data.datasets[0].data = data.chartData;\n comparisonChart.update();\n }\n\n comparisonTabs.forEach(tab => {\n tab.addEventListener('click', () => {\n comparisonTabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n const type = tab.dataset.type;\n updateComparison(type);\n });\n });\n\n const menuBtn = document.getElementById('menu-btn');\n const mobileMenu = document.getElementById('mobile-menu');\n menuBtn.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n \n const navLinks = document.querySelectorAll('.nav-link');\n navLinks.forEach(link => {\n link.addEventListener('click', () => {\n if(!mobileMenu.classList.contains('hidden')) {\n mobileMenu.classList.add('hidden');\n }\n });\n });\n\n const lightCanvas = document.getElementById('light-animation');\n const lightCtx = lightCanvas.getContext('2d');\n let animationFrameId;\n let particles = [];\n\n function resizeCanvas() {\n lightCanvas.width = lightCanvas.offsetWidth;\n lightCanvas.height = lightCanvas.offsetHeight;\n }\n\n function createParticles() {\n particles = [];\n for (let i = 0; i < 50; i++) {\n particles.push({\n x: Math.random() * lightCanvas.width \/ 3,\n y: Math.random() * lightCanvas.height,\n vx: 2 + Math.random() * 1,\n vy: 0\n });\n }\n }\n \n function drawLightAnimation() {\n lightCtx.clearRect(0, 0, lightCanvas.width, lightCanvas.height);\n \n const lensCenterX = lightCanvas.width * 0.4;\n const lensCenterY = lightCanvas.height \/ 2;\n const lensHeight = lightCanvas.height * 0.8;\n\n lightCtx.strokeStyle = 'rgba(228, 0, 43, 0.8)'; \/* LEGO Red for light path *\/\n lightCtx.lineWidth = 4;\n lightCtx.beginPath();\n lightCtx.moveTo(lensCenterX, lensCenterY - lensHeight \/ 2);\n lightCtx.quadraticCurveTo(lensCenterX + 40, lensCenterY, lensCenterX, lensCenterY + lensHeight \/ 2);\n lightCtx.stroke();\n\n const focusPointX = lightCanvas.width * 0.75;\n const focusPointY = lightCanvas.height \/ 2;\n \n lightCtx.fillStyle = 'rgba(255, 255, 255, 0.9)';\n particles.forEach(p => {\n lightCtx.beginPath();\n lightCtx.arc(p.x, p.y, 3, 0, Math.PI * 2);\n lightCtx.fill();\n \n p.x += p.vx;\n \n if (p.x > lensCenterX) {\n const dx = focusPointX - p.x;\n const dy = focusPointY - p.y;\n const angle = Math.atan2(dy, dx);\n p.vx = Math.cos(angle) * 3.5;\n p.vy = Math.sin(angle) * 3.5;\n }\n p.y += p.vy;\n\n if (p.x > lightCanvas.width) {\n p.x = 0;\n p.y = Math.random() * lightCanvas.height;\n p.vx = 2 + Math.random() * 1;\n p.vy = 0;\n }\n });\n\n animationFrameId = requestAnimationFrame(drawLightAnimation);\n }\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n if (!animationFrameId) {\n resizeCanvas();\n createParticles();\n drawLightAnimation();\n }\n } else {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n animationFrameId = null;\n }\n }\n });\n }, { threshold: 0.1 });\n\n observer.observe(lightCanvas);\n window.addEventListener('resize', () => {\n if (animationFrameId) {\n cancelAnimationFrame(animationFrameId);\n animationFrameId = null;\n resizeCanvas();\n createParticles();\n drawLightAnimation();\n }\n });\n\n \/\/ Gemini API Integration - Tanya Gemini\n const geminiQuestionInput = document.getElementById('gemini-question-input');\n const askGeminiBtn = document.getElementById('ask-gemini-btn');\n const geminiLoading = document.getElementById('gemini-loading');\n const geminiAnswer = document.getElementById('gemini-answer');\n const geminiAnswerText = document.getElementById('gemini-answer-text');\n\n async function callGeminiApi(prompt, outputElement, loadingElement, buttonElement) {\n if (!prompt) {\n outputElement.textContent = 'Ayo, tulis pertanyaanmu dulu, ya!';\n outputElement.parentElement.classList.remove('hidden');\n return;\n }\n\n loadingElement.classList.remove('hidden');\n outputElement.parentElement.classList.add('hidden');\n outputElement.textContent = '';\n buttonElement.disabled = true;\n\n let chatHistory = [];\n chatHistory.push({ role: \"user\", parts: [{ text: prompt }] });\n const payload = { contents: chatHistory };\n const apiKey = \"\";\n const apiUrl = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-05-20:generateContent?key=${apiKey}`;\n\n let retryCount = 0;\n const maxRetries = 5;\n const baseDelay = 1000; \/\/ 1 second\n\n while (retryCount < maxRetries) {\n try {\n const response = await fetch(apiUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n });\n\n if (response.status === 429) { \/\/ Too Many Requests\n const delay = baseDelay * Math.pow(2, retryCount) + Math.random() * 500; \/\/ Exponential backoff with jitter\n console.warn(`Rate limit hit. Retrying in ${delay \/ 1000}s...`);\n await new Promise(res => setTimeout(res, delay));\n retryCount++;\n continue; \/\/ Retry the request\n }\n\n const result = await response.json();\n \n if (result.candidates && result.candidates.length > 0 &&\n result.candidates[0].content && result.candidates[0].content.parts &&\n result.candidates[0].content.parts.length > 0) {\n const text = result.candidates[0].content.parts[0].text;\n outputElement.textContent = text;\n outputElement.parentElement.classList.remove('hidden');\n } else {\n outputElement.textContent = 'Maaf, Gemini lagi pusing nih. Coba pertanyaan lain ya!';\n outputElement.parentElement.classList.remove('hidden');\n }\n break; \/\/ Exit loop on success\n } catch (error) {\n console.error('Error calling Gemini API:', error);\n outputElement.textContent = 'Wah, ada gangguan sinyal ke luar angkasa. Coba lagi nanti ya!';\n outputElement.parentElement.classList.remove('hidden');\n break; \/\/ Exit loop on critical error\n } finally {\n loadingElement.classList.add('hidden');\n buttonElement.disabled = false;\n }\n }\n\n if (retryCount === maxRetries) {\n outputElement.textContent = 'Gemini capek nih, nggak bisa jawab sekarang. Coba lagi nanti ya!';\n outputElement.parentElement.classList.remove('hidden');\n loadingElement.classList.add('hidden');\n buttonElement.disabled = false;\n }\n }\n\n askGeminiBtn.addEventListener('click', () => {\n callGeminiApi(geminiQuestionInput.value.trim(), geminiAnswerText, geminiLoading, askGeminiBtn);\n });\n\n \/\/ Gemini API Integration - Jelajahi Benda Langit\n const celestialObjectInput = document.getElementById('celestial-object-input');\n const getFactsBtn = document.getElementById('get-facts-btn');\n const celestialLoading = document.getElementById('celestial-loading');\n const celestialFacts = document.getElementById('celestial-facts');\n const celestialObjectName = document.getElementById('celestial-object-name');\n const celestialFactsText = document.getElementById('celestial-facts-text');\n\n getFactsBtn.addEventListener('click', () => {\n const objectName = celestialObjectInput.value.trim();\n if (!objectName) {\n celestialFactsText.textContent = 'Ups! Ketik dulu nama benda langitnya, ya.';\n celestialFacts.classList.remove('hidden');\n return;\n }\n celestialObjectName.textContent = objectName; \/\/ Set the object name in the title\n const prompt = `Berikan 3-5 fakta menarik tentang ${objectName} untuk anak-anak dengan bahasa yang sederhana dan ceria. Mulai dengan sapaan \"Hai, teman kecil!\" atau sejenisnya.`;\n callGeminiApi(prompt, celestialFactsText, celestialLoading, getFactsBtn);\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-337","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"views":6,"_links":{"self":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":3,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/337\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}