MasterClass Google Sites:
Integrasi Media Ajar & Publikasi Bebas Belajar.id

Bertindaklah sebagai Ahli Instructional Design dan Web Developer Spesialis Google Sites untuk Pendidikan.
Rancanglah cetak biru (blueprint) struktur portal media ajar terpadu berbasis Google Sites untuk mata pelajaran [Mata Pelajaran & Fase/Kelas: misal IPA Kelas 7 / Matematika SD Kelas 5].

Spesifikasi & Output yang Harus Dihasilkan:
1. PETA STRUKTUR SITUS & HIERARKI NAVIGASI (SITEMAP):
   - Halaman Utama (Beranda): Sambutan inspiratif, capaian pembelajaran (CP), profil guru, petunjuk navigasi belajar bagi siswa.
   - Halaman Modul Ajar: Integrasi dokumen materi (tata letak 2 kolom antara ringkasan teks dan embed materi visual).
   - Halaman Laboratorium & Simulasi Virtual: Ruang embed kode HTML interaktif hasil generative AI.
   - Halaman Arena Gamifikasi: Tempat bermain kuis edukatif, drag-and-drop, dan tantangan logika mandiri.
   - Halaman Asesmen & Refleksi: Rubrik penilaian, embed Google Forms / lembar kerja siswa (LKS), dan form umpan balik.

2. PANDUAN TATA LETAK BLOK KONTEN (LAYOUT GRID):
   - Rekomendasikan kombinasi blok konten bawaan Google Sites (Blok 1 gambar + teks, Blok 3 kolom kartu materi, dan Banner lebar).
   - Tentukan jenis Header: Spanduk Lebar (Large Banner) untuk Beranda dan Spanduk Standar (Banner) untuk sub-halaman.

3. PALET WARNA, TIPOGRAFI & TEMA REKOMENDASI:
   - Pilih tema bawaan Google Sites terbaik (misal: "Aristoteles" atau "Diplomat") beserta kode aksen warna yang ramah mata anak dan elegan.
   - Standar gaya penulisan judul (Heading 1), sub-judul (Heading 2), dan teks tubuh agar mudah dipindai (scannable) oleh siswa.

Bertindaklah sebagai Guru Kreatif dan Web Copywriter Edukasi.
Buatkan seluruh naskah teks (copywriting) siap pakai untuk halaman Beranda Google Sites media ajar bertema [Sebutkan Topik Spesifik Pembelajaran, misal: "Petualangan Ekosistem Nusantara - Biologi SMA"].

Komponen Naskah yang Diperlukan:
1. TEKS BANNER UTAMA (HERO SECTION):
   - Judul Besar Situs (Catchy, memotivasi, dan mencerminkan esensi materi).
   - Tagline / Sub-heading penjelas 1 kalimat padat tentang target kompetensi.
   - Teks tombol ajakan bertindak (CTA) pemantik rasa ingin tahu: misal "Mulai Petualangan Belajar" atau "Buka Laboratorium Virtual".

2. PETUNJUK ALUR BELAJAR (LEARNING PATHWAY) 4 LANGKAH:
   - Langkah 1 (Eksplorasi): Panduan membaca modul interaktif.
   - Langkah 2 (Eksperimen): Panduan menjalankan simulasi / laboratorium virtual.
   - Langkah 3 (Tantangan): Panduan menyelesaikan kuis gamifikasi.
   - Langkah 4 (Refleksi): Panduan pengisian asesmen formatif.

3. PANDUAN PENGGUNAAN FITUR UNTUK SISWA & WALI MURID:
   - Catatan singkat cara membuka simulasi di laptop maupun smartphone.
   - Tips jika simulasi lambat atau layar terpotong.
   - Kolom kontak guru pembimbing jika siswa membutuhkan bantuan/tanya jawab.

Bertindaklah sebagai Senior Frontend Engineer dan Educational Media Developer.
Buatkan kode aplikasi interaktif single-file HTML utuh materi [Mata Pelajaran & Topik Spesifik] yang KHUSUS dirancang agar 100% responsif, bebas cut-off (tidak terpotong), dan berfungsi sempurna saat disematkan melalui menu "Sisipkan -> Sematkan Kode (Embed Code)" di Google Sites.

