12 Commits

4 changed files with 672 additions and 159 deletions
File diff suppressed because it is too large Load Diff
+23 -24
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
@@ -1150,7 +1150,8 @@
<span <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 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> Halaman Statis</span>
<h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Judul Halaman Group 04</h1> <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Staf Pendukung dan Standar Operasional
Prosedur (SOP)</h1>
<p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026 <p class="text-slate-500 text-sm">Kelompok 04 &mdash; C4A &nbsp;&middot;&nbsp; Informatika UNTAN 2026
</p> </p>
</div> </div>
@@ -1159,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" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN <div class="c4a-hero-tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
</div> </div>
<h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title"> <h1 class="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" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas <p class="c4a-hero-desc">Halaman ini menampilkan informasi petugas
layanan akademik serta layanan akademik serta
prosedur administrasi prosedur administrasi
mahasiswa mahasiswa
@@ -1173,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" data-i18n="grp_c4a_stat_staf">Staf Aktif</div> <div class="stat-label">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" data-i18n="grp_c4a_stat_sop">Jenis SOP</div> <div class="stat-label">Jenis SOP</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1187,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 data-i18n="grp_c4a_staff_tag">Tim <div class="section-tag"><span class="dot"></span> <span>Tim
Kami</span></div> Kami</span></div>
<h2 class="section-title" data-i18n="grp_c4a_staff_title">Staf Pendukung</h2> <h2 class="section-title">Staf Pendukung</h2>
<p class="section-subtitle" data-i18n="grp_c4a_staff_subtitle">Staf yang siap melayani kebutuhan <p class="section-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>
@@ -1202,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 data-i18n="grp_c4a_sop_tag">Prosedur <div class="section-tag"><span class="dot"></span> <span>Prosedur
Resmi</span></div> Resmi</span></div>
<h2 class="section-title" data-i18n="grp_c4a_sop_title">Standar Operasional Prosedur (SOP)</h2> <h2 class="section-title">Standar Operasional Prosedur (SOP)</h2>
<p class="section-subtitle" data-i18n="grp_c4a_sop_subtitle">Standar Operasional Prosedur untuk <p class="section-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>
@@ -1216,7 +1217,6 @@
<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 +1225,12 @@
</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" data-i18n="grp_c4a_sop_chip_semua">Semua</button> <button class="sop-chip active" data-filter="semua" id="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 data-i18n="grp_c4a_sop_chip_akademik">Akademik</span> <i class="fas fa-graduation-cap"></i> <span>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 data-i18n="grp_c4a_sop_chip_praktikum">Praktikum</span> <i class="fas fa-flask"></i> <span>Praktikum</span>
</button> </button>
</div> </div>
</div> </div>
@@ -1244,8 +1244,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" data-i18n="grp_c4a_sop_empty_title">SOP tidak ditemukan</p> <p class="sop-empty-title">SOP tidak ditemukan</p>
<p class="sop-empty-desc" data-i18n="grp_c4a_sop_empty_desc">Coba kata kunci lain atau reset <p class="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,13 +1268,12 @@
<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 data-i18n="grp_c4a_faq_tag">Pertanyaan Umum</span></div> <div class="section-tag"><span class="dot"></span> <span>Pertanyaan Umum</span></div>
<h2 data-i18n="grp_c4a_faq_title">Pertanyaan yang Sering Diajukan</h2> <h2>Pertanyaan yang Sering Diajukan</h2>
<p data-i18n="grp_c4a_faq_subtitle">Temukan jawaban cepat atas pertanyaan umum mahasiswa <p>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>
+1 -1
View File
@@ -48,7 +48,7 @@ async function initApp() {
initAnimations(); initAnimations();
}, 100); }, 100);
} catch (error) { } catch (error) {
console.error('Terjadi kesalahan saat menginisialisasi aplikasi C4A:', error); console.error('Terjadi kesalahan saat menginisialisasi halaman:', error);
} }
} }