cobakoding

import React, { useState, useRef, useEffect } from 'react'; import { BookOpen, Code, GraduationCap, MessageSquare, CheckCircle, ChevronRight, Play, Award, Star, Menu, X, Printer, Download, User, AlertTriangle, Send, Settings, Edit, Trash2, ListChecks } from 'lucide-react'; // Fungsi utama komponen aplikasi const App = () => { // State utama const [activeTab, setActiveTab] = useState('modules'); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [userName, setUserName] = useState(''); const [isCertified, setIsCertified] = useState(false); // State untuk Role Management (FITUR ADMIN BARU) const [userRole, setUserRole] = useState('user'); // 'user' atau 'admin' const isAdmin = userRole === 'admin'; // --- Data Modul Pelatihan --- const initialModules = [ { id: 1, title: "Pengenalan Gemini AI", duration: "15 Menit", level: "Dasar", description: "Memahami apa itu Gemini, bagaimana cara kerjanya, dan etika penggunaan AI dalam pendidikan.", content: (

Apa itu Gemini?

Gemini adalah model AI generatif dari Google yang mampu memahami, mengolah, dan menggabungkan berbagai jenis informasi termasuk teks, kode, audio, gambar, dan video.

Perbedaan dengan Mesin Pencari

Google Search: Mencari informasi yang sudah ada.
Gemini: Membuat konten baru, merangkum, dan menganalisis data.

Etika & Halusinasi AI

AI bisa melakukan "halusinasi" (memberikan info salah dengan percaya diri). Guru harus selalu memverifikasi output AI, terutama untuk fakta sejarah atau data saintifik.

) }, { id: 2, title: "Teknik Prompting untuk Guru", duration: "20 Menit", level: "Menengah", description: "Belajar membuat instruksi (prompt) yang efektif untuk mendapatkan hasil RPP, soal, dan materi ajar terbaik.", content: (

Rumus Prompt Efektif: PREP

P - Persona

Berikan peran. Contoh: "Bertindaklah sebagai Guru Biologi senior..."

R - Request

Tugas spesifik. Contoh: "Buatkan rencana pembelajaran 45 menit tentang fotosintesis."

E - Example

Berikan contoh format. Contoh: "Gunakan format tabel dengan kolom waktu dan aktivitas."

P - Parameter

Batasan. Contoh: "Untuk siswa SMP kelas 7, gaya bahasa santai."

) } ]; const [modules, setModules] = useState(initialModules); // Data simulasi kelulusan const initialCertifications = [ { id: 101, name: "Siti Aisyah, S.Pd.", date: "2024-11-01", status: "Lulus", quizScore: "90%" }, { id: 102, name: "Bambang Wijaya, M.Sc.", date: "2024-11-05", status: "Lulus", quizScore: "83%" }, { id: 103, name: "Nurul Hidayah", date: "2024-11-10", status: "Belum Lulus", quizScore: "65%" }, ]; const [certifications, setCertifications] = useState(initialCertifications); // --- Komponen Halaman Admin (BARU) --- const AdminPage = () => { const [adminActiveTab, setAdminActiveTab] = useState('modules'); // State untuk form edit modul const [editingModule, setEditingModule] = useState(null); // null atau object modul const [newModuleTitle, setNewModuleTitle] = useState(''); const [newModuleDesc, setNewModuleDesc] = useState(''); const [newModuleDuration, setNewModuleDuration] = useState(''); const [newModuleLevel, setNewModuleLevel] = useState('Dasar'); // Reset form saat tab admin berubah useEffect(() => { setEditingModule(null); }, [adminActiveTab]); // Handle Edit Modul const handleEditModule = (mod) => { setEditingModule(mod.id); setNewModuleTitle(mod.title); setNewModuleDesc(mod.description); setNewModuleDuration(mod.duration); setNewModuleLevel(mod.level); }; // Handle Simpan Modul const handleSaveModule = () => { if (!newModuleTitle || !newModuleDesc || !newModuleDuration) { // Mengganti alert() dengan UI pesan khusus di masa depan, tapi untuk saat ini menggunakan alert sederhana window.alert("Semua kolom harus diisi!"); return; } if (editingModule === 'new') { // Tambah Modul Baru const newId = Math.max(...modules.map(m => m.id), 0) + 1; const newMod = { id: newId, title: newModuleTitle, description: newModuleDesc, duration: newModuleDuration, level: newModuleLevel, content:

Konten modul baru. Silakan edit langsung di kode sumber atau kembangkan fungsionalitas editor lebih lanjut.

}; setModules([...modules, newMod]); } else { // Edit Modul Existing setModules(modules.map(mod => mod.id === editingModule ? { ...mod, title: newModuleTitle, description: newModuleDesc, duration: newModuleDuration, level: newModuleLevel } : mod )); } // Reset form setEditingModule(null); setNewModuleTitle(''); setNewModuleDesc(''); setNewModuleDuration(''); setNewModuleLevel('Dasar'); }; // Handle Hapus Modul const handleDeleteModule = (id) => { // Menggunakan window.confirm() sebagai placeholder untuk modal kustom. if (window.confirm("Apakah Anda yakin ingin menghapus modul ini?")) { setModules(modules.filter(mod => mod.id !== id)); } }; // Komponen Daftar Modul const ModuleManagement = () => (

Daftar Modul Pelatihan ({modules.length})

{/* Form Edit/Tambah Modul */} {(editingModule !== null) && (

{editingModule === 'new' ? 'Tambah Modul Baru' : `Edit Modul ID: ${editingModule}`}

setNewModuleTitle(e.target.value)} className="p-2 border rounded-lg"/> setNewModuleDuration(e.target.value)} className="p-2 border rounded-lg"/>

setNewModuleDesc(e.target.value)} className="w-full p-2 border rounded-lg mt-4 h-20"/>
                    <select value={newModuleLevel} onChange={(e) => setNewModuleLevel(e.target.value)} className="w-full p-2 border rounded-lg mt-4">
                        <option value="Dasar">Dasar</option>
                        <option value="Menengah">Menengah</option>
                        <option value="Lanjutan">Lanjutan</option>
                    </select>
                    <div className="mt-4 flex justify-end gap-2">
                        <button onClick={() => setEditingModule(null)} className="bg-gray-300 px-4 py-2 rounded-lg hover:bg-gray-400">Batal</button>
                        <button onClick={handleSaveModule} className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">Simpan Perubahan</button>
                    </div>
                </div>
            )}

