Merge pull request 'feat(C4A): implement bilingual support with i18n localization' (#7) from feature/bilingual-support into main

Reviewed-on: AnderiSaputra/student-web-if-development-kit#7
This commit is contained in:
2026-06-05 05:25:59 +00:00
+25 -19
View File
@@ -1160,13 +1160,13 @@
<!-- HERO SECTION --> <!-- HERO SECTION -->
<section class="c4a-hero reveal"> <section class="c4a-hero reveal">
<div class="c4a-hero-inner"> <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> </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> <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
</h1> </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 layanan akademik serta
prosedur administrasi prosedur administrasi
mahasiswa mahasiswa
@@ -1174,12 +1174,12 @@
<div class="hero-stats"> <div class="hero-stats">
<div class="stat-item"> <div class="stat-item">
<div class="stat-number" id="stat-staf">0</div> <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>
<div class="stat-divider"></div> <div class="stat-divider"></div>
<div class="stat-item"> <div class="stat-item">
<div class="stat-number" id="stat-sop">0</div> <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> </div>
</div> </div>
@@ -1188,10 +1188,10 @@
<!-- STAFF SECTION --> <!-- STAFF SECTION -->
<section class="content-section"> <section class="content-section">
<div class="section-header"> <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> 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 akademik dan operasional
laboratorium di Prodi Informatika UNTAN.</p> laboratorium di Prodi Informatika UNTAN.</p>
</div> </div>
@@ -1203,10 +1203,10 @@
<!-- SOP SECTION --> <!-- SOP SECTION -->
<section class="sop-section"> <section class="sop-section">
<div class="section-header"> <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> 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 berbagai kebutuhan administrasi
akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan. akademik mahasiswa. Gunakan pencarian atau filter untuk menemukan SOP yang Anda butuhkan.
</p> </p>
@@ -1217,6 +1217,7 @@
<div class="sop-search-wrap"> <div class="sop-search-wrap">
<i class="fas fa-search sop-search-icon"></i> <i class="fas fa-search sop-search-icon"></i>
<input type="search" id="sop-search-input" class="sop-search-input" <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" /> placeholder="Cari SOP berdasarkan judul..." autocomplete="off" aria-label="Cari SOP" />
<button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian" <button class="sop-search-clear" id="sop-search-clear" aria-label="Hapus pencarian"
style="display:none;"> style="display:none;">
@@ -1225,12 +1226,15 @@
</div> </div>
<div class="sop-filter-chips" id="sop-filter-chips" role="group" <div class="sop-filter-chips" id="sop-filter-chips" role="group"
aria-label="Filter kategori SOP"> 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"> <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>
<button class="sop-chip" data-filter="praktikum" id="chip-praktikum"> <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> </button>
</div> </div>
</div> </div>
@@ -1244,8 +1248,8 @@
<!-- EMPTY STATE --> <!-- EMPTY STATE -->
<div class="sop-empty-state" id="sop-empty-state" style="display:none;"> <div class="sop-empty-state" id="sop-empty-state" style="display:none;">
<i class="fas fa-search-minus sop-empty-icon"></i> <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> filter pencarian.</p>
<button class="sop-empty-reset" id="sop-empty-reset"> <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> <i class="fas fa-undo"></i> <span data-i18n="grp_c4a_sop_reset_btn">Reset Pencarian</span>
@@ -1268,12 +1272,14 @@
<section class="faq-section-wrap"> <section class="faq-section-wrap">
<div class="faq-section-inner"> <div class="faq-section-inner">
<div class="faq-header reveal"> <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
<h2>Pertanyaan yang Sering Diajukan</h2> data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div>
<p>Temukan jawaban cepat atas pertanyaan umum mahasiswa <h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2>
<p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa
seputar layanan akademik prodi.</p> seputar layanan akademik prodi.</p>
</div> </div>
<div class="faq-wrap" id="faq-container"> <div class="faq-wrap" id="faq-container">
<!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json --> <!-- Item FAQ diisi secara dinamis melalui main.js berdasarkan data-faq.json -->
</div> </div>