docs: revisi README C4A untuk menyesuaikan format data JSON bilingual

groups/C4A/README.md

@@ -12,11 +12,14 @@ Dokumentasi ini dibuat untuk memudahkan pengembang atau pengguna berikutnya dala
    - Data SOP: `groups/C4A/data/data-sop.json`
    - Data FAQ: `groups/C4A/data/data-faq.json`
 
-2. **Ikon FontAwesome (v4)**:
+2. **Dukungan Bilingual (ID/EN)**:
+   Semua teks konten yang ditampilkan ke pengguna mendukung dua bahasa. Anda perlu menggunakan objek dengan properti `id` (Bahasa Indonesia) dan `en` (Bahasa Inggris) pada setiap field teks. Jika properti `en` tidak diisi atau data masih berupa *string* biasa, sistem akan otomatis menggunakan Bahasa Indonesia sebagai *fallback*.
+
+3. **Ikon FontAwesome (v4)**:
    Jika ingin mengubah atau menambahkan logo/ikon pada data SOP, harap gunakan daftar ikon dari **FontAwesome v4** melalui tautan berikut:
    👉 **[FontAwesome v4 Icons](https://fontawesome.com/v4/icons/)** (Contoh penggunaan: `fa-dot-circle-o`, `fa-graduation-cap`, `fa-flask`).
 
-3. **Field Opsional**:
+4. **Field Opsional**:
    Pada data SOP, properti **`staff_responsible`** (Staf Bertanggung Jawab) dan **`additional_info`** (Informasi Tambahan) bersifat **opsional**. Jika informasi tersebut tidak tersedia, kosongkan nilainya atau hapus propertinya dari JSON agar UI secara otomatis menyembunyikan bloknya.
 
 ---
@@ -30,21 +33,39 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
 {
     "id": 3,
     "name": "Nama Staf Beserta Gelar",
-    "role": "Peran / Jabatan Staf",
+    "role": {
+        "id": "Peran / Jabatan Staf",
+        "en": "Staff Role / Title"
+    },
     "image": "assets/images/nama-file-foto.png",
-    "location": "Lokasi Ruang Kerja / Kantor Staf",
+    "location": {
+        "id": "Lokasi Ruang Kerja / Kantor Staf",
+        "en": "Staff Workspace / Office Location"
+    },
     "contact_consent": true,
     "phone": "628xxxxxxxxxx",
     "schedule": [
         {
-            "day": "Hari Kerja (contoh: Senin – Jumat)",
+            "day": {
-            "time": "Jam Kerja (contoh: 07.30–16.00 WIB)",
+                "id": "Hari Kerja (contoh: Senin – Jumat)",
-            "break": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)"
+                "en": "Work Days (e.g., Monday – Friday)"
+            },
+            "time": "07.30–16.00 WIB",
+            "break": {
+                "id": "Jam Istirahat (contoh: istirahat 12.00–13.00 WIB)",
+                "en": "Break Time (e.g., break 12.00–13.00 WIB)"
+            }
         }
     ],
     "tasks": [
-        "Tugas dan tanggung jawab utama 1",
+        {
-        "Tugas dan tanggung jawab utama 2"
+            "id": "Tugas dan tanggung jawab utama 1",
+            "en": "Main task and responsibility 1"
+        },
+        {
+            "id": "Tugas dan tanggung jawab utama 2",
+            "en": "Main task and responsibility 2"
+        }
     ]
 }
 ```
@@ -57,21 +78,33 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
     "tab_number": 9,
     "category": "akademik", 
     "icon": "fa-file-text",
-    "title": "Judul Lengkap SOP",
+    "title": {
-    "description": "Deskripsi singkat mengenai SOP ini.",
+        "id": "Judul Lengkap SOP",
-    "purpose": "Tujuan dibuatnya standar operasional prosedur ini.",
+        "en": "Full SOP Title"
+    },
+    "description": {
+        "id": "Deskripsi singkat mengenai SOP ini.",
+        "en": "Brief description of this SOP."
+    },
+    "purpose": {
+        "id": "Tujuan dibuatnya standar operasional prosedur ini.",
+        "en": "The purpose of creating this standard operating procedure."
+    },
     "requirements": [
-        "Persyaratan administratif/akademik 1",
+        { "id": "Persyaratan administratif/akademik 1", "en": "Administrative/academic requirement 1" },
-        "Persyaratan administratif/akademik 2"
+        { "id": "Persyaratan administratif/akademik 2", "en": "Administrative/academic requirement 2" }
     ],
     "procedures": [
-        "Langkah alur prosedur ke-1",
+        { "id": "Langkah alur prosedur ke-1", "en": "Procedure flow step 1" },
-        "Langkah alur prosedur ke-2"
+        { "id": "Langkah alur prosedur ke-2", "en": "Procedure flow step 2" }
     ],
     "staff_responsible": [
-        "👤 Staf Administrasi Informatika"
+        "👤 Staf Administrasi Informatika / Informatics Administrative Staff"
     ],
-    "additional_info": "Informasi tambahan penting."
+    "additional_info": {
+        "id": "Informasi tambahan penting.",
+        "en": "Important additional information."
+    }
 }
 ```
 *Catatan: Properti `category` bernilai antara `"akademik"` atau `"praktikum"`. Properti `staff_responsible` dan `additional_info` bersifat opsional.*
