Chargpt

{

  "prompt_name": "Website Presentasi Pengenalan Generative AI",

  "language": "id",

  "prompt": "Rancang dan tuliskan kode untuk website presentasi satu halaman (single page) untuk kelas/pelatihan berjudul: Pengenalan Generative AI: Dari ChatGPT sampai Gemini AI.\n\nKonteks & tujuan:\n1. Website digunakan sebagai media presentasi utama ketika saya mengajar di depan peserta (layaknya slide).\n2. Tampilan harus sangat menarik, modern, futuristik, dan memberi efek wow pada peserta.\n3. Struktur dan alur materi harus jelas sehingga mudah diikuti saat di-scroll dari atas ke bawah.\n\nGaya desain:\n- Nuansa futuristik, modern, bersih, mendukung mode gelap (dark mode).\n- Palet warna utama: latar belakang gelap elegan (misalnya #050816, #050B1E) dengan aksen neon biru, ungu, dan hijau.\n- Tipografi modern dan mudah dibaca di proyektor: gunakan font keluarga seperti Inter, Poppins, atau Manrope (sertakan fallback system font).\n- Layout clean dengan banyak ruang kosong, tidak terlalu padat teks.\n- Gunakan ilustrasi atau ikon bertema AI: otak digital, chip, jaringan saraf, robot ramah, pola generatif (gelombang, partikel, grid 3D). Boleh berupa placeholder atau bentuk abstrak berbasis CSS/SVG.\n- Berikan smooth scrolling antar section dan animasi ringan (misalnya fade-in, parallax halus, hover effect pada kartu) yang tidak mengganggu.\n\nStruktur halaman (section per section):\n1. Hero section\n   - Judul besar: Pengenalan Generative AI\n   - Subjudul: Memahami cara kerja dan pemanfaatan ChatGPT, Gemini AI, dan model generatif lainnya.\n   - Dua tombol utama (CTA) berdampingan:\n     - Mulai Kelas\n     - Download Materi (PDF) (gunakan tautan dummy, misalnya href='#')\n   - Ilustrasi/visual utama bertema generative AI yang mencolok (boleh berupa ilustrasi abstrak, gradient 3D, atau placeholder gambar dengan alt text yang jelas).\n\n2. Agenda / Outline materi\n   - Tampilkan sebagai timeline horizontal/vertikal atau deretan card rapi.\n   - Enam poin utama:\n     1) Apa itu Generative AI?\n     2) Contoh: ChatGPT, Gemini, Claude, dan lainnya\n     3) Dasar cara kerja (model bahasa besar / LLM)\n     4) Contoh penggunaan di kehidupan sehari-hari\n     5) Etika dan keterbatasan AI\n     6) Latihan: Menulis prompt yang efektif\n   - Setiap item agenda dapat di-hover atau di-klik untuk menampilkan ringkasan singkat (gunakan solusi tanpa JavaScript jika memungkinkan, misalnya elemen details/summary atau teknik CSS; jika perlu JavaScript, buat yang sangat sederhana).\n\n3. Section: Apa itu Generative AI?\n   - Penjelasan singkat dalam bahasa Indonesia yang sederhana, cocok untuk pemula.\n   - Gunakan paragraf pendek dan beberapa bullet point.\n   - Sertakan visual sederhana (ikon atau diagram alur singkat) untuk mendukung pemahaman.\n\n4. Section: Contoh AI generatif (ChatGPT, Gemini, dan lain-lain)\n   - Tampilkan beberapa kartu (card) untuk tiap AI:\n     - ChatGPT: deskripsi singkat dan satu contoh prompt.\n     - Gemini: deskripsi singkat dan satu contoh penggunaan.\n     - Tambahkan minimal dua contoh lain, misalnya Claude dan Copilot, dengan deskripsi singkat.\n   - Sertakan tabel perbandingan sederhana yang menampilkan:\n     - Nama model\n     - Kelebihan utama\n     - Contoh penggunaan\n   - Pastikan teks ringkas dan mudah dibaca.\n\n5. Section: Cara kerja singkat LLM\n   - Visual sederhana alur: input teks -> model -> output teks (boleh berupa diagram dengan box dan panah).\n   - Poin-poin ringkas tentang:\n     - Data pelatihan dalam jumlah besar\n     - Pengenalan pola bahasa\n     - Prediksi probabilitas kata selanjutnya\n     - Konsep prompt dan respons\n   - Hindari istilah teknis yang rumit; fokus pada pemahaman intuitif.\n\n6. Section: Praktik langsung / demo\n   - Area untuk menampilkan contoh prompt dan respons AI.\n   - Gunakan tampilan seperti chat bubble atau blok kode yang rapi.\n   - Berikan minimal tiga contoh siap pakai, misalnya:\n     - Prompt untuk menulis ringkasan materi.\n     - Prompt untuk membuat ide konten atau media sosial.\n     - Prompt untuk membantu belajar (menjelaskan konsep sulit).\n   - Sediakan elemen interaktif berupa tombol atau link bertuliskan: Tampilkan tips menulis prompt yang baik, yang ketika diaktifkan memunculkan daftar tips singkat (boleh menggunakan accordion, modal sederhana, atau panel yang muncul; gunakan CSS murni jika bisa, atau JavaScript minimal).\n\n7. Section: Etika, batasan, dan tips aman\n   - Daftar poin yang menjelaskan:\n     - Potensi bias dalam model AI\n     - Isu privasi dan data sensitif\n     - Risiko informasi salah (hallucination)\n     - Pentingnya verifikasi fakta dan tidak percaya 100 persen\n   - Berikan tips penggunaan yang bertanggung jawab dan aman dalam konteks pekerjaan, belajar, dan kehidupan sehari-hari.\n\n8. Section: Q&A / diskusi\n   - Area yang menampilkan beberapa contoh pertanyaan umum tentang generative AI beserta jawaban singkat.\n   - Sediakan ruang atau elemen placeholder untuk mencatat pertanyaan peserta saat kelas (misalnya daftar kosong dengan teks placeholder atau area catatan).\n\n9. Footer\n   - Tampilkan:\n     - Nama pengajar\n     - Informasi kontak (email atau media sosial)\n     - Tautan tambahan (dummy) jika ada, misalnya ke materi lanjutan.\n   - Sertakan catatan kecil: Website ini dibuat khusus untuk sesi pelatihan Pengenalan Generative AI.\n\nKebutuhan khusus untuk pengajar (UX pengajar):\n- Semua teks utama dalam bahasa Indonesia yang jelas, ramah, dan mudah dipahami peserta pemula.\n- Heading besar dan kontras tinggi, mudah dibaca dari jarak jauh di layar proyektor.\n- Setiap section terasa seperti satu slide terpisah ketika di-scroll; gunakan tinggi minimum dan spacing yang membuat setiap section menonjol.\n- Prioritaskan tampilan untuk layar lebar (desktop/proyektor) dengan layout responsif yang tetap rapi di tablet dan ponsel.\n- Gunakan struktur HTML5 yang semantik dan rapi: satu h1 untuk judul utama halaman, lalu h2 untuk setiap section utama, h3 untuk subbagian.\n- Pastikan kontras warna memenuhi standar keterbacaan (hindari teks abu-abu muda di atas latar abu-abu).\n\nPersyaratan teknis dan output:\n- Anggap Anda adalah model yang dapat menghasilkan kode HTML dan CSS (serta JavaScript bila benar-benar diperlukan).\n- Hasil akhir berupa satu file HTML lengkap yang sudah siap digunakan sebagai website presentasi.\n- Sertakan:\n  1) Struktur HTML lengkap dengan semua section sesuai struktur di atas.\n  2) CSS yang diperlukan untuk menghasilkan desain futuristik, gelap, dan menarik (boleh menggunakan CSS internal di dalam tag style pada head).\n  3) Jika dibutuhkan JavaScript untuk interaksi kecil (hover/klik untuk menampilkan ringkasan, panel tips, dan sebagainya), letakkan dalam tag script di akhir body dan buat sesederhana mungkin.\n  4) Teks contoh (copywriting) yang lengkap untuk setiap section, dalam bahasa Indonesia.\n- Gunakan nama class dan id yang deskriptif dan konsisten.\n- Aktifkan smooth scrolling (misalnya dengan properti scroll-behavior) dan transisi/animasi ringan menggunakan CSS.\n- Berikan komentar singkat di dalam kode untuk menandai awal setiap section utama (misalnya: section hero, section agenda, dan seterusnya).\n- Berikan hanya output berupa kode (file HTML lengkap) tanpa penjelasan naratif di luar tag kode."

}