Ensiklopedia Planet Bumi Interaktif<\/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=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF5;\n color: #3C3633;\n }\n .nav-link {\n transition: all 0.3s ease;\n border-left: 4px solid transparent;\n }\n .nav-link.active, .nav-link:hover {\n background-color: #E0C097;\n border-left-color: #774F38;\n color: #3C3633;\n }\n .card-flip {\n perspective: 1000px;\n }\n .card-flip-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n .card-flip:hover .card-flip-inner {\n transform: rotateY(180deg);\n }\n .card-face {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 0.75rem;\n }\n .card-back {\n transform: rotateY(180deg);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .earth-layer {\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .earth-layer:hover {\n transform: scale(1.05);\n filter: brightness(1.1);\n }\n .loading-spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top: 4px solid #774F38;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#FDFBF5]\">\n\n <div class=\"flex flex-col md:flex-row min-h-screen\">\n \n <nav id=\"desktop-nav\" class=\"hidden md:block w-64 bg-[#F0EBE3] p-6 space-y-4 sticky top-0 h-screen shadow-lg\">\n <h2 class=\"text-2xl font-bold text-[#774F38]\">Jelajahi Bumi<\/h2>\n <a href=\"#prolog\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Selamat Datang<\/a>\n <a href=\"#struktur\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Perjalanan ke Inti Bumi<\/a>\n <a href=\"#lempeng\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Dunia yang Bergerak<\/a>\n <a href=\"#siklus\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Mesin Kehidupan<\/a>\n <a href=\"#hayati\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Kekayaan Hayati<\/a>\n <a href=\"#gerakan\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Tarian Kosmik Bumi<\/a>\n <a href=\"#aksi\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Misi Penjaga Bumi<\/a>\n <\/nav>\n\n \n <header class=\"md:hidden bg-[#F0EBE3] p-4 sticky top-0 z-20 shadow-md\">\n <div class=\"container mx-auto flex justify-between items-center\">\n <h1 class=\"text-xl font-bold text-[#774F38]\">Ensiklopedia Bumi<\/h1>\n <button id=\"menu-btn\" class=\"text-[#774F38] focus:outline-none\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <\/button>\n <\/div>\n \n <nav id=\"mobile-nav\" class=\"hidden absolute top-full left-0 w-full bg-[#F0EBE3] p-4 space-y-2\">\n <a href=\"#prolog\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Selamat Datang<\/a>\n <a href=\"#struktur\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Perjalanan ke Inti Bumi<\/a>\n <a href=\"#lempeng\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Dunia yang Bergerak<\/a>\n <a href=\"#siklus\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Mesin Kehidupan<\/a>\n <a href=\"#hayati\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Kekayaan Hayati<\/a>\n <a href=\"#gerakan\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Tarian Kosmik Bumi<\/a>\n <a href=\"#aksi\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Misi Penjaga Bumi<\/a>\n <\/nav>\n <\/header>\n\n \n <main class=\"flex-1 p-6 md:p-10\">\n <div class=\"max-w-4xl mx-auto space-y-16\">\n\n \n <section id=\"prolog\" class=\"scroll-mt-20\">\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <h1 class=\"text-4xl font-bold text-[#774F38] mb-4\">Selamat Datang di Rumah Kita, Planet Bumi!<\/h1>\n <p class=\"text-lg text-gray-600 leading-relaxed\">Selamat datang, para penjelajah! Aplikasi ini adalah panduan interaktif untuk mengenal rumah kita. Pernahkah kamu bertanya mengapa ada siang dan malam, atau mengapa terjadi gempa? Di sini, kita akan menjelajahi semua keajaiban itu. Kita akan mengintip ke jantung Bumi, memahami kekuatan di bawah kaki kita, dan melihat bagaimana alam bekerja untuk menopang kehidupan. Mari kita mulai petualangan untuk melihat Bumi dari sudut pandang baru, sebagai sebuah sistem yang saling terhubung dan luar biasa.<\/p>\n <\/div>\n <\/section>\n\n \n <section id=\"struktur\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Perjalanan ke Inti Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-6 text-gray-600\">Bayangkan Bumi seperti bawang raksasa dengan banyak lapisan. Setiap lapisan memiliki ciri khasnya sendiri. Klik pada setiap lapisan pada diagram di bawah untuk mengetahui rahasianya! Ini adalah cara kita “mengintip” ke dalam planet tanpa harus menggali sangat dalam.<\/p>\n <div class=\"flex flex-col lg:flex-row items-center gap-8\">\n \n <div class=\"w-full lg:w-1\/2 flex justify-center items-center\">\n <div id=\"earth-diagram\" class=\"relative w-64 h-64 md:w-80 md:h-80\">\n <div data-layer=\"inti-dalam\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-1\/4 h-1\/4 bg-[#FAD02E] rounded-full z-40 flex items-center justify-content-center text-xs font-bold text-black\">Inti Dalam<\/div>\n <div data-layer=\"inti-luar\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-1\/2 h-1\/2 bg-[#F2994A] rounded-full z-30\"><\/div>\n <div data-layer=\"mantel\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-3\/4 h-3\/4 bg-[#EB5757] rounded-full z-20\"><\/div>\n <div data-layer=\"kerak\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full h-full bg-[#8B4513] rounded-full z-10\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"layer-info\" class=\"w-full lg:w-1\/2 p-6 bg-[#F0EBE3] rounded-lg min-h-[250px]\">\n <h3 id=\"info-title\" class=\"text-2xl font-bold text-[#774F38] mb-2\">Pilih Lapisan<\/h3>\n <p id=\"info-description\" class=\"text-gray-700\">Klik sebuah lapisan pada diagram untuk melihat detailnya di sini.<\/p>\n <ul id=\"info-details\" class=\"mt-4 space-y-2 text-gray-600\"><\/ul>\n <\/div>\n <\/div>\n <div class=\"mt-10\">\n <h3 class=\"text-2xl font-bold text-center text-[#774F38] mb-4\">Komposisi Kerak Bumi<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">Kerak Bumi, tempat kita berpijak, tersusun dari berbagai unsur. Oksigen adalah yang paling melimpah, membentuk hampir setengah dari kerak!<\/p>\n <div class=\"chart-container\">\n <canvas id=\"crust-composition-chart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-struktur\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Struktur Bumi ✨\n <\/button>\n <div id=\"fact-display-struktur\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-struktur\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"lempeng\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Dunia yang Bergerak<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Permukaan Bumi tidaklah diam. Ia terpecah menjadi lempengan-lempengan raksasa yang terus bergerak, seperti rakit di atas danau. Interaksi antar lempeng inilah yang membentuk pegunungan, palung laut, dan menyebabkan gempa bumi. Klik pada setiap jenis gerakan untuk melihat apa yang terjadi!<\/p>\n <div id=\"plate-boundaries\" class=\"grid md:grid-cols-3 gap-6\">\n \n <\/div>\n <div id=\"plate-details\" class=\"mt-8 p-6 bg-[#F0EBE3] rounded-lg hidden\">\n <h4 id=\"plate-detail-title\" class=\"text-xl font-bold text-[#774F38] mb-2\"><\/h4>\n <p id=\"plate-detail-description\" class=\"text-gray-700\"><\/p>\n <p id=\"plate-detail-example\" class=\"mt-2 text-sm italic text-gray-500\"><\/p>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-lempeng\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Lempeng Tektonik ✨\n <\/button>\n <div id=\"fact-display-lempeng\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-lempeng\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"siklus\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Mesin Kehidupan<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Air dan udara adalah dua komponen vital yang membuat Bumi bisa dihuni. Keduanya terus bergerak dalam siklus yang kompleks, mendistribusikan energi dan sumber daya ke seluruh planet. Inilah mesin yang menjaga kehidupan terus berjalan.<\/p>\n <h3 class=\"text-2xl font-bold text-[#774F38] mb-4\">Perjalanan Air Tanpa Henti<\/h3>\n <div class=\"bg-[#E0C097]\/30 p-6 rounded-lg\">\n <div class=\"flex flex-col md:flex-row justify-between items-center text-center gap-4\">\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">☀️<\/span>\n <p class=\"font-bold mt-2\">Evaporasi<\/p>\n <p class=\"text-sm text-gray-600\">Air menguap<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">☁️<\/span>\n <p class=\"font-bold mt-2\">Kondensasi<\/p>\n <p class=\"text-sm text-gray-600\">Awan terbentuk<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">🌧️<\/span>\n <p class=\"font-bold mt-2\">Presipitasi<\/p>\n <p class=\"text-sm text-gray-600\">Air jatuh<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">💧<\/span>\n <p class=\"font-bold mt-2\">Infiltrasi<\/p>\n <p class=\"text-sm text-gray-600\">Air meresap<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-siklus\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Siklus Air ✨\n <\/button>\n <div id=\"fact-display-siklus\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-siklus\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"hayati\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Kekayaan Hayati<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Bumi adalah rumah bagi jutaan spesies makhluk hidup. Keberagaman ini, yang disebut biodiversitas, ada di berbagai tingkatan. Jelajahi setiap tingkatan untuk melihat betapa kayanya kehidupan di planet kita.<\/p>\n <div class=\"flex border-b border-gray-300\">\n <button data-tab=\"gen\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-[#774F38] text-[#774F38]\">Genetik<\/button>\n <button data-tab=\"spesies\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-transparent text-gray-500\">Spesies<\/button>\n <button data-tab=\"ekosistem\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-transparent text-gray-500\">Ekosistem<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"mt-6\">\n \n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-hayati\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Biodiversitas ✨\n <\/button>\n <div id=\"fact-display-hayati\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-hayati\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"gerakan\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Tarian Kosmik Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Bumi kita tidak pernah diam. Ia terus menari di angkasa dalam dua gerakan utama: berputar pada porosnya (rotasi) dan mengelilingi Matahari (revolusi). Kedua tarian inilah yang mengatur ritme kehidupan kita, dari pergantian hari hingga perubahan musim.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"bg-[#F0EBE3] p-6 rounded-lg\">\n <h3 class=\"text-2xl font-bold text-[#774F38] mb-3\">Rotasi Bumi<\/h3>\n <p class=\"text-gray-700 mb-4\">Perputaran Bumi pada porosnya dari barat ke timur.<\/p>\n <ul class=\"space-y-2\">\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">⏱️<\/span> <strong>Durasi:<\/strong> ~24 jam (1 hari)<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">☀️<\/span> <strong>Dampak:<\/strong> Terjadinya siang dan malam.<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">🌍<\/span> <strong>Dampak:<\/strong> Perbedaan zona waktu.<\/li>\n <\/ul>\n <\/div>\n <div class=\"bg-[#E0C097] p-6 rounded-lg\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Revolusi Bumi<\/h3>\n <p class=\"text-gray-800 mb-4\">Pergerakan Bumi mengelilingi Matahari.<\/p>\n <ul class=\"space-y-2 text-gray-900\">\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">🗓️<\/span> <strong>Durasi:<\/strong> 365\u00bc hari (1 tahun)<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">🍂<\/span> <strong>Dampak:<\/strong> Pergantian musim (di wilayah subtropis).<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">📅<\/span> <strong>Dampak:<\/strong> Dasar penanggalan Kalender Masehi.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-gerakan\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Gerakan Bumi ✨\n <\/button>\n <div id=\"fact-display-gerakan\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-gerakan\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"aksi\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Misi Penjaga Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Memahami Bumi berarti juga bertanggung jawab untuk menjaganya. Planet kita menghadapi tantangan seperti pemanasan global. Tapi jangan khawatir, kita semua bisa menjadi pahlawan bagi Bumi! Coba balik kartu-kartu di bawah ini untuk menemukan misi sederhanamu.<\/p>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#A4BE7B] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Reduce<\/h4>\n <p>(Kurangi)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#5F8D4E] text-white p-4 text-center\">\n <p>Bawa botol minum dan tas belanja sendiri untuk mengurangi sampah plastik.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#F2994A] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Reuse<\/h4>\n <p>(Gunakan Kembali)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#D95550] text-white p-4 text-center\">\n <p>Gunakan kembali toples bekas untuk menyimpan barang atau botol plastik sebagai pot tanaman.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#56CCF2] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Recycle<\/h4>\n <p>(Daur Ulang)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#2F80ED] text-white p-4 text-center\">\n <p>Pisahkan sampah kertas, plastik, dan kaca agar bisa didaur ulang menjadi barang baru.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-aksi\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Aksi Lingkungan ✨\n <\/button>\n <div id=\"fact-display-aksi\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-aksi\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Data\n const layerData = {\n 'inti-dalam': {\n title: 'Inti Dalam (Inner Core)',\n description: 'Pusat Bumi yang super panas dan padat, terbuat dari besi dan nikel padat.',\n details: ['Suhu: 5.000 - 6.000\u00b0C', 'Ketebalan: ~1.250 km', 'Wujud: Padat (karena tekanan ekstrem)']\n },\n 'inti-luar': {\n title: 'Inti Luar (Outer Core)',\n description: 'Lapisan cair dari besi dan nikel yang pergerakannya menciptakan medan magnet Bumi.',\n details: ['Suhu: 4.000 - 5.000\u00b0C', 'Ketebalan: ~2.200 km', 'Wujud: Cair']\n },\n 'mantel': {\n title: 'Mantel (Mantle)',\n description: 'Lapisan tertebal Bumi, sebagian besar padat namun memiliki bagian kental yang membuat lempeng tektonik bergerak.',\n details: ['Suhu: 1.400 - 3.000\u00b0C', 'Ketebalan: ~2.900 km', 'Wujud: Sebagian besar padat, sebagian kental']\n },\n 'kerak': {\n title: 'Kerak (Crust)',\n description: 'Lapisan terluar yang tipis dan rapuh, tempat kita tinggal.',\n details: ['Suhu: 0 - 1.100\u00b0C', 'Ketebalan: 5 - 75 km', 'Wujud: Padat']\n }\n };\n\n const plateData = [\n { id: 'divergen', name: 'Divergen', icon: '↔️', description: 'Terjadi ketika dua lempeng saling bergerak menjauh. Gerakan ini menyebabkan magma naik dan membentuk kerak baru.', example: 'Contoh: Punggung Atlantik Tengah, tempat benua Amerika dan Eropa-Afrika menjauh.' },\n { id: 'konvergen', name: 'Konvergen', icon: '💥', description: 'Terjadi ketika dua lempeng saling bertumbukan. Tumbukan ini bisa membentuk pegunungan tinggi atau palung laut dalam.', example: 'Contoh: Pegunungan Himalaya, terbentuk dari tumbukan lempeng India dan Eurasia.' },\n { id: 'sesar', name: 'Sesar (Transform)', icon: '\u21c6', description: 'Terjadi ketika dua lempeng saling bergeser secara horizontal. Gesekan antar lempeng ini seringkali memicu gempa bumi.', example: 'Contoh: Sesar San Andreas di California.' }\n ];\n \n const biodiversityData = {\n gen: {\n title: 'Tingkat Genetik',\n description: 'Ini adalah variasi dalam satu spesies yang sama. Bayangkan berbagai jenis mangga: ada mangga arumanis, manalagi, atau golek. Semuanya mangga, tapi rasa dan bentuknya berbeda karena perbedaan gen.',\n example: 'Contoh lain: Perbedaan warna pada bunga mawar atau pola pada bulu kucing.'\n },\n spesies: {\n title: 'Tingkat Spesies',\n description: 'Ini adalah keberagaman jenis makhluk hidup. Misalnya, di hutan ada harimau, gajah, monyet, dan orangutan. Mereka semua adalah spesies yang berbeda dan hidup di ekosistem yang sama.',\n example: 'Contoh lain: Keluarga palem-paleman yang terdiri dari pohon kelapa, aren, dan pinang.'\n },\n ekosistem: {\n title: 'Tingkat Ekosistem',\n description: 'Ini adalah keberagaman habitat atau \"rumah\" bagi makhluk hidup. Setiap ekosistem memiliki kondisi unik (iklim, tanah, air) yang mendukung kehidupan yang berbeda-beda.',\n example: 'Contoh: Ekosistem hutan hujan tropis yang lebat, padang rumput yang luas, gurun yang kering, dan terumbu karang di lautan.'\n }\n };\n\n \/\/ Mobile Menu Toggle\n const menuBtn = document.getElementById('menu-btn');\n const mobileNav = document.getElementById('mobile-nav');\n menuBtn.addEventListener('click', () => {\n mobileNav.classList.toggle('hidden');\n });\n\n \/\/ Smooth Scrolling & Active Nav Link\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n if(mobileNav.classList.contains('hidden') === false){\n mobileNav.classList.add('hidden');\n }\n });\n });\n \n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');\n \n window.onscroll = () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n };\n\n\n \/\/ Earth Layer Interaction\n const earthDiagram = document.getElementById('earth-diagram');\n const infoTitle = document.getElementById('info-title');\n const infoDescription = document.getElementById('info-description');\n const infoDetails = document.getElementById('info-details');\n\n earthDiagram.addEventListener('click', (e) => {\n const layerId = e.target.dataset.layer;\n if (layerId && layerData[layerId]) {\n const data = layerData[layerId];\n infoTitle.textContent = data.title;\n infoDescription.textContent = data.description;\n infoDetails.innerHTML = data.details.map(detail => `<li>${detail}<\/li>`).join('');\n }\n });\n \n \/\/ Crust Composition Chart\n const ctx = document.getElementById('crust-composition-chart').getContext('2d');\n new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Oksigen (46.6%)', 'Silika (27.7%)', 'Aluminium (8.1%)', 'Besi (5.0%)', 'Lainnya'],\n datasets: [{\n label: 'Komposisi Kerak Bumi',\n data: [46.6, 27.7, 8.1, 5.0, 12.6],\n backgroundColor: [\n '#2E8B57',\n '#4682B4',\n '#D2B48C',\n '#A0522D',\n '#808080'\n ],\n borderColor: '#FDFBF5',\n borderWidth: 3\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n title: {\n display: false,\n }\n }\n }\n });\n\n \/\/ Plate Tectonics Cards\n const plateBoundariesContainer = document.getElementById('plate-boundaries');\n const plateDetailContainer = document.getElementById('plate-details');\n const plateDetailTitle = document.getElementById('plate-detail-title');\n const plateDetailDescription = document.getElementById('plate-detail-description');\n const plateDetailExample = document.getElementById('plate-detail-example');\n\n plateData.forEach(plate => {\n const card = document.createElement('div');\n card.className = 'p-6 bg-[#F0EBE3] rounded-lg text-center cursor-pointer transition-transform transform hover:scale-105';\n card.innerHTML = `<div class=\"text-5xl mb-3\">${plate.icon}<\/div><h4 class=\"text-xl font-bold text-[#774F38]\">${plate.name}<\/h4>`;\n card.addEventListener('click', () => {\n plateDetailTitle.textContent = plate.name;\n plateDetailDescription.textContent = plate.description;\n plateDetailExample.textContent = plate.example;\n plateDetailContainer.classList.remove('hidden');\n });\n plateBoundariesContainer.appendChild(card);\n });\n \n \/\/ Biodiversity Tabs\n const tabButtons = document.querySelectorAll('.tab-btn');\n const tabContentContainer = document.getElementById('tab-content');\n\n function updateTabContent(tabId) {\n const data = biodiversityData[tabId];\n tabContentContainer.innerHTML = `\n <div class=\"bg-gray-100 p-6 rounded-lg\">\n <h4 class=\"text-xl font-bold text-[#774F38] mb-2\">${data.title}<\/h4>\n <p class=\"text-gray-700\">${data.description}<\/p>\n <p class=\"mt-4 text-sm italic text-gray-500\">${data.example}<\/p>\n <\/div>\n `;\n }\n\n tabButtons.forEach(button => {\n button.addEventListener('click', () => {\n tabButtons.forEach(btn => {\n btn.classList.remove('border-[#774F38]', 'text-[#774F38]');\n btn.classList.add('border-transparent', 'text-gray-500');\n });\n button.classList.add('border-[#774F38]', 'text-[#774F38]');\n button.classList.remove('border-transparent', 'text-gray-500');\n updateTabContent(button.dataset.tab);\n });\n });\n\n \/\/ Initialize first tab\n updateTabContent('gen');\n\n\n \/\/ Gemini API Integration for Fun Facts\n const factButtons = document.querySelectorAll('.generate-fact-btn');\n\n async function generateFact(topic, displayElement, spinnerElement) {\n displayElement.classList.add('hidden');\n spinnerElement.classList.remove('hidden');\n\n let chatHistory = [];\n const prompt = `Berikan satu fakta menarik yang ringkas dan mudah dipahami tentang ${topic} untuk anak sekolah dasar.`;\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 = 3;\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.ok) {\n if (response.status === 429) { \/\/ Too Many Requests\n const delay = baseDelay * Math.pow(2, retryCount);\n retryCount++;\n await new Promise(resolve => setTimeout(resolve, delay));\n continue;\n } else {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n }\n\n const result = await response.json();\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 factText = result.candidates[0].content.parts[0].text;\n displayElement.textContent = factText;\n displayElement.classList.remove('hidden');\n } else {\n displayElement.textContent = 'Gagal menghasilkan fakta menarik. Coba lagi.';\n displayElement.classList.remove('hidden');\n }\n break; \/\/ Exit loop on success\n } catch (error) {\n console.error('Error calling Gemini API:', error);\n if (retryCount === maxRetries - 1) {\n displayElement.textContent = 'Terjadi kesalahan saat mengambil fakta. Silakan coba lagi nanti.';\n displayElement.classList.remove('hidden');\n }\n retryCount++;\n const delay = baseDelay * Math.pow(2, retryCount);\n await new Promise(resolve => setTimeout(resolve, delay));\n } finally {\n spinnerElement.classList.add('hidden');\n }\n }\n }\n\n factButtons.forEach(button => {\n button.addEventListener('click', () => {\n const sectionId = button.id.replace('fact-', '');\n const displayElement = document.getElementById(`fact-display-${sectionId}`);\n const spinnerElement = document.getElementById(`loading-spinner-${sectionId}`);\n let topic = '';\n\n switch (sectionId) {\n case 'struktur':\n topic = 'struktur lapisan Bumi';\n break;\n case 'lempeng':\n topic = 'lempeng tektonik dan pergerakannya';\n break;\n case 'siklus':\n topic = 'siklus air dan iklim Bumi';\n break;\n case 'hayati':\n topic = 'keanekaragaman hayati dan mengapa itu penting';\n break;\n case 'gerakan':\n topic = 'rotasi dan revolusi Bumi serta dampaknya';\n break;\n case 'aksi':\n topic = 'cara menjaga lingkungan dan prinsip 3R (Reduce, Reuse, Recycle)';\n break;\n default:\n topic = 'Planet Bumi';\n }\n generateFact(topic, displayElement, spinnerElement);\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/p>\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-332","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"views":3,"_links":{"self":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332","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=332"}],"version-history":[{"count":3,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":332,"date":"2025-08-12T15:15:41","date_gmt":"2025-08-12T08:15:41","guid":{"rendered":"http:\/\/imahnoong.com\/wp\/?p=332"},"modified":"2025-08-12T15:16:42","modified_gmt":"2025-08-12T08:16:42","slug":"selamat-datang-di-rumah-kita-planet-bumi","status":"publish","type":"post","link":"https:\/\/imahnoong.com\/wp\/2025\/08\/12\/selamat-datang-di-rumah-kita-planet-bumi\/","title":{"rendered":"SELAMAT DATANG DI RUMAH KITA PLANET BUMI"},"content":{"rendered":"\n\n\n