Ketentuan Wajib Embed Google Sites:
1. VIEWPORT & CONTAINER RESPONSIVE:
   - Gunakan CSS viewport fleksibel: container utama memiliki lebar `width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box;`.
   - Hindari penggunaan unit `100vh` kaku karena iframe Google Sites memiliki batasan tinggi manual; gunakan `min-height: 480px` dengan scroll internal yang halus jika konten panjang.
   - Tambahkan tombol "Mode Layar Penuh" (Fullscreen Mode) via JavaScript API agar siswa di smartphone bisa memperbesar game secara leluasa.

2. PENANGANAN SANDBOX IFRAME & AUDIO:
   - Gunakan Web Audio API sintetis (bukan file audio eksternal mp3 online yang rentan diblokir CORS oleh Google iframe sandbox).
   - Pastikan interaksi Audio dipicu oleh aksi sentuh/klik pertama pengguna (user gesture event) untuk mematuhi kebijakan autoplay browser modern.

3. ELEMEN EDUKASI & FITUR UTAMA:
   - Sajikan media interaktif [Pilih: Simulasi Konsep / Kuis Drag-and-Drop / Lab Virtual Interaktif].
   - Sertakan indikator skor realtime, tombol reset/ulangi, dan popup penjelasan konsep saat jawaban benar/salah.
   - Desain modern bernuansa glassmorphism dengan Tailwind CSS (via CDN) dan ikon FontAwesome.

Bertindaklah sebagai Frontend Developer UI/UX.
Buatkan aplikasi widget mini single-file HTML mandiri untuk disematkan di bilah samping atau header Google Sites pembelajaran guru.

Fitur Widget yang Diminta:
1. JAM DIGITAL & KALENDER AKTIF: Menampilkan waktu lokal WIB/WITA/WIT secara realtime dengan format tanggal Indonesia lengkap.
2. COUNTDOWN TIMER ASESMEN / TENGGAT TUGAS:
   - Hitung mundur hari, jam, menit, dan detik menuju tanggal penting [Tentukan: misal Asesmen Akhir Semester / Batas Pengumpulan Proyek].
   - Indikator visual progres bar waktu yang tersisa.
3. TO-DO LIST CHECKLIST BELAJAR SISWA (INTERAKTIF):
   - Daftar 4-5 target capaian materi pekan ini.
   - Siswa dapat mengklik checkbox untuk mencoret tugas yang sudah diselesaikan (tersimpan di localStorage browser siswa).
4. KATA MOTIVASI HARIAN: Nasihat bijak motivasi belajar yang berganti secara acak setiap tombol refresh diklik.
5. DESAIN: Dark-mode elegan bernuansa indigo/slate dengan sudut melengkung rounded-2xl dan efek shadow halus.

Bertindaklah sebagai Fullstack EdTech Developer.
Rancanglah kode single-file HTML widget "Papan Peringkat Juara (Leaderboard) Kelas Interaktif" yang siap di-embed di Google Sites.

Spesifikasi Teknis:
1. MEKANISME DATA:
   - Mampu membaca data tabel dari publikasi CSV Google Sheets (via fetch CSV publik) ATAU menggunakan data JSON mockup lokal yang mudah diedit langsung oleh guru.
   - Format kolom data: Peringkat, Nama Siswa / Tim, Kelas, Total Poin, dan Lencana (Badge) Pencapaian.

2. TAMPILAN LEADERBOARD:
   - Desain Podium Juara 1, 2, dan 3 dengan ornamen mahkota emas, perak, dan perunggu yang mencolok.
   - Daftar peringkat peringkat 4 hingga 10 dalam format tabel bersih dengan animasi zebra striping.
   - Fitur pencarian nama siswa untuk memudahkan pengecekan skor secara mandiri.

3. KETENTUAN KEAMANAN & PRIVASI GURUS:
   - Sertakan opsi menyamarkan nama (misal nama samaran / avatar) untuk menjaga kenyamanan psikologis peserta didik sesuai prinsip pedagogi positif.