<ul className="space-y-3">
                {modules.map(mod => (
                    <li key={mod.id} className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex justify-between items-center">
                        <div>
                            <p className="font-semibold text-gray-800">{mod.title}</p>
                            <p className="text-sm text-gray-500">{mod.duration} | {mod.level}</p>
                        </div>
                        <div className="flex gap-2">
                            <button 
                                onClick={() => handleEditModule(mod)}
                                className="text-blue-600 hover:text-blue-800 p-2 rounded-full hover:bg-blue-50 transition-colors"
                            >
                                <Edit size={18} />
                            </button>
                            <button 
                                onClick={() => handleDeleteModule(mod.id)}
                                className="text-red-600 hover:text-red-800 p-2 rounded-full hover:bg-red-50 transition-colors"
                            >
                                <Trash2 size={18} />
                            </button>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );

// Komponen Daftar Kelulusan
    const CertificationManagement = () => (
        <div className="space-y-6">
            <h3 className="text-xl font-bold text-gray-800 flex items-center gap-2">
                <ListChecks size={20} className="text-indigo-600"/> Data Kelulusan ({certifications.length})
            </h3>
            
            <div className="overflow-x-auto bg-white rounded-xl shadow-sm border border-gray-100">
                <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                        <tr>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nama Peserta</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tgl Lulus</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Skor Kuis</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
                        </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                        {certifications.map(cert => (
                            <tr key={cert.id} className="hover:bg-gray-50">
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{cert.id}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{cert.name}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{cert.date}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{cert.quizScore}</td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${cert.status === 'Lulus' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
                                        {cert.status}
                                    </span>
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    <button className="text-indigo-600 hover:text-indigo-900">Kirim Ulang</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            
            <div className="bg-yellow-50 p-4 rounded-lg text-sm text-yellow-800 border-l-4 border-yellow-500">
                <p>Fitur ini mensimulasikan data kelulusan. Data kelulusan dari pengguna saat ini (jika lulus) akan ditambahkan ke daftar ini secara dinamis.</p>
            </div>
        </div>
    );

return (
        <div className="animate-fade-in">
            <div className="text-center mb-8">
                <h2 className="text-3xl font-bold text-gray-800 mb-2 flex items-center justify-center gap-2">
                    <Settings className="text-red-500" /> Panel Administrasi
                </h2>
                <p className="text-gray-600">Kelola kurikulum dan data peserta pelatihan.</p>
            </div>
            
            <div className="bg-white p-6 rounded-3xl shadow-xl border border-gray-200">
                {/* Admin Sub-Tabs */}
                <div className="flex border-b mb-6">
                    <button 
                        onClick={() => setAdminActiveTab('modules')}
                        className={`py-2 px-4 font-semibold transition-colors ${adminActiveTab === 'modules' ? 'border-b-4 border-indigo-600 text-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
                    >
                        Manajemen Modul
                    </button>
                    <button 
                        onClick={() => setAdminActiveTab('certifications')}
                        className={`py-2 px-4 font-semibold transition-colors ${adminActiveTab === 'certifications' ? 'border-b-4 border-indigo-600 text-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
                    >
                        Data Kelulusan
                    </button>
                </div>
                
                {adminActiveTab === 'modules' && <ModuleManagement />}
                {adminActiveTab === 'certifications' && <CertificationManagement />}
            </div>
        </div>
    );
  };

// --- Komponen Halaman ---

const Hero = () => (
    <div className="bg-indigo-600 text-white rounded-3xl p-8 md:p-12 mb-8 relative overflow-hidden shadow-xl">
      <div className="absolute top-0 right-0 opacity-10 transform translate-x-1/4 -translate-y-1/4">
        <Star size={300} />
      </div>
      <div className="relative z-10 max-w-2xl">
        <h1 className="text-4xl md:text-5xl font-bold mb-4 leading-tight">
          Revolusi Mengajar dengan <span className="text-yellow-300">Gemini AI</span>
        </h1>
        <p className="text-indigo-100 text-lg mb-8">
          Platform pelatihan mandiri untuk memberdayakan guru Indonesia. 
          Hemat waktu administrasi, fokus pada siswa.
        </p>
        <div className="flex flex-wrap gap-4">
          <button 
            onClick={() => setActiveTab('modules')}
            className="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold shadow-lg hover:bg-yellow-300 hover:text-indigo-800 transition-all flex items-center gap-2"
          >
            Mulai Belajar <ChevronRight size={20} />
          </button>
          <button 
            onClick={() => setActiveTab('certificate')}
            className="bg-indigo-700 text-white border border-indigo-400 px-8 py-3 rounded-full font-bold shadow-lg hover:bg-indigo-800 transition-all flex items-center gap-2"
          >
            Lihat Sertifikat <Award size={20} />
          </button>
        </div>
      </div>
       {/* Role Switcher (BARU - Dibuat lebih menonjol) */}
      <div className="absolute top-4 right-4 p-2 rounded-xl text-sm flex flex-col md:flex-row items-center gap-2 shadow-inner backdrop-blur-sm bg-white/20">
        <span className="font-semibold text-white text-base">Alihkan Peran:</span>
        <button
          onClick={() => setUserRole(isAdmin ? 'user' : 'admin')}
          className={`px-4 py-2 rounded-full font-bold transition-all flex items-center gap-2 shadow-md ${
            isAdmin ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-green-500 text-white hover:bg-green-600'
          }`}
        >
          {isAdmin ? <Settings size={18} /> : <User size={18} />} 
          Mode Saat Ini: {isAdmin ? 'Admin' : 'Guru'}
        </button>
      </div>
    </div>
  );

const CertificatePage = () => {
    const [validationError, setValidationError] = useState('');
    const [emailInput, setEmailInput] = useState('');
    const [emailStatus, setEmailStatus] = useState(null); 
    const inputRef = useRef(null);

const today = new Date().toLocaleDateString('id-ID', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });

useEffect(() => {
      if (!isCertified && inputRef.current) {
        inputRef.current.focus();
      }
    }, [isCertified]);

const handlePrint = () => {
        window.print();
    };

const handleSendEmail = () => {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(emailInput)) {
        setEmailStatus({ type: 'error', message: "Format email tidak valid." });
        return;
      }

setEmailStatus({ type: 'info', message: "Memproses pengiriman (Simulasi)..." });

setTimeout(() => {
        setEmailStatus({ 
          type: 'success', 
          message: `Berhasil! Silakan cek email Anda di ${emailInput}. Anda perlu mengunduh PDF (melalui menu Cetak) dan melampirkannya ke email Anda secara manual.` 
        });
      }, 2000);
    };

return (
      <div className="animate-fade-in max-w-5xl mx-auto">
        <div className="text-center mb-8 print:hidden">
          <h2 className="text-3xl font-bold text-gray-800 mb-2">Sertifikasi Guru AI</h2>
          <p className="text-gray-600">Dapatkan pengakuan profesional atas kompetensi penggunaan AI dalam pembelajaran.</p>
        </div>

{!isCertified ? (
          <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-200 text-center max-w-xl mx-auto">
            <div className="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6 text-indigo-600">
               <User size={40} />
            </div>
            <h3 className="text-xl font-bold mb-4">Personalisasi Sertifikat Anda</h3>
            <p className="text-gray-500 mb-6 text-sm">Masukkan nama lengkap beserta gelar untuk dicetak pada sertifikat kelulusan.</p>
            
            <div className="mb-6">
              <input 
                ref={inputRef}
                type="text" 
                placeholder="Contoh: Budi Santoso, S.Pd., M.Pd."
                className={`w-full p-4 border-2 rounded-xl focus:ring-0 text-center text-lg font-semibold ${validationError ? 'border-red-500' : 'border-gray-300 focus:border-indigo-500'}`}
                value={userName}
                onChange={(e) => {setUserName(e.target.value); setValidationError('');}}
              />
            </div>

{validationError && (
                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4 flex items-center justify-center gap-2 text-sm">
                    <AlertTriangle size={16} />
                    {validationError}
                </div>
            )}

<button 
              onClick={handlePublish}
              className="w-full bg-indigo-600 text-white py-4 rounded-xl font-bold hover:bg-indigo-700 transition-all shadow-md flex justify-center items-center gap-2"
            >
              <Award size={20} /> Terbitkan Sertifikat
            </button>
            <p className="text-xs text-gray-400 mt-4">*Sertifikat ini bersifat simulasi dan hanya dicetak setelah Anda klik tombol terbitkan.</p>
          </div>
        ) : (
          <div className="flex flex-col items-center">
            {/* Tampilan Sertifikat - Konten ini akan dicetak */}
            <div className="bg-white p-1 md:p-2 shadow-2xl border-8 border-double border-indigo-900 w-full max-w-4xl relative mb-8 overflow-hidden print:shadow-none print:border-none print:p-0">
               {/* Background Pattern */}
               <div className="absolute inset-0 opacity-5 pointer-events-none flex items-center justify-center">
                  <GraduationCap size={400} />
               </div>
               
               {/* Sudut Ornamen */}
               <div className="absolute top-0 left-0 w-24 h-24 border-t-8 border-l-8 border-yellow-500"></div>
               <div className="absolute top-0 right-0 w-24 h-24 border-t-8 border-r-8 border-yellow-500"></div>
               <div className="absolute bottom-0 left-0 w-24 h-24 border-b-8 border-l-8 border-yellow-500"></div>
               <div className="absolute bottom-0 right-0 w-24 h-24 border-b-8 border-r-8 border-yellow-500"></div>

<div className="border-4 border-indigo-100 p-8 md:p-12 text-center h-full relative z-10 bg-white/90 print:border-none print:p-8">
                  {/* Header */}
                  <div className="flex justify-center items-center gap-3 mb-4">
                    <GraduationCap className="text-indigo-700" size={40} />
                    <h1 className="text-2xl font-bold text-indigo-900 tracking-wider">GURUGEMINI.AI</h1>
                  </div>
                  
                  <h2 className="text-4xl md:text-5xl font-serif font-bold text-gray-800 mb-2 mt-8 uppercase tracking-widest text-yellow-600">Sertifikat Kompetensi</h2>
                  <p className="text-gray-500 font-serif italic mb-8">No: 2024/AI-TRAINING/{Math.floor(Math.random() * 10000)}</p>

<p className="text-gray-600 text-lg mb-2">Diberikan dengan bangga kepada:</p>
                  
                  {/* Nama User */}
                  <div className="my-8 relative inline-block">
                    <h3 className="text-3xl md:text-5xl font-bold text-indigo-800 font-serif border-b-2 border-indigo-200 pb-2 px-8">
                      {userName}
                    </h3>
                  </div>

<p className="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed mb-12">
                    Telah berhasil menyelesaikan pelatihan intensif <strong>"Pemanfaatan Gemini AI untuk Pendidikan"</strong>.
                    Peserta telah menunjukkan kompetensi dalam <em>Prompt Engineering</em>, Penyusunan RPP Otomatis, dan Etika AI.
                  </p>

<div className="flex flex-col md:flex-row justify-between items-center px-12 md:px-32 mt-12 gap-8">
                    <div className="text-center">
                      <div className="font-script text-2xl text-indigo-600 mb-2 font-bold">Rizky Dev</div>
                      <div className="w-40 h-0.5 bg-gray-400 mx-auto mb-2"></div>
                      <p className="text-sm font-bold text-gray-700 uppercase">Lead Instructor</p>
                    </div>

<div className="text-center">
                      <div className="text-xl text-gray-800 mb-2 font-serif">{today}</div>
                      <div className="w-40 h-0.5 bg-gray-400 mx-auto mb-2"></div>
                      <p className="text-sm font-bold text-gray-700 uppercase">Tanggal Terbit</p>
                    </div>
                  </div>
               </div>
            </div>

{/* Opsi Cetak & Kirim Email - Hanya terlihat di layar */}
            <div className="flex flex-col items-center gap-4 print:hidden w-full max-w-lg p-4 bg-white rounded-xl shadow-lg border border-gray-100 mt-4">
              
              <h4 className="text-lg font-bold text-indigo-800 mb-2">Opsi Unduh & Kirim</h4>
              
              {/* Tombol Cetak/PDF */}
              <div className="flex gap-4 w-full">
                <button 
                  onClick={() => setIsCertified(false)}
                  className="w-1/2 py-3 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 font-medium"
                >
                  Edit Nama
                </button>
                <button 
                  onClick={handlePrint}
                  className="w-1/2 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium flex items-center justify-center gap-2 shadow-md"
                >
                  <Printer size={18} /> Cetak / Unduh PDF
                </button>
              </div>

<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-800 p-3 rounded mt-2 w-full text-sm">
                <p className="font-bold">PENTING (Untuk Pengguna HP):</p>
                <p className="mt-1">Setelah klik tombol di atas, pastikan Anda **mengganti tujuan printer** (di bagian atas dialog) menjadi **"Simpan sebagai PDF"** agar file tersimpan di perangkat Anda.</p>
              </div>

{/* Opsi Kirim Email (Simulasi) */}
              <div className="w-full">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Masukkan Email Tujuan:
                </label>
                <div className="flex gap-2">
                  <input
                    type="email"
                    placeholder="nama@contoh.com"
                    value={emailInput}
                    onChange={(e) => {setEmailInput(e.target.value); setEmailStatus(null);}}
                    className="flex-grow p-3 border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-0"
                  />
                  <button
                    onClick={handleSendEmail}
                    disabled={!emailInput || emailStatus?.type === 'info'}
                    className="bg-green-600 text-white p-3 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1 font-medium"
                  >
                    <Send size={18} /> Kirim
                  </button>
                </div>
              </div>

{/* Status Email */}
              {emailStatus && (
                <div className={`mt-3 w-full p-3 rounded-lg flex items-center gap-2 text-sm ${
                  emailStatus.type === 'success' ? 'bg-green-100 text-green-700 border border-green-300' :
                  emailStatus.type === 'error' ? 'bg-red-100 text-red-700 border border-red-300' :
                  'bg-blue-100 text-blue-700 border border-blue-300'
                }`}>
                  <AlertTriangle size={16} />
                  <p className="font-medium">{emailStatus.message}</p>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    );
  };

const ModulesPage = () => {
    const [selectedModule, setSelectedModule] = useState(modules[0]);

return (
      <div className="animate-fade-in">
        <h2 className="text-3xl font-bold text-gray-800 mb-6 flex items-center gap-2">
          <BookOpen className="text-indigo-600" /> Modul Pembelajaran (Kurikulum)
        </h2>
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* List Modul */}
          <div className="lg:col-span-1 space-y-4">
            {modules.map((mod) => (
              <button
                key={mod.id}
                onClick={() => setSelectedModule(mod)}
                className={`w-full text-left p-4 rounded-xl transition-all border-2 ${
                  selectedModule?.id === mod.id 
                  ? 'border-indigo-500 bg-indigo-50 shadow-md' 
                  : 'border-transparent bg-white shadow-sm hover:bg-gray-50'
                }`}
              >
                <div className="flex justify-between items-center mb-2">
                  <span className={`text-xs px-2 py-1 rounded-full font-semibold ${
                    mod.level === 'Dasar' ? 'bg-green-100 text-green-700' :
                    mod.level === 'Menengah' ? 'bg-yellow-100 text-yellow-700' :
                    'bg-red-100 text-red-700'
                  }`}>
                    {mod.level}
                  </span>
                  <span className="text-xs text-gray-500 flex items-center gap-1">
                    <Play size={12} /> {mod.duration}
                  </span>
                </div>
                <h3 className="font-bold text-gray-800">{mod.title}</h3>
              </button>
            ))}
          </div>

{/* Konten Modul */}
          <div className="lg:col-span-2">
            {selectedModule ? (
              <div className="bg-white p-6 rounded-2xl shadow-lg border border-gray-100 h-full">
                <div className="border-b pb-4 mb-4">
                  <h2 className="text-2xl font-bold text-gray-800">{selectedModule.title}</h2>
                  <p className="text-gray-600 mt-2">{selectedModule.description}</p>
                </div>
                <div className="prose max-w-none text-gray-700 leading-relaxed">
                  {selectedModule.content}
                </div>
                <div className="mt-8 pt-4 border-t flex justify-end">
                  <button 
                    onClick={() => setActiveTab('simulator')}
                    className="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 flex items-center gap-2 font-bold shadow-md"
                  >
                    Mulai Praktik di Simulator <ChevronRight size={16} />
                  </button>
                </div>
              </div>
            ) : (
              <div className="bg-gray-50 border-2 border-dashed border-gray-300 rounded-2xl h-64 flex flex-col items-center justify-center text-gray-500">
                <BookOpen size={48} className="mb-2 opacity-50" />
                <p>Pilih modul di sebelah kiri untuk mulai belajar</p>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

const SimulatorPage = () => {
    const [input, setInput] = useState('');
    const [output, setOutput] = useState(null);
    const [loading, setLoading] = useState(false);

// Simulasi respons AI sederhana untuk tujuan demo
    const handleSimulate = () => {
      if (!input.trim()) return;
      setLoading(true);
      
      // Delay palsu untuk efek "berpikir"
      setTimeout(() => {
        let response = "";
        const lowerInput = input.toLowerCase();

if (lowerInput.includes('rpp') || lowerInput.includes('rencana')) {
          response = `**Rencana Pelaksanaan Pembelajaran (Simulasi)**\n\n**Topik:** ${input}\n**Kelas:** 7 SMP\n**Durasi:** 2 x 40 Menit\n\n1. **Tujuan Pembelajaran:** Siswa dapat memahami konsep dasar sesuai topik.\n2. **Kegiatan Inti:**\n   - Guru menampilkan video pemantik.\n   - Diskusi kelompok (20 menit).\n   - Presentasi hasil diskusi.\n3. **Penilaian:** Observasi keaktifan dan tes tulis singkat.`;
        } else if (lowerInput.includes('soal') || lowerInput.includes('kuis')) {
          response = `**Draf Soal Kuis (Simulasi)**\n\nBerikut adalah 3 contoh soal pilihan ganda berdasarkan topik yang Anda minta:\n\n1. Apa penyebab utama terjadinya peristiwa tersebut?\n   a. Faktor A\n   b. Faktor B\n   c. Faktor C\n\n2. Manakah di bawah ini yang bukan termasuk karakteristik utama?\n\n*Catatan: Ini adalah simulasi. Di platform asli, Gemini akan menghasilkan konten yang jauh lebih mendalam.*`;
        } else {
          response = "Ini adalah respons simulasi dari Gemini. Dalam versi nyata, saya akan memberikan jawaban mendalam tentang: " + input + "\n\nCoba gunakan kata kunci 'RPP' atau 'Soal' untuk melihat format spesifik.";
        }

setOutput(response);
        setLoading(false);
      }, 1500);
    };

return (
      <div className="animate-fade-in max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h2 className="text-3xl font-bold text-gray-800 mb-2">Simulator Prompting (Praktik)</h2>
          <p className="text-gray-600">Latih kemampuan prompting Anda di lingkungan yang aman sebelum menggunakan akun asli.</p>
        </div>

<div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
          {/* Header Simulator */}
          <div className="bg-indigo-50 p-4 border-b flex justify-between items-center">
            <div className="flex items-center gap-2 text-indigo-700 font-semibold">
              <Star className="fill-indigo-700" size={18} /> Gemini Ed-Sim v1.0
            </div>
            <span className="text-xs bg-indigo-200 text-indigo-800 px-2 py-1 rounded">Mode Latihan</span>
          </div>

{/* Area Output */}
          <div className="h-80 overflow-y-auto p-6 bg-gray-50">
            {output ? (
              <div className="flex gap-4">
                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex-shrink-0 flex items-center justify-center text-white font-bold">
                  G
                </div>
                <div className="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm border text-gray-800 whitespace-pre-wrap max-w-3xl">
                  {output}
                </div>
              </div>
            ) : (
              <div className="h-full flex flex-col items-center justify-center text-gray-400">
                <MessageSquare size={40} className="mb-2" />
                <p>Output AI akan muncul di sini...</p>
              </div>
            )}
            {loading && (
              <div className="flex gap-4 mt-4">
                 <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex-shrink-0 flex items-center justify-center text-white font-bold">G</div>
                 <div className="flex items-center gap-2 text-gray-500 bg-white px-4 py-2 rounded-2xl rounded-tl-none border">
                    <div className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce"></div>
                    <div className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce delay-75"></div>
                    <div className="w-2 h-2 bg-indigo-400 rounded-full animate-bounce delay-150"></div>
                 </div>
              </div>
            )}
          </div>

{/* Area Input */}
          <div className="p-4 bg-white border-t">
            <div className="relative">
              <textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Contoh: Bertindak sebagai Guru Sejarah, buatkan 5 soal esai tentang reformasi gereja untuk siswa SMA kelas 11."
                className="w-full border-2 border-gray-200 rounded-xl p-4 pr-12 focus:border-indigo-500 focus:ring-0 resize-none h-24 transition-all"
              />
              <button 
                onClick={handleSimulate}
                disabled={loading || !input}
                className="absolute right-3 bottom-3 bg-indigo-600 text-white p-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <ChevronRight size={24} />
              </button>
            </div>
            <p className="text-xs text-gray-400 mt-2 text-center">
              Tips: Gunakan rumus Persona, Request, Example, Parameter untuk hasil terbaik.
            </p>
          </div>
        </div>
        <div className="mt-8 flex justify-center">
             <button 
                onClick={() => setActiveTab('quiz')}
                className="bg-green-600 text-white px-8 py-3 rounded-full hover:bg-green-700 font-bold shadow-lg flex items-center gap-2"
            >
                Lanjut ke Kuis Pemahaman <CheckCircle size={20} />
            </button>
        </div>
      </div>
    );
  };

const QuizPage = () => {
    const [currentQ, setCurrentQ] = useState(0);
    const [score, setScore] = useState(0);
    const [finished, setFinished] = useState(false);

const questions = [
      {
        q: "Manakah kegunaan paling tepat Gemini untuk guru?",
        options: ["Menggantikan peran guru di kelas", "Membantu membuat draf RPP dan ide materi", "Menghukum siswa otomatis", "Mencari jawaban ujian nasional bocoran"],
        a: 1
      },
      {
        q: "Apa yang dimaksud dengan 'Halusinasi AI'?",
        options: ["AI bisa melihat hantu", "AI memberikan jawaban yang terdengar meyakinkan tapi faktanya salah", "AI menjadi sangat pintar", "AI menolak menjawab pertanyaan"],
        a: 1
      },
      {
        q: "Dalam prompting, huruf 'P' pertama dalam PREP berarti?",
        options: ["Prompt", "Persona (Peran)", "Power", "Program"],
        a: 1
      }
    ];

if (finished) {
      return (
        <div className="text-center py-12 animate-fade-in bg-white rounded-3xl shadow-lg border border-gray-100 max-w-2xl mx-auto">
          <Award size={80} className="mx-auto text-yellow-400 mb-6" />
          <h2 className="text-3xl font-bold text-gray-800 mb-2">Selamat!</h2>
          <p className="text-xl text-gray-600 mb-6">Anda telah menyelesaikan kuis.</p>
          
          <div className="text-5xl font-bold text-indigo-600 mb-8">
            {Math.round((score / questions.length) * 100)}<span className="text-2xl text-gray-400">/100</span>
          </div>

<div className="flex justify-center gap-4">
            <button 
                onClick={() => {setFinished(false); setCurrentQ(0); setScore(0); setActiveTab('modules');}}
                className="bg-gray-100 text-gray-700 px-8 py-3 rounded-full hover:bg-gray-200 font-bold"
            >
                Ulangi Kuis
            </button>
            <button 
                onClick={() => setActiveTab('certificate')}
                className="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 font-bold shadow-lg flex items-center gap-2"
            >
                <Award size={20} /> Ambil Sertifikat
            </button>
          </div>
        </div>
      );
    }

return (
      <div className="max-w-2xl mx-auto animate-fade-in">
        <div className="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
          <div className="bg-indigo-600 p-6 text-white text-center">
            <h2 className="text-2xl font-bold">Kuis Pemahaman</h2>
            <p className="opacity-80">Soal {currentQ + 1} dari {questions.length}</p>
          </div>
          
          <div className="p-8">
            <h3 className="text-xl font-medium text-gray-800 mb-8 text-center">
              {questions[currentQ].q}
            </h3>
            
            <div className="space-y-3">
              {questions[currentQ].options.map((opt, idx) => (
                <button
                  key={idx}
                  onClick={() => handleAnswer(idx)}
                  className="w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:border-indigo-500 hover:bg-indigo-50 transition-all font-medium text-gray-700"
                >
                  {opt}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  };

// Main App return structure
  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-800 print:bg-white">
      {/* Navbar - Hidden on Print */}
      <nav className="bg-white sticky top-0 z-50 border-b border-gray-200 shadow-sm print:hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center gap-2 cursor-pointer" onClick={() => setActiveTab('home')}>
              <div className="bg-indigo-600 p-2 rounded-lg">
                <GraduationCap className="text-white" size={24} />
              </div>
              <span className="font-bold text-xl text-indigo-900 tracking-tight">GuruGemini<span className="text-indigo-600">.AI</span></span>
            </div>

{/* Desktop Menu */}
            <div className="hidden md:flex items-center space-x-6">
              <button onClick={() => setActiveTab('home')} className={`${activeTab === 'home' ? 'text-indigo-600 font-bold bg-indigo-50' : 'text-gray-500 hover:text-indigo-600'} px-3 py-2 rounded-lg transition-all`}>Beranda</button>
              <button onClick={() => setActiveTab('modules')} className={`${activeTab === 'modules' ? 'text-indigo-600 font-bold bg-indigo-50' : 'text-gray-500 hover:text-indigo-600'} px-3 py-2 rounded-lg transition-all`}>Modul</button>
              <button onClick={() => setActiveTab('simulator')} className={`${activeTab === 'simulator' ? 'text-indigo-600 font-bold bg-indigo-50' : 'text-gray-500 hover:text-indigo-600'} px-3 py-2 rounded-lg transition-all`}>Simulator</button>
              <button onClick={() => setActiveTab('quiz')} className={`${activeTab === 'quiz' ? 'text-indigo-600 font-bold bg-indigo-50' : 'text-gray-500 hover:text-indigo-600'} px-3 py-2 rounded-lg transition-all`}>Kuis</button>
              <button onClick={() => setActiveTab('certificate')} className={`${activeTab === 'certificate' ? 'text-indigo-600 font-bold bg-indigo-50' : 'text-gray-500 hover:text-indigo-600'} flex items-center gap-1 px-3 py-2 rounded-lg transition-all`}>
                <Award size={18} /> Sertifikat
              </button>
              {/* Menu Admin (BARU) */}
              {isAdmin && (
                <button onClick={() => setActiveTab('admin')} className={`${activeTab === 'admin' ? 'text-red-600 font-bold bg-red-50' : 'text-gray-500 hover:text-red-600'} flex items-center gap-1 px-3 py-2 rounded-lg transition-all border border-red-300`}>
                    <Settings size={18} /> Admin Panel
                </button>
              )}
            </div>

{/* Mobile Menu Button */}
            <div className="flex items-center md:hidden">
              <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-gray-500">
                {mobileMenuOpen ? <X /> : <Menu />}
              </button>
            </div>
          </div>
        </div>

{/* Mobile Menu Dropdown */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t p-4 space-y-4 shadow-lg">
             <button onClick={() => {setActiveTab('home'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium">Beranda</button>
             <button onClick={() => {setActiveTab('modules'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium">Modul</button>
             <button onClick={() => {setActiveTab('simulator'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium">Simulator</button>
             <button onClick={() => {setActiveTab('quiz'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium">Kuis</button>
             <button onClick={() => {setActiveTab('certificate'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium text-indigo-600">Sertifikat</button>
             {isAdmin && (
                <button onClick={() => {setActiveTab('admin'); setMobileMenuOpen(false)}} className="block w-full text-left py-2 font-medium text-red-600 border-t pt-4 mt-4">Admin Panel</button>
             )}
          </div>
        )}
      </nav>

{/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {activeTab === 'home' && (
          <div className="animate-fade-in">
            <Hero />
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
              <div className="text-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-md transition-all">
                <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600">
                  <BookOpen size={32} />
                </div>
                <h3 className="text-lg font-bold mb-2">Kurikulum Terupdate</h3>
                <p className="text-gray-500 text-sm">Materi disesuaikan dengan kebutuhan guru Kurikulum Merdeka & K13.</p>
              </div>
              <div className="text-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-md transition-all">
                <div className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-purple-600">
                  <Code size={32} />
                </div>
                <h3 className="text-lg font-bold mb-2">Praktik Langsung</h3>
                <p className="text-gray-500 text-sm">Tidak hanya teori, langsung coba membuat prompt di simulator kami.</p>
              </div>
              <div className="text-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-md transition-all">
                <div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-green-600">
                  <Award size={32} />
                </div>
                <h3 className="text-lg font-bold mb-2">Sertifikat Digital</h3>
                <p className="text-gray-500 text-sm">Dapatkan bukti kompetensi setelah menyelesaikan semua modul dan kuis.</p>
              </div>
            </div>
          </div>
        )}
        
        {activeTab === 'modules' && <ModulesPage />}
        {activeTab === 'simulator' && <SimulatorPage />}
        {activeTab === 'quiz' && <QuizPage />}
        {activeTab === 'certificate' && <CertificatePage />}
        {isAdmin && activeTab === 'admin' && <AdminPage />}
      </main>

{/* Footer - Hidden on Print */}
      <footer className="bg-gray-800 text-gray-400 py-12 mt-12 print:hidden">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <div className="flex justify-center items-center gap-2 mb-4">
             <GraduationCap className="text-indigo-400" size={24} />
             <span className="text-xl font-bold text-white">GuruGemini.AI</span>
          </div>
          <p className="mb-4 text-sm">Platform ini adalah prototipe demonstrasi untuk pelatihan AI bagi tenaga pendidik.</p>
          <div className="flex justify-center gap-6 text-sm">
            <a href="#" className="hover:text-white transition-colors">Tentang Kami</a>
            <a href="#" className="hover:text-white transition-colors">Privasi</a>
            <a href="#" className="hover:text-white transition-colors">Bantuan</a>
          </div>
          <p className="mt-8 text-xs text-gray-600">© 2024 GuruGemini Project. Dibuat dengan React & Tailwind.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;<div style="clear:both; padding-bottom:0.25em"></div><p class="blogger-labels">Labels: <a rel='tag' href="http://cobakodingai.blogspot.com/search/label/Platform%20Pelatihan%20Gemini%20Guru">Platform Pelatihan Gemini Guru</a></p>
    </p>

</div>

<em>posted by ariy @ <a href="http://cobakodingai.blogspot.com/2025/12/platform-pelatihan-gemini-guru.html" title="permanent link">December 29, 2025</a></em>  
      
         <a class="comment-link" href="https://cobakodingai.blogspot.com/2025/12/platform-pelatihan-gemini-guru.html#comment-form"location.href=https://cobakodingai.blogspot.com/2025/12/platform-pelatihan-gemini-guru.html#comment-form;><span style="text-transform:lowercase">0 Comments</span></a>
      
 <span class="item-control blog-admin pid-1488523971"><a style="border:none;" href="https://www.blogger.com/post-edit.g?blogID=84114430028990504&postID=1448900009297953452&from=pencil" title="Edit Post"><img class="icon-action" alt="" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" height="18" width="18"></a></span>
    </p>

</div>

<h2 class="date-header">Saturday, December 27, 2025</h2>

### Fitur Utama yang Telah Diterapkan:
1.  **Skor Real-time**: Menggunakan Firebase Firestore `onSnapshot`. Artinya, jika ada siswa lain yang menyelesaikan kuis di perangkat berbeda, nama mereka akan langsung muncul di *Leaderboard* tanpa perlu memuat ulang halaman (refresh).
2.  **Skor Pribadi & Tim**: Aplikasi merekam skor setiap individu, namun juga melakukan agregasi otomatis untuk menampilkan total poin berdasarkan Nama Tim yang dimasukkan.
3.  **Responsif**: Layout otomatis menyesuaikan ukuran layar, sangat nyaman dibuka di HP maupun Laptop.
4.  **Admin Mode**: Saya menyertakan tombol gerigi di pojok kanan atas untuk masuk ke menu Admin guna mereset skor jika Anda ingin memulai kuis baru (misalnya ganti sesi kelas).

**Catatan:** Untuk penggunaan di blog publik, pastikan pengaturan Firebase Anda sudah benar. Jika Anda ingin kuis ini lebih aman (misal: hanya user terdaftar yang bisa ikut), kita bisa meningkatkan sistem autentikasinya di masa mendatang.

Apakah ada bagian soal atau desain yang ingin Anda ubah?<div style="clear:both; padding-bottom:0.25em"></div>
    </p>

</div>

<em>posted by ariy @ <a href="http://cobakodingai.blogspot.com/2025/12/fitur-utama-yang-telah-diterapkan-1.html" title="permanent link">December 27, 2025</a></em>  
      
         <a class="comment-link" href="https://cobakodingai.blogspot.com/2025/12/fitur-utama-yang-telah-diterapkan-1.html#comment-form"location.href=https://cobakodingai.blogspot.com/2025/12/fitur-utama-yang-telah-diterapkan-1.html#comment-form;><span style="text-transform:lowercase">0 Comments</span></a>
      
 <span class="item-control blog-admin pid-1488523971"><a style="border:none;" href="https://www.blogger.com/post-edit.g?blogID=84114430028990504&postID=1011947636924041580&from=pencil" title="Edit Post"><img class="icon-action" alt="" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" height="18" width="18"></a></span>
    </p>

</div>

<h2 class="date-header">Tuesday, July 29, 2025</h2>

<p>
      <div style="clear:both;"></div><h2 style="text-align: left;"><span style="font-family: verdana;">Mempercantik Blog Menggunakan Template Pihak Ketiga</span></h2><p><span style="font-family: verdana;">Meskipun konten adalah raja, tetapi tampilan blog yang cantik atau ciamik menjadi daya tarik tersendiri bagi pengunjung untuk datang kembali mengunjungi blog kita.</span></p><p><span style="font-family: verdana;">Saat ini pun sebenarnya template bawaan blogger yang terbaru sangat bagus dibandingkan template bawaan sebelumnya. Dengan menggunakan template yang baru kita sudah tidak memikirkan artikel menjadi terlihat panjang meski tanpa di jump break, karena readmore-nya dah otomatis. Demikian juga, template blogger yang terbaru  bersifat responsif yang artinya dibuka dengan perangkat apapun langsung menyesuaikan diri ukurannya.</span></p><p></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ595Tm_Bm47nVjmO58m9Gq3flgdVtQJJ1fzl8JJXWn2naoFT2bwnkQRherr0QO9G9mYoO0xYLkekOHZJ2SLBXerGDKPKa4sEgtysx67lJJV1yyXcLXg_P20tXrZxB3pJ9tmpe2SscsNOH/s804/template+contempo.PNG" style="margin-left: auto; margin-right: auto;"><img alt="Templare blogger contempo" border="0" data-original-height="534" data-original-width="804" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ595Tm_Bm47nVjmO58m9Gq3flgdVtQJJ1fzl8JJXWn2naoFT2bwnkQRherr0QO9G9mYoO0xYLkekOHZJ2SLBXerGDKPKa4sEgtysx67lJJV1yyXcLXg_P20tXrZxB3pJ9tmpe2SscsNOH/w640-h426/template+contempo.PNG" title="Templare blogger contempo" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Template blogger contempo</td></tr></tbody></table><br /><span style="font-family: verdana;">Selain template blogger contempo yang responsif, ada juga pilihan lain seperti soho, emprio, serta notable. Dan setiap jenis template itu ad 5 variasi. Sehingga bagi pengguna blogger bisa menggunakan 20 variasi template yang berbeda.</span><p></p><p><span style="font-family: verdana;">Tetapi, bagaimana jika sudah bosan atau butuh style yang lebih banyak? Tentunya kita bisa mengoprek template baru tersebut maupun menggunakan template pihak ketiga. </span></p><p><span style="font-family: verdana;">Postingan kali ini, kita akan coba untuk menggunakan layanan template pihak ketiga. Kita bisa mencari ribuan template di btemplates, gooyaabitemplates, <a href="https://www.templateism.com/" style="background-color: white; color: #4e4e4e; margin: 0px; padding: 0px; text-align: justify; text-decoration-line: none;"><b style="margin: 0px; padding: 0px;">Templateism</b></a> dan banyak penyedia layanan template lainnya baik yang gratis maupun berbayar.</span></p><p><span style="font-family: verdana;">Mula-mula buka dulu btemplates.com</span></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKYqyba8TUdJBwXYTttL41CPYxITbnC_KZnrn_EawaM6YUV2a330DVU83LkFvuSoUPDvxPiBdVeuCL6nZsL_61VAT-r_ouufwi6EoSfPgzD4StUn-vn8_tOjeOfMbJ3zrkL-YK9tANBZb/s1070/btemplates.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="btemplates.com" border="0" data-original-height="700" data-original-width="1070" height="418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKYqyba8TUdJBwXYTttL41CPYxITbnC_KZnrn_EawaM6YUV2a330DVU83LkFvuSoUPDvxPiBdVeuCL6nZsL_61VAT-r_ouufwi6EoSfPgzD4StUn-vn8_tOjeOfMbJ3zrkL-YK9tANBZb/w640-h418/btemplates.PNG" title="btemplates.com" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;">Dari ribuan template yang ada, misalnya pilih template GreatMag dengan cara meng-kliknya.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN088wZ45Ki6JaRaaEZNcuGHKGOiFO2wfEi4hYIIq5FUueg8en_-r3xoo5shKEVxeG6BsTV7sUjdZGHy36Ei6qd1j195Bjv_1pJLN-vKuxVFQtD6A-zJSlk2usYPIPpB3FXjVwVAa5FidO/s928/download+free+magazine.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="Download template GreatMag" border="0" data-original-height="564" data-original-width="928" height="389" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN088wZ45Ki6JaRaaEZNcuGHKGOiFO2wfEi4hYIIq5FUueg8en_-r3xoo5shKEVxeG6BsTV7sUjdZGHy36Ei6qd1j195Bjv_1pJLN-vKuxVFQtD6A-zJSlk2usYPIPpB3FXjVwVAa5FidO/w640-h389/download+free+magazine.PNG" title="Download template GreatMag" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: verdana;">Template GreatMag ini merupakan template dengan 1 Sidebar, 2 kolom serta memiliki 3 kolom pada bagian  footer. Template ini sebuah template yang diadaptasi dari Wordpress yang memiliki slider, responsif, breadcrumb dan berbagai fitur lain. Oke, klik saja <i>Live Dem</i>o untuk melihat tampilannya atau langsung saja klil <i><b>Free Download</b></i>.</span></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Template yang sudah terdownload (bisa dilihat di file manager-download), kita ekstraks terus perhatikan disitu ada file GreatMag.xml seperti pada gambar berikut.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bEH5nIIBCZBthLoCbC-8bI_FKrQxvF8TYAoO7e5LxKnjFJ_khR142bvyvj7fn47Z6xYUy3gjwVzxe9MpLnPqH31u139A5Ba6SjQkYwV3bl91inkyrS6dC_dMyaCVxDr64cZA88h6TO8G/s651/file+GreatMag.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="GreatMag.xml" border="0" data-original-height="229" data-original-width="651" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bEH5nIIBCZBthLoCbC-8bI_FKrQxvF8TYAoO7e5LxKnjFJ_khR142bvyvj7fn47Z6xYUy3gjwVzxe9MpLnPqH31u139A5Ba6SjQkYwV3bl91inkyrS6dC_dMyaCVxDr64cZA88h6TO8G/w400-h141/file+GreatMag.PNG" title="GreatMag.xml" width="400" /></a></div>File ini bisa dibuka dengan menggunakan notepad, wordpad, ms word, adobe dremaweaver dan lainnya untuk melihat kode dari template tersebut.<p></p><p>Untuk mengganti template yang sudah ada, ada 2 cara yaitu dengan meng-copy paste isi file tersebut yang sebelumnya sudah dibuka, misalnya dengan notepad atau dengan mengupload file tersebut ke theme dengan cara buka dasboard blogger.com.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbGUQJ1CYks79Dr0mlgoDkGhfyJgRMbuV4YOe2Xp1x7Bem_VnPiXvcDzVx8FTL_VcHtGs8yeBvlHOyoj0gtSUsDm40uAA9ni0eZa4nJtJN8c_Zj57UxiTzyq8otJVqwe69gvfx38umjIH/s1284/ganti+template.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="mengganti template blogger" border="0" data-original-height="558" data-original-width="1284" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbGUQJ1CYks79Dr0mlgoDkGhfyJgRMbuV4YOe2Xp1x7Bem_VnPiXvcDzVx8FTL_VcHtGs8yeBvlHOyoj0gtSUsDm40uAA9ni0eZa4nJtJN8c_Zj57UxiTzyq8otJVqwe69gvfx38umjIH/w640-h278/ganti+template.PNG" title="mengganti template blogger" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;">Backup digunakan untuk memback-up atau menyimpan template yang yang sudah terpasang. Jika kita seringkali berganti template, untuk menghindari hal-hal yang tidak diinginkan silahkan template yang ada dibackup dulu.</div><div class="separator" style="clear: both; text-align: left;">Restore ini yang akan digunakan untuk mengganti template yang ada dengan yang baru dengan cara nanti diupload.</div><div class="separator" style="clear: both; text-align: left;">Switch to first generation Classing theme jika ingin beralih ke template lama/klasik.</div><div class="separator" style="clear: both; text-align: left;">Edit html digunakan untuk mengedit template secara langsung, termasuk jika memakai copy paste.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Kita klik Restore, silahkan Upload, cari file GreatMag.xml tadi..tunggu sebentar.</div><div class="separator" style="clear: both; text-align: left;">Jika sudah selesai, kemudian klik view blog. Taraaaa....blog Anda sudah menjadi lebih cantik kan ya?<br />Silahkan untuk berganti-ganti template semaunya tetapi jangan lupa untuk rutin posting.</div><div class="separator" style="clear: both; text-align: left;">Tetap ingat bahwa, "konten adalah raja".</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpqlaHofl6xmDuUbx7x0vI8c94P2uPILjS6w5yBOiRSKCVhSLyZ1zLUsRDU872HDd3Ubi_q5ZVVlumm66YfaIKu0fI6egggF6fa6seTgJhfxBFTz_Wr2Si4qhlZo9pfPj_QpH2CBbU22p/s1366/template+awal.PNG" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan template Contempo" border="0" data-original-height="623" data-original-width="1366" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXpqlaHofl6xmDuUbx7x0vI8c94P2uPILjS6w5yBOiRSKCVhSLyZ1zLUsRDU872HDd3Ubi_q5ZVVlumm66YfaIKu0fI6egggF6fa6seTgJhfxBFTz_Wr2Si4qhlZo9pfPj_QpH2CBbU22p/w640-h292/template+awal.PNG" title="Tampilan template Contempo" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Tampilan sebelumnya<br /><br /></td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJfoOc3eYNnsq-Gmj6F-n3kEVSkIVRAOcKU8qMoiX449G7D_3xyDzwycBh06Ni32mXppKr76Dd2DdW6XM2vwAlwU9wSi74NHLY1O5L2rSANhPzevzYtDPHVqHaJ3wIqvMa3luRFQYTKYh/s1162/hasil+dari+template+GreatMag.PNG" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan template GreatMag" border="0" data-original-height="635" data-original-width="1162" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJfoOc3eYNnsq-Gmj6F-n3kEVSkIVRAOcKU8qMoiX449G7D_3xyDzwycBh06Ni32mXppKr76Dd2DdW6XM2vwAlwU9wSi74NHLY1O5L2rSANhPzevzYtDPHVqHaJ3wIqvMa3luRFQYTKYh/w640-h350/hasil+dari+template+GreatMag.PNG" title="Tampilan template GreatMag" width="640" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Tampilan sesudahnya</td></tr></tbody></table><span style="font-family: verdana;">Pada postingan berikutnya, kita akan coba mulai menguprek template yang ada agar sesuai dengan harapan kita. Selamat mencoba..dan siap-siap menjadi blogger.</span><br /><div class="separator" style="clear: both; text-align: left;"><br /></div><br /><p><br /></p><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><br /><span style="font-family: verdana;"><br /></span><p></p><p><span style="font-family: verdana;"><br /></span></p><div style="clear:both; padding-bottom:0.25em"></div><p class="blogger-labels">Labels: <a rel='tag' href="http://cobakodingai.blogspot.com/search/label/blog">blog</a></p>
    </p>

</div>

<em>posted by ariy @ <a href="http://cobakodingai.blogspot.com/2025/07/coba.html" title="permanent link">July 29, 2025</a></em>  
      
         <a class="comment-link" href="https://cobakodingai.blogspot.com/2025/07/coba.html#comment-form"location.href=https://cobakodingai.blogspot.com/2025/07/coba.html#comment-form;><span style="text-transform:lowercase">0 Comments</span></a>
      
 <span class="item-control blog-admin pid-1488523971"><a style="border:none;" href="https://www.blogger.com/post-edit.g?blogID=84114430028990504&postID=3684825508305373248&from=pencil" title="Edit Post"><img class="icon-action" alt="" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" height="18" width="18"></a></span>
    </p>

</div>

<h2 class="date-header">Tuesday, July 22, 2025</h2>

<h3 class="post-title">
	 Coba koding 1
    </h3>

<p>
      <div style="clear:both;"></div><!DOCTYPE html>
<html>
<head>
    <title>Petualangan AI Gemini</title>
    <style>
        /* CSS untuk tampilan game Anda */
        body {
            font-family: sans-serif;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            background-color: #fcfcfc;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 25px;
        }
        #story-text {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #e9f7ff;
            border-left: 5px solid #007bff;
            border-radius: 4px;
            line-height: 1.6;
            min-height: 80px; /* Agar ada ruang saat loading */
        }
        .choice-button {
            display: block;
            width: 100%;
            padding: 12px 15px;
            margin-bottom: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        .choice-button:hover {
            background-color: #0056b3;
        }
        .choice-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #loading-indicator {
            text-align: center;
            margin-top: 20px;
            font-style: italic;
            color: #777;
            display: none; /* Sembunyikan secara default */
        }
    </style>
</head>
<body>
    <h1>Petualangan Interaktif Gemini AI</h1>
    <div id="story-text"></div>
    <div id="choices"></div>
    <div id="loading-indicator">Memuat cerita dari Gemini...</div>

let currentStoryContext = "Anda terbangun di sebuah hutan misterius yang diselimuti kabut tebal. Anda melihat dua jalan: satu menuju ke sungai yang bergemericik, dan yang lain menuju ke gua gelap. Pilihan Anda akan menentukan nasib Anda.";

const storyTextElement = document.getElementById('story-text');
        const choicesElement = document.getElementById('choices');
        const loadingIndicator = document.getElementById('loading-indicator');

async function callGeminiAPI(promptText) {
            loadingIndicator.style.display = 'block'; // Tampilkan indikator loading
            storyTextElement.innerText = ''; // Kosongkan teks cerita
            choicesElement.innerHTML = ''; // Kosongkan pilihan

try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        contents: [{
                            parts: [{ text: promptText }]
                        }],
                        generationConfig: {
                            temperature: 0.7, // Kontrol kreativitas
                            maxOutputTokens: 200 // Batasi panjang respons
                        }
                    })
                });

if (!response.ok) {
                    const errorData = await response.json();
                    console.error("API Error:", errorData);
                    throw new Error(`API call failed with status ${response.status}: ${errorData.error.message}`);
                }

async function updateGame(userChoice = null) {
            let promptToSend;

if (userChoice) {
                // Tambahkan pilihan pengguna ke konteks cerita
                currentStoryContext += `\n\nSaya memilih: "${userChoice}".`;
                promptToSend = `Berdasarkan cerita berikut: "${currentStoryContext}", lanjutkan alur cerita. Berikan deskripsi singkat tentang apa yang terjadi selanjutnya, lalu tawarkan 2 atau 3 pilihan tindakan baru untuk pemain. Format pilihan dalam tanda kurung siku, contoh: [Pilihan Pertama][Pilihan Kedua].`;
            } else {
                // Prompt awal untuk memulai cerita
                promptToSend = `Buat awal cerita petualangan interaktif. Cerita harus mencakup setting awal dan memperkenalkan 2 atau 3 pilihan tindakan awal untuk pemain. Format pilihan dalam tanda kurung siku, contoh: [Pilihan Pertama][Pilihan Kedua]. Cerita awal: "${currentStoryContext}"`;
            }

const responseFromGemini = await callGeminiAPI(promptToSend);
            storyTextElement.innerText = responseFromGemini;
            
            // Ekstrak pilihan dari teks respons Gemini
            const choicesRegex = /\[([^\]]+)\]/g; // Mencari teks di antara [ ]
            const foundChoices = [...responseFromGemini.matchAll(choicesRegex)];
            
            choicesElement.innerHTML = ''; // Bersihkan pilihan lama

if (foundChoices.length > 0) {
                foundChoices.forEach(match => {
                    const choiceText = match[1].trim(); // Ambil teks di dalam kurung siku
                    const button = document.createElement('button');
                    button.className = 'choice-button';
                    button.innerText = choiceText;
                    button.onclick = () => updateGame(choiceText);
                    choicesElement.appendChild(button);
                });
            } else {
                // Jika tidak ada pilihan, mungkin ini akhir cerita atau error
                const endMessage = document.createElement('p');
                endMessage.innerText = "Tidak ada pilihan lebih lanjut. Cerita mungkin telah berakhir atau terjadi kesalahan. Mulai ulang untuk mencoba lagi.";
                choicesElement.appendChild(endMessage);
            }
        }

// Mulai game saat halaman dimuat
        window.onload = () => updateGame();
    </script>
</body>
</html>
<div style="clear:both; padding-bottom:0.25em"></div>
    </p>

</div>

<em>posted by ariy @ <a href="http://cobakodingai.blogspot.com/2025/07/coba-koding-1.html" title="permanent link">July 22, 2025</a></em>  
      
         <a class="comment-link" href="https://cobakodingai.blogspot.com/2025/07/coba-koding-1.html#comment-form"location.href=https://cobakodingai.blogspot.com/2025/07/coba-koding-1.html#comment-form;><span style="text-transform:lowercase">0 Comments</span></a>
      
 <span class="item-control blog-admin pid-1488523971"><a style="border:none;" href="https://www.blogger.com/post-edit.g?blogID=84114430028990504&postID=3993059421725981268&from=pencil" title="Edit Post"><img class="icon-action" alt="" src="https://resources.blogblog.com/img/icon18_edit_allbkg.gif" height="18" width="18"></a></span>
    </p>

</div>

</div></div></div>

<div class="box"><div class="box2"><div class="box3">
    
        
  <h2 class="sidebar-title">Links</h2>
    <ul>
    	<li><a href="https://news.google.com/">Google News</a></li>
    	<li><a href="https://support.google.com/blogger/answer/41427">Edit-Me</a></li>
    	<li><a href="https://support.google.com/blogger/answer/41427">Edit-Me</a></li>
  </ul>

<h2 class="sidebar-title">Previous Posts</h2>
    <ul id="recently">
    
        <li><a href="http://cobakodingai.blogspot.com/2025/12/platform-pelatihan-gemini-guru.html">Platform Pelatihan Gemini Guru</a></li>
     
        <li><a href="http://cobakodingai.blogspot.com/2025/12/fitur-utama-yang-telah-diterapkan-1.html">

### Fitur Utama yang Telah Diterapkan:
1.  **Sko...</a></li>
     
        <li><a href="http://cobakodingai.blogspot.com/2025/07/coba.html">Coba</a></li>
     
        <li><a href="http://cobakodingai.blogspot.com/2025/07/coba-koding-1.html">Coba koding 1</a></li>
     
  </ul>

<h2 class="sidebar-title">Archives</h2>
    <ul class="archive-list">
   	  
    	<li><a href="http://cobakodingai.blogspot.com/2025/07/">July 2025</a></li>
	  
    	<li><a href="http://cobakodingai.blogspot.com/2025/12/">December 2025</a></li>

</ul>
  
      <p id="powered-by"><a href="https://www.blogger.com"><img src="//buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>
      <p id="blogfeeds">Subscribe to<br />Comments [<a target="_blank" href="https://cobakodingai.blogspot.com/feeds/posts/default" type="application/atom+xml">Atom</a>]</p>

<!--

<p>This is a paragraph of text that could go in the sidebar.</p>

-->

</div></div></div>

</div>

</div></div></div>

</div>

</body>

</html>

cobakoding

Monday, December 29, 2025

Platform Pelatihan Gemini Guru

Apa itu Gemini?

Perbedaan dengan Mesin Pencari

Etika & Halusinasi AI

Rumus Prompt Efektif: PREP

Daftar Modul Pelatihan ({modules.length})

{editingModule === 'new' ? 'Tambah Modul Baru' : `Edit Modul ID: ${editingModule}`}