@@ -80,7 +113,13 @@ Silakan salin-tempel (copy-paste) format di bawah ini ke dalam array JSON yang s
 ```json
 {
     "id": 11,
-    "question": "Pertanyaan yang sering diajukan?",
+    "question": {
-    "answer": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>."
+        "id": "Pertanyaan yang sering diajukan?",
+        "en": "Frequently asked question?"
+    },
+    "answer": {
+        "id": "Jawaban dari pertanyaan tersebut. Boleh menggunakan tag HTML seperti <strong>tebal</strong>.",
+        "en": "Answer to the question. HTML tags like <strong>bold</strong> can be used."
+    }
 }
 ```

groups/C4A/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 
 <head>
@@ -1150,8 +1150,7 @@
                 <span
                     class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas
                     Halaman Statis</span>
-                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Staf Pendukung dan Standar Operasional
+                <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 04</h1>
-                    Prosedur (SOP)</h1>
                 <p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026
                 </p>
             </div>
@@ -1160,13 +1159,13 @@
                 <!-- HERO SECTION -->
                 <section class="c4a-hero reveal">
                     <div class="c4a-hero-inner">
-                        <div class="c4a-hero-tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
+                        <div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
                         </div>
-                        <h1 class="c4a-hero-title">
+                        <h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
-                            Staf Pendukung &amp; <br />
+                            Staf Pendukung &amp; <br/>
                             <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
                         </h1>
-                        <p class="c4a-hero-desc">Halaman ini menampilkan informasi petugas
+                        <p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
                             layanan akademik serta
                             prosedur administrasi
                             mahasiswa
@@ -1174,12 +1173,12 @@
                         <div class="hero-stats">
                             <div class="stat-item">
                                 <div class="stat-number" id="stat-staf">0</div>
-                                <div class="stat-label">Staf Aktif</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_staf">Staf Aktif</div>
                             </div>
                             <div class="stat-divider"></div>
                             <div class="stat-item">
                                 <div class="stat-number" id="stat-sop">0</div>
-                                <div class="stat-label">Jenis SOP</div>
+                                <div class="stat-label" data-i18n="grp_c4a_stat_sop">Jenis SOP</div>
                             </div>
                         </div>
                     </div>
@@ -1188,10 +1187,10 @@
                 <!-- STAFF SECTION -->
                 <section class="content-section">
                     <div class="section-header">
-                        <div class="section-tag"><span class="dot"></span> <span>Tim
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_staff_tag">Tim
                                 Kami</span></div>
-                        <h2 class="section-title">Staf Pendukung</h2>
+                        <h2 class="section-title" data-i18n="grp_c4a_staff_title">Staf Pendukung</h2>
-                        <p class="section-subtitle">Staf yang siap melayani kebutuhan
+                        <p class="section-subtitle" data-i18n="grp_c4a_staff_subtitle">Staf yang siap melayani kebutuhan
                             akademik dan operasional
                             laboratorium di Prodi Informatika UNTAN.</p>
                     </div>
@@ -1203,10 +1202,10 @@
                 <!-- SOP SECTION -->
                 <section class="sop-section">
                     <div class="section-header">
-                        <div class="section-tag"><span class="dot"></span> <span>Prosedur
+                        <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_sop_tag">Prosedur
                                 Resmi</span></div>
