Super Prompt: Web App AI Generator Modul Ajar
Salin seluruh teks di bawah garis ini dan tempelkan ke AI (ChatGPT/Claude/Gemini) untuk membuat ulang aplikasi web Anda.
Bertindaklah sebagai Senior Fullstack Web Developer yang ahli dalam UI/UX, integrasi API AI, dan manipulasi DOM (khususnya untuk konversi HTML ke Microsoft Word).
Tugas Anda adalah membuat aplikasi web "AI Modul Ajar Builder" (Generator Modul Ajar & LKPD Kurikulum Merdeka) dalam SATU FILE HTML TUNGGAL (HTML, Tailwind CSS via CDN, dan Vanilla JavaScript).
Berikut adalah spesifikasi dan persyaratan teknis yang SANGAT KETAT yang harus Anda ikuti:
1. Teknologi & Library
HTML5 standar.
Styling: Tailwind CSS (via CDN https://cdn.tailwindcss.com).
Font: Inter (Google Fonts) untuk UI, dan Times New Roman untuk dokumen cetak.
Ekspor Dokumen: Gunakan FileSaver.js (via CDN https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js).
2. Desain Antarmuka (UI)
Tema: Bersih, modern, dengan nuansa warna biru (blue-600) dan abu-abu (slate-50 background).
Form Input (Grid responsif):
Topik Utama / Materi Pokok (Input teks panjang).
Mata Pelajaran (Input teks).
Fase / Kelas (Input teks).
Tahun Ajaran (Input teks).
Model Pembelajaran (Dropdown Select: PBL, PjBL, Discovery, Inquiry, Cooperative, Tatap Muka).
Nama Guru (Input teks).
Sekolah (Input teks).
Tombol Aksi:
"✨ Generate dengan AI" (Warna biru).
"📝 Ekspor ke Word (.doc)" (Warna gelap/slate-800).Keduanya harus dinonaktifkan (disabled) saat proses loading berjalan.
Loading Overlay: Tampilkan spinner layar penuh transparan dengan teks "AI sedang menyusun Modul & LKPD..." saat proses generate berjalan.
Area Dokumen (Preview): Di bawah form, buat area berpusat bergaya kertas A4 (background putih, bayangan/shadow, padding lebar) dengan ID #print-area. Styling font di dalamnya harus meniru MS Word (Times New Roman, 11pt, spasi 1.5).
3. Logika JavaScript & Integrasi API Gemini
Buat variabel konstan apiKey (biarkan kosong "").
Fungsi generateAIContent():
Validasi input "Topik Utama" tidak boleh kosong.
Panggil API Google Gemini (gemini-2.5-flash-preview-09-2025 endpoint generateContent).
Buat fungsi fetchWithRetry untuk menangani kegagalan API dengan jeda (1s, 2s, 4s, 8s, 16s).
SYSTEM PROMPT UNTUK AI (SANGAT KRUSIAL - MASUKKAN KE DALAM JS):
Instruksikan AI Gemini di dalam kode JS dengan aturan berikut:
HANYA keluarkan HTML murni (tanpa tag <html>, <head>, <body>).
DILARANG MENGGUNAKAN SIMBOL MARKDOWN (**, ##). Gunakan <strong>, <h3>, dll.
DILARANG MENGGUNAKAN TABEL SAMA SEKALI untuk konten materi. Sajikan seluruh konten (Informasi Umum, Komponen Inti, Langkah Pembelajaran, Asesmen) dalam bentuk TEKS TERSTRUKTUR yang rapi menggunakan paragraf <p>, bullet list <ul><li>, dan nomor urut <ol><li>.
HAPUS komponen "Profil Pelajar Pancasila", gunakan hanya "Dimensi Profil Lulusan".
Langkah Pembelajaran harus berurutan dengan estimasi waktu.
Buatkan LKPD (teks saja) dengan kotak kosong untuk menggambar menggunakan <div style="min-height:150px; border:1px solid black; margin-bottom:20px;"></div>.
Buatkan Rubrik Penilaian dalam bentuk TEKS LIST (bukan tabel).
Pembersihan Output (Regex): Buat regex di JS untuk menghapus markdown fences (```html), mengubah sisa **teks** menjadi <strong>, * list menjadi <li>, dan ## heading menjadi <h3> untuk berjaga-jaga jika AI melanggar aturan.
4. Logika Rendering HTML
Fungsi renderDocument() harus menggabungkan output AI dengan:
Header Khusus: Teks rata tengah berbunyi "MODUL AJAR KURIKULUM MERDEKA", diikuti Mata Pelajaran dan Fase/Kelas. Beri garis bawah tebal ganda (border-bottom: 4px double #000).
Footer Khusus (Tanda Tangan): Sisipkan <div class="page-break"></div>, lalu buat tabel/grid layout tanpa garis untuk tempat tanda tangan "Mengetahui, Kepala Sekolah" (kiri) dan "Guru Mata Pelajaran" dengan tanggal hari ini (kanan).
5. Logika Ekspor ke Word (BAGIAN PALING PENTING & SULIT)
Fungsi exportDoc() tidak boleh hanya menyimpan HTML mentah. Anda harus mengonstruksi ulang HTML menjadi format yang dapat dibaca sempurna oleh Microsoft Word:
Bungkus konten dalam namespace XML Office: <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" ...>
Gunakan @page WordSection1 di dalam <style>: Set ukuran 595.3pt 841.9pt (A4) dan margin 54pt 54pt 54pt 54pt untuk atas, bawah, kiri, kanan.
Untuk mempertahankan kestabilan tabel (terutama tabel layout footer tanda tangan):
Kloning DOM, manipulasi kloningannya.
Setel tabel agar width: 100% !important, max-width: 100% !important, table-layout: fixed !important.
WAJIB TAMBAHKAN CSS MSO: mso-table-layout-alt: fixed; pada table dan mso-word-wrap: break-word !important; pada td dan th.
Hitung persentase lebar setiap sel (td) berdasarkan DOM asli di web, ubah menjadi bilangan bulat (Math.round), pastikan totalnya 100%, lalu suntikkan ke atribut width dan style.width setiap sel di kloningan.
Paksa semua td menggunakan word-wrap: break-word dan white-space: normal agar teks memanjang ke bawah, bukan membuat tabel keluar jalur margin Word.
Simpan menggunakan Blob dengan tipe MIME application/msword dan gunakan ekstensi .doc.
Tulis kode lengkapnya tanpa ada bagian yang dipotong/dilewati.