Bertindaklah sebagai Konsultan Teknologi Pendidikan & Admin Google Workspace for Education (Belajar.id).
Susunlah Panduan Teknis & Checklist Terperinci "SOP Anti Gagal Publikasi Google Sites Bebas Akses Publik" untuk guru yang membangun media ajar menggunakan akun Belajar.id (@guru.sd.belajar.id, @guru.smp.belajar.id, @guru.sma.belajar.id, atau @madrasah.kemenag.go.id).

Latar Masalah:
Secara default, Google Sites yang dibuat dengan akun Belajar.id mengunci izin akses hanya untuk sesama anggota kementerian/sekolah. Siswa atau wali murid yang membuka dari smartphone pribadi tanpa akun belajar.id mendapati halaman error "Anda memerlukan izin akses" atau dokumen Google Drive/Slide di dalamnya kosong (blank white box).

Uraikan Langkah Konkret untuk Menyelesaikan Masalah Tersebut:
1. LANGKAH 1: PENGATURAN DI MENU "BAGIKAN DENGAN ORANG LAIN" (IKON ORANG +):
   - Uraikan di mana letak tombolnya.
   - Cara mengubah opsi "Situs yang dipublikasikan" dari "Kementerian Pendidikan" menjadi "Publik" (Siapa saja di internet dapat menemukan dan membuka).

2. LANGKAH 2: SETELAN PUBLIKASI (PUBLISH SETTINGS) & PEMILIHAN SLUG:
   - Panduan menentukan URL akhir yang mudah diingat (misal: sites.google.com/view/sains-kelas7-spensam).
   - Penjelasan apakah opsi "Minta mesin telusur untuk tidak menampilkan situs" perlu dicentang atau tidak.

3. LANGKAH 3: PROTOKOL MEMBUKA AKSES ASET EMBED GOOGLE DRIVE (PDF, SLIDE, FORMS):
   - Jelaskan langkah wajib membuka izin Google Drive file yang disematkan: Klik kanan file di Drive -> Bagikan -> Akses umum ubah dari "Dibatasi" menjadi "Siapa saja yang memiliki link" dengan peran "Pelihat (Viewer)".
   - Solusi untuk Google Forms kuis agar siswa tidak diminta login email Belajar.id sekolah.

4. LANGKAH 4: CARA MEMBEDAKAN LINK EDITOR DENGAN LINK PUBLIK RESMI:
   - Berikan perbandingan visual URL: Mengapa link berekstensi `/edit` keliru, dan tunjukkan cara mengambil link resmi berekstensi `/view` melalui ikon rantai di bilah alat atas.

Bertindaklah sebagai Guru Wali Kelas dan Komunikator Sekolah yang Ramah.
Buatkan paket naskah pesan pengumuman (broadcast) WhatsApp / Telegram untuk membagikan tautan portal Google Sites media pembelajaran materi [Nama Materi & Kelas] kepada siswa dan orang tua / wali murid.

Paket Naskah Meliputi:
1. PESAN RESMI UNTUK GRUP WALI MURID:
   - Sapaan hangat dan santun kepada bapak/ibu wali murid.
   - Penjelasan maksud dan tujuan portal Google Sites sebagai media ajar pendamping mandiri di rumah.
   - Tautan publik situs (diberi tanda jelas).
   - Catatan bahwa situs BISA DIBUKA LANGSUNG dari HP apa pun tanpa perlu login email khusus.

2. PESAN PEMANTIK MOTIVASI UNTUK GRUP SISWA:
   - Bahasa komunikatif, seru, dan membakar semangat belajar anak zaman sekarang.
   - Instruksi singkat: cara mencoba gim edukasi interaktif dan laboratorium virtual yang ada di dalam situs.

3. TROUBLESHOOTING RINGKAS (PEMECAHAN MASALAH KILAT):
   - "Jika halaman kuis tampak putih/blank": Saran menyegarkan (refresh) halaman atau membuka di browser Chrome.
   - "Jika tulisan terlalu kecil di HP": Panduan memutar ponsel ke posisi lanskap (horizontal) atau menekan tombol Fullscreen.