-                        <h2 class="section-title">Standar Operasional Prosedur (SOP)</h2>
+                        <h2 class="section-title" data-i18n="grp_c4a_sop_title">Standar Operasional Prosedur (SOP)</h2>
-                        <p class="section-subtitle">Standar Operasional Prosedur untuk
+                        <p class="section-subtitle" data-i18n="grp_c4a_sop_subtitle">Standar Operasional Prosedur untuk
                             berbagai kebutuhan administrasi
                             akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.
                         </p>
@@ -1217,6 +1216,7 @@
                         <div class="sop-search-wrap">
                             <i class="fas fa-search sop-search-icon"></i>
                             <input type="search" id="sop-search-input" class="sop-search-input"
+                                data-i18n-placeholder="grp_c4a_sop_search_placeholder"
                                 placeholder="Cari SOP berdasarkan judul..." autocomplete="off" aria-label="Cari SOP" />
                             <button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian"
                                 style="display:none;">
@@ -1225,12 +1225,12 @@
                         </div>
                         <div class="sop-filter-chips" id="sop-filter-chips" role="group"
                             aria-label="Filter kategori SOP">
-                            <button class="sop-chip active" data-filter="semua" id="chip-semua">Semua</button>
+                            <button class="sop-chip active" data-filter="semua" id="chip-semua" data-i18n="grp_c4a_sop_chip_semua">Semua</button>
                             <button class="sop-chip" data-filter="akademik" id="chip-akademik">
-                                <i class="fas fa-graduation-cap"></i> <span>Akademik</span>
+                                <i class="fas fa-graduation-cap"></i> <span data-i18n="grp_c4a_sop_chip_akademik">Akademik</span>
                             </button>
                             <button class="sop-chip" data-filter="praktikum" id="chip-praktikum">
-                                <i class="fas fa-flask"></i> <span>Praktikum</span>
+                                <i class="fas fa-flask"></i> <span data-i18n="grp_c4a_sop_chip_praktikum">Praktikum</span>
                             </button>
                         </div>
                     </div>
@@ -1244,8 +1244,8 @@
                     <!-- EMPTY STATE -->
                     <div class="sop-empty-state" id="sop-empty-state" style="display:none;">
                         <i class="fas fa-search-minus sop-empty-icon"></i>
-                        <p class="sop-empty-title">SOP tidak ditemukan</p>
+                        <p class="sop-empty-title" data-i18n="grp_c4a_sop_empty_title">SOP tidak ditemukan</p>
-                        <p class="sop-empty-desc">Coba kata kunci lain atau reset
+                        <p class="sop-empty-desc" data-i18n="grp_c4a_sop_empty_desc">Coba kata kunci lain atau reset
                             filter pencarian.</p>
                         <button class="sop-empty-reset" id="sop-empty-reset">
                             <i class="fas fa-undo"></i> <span data-i18n="grp_c4a_sop_reset_btn">Reset Pencarian</span>
@@ -1268,12 +1268,13 @@
                 <section class="faq-section-wrap">
                     <div class="faq-section-inner">
                         <div class="faq-header reveal">
-                            <div class="section-tag"><span class="dot"></span> <span>Pertanyaan Umum</span></div>
+                            <div class="section-tag"><span class="dot"></span> <span data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div>
-                            <h2>Pertanyaan yang Sering Diajukan</h2>
+                            <h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2>
-                            <p>Temukan jawaban cepat atas pertanyaan umum mahasiswa
+                            <p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa
                                 seputar layanan akademik prodi.</p>
                         </div>
 
+
                         <div class="faq-wrap" id="faq-container">
                             <!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json -->
                         </div>

groups/C4A/js/main.js

@@ -48,7 +48,7 @@ async function initApp() {
             initAnimations();
         }, 100);
     } catch (error) {
-        console.error('Terjadi kesalahan saat menginisialisasi halaman:', error);
+        console.error('Terjadi kesalahan saat menginisialisasi aplikasi C4A:', error);
     }
 }
 

groups/C4A/js/ui.js

@@ -100,8 +100,8 @@ export function renderStaffCards(staffs) {
 
         const scheduleHTML = schedule.map(sched =>
             `<div class="schedule-item">` +
-            `<span class="s-day">${sched.day}</span>` +
+                `<span class="s-day">${sched.day}</span>` +
-            `<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
+                `<span class="s-time">${sched.time} <span class="s-break">| ${sched.break}</span></span>` +
             `</div>`
         ).join('');