\n\n\n \n \n Ensiklopedia Planet Bumi Interaktif<\/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=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF5;\n color: #3C3633;\n }\n .nav-link {\n transition: all 0.3s ease;\n border-left: 4px solid transparent;\n }\n .nav-link.active, .nav-link:hover {\n background-color: #E0C097;\n border-left-color: #774F38;\n color: #3C3633;\n }\n .card-flip {\n perspective: 1000px;\n }\n .card-flip-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n .card-flip:hover .card-flip-inner {\n transform: rotateY(180deg);\n }\n .card-face {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 0.75rem;\n }\n .card-back {\n transform: rotateY(180deg);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .earth-layer {\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .earth-layer:hover {\n transform: scale(1.05);\n filter: brightness(1.1);\n }\n .loading-spinner {\n border: 4px solid rgba(0, 0, 0, 0.1);\n border-top: 4px solid #774F38;\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: spin 1s linear infinite;\n }\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#FDFBF5]\">\n\n <div class=\"flex flex-col md:flex-row min-h-screen\">\n \n <nav id=\"desktop-nav\" class=\"hidden md:block w-64 bg-[#F0EBE3] p-6 space-y-4 sticky top-0 h-screen shadow-lg\">\n <h2 class=\"text-2xl font-bold text-[#774F38]\">Jelajahi Bumi<\/h2>\n <a href=\"#prolog\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Selamat Datang<\/a>\n <a href=\"#struktur\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Perjalanan ke Inti Bumi<\/a>\n <a href=\"#lempeng\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Dunia yang Bergerak<\/a>\n <a href=\"#siklus\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Mesin Kehidupan<\/a>\n <a href=\"#hayati\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Kekayaan Hayati<\/a>\n <a href=\"#gerakan\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Tarian Kosmik Bumi<\/a>\n <a href=\"#aksi\" class=\"nav-link block p-3 rounded-lg font-semibold text-gray-700\">Misi Penjaga Bumi<\/a>\n <\/nav>\n\n \n <header class=\"md:hidden bg-[#F0EBE3] p-4 sticky top-0 z-20 shadow-md\">\n <div class=\"container mx-auto flex justify-between items-center\">\n <h1 class=\"text-xl font-bold text-[#774F38]\">Ensiklopedia Bumi<\/h1>\n <button id=\"menu-btn\" class=\"text-[#774F38] focus:outline-none\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <\/button>\n <\/div>\n \n <nav id=\"mobile-nav\" class=\"hidden absolute top-full left-0 w-full bg-[#F0EBE3] p-4 space-y-2\">\n <a href=\"#prolog\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Selamat Datang<\/a>\n <a href=\"#struktur\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Perjalanan ke Inti Bumi<\/a>\n <a href=\"#lempeng\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Dunia yang Bergerak<\/a>\n <a href=\"#siklus\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Mesin Kehidupan<\/a>\n <a href=\"#hayati\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Kekayaan Hayati<\/a>\n <a href=\"#gerakan\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Tarian Kosmik Bumi<\/a>\n <a href=\"#aksi\" class=\"nav-link block p-2 rounded-lg font-semibold text-gray-700\">Misi Penjaga Bumi<\/a>\n <\/nav>\n <\/header>\n\n \n <main class=\"flex-1 p-6 md:p-10\">\n <div class=\"max-w-4xl mx-auto space-y-16\">\n\n \n <section id=\"prolog\" class=\"scroll-mt-20\">\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <h1 class=\"text-4xl font-bold text-[#774F38] mb-4\">Selamat Datang di Rumah Kita, Planet Bumi!<\/h1>\n <p class=\"text-lg text-gray-600 leading-relaxed\">Selamat datang, para penjelajah! Aplikasi ini adalah panduan interaktif untuk mengenal rumah kita. Pernahkah kamu bertanya mengapa ada siang dan malam, atau mengapa terjadi gempa? Di sini, kita akan menjelajahi semua keajaiban itu. Kita akan mengintip ke jantung Bumi, memahami kekuatan di bawah kaki kita, dan melihat bagaimana alam bekerja untuk menopang kehidupan. Mari kita mulai petualangan untuk melihat Bumi dari sudut pandang baru, sebagai sebuah sistem yang saling terhubung dan luar biasa.<\/p>\n <\/div>\n <\/section>\n\n \n <section id=\"struktur\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Perjalanan ke Inti Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-6 text-gray-600\">Bayangkan Bumi seperti bawang raksasa dengan banyak lapisan. Setiap lapisan memiliki ciri khasnya sendiri. Klik pada setiap lapisan pada diagram di bawah untuk mengetahui rahasianya! Ini adalah cara kita “mengintip” ke dalam planet tanpa harus menggali sangat dalam.<\/p>\n <div class=\"flex flex-col lg:flex-row items-center gap-8\">\n \n <div class=\"w-full lg:w-1\/2 flex justify-center items-center\">\n <div id=\"earth-diagram\" class=\"relative w-64 h-64 md:w-80 md:h-80\">\n <div data-layer=\"inti-dalam\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-1\/4 h-1\/4 bg-[#FAD02E] rounded-full z-40 flex items-center justify-content-center text-xs font-bold text-black\">Inti Dalam<\/div>\n <div data-layer=\"inti-luar\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-1\/2 h-1\/2 bg-[#F2994A] rounded-full z-30\"><\/div>\n <div data-layer=\"mantel\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-3\/4 h-3\/4 bg-[#EB5757] rounded-full z-20\"><\/div>\n <div data-layer=\"kerak\" class=\"earth-layer absolute top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-full h-full bg-[#8B4513] rounded-full z-10\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"layer-info\" class=\"w-full lg:w-1\/2 p-6 bg-[#F0EBE3] rounded-lg min-h-[250px]\">\n <h3 id=\"info-title\" class=\"text-2xl font-bold text-[#774F38] mb-2\">Pilih Lapisan<\/h3>\n <p id=\"info-description\" class=\"text-gray-700\">Klik sebuah lapisan pada diagram untuk melihat detailnya di sini.<\/p>\n <ul id=\"info-details\" class=\"mt-4 space-y-2 text-gray-600\"><\/ul>\n <\/div>\n <\/div>\n <div class=\"mt-10\">\n <h3 class=\"text-2xl font-bold text-center text-[#774F38] mb-4\">Komposisi Kerak Bumi<\/h3>\n <p class=\"text-center text-gray-600 mb-6\">Kerak Bumi, tempat kita berpijak, tersusun dari berbagai unsur. Oksigen adalah yang paling melimpah, membentuk hampir setengah dari kerak!<\/p>\n <div class=\"chart-container\">\n <canvas id=\"crust-composition-chart\"><\/canvas>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-struktur\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Struktur Bumi ✨\n <\/button>\n <div id=\"fact-display-struktur\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-struktur\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"lempeng\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Dunia yang Bergerak<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Permukaan Bumi tidaklah diam. Ia terpecah menjadi lempengan-lempengan raksasa yang terus bergerak, seperti rakit di atas danau. Interaksi antar lempeng inilah yang membentuk pegunungan, palung laut, dan menyebabkan gempa bumi. Klik pada setiap jenis gerakan untuk melihat apa yang terjadi!<\/p>\n <div id=\"plate-boundaries\" class=\"grid md:grid-cols-3 gap-6\">\n \n <\/div>\n <div id=\"plate-details\" class=\"mt-8 p-6 bg-[#F0EBE3] rounded-lg hidden\">\n <h4 id=\"plate-detail-title\" class=\"text-xl font-bold text-[#774F38] mb-2\"><\/h4>\n <p id=\"plate-detail-description\" class=\"text-gray-700\"><\/p>\n <p id=\"plate-detail-example\" class=\"mt-2 text-sm italic text-gray-500\"><\/p>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-lempeng\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Lempeng Tektonik ✨\n <\/button>\n <div id=\"fact-display-lempeng\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-lempeng\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"siklus\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Mesin Kehidupan<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Air dan udara adalah dua komponen vital yang membuat Bumi bisa dihuni. Keduanya terus bergerak dalam siklus yang kompleks, mendistribusikan energi dan sumber daya ke seluruh planet. Inilah mesin yang menjaga kehidupan terus berjalan.<\/p>\n <h3 class=\"text-2xl font-bold text-[#774F38] mb-4\">Perjalanan Air Tanpa Henti<\/h3>\n <div class=\"bg-[#E0C097]\/30 p-6 rounded-lg\">\n <div class=\"flex flex-col md:flex-row justify-between items-center text-center gap-4\">\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">☀️<\/span>\n <p class=\"font-bold mt-2\">Evaporasi<\/p>\n <p class=\"text-sm text-gray-600\">Air menguap<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">☁️<\/span>\n <p class=\"font-bold mt-2\">Kondensasi<\/p>\n <p class=\"text-sm text-gray-600\">Awan terbentuk<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">🌧️<\/span>\n <p class=\"font-bold mt-2\">Presipitasi<\/p>\n <p class=\"text-sm text-gray-600\">Air jatuh<\/p>\n <\/div>\n <div class=\"text-2xl text-[#774F38] font-bold animate-pulse\">→<\/div>\n <div class=\"flex flex-col items-center\">\n <span class=\"text-4xl\">💧<\/span>\n <p class=\"font-bold mt-2\">Infiltrasi<\/p>\n <p class=\"text-sm text-gray-600\">Air meresap<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-siklus\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Siklus Air ✨\n <\/button>\n <div id=\"fact-display-siklus\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-siklus\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"hayati\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Kekayaan Hayati<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Bumi adalah rumah bagi jutaan spesies makhluk hidup. Keberagaman ini, yang disebut biodiversitas, ada di berbagai tingkatan. Jelajahi setiap tingkatan untuk melihat betapa kayanya kehidupan di planet kita.<\/p>\n <div class=\"flex border-b border-gray-300\">\n <button data-tab=\"gen\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-[#774F38] text-[#774F38]\">Genetik<\/button>\n <button data-tab=\"spesies\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-transparent text-gray-500\">Spesies<\/button>\n <button data-tab=\"ekosistem\" class=\"tab-btn p-4 text-lg font-semibold border-b-4 border-transparent text-gray-500\">Ekosistem<\/button>\n <\/div>\n <div id=\"tab-content\" class=\"mt-6\">\n \n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-hayati\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Biodiversitas ✨\n <\/button>\n <div id=\"fact-display-hayati\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-hayati\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"gerakan\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Tarian Kosmik Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Bumi kita tidak pernah diam. Ia terus menari di angkasa dalam dua gerakan utama: berputar pada porosnya (rotasi) dan mengelilingi Matahari (revolusi). Kedua tarian inilah yang mengatur ritme kehidupan kita, dari pergantian hari hingga perubahan musim.<\/p>\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div class=\"bg-[#F0EBE3] p-6 rounded-lg\">\n <h3 class=\"text-2xl font-bold text-[#774F38] mb-3\">Rotasi Bumi<\/h3>\n <p class=\"text-gray-700 mb-4\">Perputaran Bumi pada porosnya dari barat ke timur.<\/p>\n <ul class=\"space-y-2\">\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">⏱️<\/span> <strong>Durasi:<\/strong> ~24 jam (1 hari)<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">☀️<\/span> <strong>Dampak:<\/strong> Terjadinya siang dan malam.<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 text-[#774F38] font-bold\">🌍<\/span> <strong>Dampak:<\/strong> Perbedaan zona waktu.<\/li>\n <\/ul>\n <\/div>\n <div class=\"bg-[#E0C097] p-6 rounded-lg\">\n <h3 class=\"text-2xl font-bold text-white mb-3\">Revolusi Bumi<\/h3>\n <p class=\"text-gray-800 mb-4\">Pergerakan Bumi mengelilingi Matahari.<\/p>\n <ul class=\"space-y-2 text-gray-900\">\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">🗓️<\/span> <strong>Durasi:<\/strong> 365\u00bc hari (1 tahun)<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">🍂<\/span> <strong>Dampak:<\/strong> Pergantian musim (di wilayah subtropis).<\/li>\n <li class=\"flex items-start\"><span class=\"mr-2 font-bold\">📅<\/span> <strong>Dampak:<\/strong> Dasar penanggalan Kalender Masehi.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-gerakan\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Gerakan Bumi ✨\n <\/button>\n <div id=\"fact-display-gerakan\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-gerakan\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"aksi\" class=\"scroll-mt-20\">\n <h2 class=\"text-3xl font-bold text-[#774F38] mb-6\">Misi Penjaga Bumi<\/h2>\n <div class=\"bg-white p-8 rounded-xl shadow-md border border-gray-200\">\n <p class=\"mb-8 text-gray-600\">Memahami Bumi berarti juga bertanggung jawab untuk menjaganya. Planet kita menghadapi tantangan seperti pemanasan global. Tapi jangan khawatir, kita semua bisa menjadi pahlawan bagi Bumi! Coba balik kartu-kartu di bawah ini untuk menemukan misi sederhanamu.<\/p>\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#A4BE7B] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Reduce<\/h4>\n <p>(Kurangi)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#5F8D4E] text-white p-4 text-center\">\n <p>Bawa botol minum dan tas belanja sendiri untuk mengurangi sampah plastik.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#F2994A] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Reuse<\/h4>\n <p>(Gunakan Kembali)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#D95550] text-white p-4 text-center\">\n <p>Gunakan kembali toples bekas untuk menyimpan barang atau botol plastik sebagai pot tanaman.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card-flip h-48\">\n <div class=\"card-flip-inner\">\n <div class=\"card-face bg-[#56CCF2] text-white p-4\">\n <h4 class=\"text-2xl font-bold\">Recycle<\/h4>\n <p>(Daur Ulang)<\/p>\n <\/div>\n <div class=\"card-face card-back bg-[#2F80ED] text-white p-4 text-center\">\n <p>Pisahkan sampah kertas, plastik, dan kaca agar bisa didaur ulang menjadi barang baru.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-8 flex flex-col items-center\">\n <button id=\"fact-aksi\" class=\"generate-fact-btn bg-[#774F38] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#A0522D] transition-colors flex items-center gap-2\">\n Fakta Menarik Aksi Lingkungan ✨\n <\/button>\n <div id=\"fact-display-aksi\" class=\"generated-fact-display mt-4 p-4 bg-[#E0C097]\/30 text-[#774F38] rounded-lg shadow-inner max-w-lg text-center hidden\"><\/div>\n <div id=\"loading-spinner-aksi\" class=\"loading-spinner mt-4 hidden\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n <\/main>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Data\n const layerData = {\n 'inti-dalam': {\n title: 'Inti Dalam (Inner Core)',\n description: 'Pusat Bumi yang super panas dan padat, terbuat dari besi dan nikel padat.',\n details: ['Suhu: 5.000 - 6.000\u00b0C', 'Ketebalan: ~1.250 km', 'Wujud: Padat (karena tekanan ekstrem)']\n },\n 'inti-luar': {\n title: 'Inti Luar (Outer Core)',\n description: 'Lapisan cair dari besi dan nikel yang pergerakannya menciptakan medan magnet Bumi.',\n details: ['Suhu: 4.000 - 5.000\u00b0C', 'Ketebalan: ~2.200 km', 'Wujud: Cair']\n },\n 'mantel': {\n title: 'Mantel (Mantle)',\n description: 'Lapisan tertebal Bumi, sebagian besar padat namun memiliki bagian kental yang membuat lempeng tektonik bergerak.',\n details: ['Suhu: 1.400 - 3.000\u00b0C', 'Ketebalan: ~2.900 km', 'Wujud: Sebagian besar padat, sebagian kental']\n },\n 'kerak': {\n title: 'Kerak (Crust)',\n description: 'Lapisan terluar yang tipis dan rapuh, tempat kita tinggal.',\n details: ['Suhu: 0 - 1.100\u00b0C', 'Ketebalan: 5 - 75 km', 'Wujud: Padat']\n }\n };\n\n const plateData = [\n { id: 'divergen', name: 'Divergen', icon: '↔️', description: 'Terjadi ketika dua lempeng saling bergerak menjauh. Gerakan ini menyebabkan magma naik dan membentuk kerak baru.', example: 'Contoh: Punggung Atlantik Tengah, tempat benua Amerika dan Eropa-Afrika menjauh.' },\n { id: 'konvergen', name: 'Konvergen', icon: '💥', description: 'Terjadi ketika dua lempeng saling bertumbukan. Tumbukan ini bisa membentuk pegunungan tinggi atau palung laut dalam.', example: 'Contoh: Pegunungan Himalaya, terbentuk dari tumbukan lempeng India dan Eurasia.' },\n { id: 'sesar', name: 'Sesar (Transform)', icon: '\u21c6', description: 'Terjadi ketika dua lempeng saling bergeser secara horizontal. Gesekan antar lempeng ini seringkali memicu gempa bumi.', example: 'Contoh: Sesar San Andreas di California.' }\n ];\n \n const biodiversityData = {\n gen: {\n title: 'Tingkat Genetik',\n description: 'Ini adalah variasi dalam satu spesies yang sama. Bayangkan berbagai jenis mangga: ada mangga arumanis, manalagi, atau golek. Semuanya mangga, tapi rasa dan bentuknya berbeda karena perbedaan gen.',\n example: 'Contoh lain: Perbedaan warna pada bunga mawar atau pola pada bulu kucing.'\n },\n spesies: {\n title: 'Tingkat Spesies',\n description: 'Ini adalah keberagaman jenis makhluk hidup. Misalnya, di hutan ada harimau, gajah, monyet, dan orangutan. Mereka semua adalah spesies yang berbeda dan hidup di ekosistem yang sama.',\n example: 'Contoh lain: Keluarga palem-paleman yang terdiri dari pohon kelapa, aren, dan pinang.'\n },\n ekosistem: {\n title: 'Tingkat Ekosistem',\n description: 'Ini adalah keberagaman habitat atau \"rumah\" bagi makhluk hidup. Setiap ekosistem memiliki kondisi unik (iklim, tanah, air) yang mendukung kehidupan yang berbeda-beda.',\n example: 'Contoh: Ekosistem hutan hujan tropis yang lebat, padang rumput yang luas, gurun yang kering, dan terumbu karang di lautan.'\n }\n };\n\n \/\/ Mobile Menu Toggle\n const menuBtn = document.getElementById('menu-btn');\n const mobileNav = document.getElementById('mobile-nav');\n menuBtn.addEventListener('click', () => {\n mobileNav.classList.toggle('hidden');\n });\n\n \/\/ Smooth Scrolling & Active Nav Link\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n if(mobileNav.classList.contains('hidden') === false){\n mobileNav.classList.add('hidden');\n }\n });\n });\n \n const sections = document.querySelectorAll('section');\n const navLinks = document.querySelectorAll('.nav-link');\n \n window.onscroll = () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 100) {\n current = section.getAttribute('id');\n }\n });\n\n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').includes(current)) {\n link.classList.add('active');\n }\n });\n };\n\n\n \/\/ Earth Layer Interaction\n const earthDiagram = document.getElementById('earth-diagram');\n const infoTitle = document.getElementById('info-title');\n const infoDescription = document.getElementById('info-description');\n const infoDetails = document.getElementById('info-details');\n\n earthDiagram.addEventListener('click', (e) => {\n const layerId = e.target.dataset.layer;\n if (layerId && layerData[layerId]) {\n const data = layerData[layerId];\n infoTitle.textContent = data.title;\n infoDescription.textContent = data.description;\n infoDetails.innerHTML = data.details.map(detail => `<li>${detail}<\/li>`).join('');\n }\n });\n \n \/\/ Crust Composition Chart\n const ctx = document.getElementById('crust-composition-chart').getContext('2d');\n new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['Oksigen (46.6%)', 'Silika (27.7%)', 'Aluminium (8.1%)', 'Besi (5.0%)', 'Lainnya'],\n datasets: [{\n label: 'Komposisi Kerak Bumi',\n data: [46.6, 27.7, 8.1, 5.0, 12.6],\n backgroundColor: [\n '#2E8B57',\n '#4682B4',\n '#D2B48C',\n '#A0522D',\n '#808080'\n ],\n borderColor: '#FDFBF5',\n borderWidth: 3\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'bottom',\n },\n title: {\n display: false,\n }\n }\n }\n });\n\n \/\/ Plate Tectonics Cards\n const plateBoundariesContainer = document.getElementById('plate-boundaries');\n const plateDetailContainer = document.getElementById('plate-details');\n const plateDetailTitle = document.getElementById('plate-detail-title');\n const plateDetailDescription = document.getElementById('plate-detail-description');\n const plateDetailExample = document.getElementById('plate-detail-example');\n\n plateData.forEach(plate => {\n const card = document.createElement('div');\n card.className = 'p-6 bg-[#F0EBE3] rounded-lg text-center cursor-pointer transition-transform transform hover:scale-105';\n card.innerHTML = `<div class=\"text-5xl mb-3\">${plate.icon}<\/div><h4 class=\"text-xl font-bold text-[#774F38]\">${plate.name}<\/h4>`;\n card.addEventListener('click', () => {\n plateDetailTitle.textContent = plate.name;\n plateDetailDescription.textContent = plate.description;\n plateDetailExample.textContent = plate.example;\n plateDetailContainer.classList.remove('hidden');\n });\n plateBoundariesContainer.appendChild(card);\n });\n \n \/\/ Biodiversity Tabs\n const tabButtons = document.querySelectorAll('.tab-btn');\n const tabContentContainer = document.getElementById('tab-content');\n\n function updateTabContent(tabId) {\n const data = biodiversityData[tabId];\n tabContentContainer.innerHTML = `\n <div class=\"bg-gray-100 p-6 rounded-lg\">\n <h4 class=\"text-xl font-bold text-[#774F38] mb-2\">${data.title}<\/h4>\n <p class=\"text-gray-700\">${data.description}<\/p>\n <p class=\"mt-4 text-sm italic text-gray-500\">${data.example}<\/p>\n <\/div>\n `;\n }\n\n tabButtons.forEach(button => {\n button.addEventListener('click', () => {\n tabButtons.forEach(btn => {\n btn.classList.remove('border-[#774F38]', 'text-[#774F38]');\n btn.classList.add('border-transparent', 'text-gray-500');\n });\n button.classList.add('border-[#774F38]', 'text-[#774F38]');\n button.classList.remove('border-transparent', 'text-gray-500');\n updateTabContent(button.dataset.tab);\n });\n });\n\n \/\/ Initialize first tab\n updateTabContent('gen');\n\n\n \/\/ Gemini API Integration for Fun Facts\n const factButtons = document.querySelectorAll('.generate-fact-btn');\n\n async function generateFact(topic, displayElement, spinnerElement) {\n displayElement.classList.add('hidden');\n spinnerElement.classList.remove('hidden');\n\n let chatHistory = [];\n const prompt = `Berikan satu fakta menarik yang ringkas dan mudah dipahami tentang ${topic} untuk anak sekolah dasar.`;\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 = 3;\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.ok) {\n if (response.status === 429) { \/\/ Too Many Requests\n const delay = baseDelay * Math.pow(2, retryCount);\n retryCount++;\n await new Promise(resolve => setTimeout(resolve, delay));\n continue;\n } else {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n }\n\n const result = await response.json();\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 factText = result.candidates[0].content.parts[0].text;\n displayElement.textContent = factText;\n displayElement.classList.remove('hidden');\n } else {\n displayElement.textContent = 'Gagal menghasilkan fakta menarik. Coba lagi.';\n displayElement.classList.remove('hidden');\n }\n break; \/\/ Exit loop on success\n } catch (error) {\n console.error('Error calling Gemini API:', error);\n if (retryCount === maxRetries - 1) {\n displayElement.textContent = 'Terjadi kesalahan saat mengambil fakta. Silakan coba lagi nanti.';\n displayElement.classList.remove('hidden');\n }\n retryCount++;\n const delay = baseDelay * Math.pow(2, retryCount);\n await new Promise(resolve => setTimeout(resolve, delay));\n } finally {\n spinnerElement.classList.add('hidden');\n }\n }\n }\n\n factButtons.forEach(button => {\n button.addEventListener('click', () => {\n const sectionId = button.id.replace('fact-', '');\n const displayElement = document.getElementById(`fact-display-${sectionId}`);\n const spinnerElement = document.getElementById(`loading-spinner-${sectionId}`);\n let topic = '';\n\n switch (sectionId) {\n case 'struktur':\n topic = 'struktur lapisan Bumi';\n break;\n case 'lempeng':\n topic = 'lempeng tektonik dan pergerakannya';\n break;\n case 'siklus':\n topic = 'siklus air dan iklim Bumi';\n break;\n case 'hayati':\n topic = 'keanekaragaman hayati dan mengapa itu penting';\n break;\n case 'gerakan':\n topic = 'rotasi dan revolusi Bumi serta dampaknya';\n break;\n case 'aksi':\n topic = 'cara menjaga lingkungan dan prinsip 3R (Reduce, Reuse, Recycle)';\n break;\n default:\n topic = 'Planet Bumi';\n }\n generateFact(topic, displayElement, spinnerElement);\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/p>\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-332","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"views":3,"_links":{"self":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332","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=332"}],"version-history":[{"count":3,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/posts\/332\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imahnoong.com\/wp\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}